MozFest 2015: Why data visualization for mobile shouldn't hurt

As data journalists, we tend to focus on visualizing our numbers beautifully for desktops. We pour over D3.js line charts and spend hours getting the tooltips on our maps just right. And right before our deadlines, we’ll throw in some CSS media queries for mobile screens and call it a day. I know I’ve been a culprit more than once.

One of my favorite sessions was Aaron William’s MozFest session “Crafting new visualization techniques for mobile web” where he emphasized a mobile-first, desktop-second focus.

https://twitter.com/aboutaaron/status/663006106701180929

This seems like an obvious concept, especially in a time when desktops have shrunk to the size of your palm and phone screens have grown to the size of your face. But I realized that I always think of mobile design as an obstacle to what I’ve already created, even though many readers use mobile devices as their number one method of absorbing content.

So we started off the session by making a few short lists:

Some types of data visualizations:

  • Maps (cloropleth, heat)
  • Bar graphs
  • Timelines
  • Small multiples
  • Tables
  • Line charts


Advantages of mobile phone:

  • Multiple touch functionality + force touch with iPhone 6S
  • GPS system
  • Portability
  • Normal and front-facing cameras
  • Vibration
  • Screen rotation


Disadvantages of mobile phone:

  • Thumb size affecting touch
  • Small screen size
  • Battery life
  • Bandwidth and weak internet connections
  • No hover functionality
  • No mouse
  • Shorter time and attention span given from audience


The task was to solve a disadvantage or to play up an advantage of data viz on mobile web. My group chose the phone’s GPS system to work with a combination of maps and timelines. A few members of the group had been working on a project called Histropedia, a tool to help users understand the historical timeline about their current location. These are the sketches we came up with.

The results of our brainstorming sessions

A few other groups tackled timelines as well, presenting the option of showing the timeline as a whole but maybe in truncated sections, a vertical orientation or even a “snakes and ladders” curving situation. We stuck to displaying one timeline card at a time. Each card would theoretically be accompanied by a small line graph of the whole timeline to symbolize the differences in length of time between events or clusters of many events around a short period of time.

Aside from the fun paper phones and great brainstorming, the session helped restructure my perception of data viz and made me think about how my previous projects might have been different with a mobile-first view. Without some qualities exclusive to desktops, we have the opportunity to simplify and detangle our information graphics to focus both our readers and also our storytelling. And I think by thinking mobile first, we can even explore future options of data viz that are ideally suited to a mobile interface and more sensitive to a user’s location, capitalize on the multiple touch function or include vibration qualities that may cater to visually impaired audiences.

About the author

Ashley Wu

Student Fellow

Latest Posts

  • A Google Spreadsheets change affecting TimelineJS users

    Google recently changed something about their Sheets service which is causing many people to run into an error when they are making a new timeline. Note: there should be no impact on existing timelines! After this change, many of you click on the "preview" and get this message: An unexpected error occurred trying to read your spreadsheet data [SyntaxError] Timeline configuration has no events. There is a straightforward work-around, but it requires those of you who have...

    Continue Reading

  • How Americans think and feel about gun violence

    A man killed his wife, then himself. I want you to see his face and learn that he enjoyed fishing with his grandchildren. A small-time drug dealer is shot by two men in a parking lot. I find his Facebook profile and a photo shows him striking a playfully irreverent pose, giving the camera the middle finger. The photo’s comments take a mournful turn after a certain date. “Rest easy bro ???” Gun Memorial runs...

    Continue Reading

  • Software developers interested in journalism: Northwestern and The Washington Post want you!

    Northwestern University and The Washington Post are offering a unique opportunity for two talented software developers interested in applying their programming skills in media and journalism. Here’s the proposition: (1) a full-tuition scholarship to earn a master’s degree in journalism at Northwestern University, followed by (2) a six-month paid internship with The Post’s world-class engineering team, with the possibility of subsequent full-time employment. These opportunities are made possible by the John S. and James L....

    Continue Reading

  • What happened when Gun Memorial let anyone contribute directly to victim profiles

    If you’re reporting local or niche news, there’s a good chance that your audience collectively knows more about the story than you do. That’s especially true for us at Gun Memorial, a small publication with a nationwide mission of covering every American who is shot dead. In our latest, mostly successful, experiment, we let readers add to our stories without editor intervention. This article shares some lessons from that experience. Asking for reader contributions A...

    Continue Reading

  • How conversational interfaces make the internet more accessible for everyone

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. In 2004, human-computer interaction professor Alan Dix published the third edition of Human-Computer Interaction along with his colleagues, Janet Finley, Gregory Abowd, and Russell Beale. In a chapter called “The Interaction,” the authors wrote...

    Continue Reading

  • Three tools to help you make colorblind-friendly graphics

    This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here. I am one of the 8% of men of Northern European descent who suffers from red-green colorblindness. Specifically, I have a mild case of protanopia (also called protanomaly), which means that my eyes lack...

    Continue Reading

Storytelling Tools

We build easy-to-use tools that can help you tell better stories.

View More