Animated infographics with HTML, CSS & jQuery
Web infographics are beautiful but typically static. Find out how to add a touch of interactivity.
Infographics are a great way of presenting data in an easy-to-understand, digestible form that can highlight the key learning points without the need to get down and dirty with numbers. Because of their ability to convey a message with high impact, they’ve become hugely popular on the web over the past few years. But the vast majority of them suffer from being static, un-interactive and formulaic. As a result, day by day they are losing their original impact as viewers tire of seeing the same visual approach – think of it like eating the same meal over and over.
At the heart of the infographic is the idea that data is being shared, so why not use that to build an interactive, animated design that retains the core link to a data source, and looks great at the same time? In this tutorial we’re using HTML, CSS and jQuery to do just that…
tools | tech | trends: Adobe Illustrator, HTML editor of choice, jQuery
expert: Sam Hampton-Smith
tutorial files: download
01. Choose a data source
The first thing we need to do is to decide on a data source we’ll use to create our infographic. There are numerous sources of interesting data across the web, including data.gov.uk, data.un.org and www.imf.org/external/data.htm, or take a look at gapminder.org to get some inspiration. We’ve cheated and made up some dummy data for our graphic.
02. Mockup design
As it’s an infographic, we really want to mock it up in some graphics software first, so we have a good idea of what our final output will look like. We can also use the mockup to output any graphics we need to render. Illustrator is perfect for this, but you can use whatever software you have installed to the same effect.
03. Create core HTML
We’re going to create our interactive infographic using an HTML table as the data source. This has the benefit of making the data accessible – if for some reason the user doesn’t want to, or can’t render the graphical version, the data will still be visible. Start off by creating a basic HTML page.
04. Data goes in tables
Convert and format your data source into an HTML table. Try to keep it easy to navigate and sparse, though – remember that we’ll be using code to get access to the values within the table, so it needs to be simple. Don’t nest your data many tables deep!
05. Static HTML for design
Separately from the table, we’re going to create the necessary HTML to display our full infographic, and then we’ll use jQuery to show and animate this. Start off by creating the core <div>s for the infographic area, the two bar charts and the area chart. Don’t put the real data in these, just make sure you give each a hook for jQuery by using a unique class or ID.
06. Add placeholder structure
We need to create the placeholder content and structure for the rest of the infographic. Again, don’t worry about putting in the final data, but do make sure you separate the label and values within your markup, and add appropriate hooks for your script to grab onto.
07. Build your CSS
Having created the markup, it’s time to style it to look vaguely like our mockup, so add the necessary CSS rules to create the look in the browser. Position the bar charts absolutely, from the bottom of their parent <div>s to get good alignment. Do the same for the area chart at the bottom of the page.
08. Test your layout
Before you proceed any further, you should test your layout in all the browsers that matter to you – it
will become much more difficult to bug check once you’ve got your jQuery code in place, so spend the time now to make sure everything renders as planned across all desired browsers.
09. Bring on the script!
We’re going to use jQuery to grab the data from the table and populate all the placeholder content in our infographic. Start off by grabbing the latest build from jquery.com, and add a new script to your page to hold your own jQuery code. Finally, add a $(document).ready() function.
10. Pull out the data
As we’re using a table on the same HTML page as our data source, we don’t need to worry about being too careful with unexpected data in our code. You can either take a manual approach to extracting a piece of data, or try to do it programmatically. The latter would be preferable if you wanted to allow for 2011 data at a later stage, but here we’ll go for the easiest route.
11. Place the data
All the hooks you created earlier are now useful as we copy and transplant the individual bits of data into their final positions. Now we can update our table, and the data values will automatically change in our infographic. The next thing we’ll need to do is to apply CSS relative to the data.
12. A little maths
This is where it can get a little messy, especially if you’re not keen on maths, but stay with us – it’s quite straightforward. We need to work out how big each bar in the chart should be, relative to each other. We’ve got four bars overall, and they all relate to one another.
13. Work it out
To get the range, work out what the tallest you want a bar to be, and the shortest. The tallest will be mapped to the largest figure in our data, and the shortest to the lowest value. Now it’s simply a case of using an equation to get the height for the other two bars. Use jQuery to apply the CSS to the bars.
14. Repeat for the area chart
We need to repeat the same steps for our area chart at the bottom of our graphic, but instead of just height, we’re also working out width, which makes it a little bit more complicated. A lot of infographics on the web cheat here and don’t use real area comparisons, so don’t worry too much about applying some artistic license along the way.
15. Calculate the change
Finally we need to calculate the change between the two years. To do this, we’ll add the female and male figures for each year and compare the two results by dividing the second by the first. The result shows the percentage of the original, and by subtracting from 100% we get the percentage change.
16. Making it animate
So far we’ve created a static infographic programmatically. As you change the data in the table, the charts update to the new values as appropriate. But we’re no better off than had we saved a graphic (other than making it simple to maintain). What we want is animation of our chart when the user loads the page. Change each of your jQuery CSS() calls to an animate() call.
17. Stagger it
We need to customise our animations to take a little longer, and also stagger them so that they don’t all animate into place at the same time. We can do this using the delay() method to offset the animation. You can also make the charts animate from zero rather than the original defaults we mocked up by adding a CSS() call before the delay() method.
18. Respond to the user
We want to respond to user interaction, so we’ll need to add some functions and additional animations. The easiest choice for interaction is mouseover(), as we won’t need to explain to the user what they need to do – as they move their mouse over the chart, it will change appearance accordingly.
19. Opacity is king
One way we can draw attention to the current data is to darken down the remainder of the infographic. Add an ‘opacity’ class to each top-level container and add a separate jQuery function for mouseover, setting all but the current container to animate opacity down to 0.7.
20. Hide the raw data
21. Test cross-browser
Congratulations – you’ve created an interactive infographic. All that remains is to test the cross-browser thoroughly to make sure everything works as expected. Some of the CSS effects might not work perfectly in every browser, but hopefully you picked this up in step 8. Now go forth and create some compelling content to replace all those static infographics!
LOVE INFOGRAPHICS – TRY THIS
Photoshop: Vector-style infographics
Learn how to design a simple infographic which combines a statistical message and the current trend for stylish vector graphics