Static to Interactive:
Dataviz Speedrun in the AI Era

---

I recently stumbled on a beeswarm chart by Yanika Borg and loved it. But it was frustrating: I wanted to know the country behind each dot!

So I wondered: how long would it take to make it hoverable and searchable using React, D3, and AI?

Turns out, 83 minutes. This post documents every step and why the AI era for dataviz is both scary and exciting.

Useful links

inspirationd3 galleryAbout this chart

📍 Original Chart

The original chart was found on LinkedIn, published by Yanika Borg. Thank you so much to her for sharing the data with me! 🙏

It's a beeswarm chart based on data from Gallup's Global Emotions Report. Basically, they call people around the world and asks them about their emotional state the day before. They ask questions like Did you feel enjoyment? or Did you feel worried?

The percentage of people answering "yes" in each country becomes a powerful indicator of national wellbeing, presented on the original chart below.

Original visualization by Yanika Borg for The European Correspondent. Data: Gallup (2024)

🤝 Problem & Solution

Charts with many markers share the same problem: you can't annotate them all. As a result, reader will inevitably get frustrated! What's that outlier? How's my country doing?

Interactivity solves this.

My version below mirrors Yanika's beautiful work, but hovering a circle reveals its country and highlights it across all sentiments. Moreover, a search bar lets you find specific countries. Give it a try!

⏱️ Speedrun

Building bespoke interactive graphs is the dream of anyone into dataviz, but it has always been hard. There's quite a lot of knowledge required.

Today, AI is completely changing this paradigm, making things much more accessible. I wanted to prove this point by timing myself during this reproduction.

Here's how long each step took:

Note: I also answered a few messages concerning my course launch and made a few screenshots along the way.

Conclusion

That's fast!

I used Claude throughout, and I'm genuinely surprised by the result. This timing still feels unreal to me—this reproduction would have taken me about 5 hours just a few months ago.

What takes time

Some things are hard to speed up: data wrangling is always tedious and requires your brain to architect the dataset structure. Positioning annotations remains a manual task that requires trial and error.

Can AI do 100%?

No, at least not yet. I gave it an example from the React Graph Gallery as a starting point to ensure it follows good architecture. I gave it precise tasks, step by step, which really helps. And I had to correct its strategy 3 times.

The AI era is exciting

With minimal foundational knowledge about web development, React and D3.js finally become accessible. The learning curve is dramatically smoother than it was just months ago.

I suspect we'll see more and more bespoke interactive charts in the future, eliminating so much of the frustration we feel with static charts!

Code

Below is my interactive reproduction of this chart. Hover over each dot to see which country it represents and its exact values.

Distribution

+

Violin

+

Density

+

Histogram

+

Boxplot

+

Ridgeline

+

Beeswarm