Post

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.

Eli Holder

@elibryan.bsky.social

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...

2/🧵 #a11y with #dataviz is hard, and I won't claim that we got it 100% right. But I do think we made good choices: - Used aria or sr-only text for describing the graphics - All information available in accessible tables, with skip links to them - For bigger tables, we included a search option

3/🧵 Last year I built a component library in #svelte for Axios' visuals because nobody likes building the same things over and over again. We expanded it to include election #dataviz & it made it so much easier to have consistency across multiple codebases and implementations of these graphics.

Aman Bhargava

@aman.bh

If at any point you all open-source this Storybook, it would be awesome! Super curious to see how these components are made reusable. I've always found it a challenge to make viz components the right mix of extendable while keeping things easy for simpler use.

4/🧵 We use @svelte.dev for bespoke graphics at Axios and the election #dataviz was no exception. Our graphics have to live in a lot of places, and Sveltekit + our component library made it straight forward to build once and share everywhere.

Fin/🧵 I am so proud of the work my team did this year. We only had 2 people working on elections graphics/backend rig the majority of the time, and we had to cover A LOT of ground to make it happen. I learned so much & look forward to applying to future projects - after a very well deserved break.

Rui Barros

@handle.invalid

I would really love to know a bit more about your component library! I’m currently working on ours at @publico.bsky.social but I was curious how you guys manage everything :)

Matthias Stahl

@higsch.com

Yeah, that would be great! E.g. do you use Storybook?

Hi! Yes, we use Sveltekit + Storybook (which just shipped support for #svelte 5 yesterday). We build components in SK & use the package feature to build. Storybook for documentation. It gets published to a private NPM package we have included in our other Svelte templates.

Sean Lynch

@techniq.dev

Impressive work! I've reached for <canvas> for complicated maps and leveraged the same interactivity approach (abstracted as `<HitCanvas>` on LayerChart). The antialiased edges still cause some missed pointer hits along the edges, but it works great overall. www.layerchart.com/docs/compone...

Very cool! Yeah it’s not really a “new” technique but I wanted to share bc most people don’t know until they start working on it. I also ran into some issues with edges or borders, so there’s definitely some extra logic in ours to only show when there’s actual data.

Sean Lynch

@techniq.dev