Creating responsive data visualizations by Gurman Bhatia

Created by Rishabh Srivastava, Founder of Loki.ai

This summary was largely done for my own note-taking, sharing it just in case it adds more value to other people.

Context

Source URL:

Why is it important: Contains a summary of how to create responsive data visualizations that work really well across all screen sizes

Keywords

Dataviz, Data Visualization, Responsive Design

Highlights

Have killed multiple visualizations in the past because they don’t work across different screen sizes. Has come up with a bunch of heuristics to ensure that things work well across

I. 10 tips

1. Tweak the treatment based on screen size

For example, for a story about pollution in India, Asia was centred on mobile (image below). You could not see America in this image (which you could on mobile) but that’s okay because you can see India in much higher resolution

Another example: you can use small multiples on desktop, but use full width visualizations on mobile

2. Flip it!

A horizontal “column chart” on desktop can be converted to a vertical “bar chart” on mobile

Desktop Version

Mobile Version

3. Make subtle design changes to make things more readable

Remove labels from maps and charts on mobile if they add too much clutter on a smaller screen

4. Make UX changes based on the device

Example: Inset world map for mobile, normal world map for desktop

5. If it works on mobile, it works on Desktop

This can be lead to a somewhat sub-optimal experience on Desktop, but can make the development process much easier

Technique: Create an A4 sheet and fold it in half. Then sketch on it to have a good idea of what mobile would look like

6. Be selective with interactivity. Interaction is expensive and comes at a cost

Often, animation is not as smooth on old/cheap devices if you use too much interactivity

Note: WebGL is changing this. So that’s something to keep an eye on if your audience uses WebGL compatible phones

7. Static visualizations are great

They are optimised for all devices. If you don’t need interactivity, just go with static visualizations

8. Exploit the scroll interaction

Scrolling is the most important thing for a person to do on the web. It’s also as mobile first as it gets.

“Scrolling is especially good for narratives because it is linear: you can only scroll in one dimension.” - Mike Bostock

9. Don’t hide information in tool tips. Use annotations for context

Assuming that people will interact with a tooltip is bad. Tool tips can be used by your most invested users (maybe 1-2% of the audience). In general, use annotations instead of tool tips to tell the story. Only use tool tips for things that only the most invested users will use

10. Mobiles are a great lesson in editing. They help you focus on what is important

Mobile phones help you focus on what can be removed. That’s a good thing. Focusing only on what’s essential can help you

II. 3 tools

1. Custom charts using d3.js

Javascript library that gives you a ton of control over your visualization

Very useful whenever you need to go beyond “usual” charts, and want to do something extremely bespoke/creative

2. ai2html

Javascript script for making static visualizations in illustrator, and the converting your visualization to HTML

3. pym.js

Used for iframes and for helping people embed your iframe into your website

III. Questions

1. Prioritising form vs function

Function is much much more important than form. First, figure out what you’re trying to say. Then, focus on how you are saying it

Annotations are amazing for this. As long as you have good annotations on your visualization, you can tell a great story while creating a great viz

2. What kind of stories are good candidates for visualization?

Anything that has good data. Elections are always a great candidate. Also education data, health data (including coronavirus), and economic data

And sometimes, even if there isn’t hard data, you can have visual opportunities to explain things. For example, Gurman read a long medical paper and realised that it could have been portrayed as a Sankey diagram. Also, photos can often be data too (like taking photos every hour and using an animation to tell a story about pollution in Delhi)

3. Mobile-first vs desktop-first and then creating a mobile version?

Depends on person’s preferences and techniques. Gurman prefers to go mobile first, and that leads to less code being written

4. What is a typical design to dev workflow? Does it change project to project?

Depends on how urgent a project is. For a really urgent project, it’s more of an all-hands-on-deck.

They do a morning call to see if something should be created as a graphic. They talk about both immediate ideas or long-term ideas

Generally starts with research and finding out what data is available. Then, leads to cleaning of data and figuring out what that data tells you. Then, leads to data visualization

Data acquisition, cleaning and analysis typically takes the most time

5. What tech do you use to create a different version of the viz on desktop and mobile?

Mostly css media queries. D3 also lets you redraw your chart on a resize event if you want. You can also load certain videos/charts depending on the screen size. There’s a lot of display:none and display:block

6. Navigating touch vs pointer-based platforms

Will check for this. Can’t do hover based things on pointer-based platforms. On mobile, it’ll have to be a tap-based thing. Need to have a close tooltip option if a “tooltip” is implemented

7. Things you have to learn

Thinking in visuals well and making good static visualizations