I had two cheat codes: Joseph Barbier + ChatGPT. Joseph (the best intern you've ever seen) used AI to generate hundreds of rough Python graphs instantly—ugly but efficient.
Example of a notebook partially AI generated.
It wasn’t about finding the perfect chart, but understanding the data’s narrative. While I expected wage and employment gaps, I was surprised to see education levels were almost equal. That’s where the story formed. By the way, Joseph is a Python wizard and has some availability for freelance projects!
2️⃣ Sketching Charts
My approach: read the data, list all possible chart types for each dataset, evaluate their strengths, and pick the most fitting one.
This comes naturally to me, but if you're new to it, check out my Data to Viz project.
It’s a decision tree for choosing the right chart type.
3️⃣ Using the Right Tools
Being a developer in 2024 has perks:
React + Next.js: Build reusable UI components.
Tailwind CSS: Speed up styling with utility classes.
TypeScript: Catch errors automatically.
shadcnUI: Pre-built, professional UI components.
D3.js: Tools for custom graphs.
GitHub: Deploy your project for free, with top-tier performance.
If you're not into web dev, this probably does not ring the bell. But keep in mind that building website nowadays is sooo much better than it used to be.
If you love creating charts, you should give it a go! There is NO coming back! 🙂
4️⃣ My Secret Boilerplate
Setting up from scratch is terribly slow. You have to install and configure all the tools listed above and more. That’s why I created a Dataviz Project Boilerplate.
Clone it, and you're ready to start building immediately. In less than 5 minutes, you will have a website available to everyone, that looks like this:
5️⃣ The React Graph Gallery Building custom graphs in JavaScript is time-consuming.
While libraries like Highcharts and NIVO are options, they limit customization. You will never win a dataviz challenge with them!
Instead, I used my React Graph Gallery to quickly copy-paste and tweak graph templates.
For example, you can get a scatterplot ready in 23 seconds from this example:
A sandbox with a d3.js scatterplot: ready to be copy-pasted and tweaked!
And that's it!
I hope these tips and tools help with your future projects. If you're an R or Python user, maybe this will inspire you to explore web development. If you have cheat code for your dataviz project, hit reply and share them with me: I'm always eager to learn.
