Data visualization and storytelling on the web

How do you visualize data? From traffic maps to weather forecasts, most of the data visualizations we encounter on a day-to-day basis inform us without requiring much thought.

Take for example your car’s speedometer, which depicts your current driving speed on a circular gauge behind your steering wheel. This design, as pointed out by Paul Van Slembrouck on the blog, is as intentional as it is invisible:

“The movement of the needle around the gauge delivers a lot more information than first meets the eye. The speed of the needle indicates how rapidly the car is accelerating or decelerating. Imagine merging onto a highway. On the entrance ramp, you glance down and mentally note the movement of the needle as you begin accelerating. You return your eyes and lift off the gas when you think you’ve roughly reached the appropriate speed. Your intuitive sense of that target speed was informed by the prior glance at the movement of the speedo.”

For most of us, visualizations like the speedo help us make sense of the outside world, but for designers like Giorgia Lupi and Stefanie Posavec, data visualization can offer insight into our inner worlds as well.

The two met at a conference and discovered that they shared a lot in common – specifically that they both love data and drawing. They decided to get to know each other better by visualizing data collected from their day-to-day lives.


“Week 30: My time alone” visualization by Georgia Lupi from

Over the span of a year, the pair would define a weekly topic (time spent alone, for instance), collect their data, and map out their findings on a post card.

Their project, dear data, draws out the intricacies of friendship and relating. By defining their own parameters for each data set, the designers literally sketch their own unique perspectives.

Storytelling with data

Lupi and Posavec’s data project provides interesting commentary on one of the internet’s biggest trends. The increasing availability of raw, digitized data sets has put infographics and interactive content front and center in the stories told online.

This trend is most evident in the field of journalism, where visualizations of large data sets have, in some instances, replaced textual reporting.

Screen Shot 2015-10-22 at 8.43.04 AM

Election map by By Amanda Cox, Mike Bostock, Derek Watkins, and Shan Carter

Take for example The Upshot’s detailed mid-term election maps, which chart return data, district-by-district, from the 2014 midterm election. These highly detailed maps illustrate the so-called “Red Wave,” where Republicans swept almost every contested race to take Senate majority lead and add to their lead in the House of Representatives.

Visualizations like this are good examples of “reader-driven” stories, which allow readers to interact with and explore large data sets, leaving them free to find meaning and draw their own conclusions. (Seigel & Heer, 2010)

Screen Shot 2015-10-22 at 8.46.33 AM

Unemployment visualization by By Andrew Van Dam and Renee Lightner

This job market visualization on the Wall Street Journal’s website, for instance, shows general trends in unemployment over the last several years, but the data can be filtered by demographic, revealing differences in how the recession affected Americans by age, race, gender, level of education.

Criticisms and mishaps

Using data to tell stories may be popular, but there are some criticisms to be aware of too.

First of all, big data can be rife with inherent bias.  As Katie Crawford points out in the Harvard Business Review, data can be specific to certain populations to the exclusion of others, like when the city of Boston used a smartphone app to detect potholes but potentially missed data from citizens who can’t afford such technology.

Big data sets are also prone to spurious correlations and visualizations lend themselves easily to abuse.  A notable example of this is the chart from the Congressional hearings on Planned Parenthood, pictured below:


The chart is misleading for several reasons: the directional lines are shown to overlap even though the values they represent don’t, and the rate of change for both are skewed to a similar degree. This deception is an intentional function of the missing y-axis, which would show the relatively steady rate of abortion spending far beneath a large decrease in spending for cancer screening and prevention services.

Screen Shot 2015-10-22 at 5.12.43 PM

Corrected chart by Javier Zarracina for

Of course, visualizations are only as good as the data behind them, and data itself is not always reliable. Consider Matt LaCouer, whose data made waves after being published in Science magazine. But not for the reasons you’d suspect.

LaCour’s study contradicted years of research on the effect that door-to-door canvassing has on people’s deeply held beliefs. Conventional wisdom shows that people are not easily swayed, but LaCour’s data, which measured voter opinions on same-sex marriage before and after hearing in-person LGBT testimonials, shocked the scientific community  — until a skeptical undergrad accused LaCour of faking the whole thing.

DIY Data

Michael LaCour’s take on do-it-yourself data may have been the wrong approach, but it highlights the weight that data can add to the stories we tell.

And though we must all be careful to avoid the pitfalls of using data to tell stories, we should not be discouraged by them. In fact, it’s easier than ever to produce dynamic data visualizations that you can add to your web projects.

If you’re interested in generating data visualizations for your own web projects, there are many options to explore. Free resources, like Google Charts or Chart.js, can easily make your data projects interactive and responsive.

Works Cited

Segel, E., & Heer, J. (2010). Narrative Visualization: Telling Stories with Data. IEEE Trans. Visual. Comput. Graphics IEEE Transactions on Visualization and Computer Graphics, 1139-1148.