How I won a Dataviz Challenge in 14h and 30 minutes

This summer, I took a break from consulting, spent time with my family, and entered the Pacific Dataviz Challenge.

I won first prize!

I heard about the challenge just 2 days before the deadline. So today I want to share how I made it so quickly. It might help you!

Women in the Pacific

My project explores gender inequality in 7 Pacific islands. Check it out here, and here's a preview:

Visit the project

What made it possible?

1. Crafting a Story

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.

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 websites 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:

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 a cheat code for your dataviz project, drop me an email and share it with me: I'm always eager to learn.

Have a great day,
Yan