Web infographics are beautiful but typically static. Find out how to add a touch of interactivity.
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.