Creating responsive data visualisations

As soon as you go beyond the typical bar and line charts and start creating bespoke data visualisations, different screen sizes soon become a nightmare. How do you make sure your visualisations are beautiful, unique and yet communicate effectively across devices?

In this presentation that will touch aspects of both storytelling and design, I will walk through some visualisations that I have created as a data and graphics journalist and give an overview of:

1. Conceptualising a visual story to communicate effectively on all screen sizes
2. Interactivity - when to use it and when to avoid
3. Technical work flow and tools available to create custom responsive visualisations

Outline

A little bit of what I do and why this is a daily struggle in my life - thinking of things that are effective across screens.

First talk of ideation - Show a bunch of examples where I have killed viz ideas cause they would not work on mobile. Show some amazing visualisations on desktop and how the mobile versions underdelivered. Show visualisations that are meant for the phone! And then show the best of both worlds. If it works on mobile, it works on desktop, is a good rule to live by. It is also a great editing strategy - really helps you narrow down to the most important aspects of a visualisation and the story you want to tell.

Interactivity - Does it have to be interactive? How the natural instinct for the user is to just scroll and for anything else something magical needs to happen. This is keeping in mind the target audience here is the layman news consumer. But the audience that wants to interact is your most invested reader.

Tools - What I use to create the things that I do. A bit of how d3.js lets me do this quite well. ai2html when it is too many pixels and interaction is not needed. When pre generated videos can and should be used. Some fun stories where mobiles have forced me to go the route of jugaad.

Speaker bio

Gurman is a data and graphics journalist at Reuters in Singapore where she tells stories with code. At the intersection of journalism, design and code, her work is a combination of data extraction, analysis and forming compelling narratives around data.

She has told the data-driven story of pollution in Delhi through a set of photographs. As well as created visualisations with the faces of over 8,500 candidates contesting in the Indian election. Once, she also analysed 25,000 Bollywood songs to show the decline of the female solo.

A self-taught coder and designer, Gurman holds a Masters in Journalism from Columbia University. Previously, she worked at Hindustan Times as part of their first data and interactives team. Her work has garnered awards at the Malofiej Infographic Summit, Online Journalism Association awards, GEN data journalism awards and the South Asia FCC awards.

Links

• http://www.gurmanbhatia.com/
• https://drive.google.com/file/d/1q_vUHHYWMi5DrCPNfdYmFOr1O30fYL4E/view
• https://docs.google.com/presentation/d/1CU4heJLvVycsT66kkbhGZJzfHSLV9kHJvZGAXLChOqo/edit#slide=id.g78f935a0a2_2_384
• https://drive.google.com/file/d/10NkUBeZGEAx73U9U42GlsR5k_xK9V3zZ/view