On Innovation

The future of news. Right now.

Moving away from Flash: A look at JavaScript drawing libraries

June 2, 2011

When Apple announced early last year that it would not support Flash on the iPhone and iPad, a passionate conversation erupted in the world of web development: Was Flash dead? If not, how would it survive? When should it be used? News developers asked these questions as well, and, at least in our newsroom, the conversation inspired some thinking about how to approach interactive development. Over the past year and a half, there has been steady movement toward more interactivity based on JavaScript and fewer Flash-only experiences.

Last week we published a graphic that compared four federal budget proposals through a series of charts. We used the jQuery library Flot to draw simple, interactive line charts that showed how the debt and deficit would change under the different plans. Flot is very easy to use, flexible and customizable, and is one of many free-to-use JavaScript graphing libraries out there (Dracula, Highcharts and RGraph are a few others). We also built a customized chart with CSS and JavaScript at the bottom of the page to show how different categories of spending would be affected.

A year ago, I’m pretty sure most of that would have been accomplished using Flash. Not that the tools weren’t available to do it differently, but we hadn’t really thought through our technical approach to graphics development, and much of our expertise was in Flash. In the last year we’ve spent a lot of time developing skills to help us to break out of that old comfort zone. Specifically, we’ve experimented with how JavaScript (especially the jQuery library) and CSS can replace much of the interactive functionality we loved in Flash. We have used jQuery to power interactivity in our NCAA tournament bracket, Royal Wedding quizzes, and virtual tour of the newly renovated Arena Stage.

There are several JavaScript drawing libraries out there, like Raphaël and Protoviz, that make it relatively easy to create graphics with some level of customization and interactivity without using Flash. Some, including Raphaël and Flot, offer support for all browsers, even those that don’t natively support scalable vector graphics (SVG) or canvas (the two options for drawing complex shapes in modern browsers).

We’re seeing more news organizations use these libraries to create interactivity with graphics. For example, Jeff Larson of ProPublica used Raphaël to draw a connections map in one of the interactive segments of “The Wall Street Money Machine.” He documents the development process for that piece in a post on their Nerd Blog.

USA Today’s graphic exploring government debt and the Wall Street Journal’s map and timeline of the Middle East protests both used Raphaël for drawing. The New York Times used JavaScript to create a 2012 budget tree map – very similar to the graphic they did for the 2011 budget, but this time minus Flash.

I’m excited to see how designers and developers rethink their traditional approach to interactive graphics as the tools with JavaScript get better. Even data-rich experiences that have traditionally relied on Flash for smooth user experiences are being redesigned so they will work on devices that don’t support the Flash player – consider our Census 2010 Explorer and Talking Points Memo’s Flash-free election map.

If you’re using any of these libraries or have thoughts on how they’re being used, share your ideas with us in the comments.

- Kat Downs, Innovations Editor for Graphics