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.


9 thoughts on “Data visualization and storytelling on the web

  1. I appreciate the clarity of your writing on such a potentially dense topic. You make data understandable, and isn’t that that the goal? I encourage the rest of the class to check out the resources Geoff shares at the end of the article. How might you incorporate data visualization in your “writing on the web” projects?

    Liked by 1 person

  2. I’m happy to see the finalized version of your article, and to see the amount of work and detail it demonstrates in your writing; likewise, I appreciate that you brought up issues involving visual representation in graphics that we discussed as a class. In particular, I liked what you illustrated with the Planned Parenthood graphs, with the missing y-axis in the first one making the data showing abortion rates be falsely related to the data showing cancer screening and prevention service rates.

    Again, data manipulation is so commonplace because it’s fairly easy to do with the “right” exclusions and/or misrepresentations, as well as the sad (but frequently true) fact that it’s often easier to accept information “as is” than challenge it (which, to be fair, we’re all guilty of on some level). It’s also arguable that certain abuses of data like you’ve described above are based on assumptions that most audiences can’t handle straightforward information (it’s somewhat valid, but still manipulative).

    Liked by 1 person

  3. Wow this was very well organized. I was originally afraid to read your article because the title seemed too much of an intimidating concept to understand. However your piece was very concise and we’ll ordered. I learned quite a bit of the significance of data visualization. Great work

    Liked by 1 person

  4. I love charts and data but I think the way it is presented is very important. Some people may only skim over an article and just look at the data and get a totally different picture than is actually being presented. I think presentation is key.

    Liked by 1 person

  5. It seems that data visualizations are everywhere we look in our day to day lives, from the speedometer in our cars to the traffic signs on any streets. There is also a difference between the ethics in traffic signs to internet memes that hold more criticism and mishaps.
    In research it is also important that data not be manipulated and is reliable. However, the thought of seeing how much of that manipulation is in social media is kind of scary.

    Liked by 1 person

  6. Until recently, SEO was a term I had heard before, but I never explored it too deeply and found it confusing. The more I learn in the rhetoric and writing department I realize how important it is.
    Personally, I use Google Chrome and prefer it over other search engines because it is simple.

    Regarding Bing, if a search engine feels the need to flash gimmicks across their home page, what is being said about the quality of the actual search engine? Then again, I tend to be a hard-core skeptic to begin with. The more bells and whistles attached to something, the more skeptical I become until I can further look into it. As far as usability goes, Bing drives me nuts; the site tends to be too busy and distracting for my taste and makes using it more complicated than necessary. After all, I am looking to find information on a subject, not necessarily to be entertained.


    1. Oooppps! Sorry, I got in too big a hurry to post, apparently, and replied to the wrong article here. I have been trying to read everyone’s articles as they were posted so I could keep up, but in replying, I almost got behind, so I was feverishly trying to make the deadline and had not had time to read everyone’s wonderful comments, so I came back today to thoroughly enjoy our work. Then, YAY! . . .me . . .being a derp! Lol!

      But, since I am already here . . . I had casually perused information about data representation, but my first in-depth study of it was in some Geology classes and then in Intro to Stats here at UALR. Before I really thought about/knew how prevalent data skewing was/is, I didn’t used to think much about how an author would use unethical means to misrepresent information or create bias.

      When I first heard about this practice as a real “thing,” it cleared up a lot of confusion I had with some graphs and such. I would look at it and think, “Hmmm . . . what this graph is representing is not what I know about this subject,” or some similar thought, but I assumed it was me, the user, that wasn’t reading it right.

      My thought was that these authors were experts and I was not, so they must have known how to make an accurate graph. However, by the time I had formal training in data presentation, I was jaded enough that the lessons only really confirmed what I had already learned through experience: some data is not represented accurately or fairly, and sometimes that is on purpose.

      Formal study of the subject tremendously added to the lens with which I could evaluate a source. I learned how to better understand the motivations of the author and how to interpret a visual. This skill has really added to my confidence when researching reliable sources. I use a combination of learning styles, but I am predominantly a visual learner, so there is also an added layer of appreciation for information presented in a visually creative (and accurate!) way.


  7. Wow, Geoff. I’m not a charts and graphs person, but this article really helps my understanding about such a difficult subject. Thanks for that!

    Have you seen Rachel Maddow’s bikini graph? If I’m not mistaken, and it’s been years since I’ve looked at it, but it showed job loss and growth between G. W. Bush’s administration and President Obama’s administration. It’s hilarious.

    I’m so glad you showed the Planned Parenthood charts. I’ve read quite a bit about that recently, and it’s amazing how some folks try to skew information visually. I’ve seen it happen in board meetings, and it’s disheartening to say the least.

    Thanks for such a thoughtful piece!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s