Building an Interactive Video Game Sales Chart with D3.js

July 31, 2025

Volume

Want to turn raw CSV data into an interactive chart? In this tutorial, we’ll walk through how to create a scatter plot using D3.js that shows video game sales data. You’ll be able to choose what data to plot and click on points to see the name of the game!

Demo: Video Game Sales Scatter Plot

What We’ll Learn

Loading a CSV file from the web
Creating dropdowns to select chart axes
Plotting data using D3
Displaying tooltips when clicking on data points

The Data

We’re using a dataset with sales and review info for video games, available at:

https://johlits.com/code/data/Video_Game_Sales_as_of_Jan_2017.csv¹

Each row includes things like:

Game name
Year of release
Sales in different regions
Critic and user scores

The Tools

We’ll use:

HTML for structure
D3.js (v7) for drawing and data
A bit of JavaScript to make it interactive

How It Works (Step by Step)

1. Load the CSV Data

We use d3.csv() to fetch and parse the data. We also convert some values like sales and scores to numbers.

const rawData = await d3.csv(csvUrl, row => ({
  Name: row.Name,
  Global_Sales: +row.Global_Sales,
  Critic_Score: +row.Critic_Score,
  User_Score: parseFloat(row.User_Score),
  Year_of_Release: +row.Year_of_Release,
  Genre: row.Genre,
  ...
}));

2. Create Dropdowns

We add <select> elements in the HTML so users can choose what property to plot on the X and Y axes (like “Global Sales” vs “User Score”).

3. Set Up the Chart Area

We define margins and create a group inside the SVG to hold our plot:

const chart = svg.append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

4. Draw the Scatter Plot

We filter the data to remove missing values, scale the data to fit the chart, and draw circles for each game:

chart.selectAll("circle")
  .data(data)
  .join("circle")
  .attr("cx", d => xScale(d[xProp]))
  .attr("cy", d => yScale(d[yProp]))
  .attr("r", 4)
  .on("click", (event, d) => {
    showTooltip(d.Name, event.pageX, event.pageY);
  });

5. Add Interactivity

When you click a point, a tooltip shows the game name.
If you click anywhere else, the tooltip hides.

What’s Next?

You could:

Add hover tooltips instead of click
Show more game info in a sidebar
Group or color by genre
Add filters by year, platform, etc.

Final Thoughts

This small project is a great intro to D3.js and working with real data. You learned how to load data, make a scatter plot, and add basic interactivity — and it’s all in plain JavaScript!

Demo: Video Game Sales Scatter Plot