"Hand Coded Artisanal Data-Visualization"

on YouTube ↗29m

" summary

Claims that hand-coded SVG replaces heavy libraries, demonstrates no d3 required workflows, and shows concrete wins: a full-screen HD SVG is 14K versus a GIF at 1.7MB. Shows actual tools and techniques: SVG elements, <animate>, filters, patterns, namespaces, inline JS, and DOM methods; builds a React chart component, gauge, polygon visualizer and map colorizer from raw path data; numbers include a 60-slide demo and a 20-hour learning target, and the examples work.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 3:12Hand-coding SVGs for data
3. 8:30Core SVG elements
4. 13:51SVG filters and effects
5. 16:47Interacting with SVGs
6. 20:29Building interactive visualizations
7. 22:53Theory to practice
8. 26:25Data visualization design
9. 28:10Summary

" related talks

• 47mSVGs beyond mere shapesNadieh Bremer · Frontend United 2019
• 29mSVGs beyond mere shapesNadieh Bremer · CSSConf Australia 2016
• 39mSVG Charts and Graphics with RubyStarr Horne · RailsConf 2015
• 43mThe Future of Data Visualization on the WebAlan Mendelevich · NDC Oslo 2018
• 12mBattle-Tested Techniques for Animation & Data VizKrystal Campioni · React Summit Remote Edition 2021
• 24mBeyond the bar graph: Creative visualization with D3.jsJoanne Cheng · FutureJS 2014
• 47mData, Design, CodeShirley Wu · beyond tellerrand Düsseldorf 2019
• 39mBuilding Better Interfaces With SVGSara Soueidan · CSSConf Australia 2015