Thanland

Wait, so the Easter Island heads have bodies?

A Quick Infographic with HTML, CSS and jQuery

A week ago, the Morning Edition crew at MPR went to Washington, D.C. to examine Minnesota’s influence on the federal government.

Seniority graphic of all 535 members of Congress

I was asked to build out the web presence for the project, which included a couple of requests for infographics. One presented a couple of challenges I was able to solve in an interesting way, I think. Using only HTML, CSS and jQuery, I put together this interactive infographic that charts the seniority of all 535 members of Congress.

The first problem, naturally, was that the turn around time would have to be pretty quick.1 I was handed an Excel spreadsheet with the names of all 535 members, their party affiliation, home state, and a calculation of their years of service. 2

Given my aversion to Flash and limited ActionScript experience, I knew this would have to be something else. A spark! It seemed it might be possible to do this all (quickly) with HTML, CSS and jQuery.3 I set up an additional field in the spreadsheet that spit out each member’s information, wrapped in a div with a number of classes based on that information as well.

With a few lines of jQuery to group together the members based on their years of service4 and a few more lines of CSS, I had all 535 members laid out in a workable chart in about a 30 minutes, including little tweaks to the spreadsheet’s HTML output, the occasional newsroom interruption, and a few trips to [jquery.com](http://jquery.com). After a few more hours wrestling with jQuery, I had built the graphic you see today. Users can toggle the three party affiliations off and on. You can also toggle each state’s delegation to visualize where in the seniority continuum they sit. Moving your mouse pointer over each member block pops up that member’s basic information and their years of service.

By no means is my final code very efficient or glamorous5 , but it gets the job done. The resulting graphic is an interesting display of a decently large set of data. Best of all, it works great on your iPhone, iPad, or any other mobile device with a WebKit-enabled browser. The only difference, is that you have to touch each member to see the info as there isn’t a hover gesture (yet) for touchscreen devices.

What’s the takeaway? This project has opened my eyes to the power of using HTML5, CSS3 and JavaScript tools to quickly build custom interactive graphics. With the plethora of JavaScript visualization libraries in existence, it’s not hard to imagine a Flash-less future for most, if not all, of the projects I might be asked to handle in my current capacity.