Making Interactive Web Charts with Help from AI

2 min read

Categories

I was playing with generative AI, like ChatGPT or Google’s Gemini lately. It’s pretty wild what they can do. Today I wanted to share how it helped me create an interactive chart.

Usually for scientific work, you may use tools like Python or MATLAB to make plots for reports or publications. But what about (interactive) plots on the web? That’s where JavaScript plotting libraries come in. JavaScript is the main language that web browsers use to make websites interactive. Libraries like the one I used today (Recharts) let you create charts that you can interact with right in the browser – maybe hover over points to see values, zoom in, or watch things update. It’s a different approach than the static plots we usually make for scientific analysis, designed more for online viewing and exploration.

How I Made This Chart (The Quick Version)

Getting this interactive chart working involved a few steps using modern web development tools. Gemini helped generate the plotting code itself, but here’s roughly what you need to do to set up a project like this (it looks like a lot, but it’s standard for web stuff):

  1. Get Your Tools: Install Node.js and npm. Node.js lets your computer run JavaScript outside a browser, and npm is its package manager (kind of like pip for Python or brew for Mac) used to download code libraries.
  2. Create a Project: Use a tool called Vite (run npm create vite@latest your-project-name --template react in your terminal) to quickly set up a basic React project. React is a popular JavaScript library for building user interfaces component by component.
  3. Install Libraries: Navigate into your project folder in the terminal (cd your-project-name) and install the basic React stuff (npm install) and the specific charting library (npm install recharts).
  4. Add the Code: Paste the chart code (like the GDP example Gemini generated) into the main React component file (often src/App.jsx or src/App.tsx).
  5. Run Locally: Type npm run dev in the terminal. This starts a local web server, compiles everything, and usually opens the chart in your browser so you can see it live!
  6. Build for Blog: Run npm run build to create optimized HTML, CSS, and JS files that can be put on a website.

Check Out the Interactive Plot

Here’s the interactive US vs. China GDP chart I made with Gemini’s help, embedded right here in the blog post. You should be able to hover over the lines to see the values for each year! Note I didn’t verify the data, it was generated by Gemini as well.

Interactive US vs. China Nominal GDP (2001-2023):