Post

🧵Okay let's do some BTS for Axios' elections #dataviz. 1/5: We used <canvas> for our big maps, which means we had to do some tricks with color hashes to get interactivity. What the reader sees vs. what the computer sees. Details on how it works: observablehq.com/@camargo/can...

Out of curiosity, why canvas? Why not an SVG that you can set the colors/numbers on natively?

Good question! Mainly performance reasons. The frequency that these maps are updating with new data + the amount of DOM elements being created (depending on the map) made canvas a better option for us. With multiple maps, SVGs started to get noticeably sluggish.

Covering this much ground in Canvas is 🤯! Super impressive.

Thanks, Eli! I learned a lot about canvas working on a project for the 2022 midterms with @albertocairo.bsky.social & @simonrogers.bsky.social, where our map had an animated transition from regular map to cartogram. SVG couldn't hang 😂 www.axios.com/midterms-ele...

lol, yeahh, turning point for me was "how might we render a zillion timepoints, animate them, and make it work on 8 y/o ipads." My transitions never got quite as smooth as y'alls though 🤣