Painting with Data

on YouTube ↗33m

" summary

A practical guide to making effective browser charts: use John Snow’s dot map as a model for charts that inspire action and are tied to a precise claim, pick the right primitives and scales, and measure performance limits — a Snapchat demo shows 34,000 photos per second destroys frame rates so canvas or WebGL beat SVG for many animated nodes. Advice includes when to use charting libraries versus d3 for custom layouts, mixing React rendering with d3 transitions, and avoiding gratuitous 3D like spinning bars.

AI-written summary · about

" chapters (17)

1. 0:00Intro
2. 0:41About me
3. 1:43Story
4. 9:11Photosensitivity Warning
5. 10:29Dark Sky
6. 11:43Scales
7. 12:22Scale Functions
8. 13:13Choose a Chart Type
9. 14:33Tools
10. 15:20SVG
11. 16:46Canvas
12. 19:14WebGL
13. 21:39HTML CSS
14. 22:30Chart Libraries
15. 28:10Summary
16. 28:30React vs D3
17. 29:31Hybrid approach

" related talks

• 37mPainting with DataRichard Westenra · FrontCon 2019
• 15mThe Future of Data Visualization on the WebAlan Mendelevich · You Gotta Love Frontend 2019
• 12mBattle-Tested Techniques for Animation & Data VizKrystal Campioni · React Summit Remote Edition 2021
• 43mThe Future of Data Visualization on the WebAlan Mendelevich · NDC Oslo 2018
• 01h 30mCreating responsive data visualisationsGurman Bhatia · The Fifth Elephant 2020
• 29m"Hand Coded Artisanal Data-Visualization"Nathan E. Lilly · Frontrunners 2024
• 26m"Where Numbers Meet Art: Building Data Visualizations In The Modern Web"Shri Khalpada · Frontrunners 2024
• 21mData Visualizations with React + D3Swizec Teller · Reactathon 2018