Svelte 4 Data Viz
summary
An interactive scrollytelling built with Svelte + d3 visualizes Nobel laureates since 1901, highlighting 2021 winners and drilling into categories, ages and countries. The visualization renders many circles on an HTML canvas using a register/invalidate loop where each laureate supplies a draw function, uses renderless components to keep canvas code declarative, and animates position changes with Svelte tween stores. It’s designed for newsroom speed, accuracy and reuse and runs smoothly.
AI-written summary · about
chapters (7)
- 0:00Introduction to Data Viz
- 1:48Data viz in the newsroom
- 3:50Svelte and D3 capabilities
- 8:11Nobel laureates project
- 12:09Technical implementation
- 18:12Renderless components
- 27:35Conclusion and resources
related talks
36mData-visualisation with Python and Javascript: crafting a data-viz toolchain for the web
47mData, Design, Code
46mLooking like a Lost Sheep
21mVisualising Enterprise Data with D3
21mYour journey from data science to animated web graphics
47mData Sketches: a year of exotic data visualizations
12mBattle-Tested Techniques for Animation & Data Viz
42mData Sketches: A Year of Exotic Data Visualisations