Post

Jacque Schrag
@jacqueschrag.com

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

Jacque Schrag@jacqueschrag.com

With so much election #dataviz to choose from, pretty pleased to have the map I worked on for Axios included. Thinking about sharing some behind-the-scenes look at what we did, so stay tuned for that.

Jacque Schrag
@jacqueschrag.com

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

Jacque Schrag
@jacqueschrag.com

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.

0 reposts3 likes

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.

Jacque Schrag
@jacqueschrag.com

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.

Jacque Schrag
@jacqueschrag.com

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

And, if you do, how? :) I’m also curious about the workflow. There’s a big repo template and you use something like the use this template GitHub feature?

Jacque Schrag
@jacqueschrag.com

We have repo templates, but actually have a shell script we run in our terminals that makes a copy of our chosen template and uses the degit package to clone it, along with a few other Axios specific set up things. S/O to my colleague @jaredwhalen.com for setting up the system for us.

Jacque Schrag
@jacqueschrag.com

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.

Jacque Schrag
@jacqueschrag.com

It’s gotten better! When I first started in early 2023, Svelte support was iffy but now that support is fully baked into Storybook. I will say I don’t think we’re taking full advantage of what SB offers & you could do it with SK alone, but I like the ease of use (now).