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.
Further Reading on SmashingMag: Link
- The Do’s And Don’ts Of Infographic Design1
- Data Visualizations and Infographics2
- Data Visualization: Modern Approaches3
- Designing Flexible, Maintainable Pie Charts With CSS And SVG4
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:
Or take the “Map of the Oil World8” done by New York Times (which, by the way, does a lot of nice data visualizations9). 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:
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 amCharts13 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 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.
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:
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:
We need a more complex solution. After some experimenting, I came to this:
- Create a static object in the middle of each country that always stay in position.
- Make this object a “sensor,” so that other objects don’t collide into it.
- 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:
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.
Awesome, isn’t it? And it’s only about 500 lines of code (not counting the data).
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.
(rb, il, al)
- 1 https://www.smashingmagazine.com/2011/10/the-dos-and-donts-of-infographic-design/
- 2 https://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-and-infographics/
- 3 https://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/
- 4 https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
- 5 https://www.smashingmagazine.com/wp-content/uploads/2015/03/Google-analytics-large-preview-opt.jpg
- 6 http://www.google.com/analytics/
- 7 https://www.smashingmagazine.com/wp-content/uploads/2015/03/Google-analytics-large-preview-opt.jpg
- 8 http://www.nytimes.com/interactive/2007/11/06/business/20071107_WINNERSLOSERS_GRAPHIC.html
- 9 http://www.nytimes.com/newsgraphics/2013/12/30/year-in-interactive-storytelling/
- 10 https://www.smashingmagazine.com/wp-content/uploads/2015/03/london-olympics-large-preview-opt.png
- 11 http://london2012.nytimes.com/results
- 12 https://www.smashingmagazine.com/wp-content/uploads/2015/03/london-olympics-large-preview-opt.png
- 13 http://www.amcharts.com/
- 14 'http://codepen.io/amcharts/pen/XJjGRM/'
- 15 'http://codepen.io/amcharts'
- 16 'http://codepen.io'
- 17 https://code.google.com/p/box2dweb/
- 18 'http://codepen.io/amcharts/pen/MYOWGr/'
- 19 'http://codepen.io/amcharts'
- 20 'http://codepen.io'
- 21 'http://codepen.io/amcharts/pen/RNjweN/'
- 22 'http://codepen.io/amcharts'
- 23 'http://codepen.io'
- 24 'http://codepen.io/amcharts/pen/yyPyQw/'
- 25 'http://codepen.io/amcharts'
- 26 'http://codepen.io'
- 27 https://www.smashingmagazine.com/wp-content/uploads/2015/03/box2d-large-preview-opt.png
- 28 https://www.smashingmagazine.com/wp-content/uploads/2015/03/box2d-large-preview-opt.png
- 29 'http://codepen.io/amcharts/pen/RNxrqo/'
- 30 'http://codepen.io/amcharts'
- 31 'http://codepen.io'
- 32 http://www.amcharts.com