Creating responsive data visualisations

on YouTube ↗01h 30m

" summary

Ten concrete methods for making visualizations work across screens, from design for the phone first to choosing static images over costly animation; claims include cutting interactivity when it doesn’t add meaning, using scrolling as the primary interaction, and editing ruthlessly for mobile. Tools named: d3 + react, ai2html and pym. Examples: a globe-to-map swap for pollution maps, a coronavirus tracker rebuilt for phones, small multiples turned into single-column flows, handling 8,000 candidate photos, and projects ranging from same-day graphics to 2–3 month dashboards.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and background
2. 3:40Session overview
3. 7:40Philosophy of responsive data
4. 16:49Ten tips for responsive design
5. 37:56Essential tools for the trade
6. 40:38Q&A session

" related talks

• 28mWeb-based data visualization on mobile devicesDominikus Baur · JSConf EU 2014
• 15mThe Future of Data Visualization on the WebAlan Mendelevich · You Gotta Love Frontend 2019
• 21mData Visualizations with React + D3Swizec Teller · Reactathon 2018
• 27mD3 & ReactShirley Wu · React Rally 2017
• 12mBattle-Tested Techniques for Animation & Data VizKrystal Campioni · React Summit Remote Edition 2021
• 32mD3 and React, TogetherShirley Wu · React Amsterdam 2018
• 47mData, Design, CodeShirley Wu · beyond tellerrand Düsseldorf 2019
• 33mPainting with DataRichard Westenra · RS Conf 2019