Painting with Data

on YouTube ↗37m

" summary

Compares concrete options — HTML/CSS vs Canvas/SVG/WebGL — and shows when each actually handles animation and accessibility; describes building an interactive Snapchat-style visualization that tries to render thousands (mentions 9,000 and problems at ~500k) and hits frame-rate and memory limits so performance strategies matter. Explains mapping data to visuals with deterministic one-to-one scales, contrasts library choices with d3 tradeoffs and notes which approaches failed, which scaled, and why.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 5:46What is your chart's purpose?
3. 6:03Who are your audience?
4. 12:54Choosing a chart type
5. 14:55Choosing a web technology
6. 21:21HTML & CSS!
7. 22:10Choosing a charting library

" related talks

• 33mPainting with DataRichard Westenra · RS Conf 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
• 32mIntro to Web Graphics with HTML5 CanvasKai Chang · Øredev 2018
• 47mData, Design, CodeShirley Wu · beyond tellerrand Düsseldorf 2019
• 33mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · Vue.js Amsterdam 2019
• 01h 30mCreating responsive data visualisationsGurman Bhatia · The Fifth Elephant 2020
• 29m"Hand Coded Artisanal Data-Visualization"Nathan E. Lilly · Frontrunners 2024