Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Fun With Physics In Data Visualization

Data visualization is on the rise. Publishers around the world — individual bloggers and major online publications alike — are realizing that charts, maps and combinations of the two can convey a message far more effectively than plain numbers can. From simple charts to fancy infographics to complex timeline animations, data visualizations are popping up all over the Internet. However, as in any other area, once everyone gets on the train, distinguishing yourself from the pack becomes hard.

Read on to find out how a physics engine can really set your efforts apart.

You don’t need to look far for examples of data visualization. Take Google Analytics’ real-time view, which places bubbles of various sizes over top a map to illustrate quantitative information:

Sample bubble map.1

A sample bubble map (Image: Google Analytics2) (View large version3)

Or take the “Map of the Oil World4” done by New York Times (which, by the way, does a lot of nice data visualizations5). That map does the job, but I’ll bet most of you have come across fancier maps, ones in which the bubbles never overlap to form a distorted map and where the bigger bubbles nudge smaller ones out of place, as in the map below, also by the New York Times:

Sample bubble map.6

Another bubble map (Image: New York Times7) (View large version8)

Maps like this are especially good when relatively few countries have assigned values — not all countries win a medal in the Olympics, after all. If the bubbles were to be placed directly over their respective countries, they would overlap and the result would not be as visually pleasing.

Having worked on the data visualization library amCharts9 for years, I’m always looking out for ways to help users visualize data in ways that are creative and aesthetically pleasing and that effectively convey their message. Maps like the ones discussed in this article are surely good means of relaying quantitative geographical information. Read on to find out how to make this happen.

The default features of our mapping library — JavaScript Maps — enable you to generate a standard bubble map quite easily:

See the Pen Map with Bubbles10 by amCharts (@amcharts2621181511) on CodePen2722191612.

The map above already looks nice and implementing it is very easy, but overlapping is still an issue. Let’s solve that.

I could try to write my own script to detect and resolve collisions (not an easy task). From my own experience in game development, I know that all physics simulation libraries have collision detection built in. Let’s use one of those.

But why stop there? Because we’re tapping into the power of these libraries, we can use their other features, too. Let’s make our charts animate with lifelike motion for a truly impressive result that will undoubtedly capture the user’s attention.

A bunch of ready-made JavaScript physics libraries are available. I’ve chosen probably the most famous one — one of the JavaScript ports of Box2D, box2dweb13. The idea is simple. We have a map with bubbles, and we have a box2d world (made invisible to the user) of the same size with the same bubbles replicated in it.

We’ll use the (invisible) box2d world to simulate bubble movement and interaction (such as collision detection and other stuff), to monitor the bubbles’ positions and to dynamically modify those positions on the map. I won’t get into the technical details — you can view the source code if you want. To prevent the bubbles from falling, we simply set the gravity to 0. And here is result:

See the Pen Bubbles instead of countries + Gravity14 by amCharts (@amcharts2621181511) on CodePen2722191612.

Great, isn’t it? Now, I’m thinking to change the size of some bubbles at runtime and let the other bubbles move accordingly. To do that, we have to scale the box2d world’s bubble and the map bubble together and simply observe what happens. After some testing, I see that this might work by increasing the sizes of bubbles, but not by reducing them — bubbles that are displaced before other big bubbles are reduced in size do not return back:

See the Pen Bubbles instead of countries + change size17 by amCharts (@amcharts2621181511) on CodePen2722191612.

We need a more complex solution. After some experimenting, I came to this:

  1. Create a static object in the middle of each country that always stay in position.
  2. Make this object a “sensor,” so that other objects don’t collide into it.
  3. Create a joint between the fixed sensor and bubble, and adjust the properties of this joint to allow for some movement but while always being attracted to the position of the sensor.

That works nicely:

See the Pen Bubbles instead of countries + working resize20 by amCharts (@amcharts2621181511) on CodePen2722191612.

Just to show what can be done with a physics engine, below is another demo we made, a map of worldwide coffee consumption. Before you ask, we completely made up the data.

Our technical approach for this map is quite the same as the one for the last demo above. The only difference is that the bubbles initially are not joined to their destined locations, but rather are placed in the middle of the picture, just above the coffee pot. The coffee cup is made up of three rectangles in box2d. If you uncomment all of the lines about “debug draw” (two places in the JavaScript source and in the canvas element in HTML), you could get a box2d debug-draw view (very helpful when doing a job like this):

Debug wireframes for physics engine.23

A wireframe for debugging physics in our imaginary board (View large version24)

Awesome, isn’t it? And it’s only about 500 lines of code (not counting the data).

See the Pen Map+Physics+Coffee25 by amCharts (@amcharts2621181511) on CodePen2722191612.

Conclusion Link

Physics engines are not just for games and specialized simulations. They enable us to add stunning effects and, with just a few lines of code, to solve geometry problems that would otherwise have taken us weeks if not months to build on our own.

We’ve focused here on the box2d engine, which is robust and powerful, but it might get a bit slow on slower devices. Many engines are available. We encourage you to try some out to see which one clicks with you or is best suited to the task at hand. If you just need to solve a problem of overlapping, for example, then a lightweight option might do the trick just as well, and with a far smaller footprint and much lower processing overhead.

There is virtually no limit to what you can do with the physics of data visualizations. Create column charts and make them fall like dominos, or make pie charts roll, bounce and more. You can make objects in charts and maps roll, spin, bounce, change shape and morph in ways that will capture the viewer’s attention much more quickly than regular static or even interactive versions.

You will find more fancy examples and tools for data visualization on the amCharts28 website.

(rb, il, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2015/03/Google-analytics-large-preview-opt.jpg
  2. 2 http://www.google.com/analytics/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2015/03/Google-analytics-large-preview-opt.jpg
  4. 4 http://www.nytimes.com/interactive/2007/11/06/business/20071107_WINNERSLOSERS_GRAPHIC.html
  5. 5 http://www.nytimes.com/newsgraphics/2013/12/30/year-in-interactive-storytelling/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/03/london-olympics-large-preview-opt.png
  7. 7 http://london2012.nytimes.com/results
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/03/london-olympics-large-preview-opt.png
  9. 9 http://www.amcharts.com/
  10. 10 'http://codepen.io/amcharts/pen/XJjGRM/'
  11. 11 'http://codepen.io/amcharts'
  12. 12 'http://codepen.io'
  13. 13 https://code.google.com/p/box2dweb/
  14. 14 'http://codepen.io/amcharts/pen/MYOWGr/'
  15. 15 'http://codepen.io/amcharts'
  16. 16 'http://codepen.io'
  17. 17 'http://codepen.io/amcharts/pen/RNjweN/'
  18. 18 'http://codepen.io/amcharts'
  19. 19 'http://codepen.io'
  20. 20 'http://codepen.io/amcharts/pen/yyPyQw/'
  21. 21 'http://codepen.io/amcharts'
  22. 22 'http://codepen.io'
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/03/box2d-large-preview-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/03/box2d-large-preview-opt.png
  25. 25 'http://codepen.io/amcharts/pen/RNxrqo/'
  26. 26 'http://codepen.io/amcharts'
  27. 27 'http://codepen.io'
  28. 28 http://www.amcharts.com
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

I'm the founder and main product developer for amCharts — a company that develops JavaScript-based charting and mapping libraries. I also develop cross-platform games, such as the first original voice-activated game - The Howler.

  1. 1

    Awesome! That’s why I love front-end… There’s always fun and exciting things to do. Great job, I wish I could do that, too!

    7
  2. 2

    Very interesting and nice demo. Definitely need to look into this.

    2
  3. 3

    Jeff Jackson

    March 9, 2015 10:52 pm

    Great information. I have never thought about data visualization before.

    1
  4. 4

    Sorry about this, but the use of circles in data presentation is the worst you can do. It is hugely misrepresentative. Is one reading the diameter of the circle, or its *area’s* visual impact? Don’t ever use circles. Use bar graphs, use pies, but never circles.

    Tom

    -7
    • 5

      Doug McDonald

      March 11, 2015 6:36 pm

      The area of a circle would be directly proportionate to it’s diameter, so in terms of visual impact those are effectively the same thing are they not?

      In fact, if you think about it, a bar chart has a uniform and direct correlation between it’s areas’s visual impact and it’s height/value on an axis, so that is exactly the same in terms of visual weighting.

      1
      • 6

        Christopher Siegel

        March 12, 2015 6:37 pm

        tom is right here. Circles, Pies and Bubble Charts are the worst. Humans cannot relate areas. Therefore you might want to try using the radius or diameter to indicate size which will cause new Problems: When the diameter of the circle changes, the area changes even more quickly! Even if this happens proportionate, the human mind isn’t capable of comparing such data.

        The Perceptual Edge, a consulting firm for information design, puts it like this:
        “Visual perception in humans has not evolved to support the comparison of 2-D areas, except as rough approximations that are far from accurate.”

        If you read those and look at their examples, you’ll see:
        http://www.perceptualedge.com/example18.php
        http://www.perceptualedge.com/example5.php

        -2
        • 7

          Antanas Marcelionis

          March 13, 2015 12:16 pm

          Sometimes it’s not as important to show exact difference in numbers, approximate image is more than enough. Bubbles+Maps is a good combination I would say. Imagine 200 columns instead of a map with bubbles – would that be a lot better?

          3
      • 8

        Please learn the difference between ownership and pluralisation in the use of apostrophes; – your comment is almost unreadable!

        -7
      • 9

        Greetings,

        Area responds to the SQUARE of the radius (that is, the SQUARE of (diameter/2)). So area DOES NOT scale LINEARLY. Edward Tufte in his several books on graphical eloquence relates this and urges against using two dimensions (e.g., area) to represent change of a single dimension (e.g., population).

        Peace out and in.

        0
      • 10

        That’s not right though. Area is proportional to the square of the radius, so 2x the radius is 4x the area. So it can be unclear which quantity you meant. A bar graph has a fixed width (usually), so a bar graph with 2x the height is only 2x the area, and so only has exactly double the visual weight of the other. An analogy more in line with the circle would be a bar graph where the width and height both doubled at the same time.

        -1
  5. 11

    While I have to agree that circles in data representation are a bit confusing, it’s still a great demonstration of how data can be represented in a fun way.

    Great job.

    5
  6. 12

    Pretty. Not sure I would recommend if comprehending data is the goal.

    0
  7. 13

    Kristina Hughes

    March 10, 2015 1:54 pm

    Great informational resource! These kind of popups are using in maps to particularize the selected area..

    0
  8. 14

    Ahh, Argentina just got stuck in the coffee cup handle!

    Honestly, data visualisations with physics engines just look like great, thanks for the article.

    2
  9. 15

    NIce. How does it stand up on small screen devices? Does it work with fluid layouts?

    0
    • 16

      Antanas Marcelionis

      March 13, 2015 12:13 pm

      This particular demo is of a fixed width, but sure it is possible to make it responsive.

      0
  10. 17

    Bugreport: Disable the double click in the last codepen demo :)

    0
  11. 19

    Antanas Marcelionis

    March 13, 2015 9:41 am

    Another followup demo: http://codepen.io/amcharts/pen/EadOZR

    0
  12. 20

    Oh, in addition to my just posted comment, I add that it is easier for humans to perceive differences in length (one dimension), as of skinny bars on a bar chart, than to perceive differences in area (two dimensions). It gets even worse with volumes (three dimensions).

    0
  13. 21

    After reading your article, I have learned that data visualization is becoming popular all over the internet. From simple charts to fancy infographics to complex timeline animations, data visualizations are popping up all over the Internet. There is virtually no limit to what we can do with the physics of data visualizations. Create column charts and make them fall like dominos, or make pie charts roll, bounce and more. We also can make objects in charts and maps roll, spin, bounce, change shape and morph in ways that will capture the viewer’s attention much more quickly than regular static or even interactive versions. You are finding out for ways to help users visualize data in ways that are creative and aesthetically pleasing and that effectively convey their message. Maps like the ones discussed in this article are surely good means of relaying quantitative geographical information. Thank you for sharing your fancy ideas.

    -1
  14. 22

    Alexander Tazh

    April 21, 2015 11:39 pm

    amCharts seems like a nice tool!

    Voice-controlled game idea is amazing :D

    -1
  15. 23

    Excellent post! It is not easy to find new ideas and concepts for visualizations. This one opens up many possibilities.

    0

↑ Back to top