How I made a tool that exports vector charts 📊

I love vector graphics. Beautiful, mathematically calculated curves: no matter how much you zoom in, the lines stay smooth and sharp. It’s a very free but still structured ways of expressing myself. I use it for two purposes:

• lasercutting

• data visualisation

Now I know most of you don’t have a laser cutter, so I will focus on the latter 🙂

I’ve always preferred creating my own vector based data visualisations over tools like flourish or datawrapper. Not that they aren’t good—quite the opposite! They do allow you to make something quickly and beautifully. But they lack the flexibility of vectors.

There are two wonderful tools to help you get started with vector graphics:

Inkscape

Inkscape is the free and open-source alternative to Adobe Illustrator. It is also honestly one of the most mature open source tools I have ever used (and I’ve been a Linux user for almost 20 years). The interface is clean, and you can use keyboard shortcuts. Love it!

However, to get started, you also need a foundation for what you are making. Enter:

RAWgraphs

RAWGraphs is an open-source data visualization framework that includes all kinds of unusual charts - steam graphs, small multiples, tree maps, violin plots, and much more. But here is the important part: it lets you to export your charts in a vector format (.svg)

So here is my problem. Datawrapper and Flourish only allow exports into vectors in their paid tiers. And since RAWgraphs focuses on unusual charts, I didn’t have a tool that could export a simple bar chart.

So the other day, while making a video on how to make a better data visualisations, I decided to make one myself.

I’ve always wanted to learn Javascript forever, but it never really became much of a priority. So I turned to my robot assistant, Claude.

More specifically, I used Claude code—a command line tool that you can run in your project folder, and it automatically modifies the code according to your prompts.

So in the end together we created the 🌱 Chart garden.

Now of course it’s not perfect, but it’s good enough—at least for my tutorial’s purposes.

Is “good enough” code enough in general? That might be a topic for some other newsletter.

For now, if you’d like to see me create a chart in Inkscape from scratch, check it out below! ^^

Much love 💚

Ada

PS: Know someone who’d love this? Forward this email to them!

PS2: Is there something else you’d like to read about? Or do you have other questions, suggestions? I would love to hear from you! Just answer to this email. ✨