100%

HTML Starter

✓ Published0🌍 Public

AAbhilashReddyVenreddy@my.unt.edu

Last edited Sep 26, 2026

Created on Sep 26, 2026

A scatter plot of video-game sales, Metacritic scores, and playtime uses D3 v7’s `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.scaleSqrt` to map copies sold and score to x/y positions, genre to Tableau-10 hue, and average playtime to circle area. Minecraft receives a distinct highlight color. Data loads from a CSV via `d3.csv`, with axes built by `d3.axisBottom` and `d3.axisLeft`. The SVG rendering is generated in `chart.js` within an `index.html` shell.

AI-generated description

HW5 – Marks and Channels: Video Game Sales, Scores & Playtime

A D3 v7 scatter plot that encodes three quantitative dimensions and one categorical dimension of a video-game dataset.

Channels used

Channel	Field
X position	`copies_sold_millions`
Y position	`metacritic_score`
Hue (colour)	`genre` (ordinal, Tableau-10 palette)
Area (radius via `scaleSqrt`)	`avg_playtime_hours`

Minecraft (best-selling title) receives a one-off highlight colour so it is immediately identifiable.

Files

File	Purpose
`index.html`	Page shell, styles, SVG container
`chart.js`	All D3 logic – data loading, scales, axes, marks, legend

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This interactive D3.js v7 scatter plot visualizes video game sales, Metacritic scores, and average playtime across genres. Each circle encodes copies sold on the x-axis, Metacritic score on the y-axis, genre through color, and playtime through circle size, with Minecraft highlighted in red. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeTableau10`, and `d3.scaleSqrt` for sizing. Data loads from a CSV via `d3.csv`, and SVG rendering includes axes, labels, and a color legend.

AAbhilashReddyVenreddy@my.unt.edu

94% match

Loading thumbnail…

Assignment 5

A scatterplot compares video game critic scores against playtime hours, with sales volume encoded by point size and genre by color. The visualization highlights “The Sims 4” with a distinct mark. The D3.js v7 code loads CSV data, computes statistical summaries (mean, median), and renders an SVG chart using `d3.scaleLinear` for axes, `d3.scaleSqrt` for point scaling, and `d3.schemeTableau10` for categorical coloring. Axes labels and a summary box using `d3.select` display data ranges.

Ppezguy97@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

This interactive scatterplot visualizes hours played versus rating for video games, with each point representing a game and color-coded by genre. A summary panel displays dataset statistics, while five version buttons allow switching between different mark and channel configurations. The visualization uses D3 v7 with SVG rendering, loading CSV data from a gist, and implements linear scales, axes, and interactive UI controls to explore the data.

SSri Sruthi Khyathi Boggaram

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot maps video game sales across regions against critic ratings, with each point's shape and color encoding genre. The visualization cycles through different x-axis metrics—North American, European, and Japanese sales, then rating—every two seconds, dynamically updating the scales and axes. Built with D3 6.7.0, it leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while custom SVG paths create genre-based shapes for data points. The code loads CSV data from a remote URL and uses the `select` API to manage SVG rendering.

Ssatishnarne99@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes global sales figures for a dataset of video game titles, with each bar representing a single game’s total sales in millions. Built with D3 v7, it renders an SVG chart using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axis labels and a legend. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and x-axis tick labels are rotated and thinned to every tenth entry for readability.

Nnithinreddypinikesi@my.unt.edu

81% match

Loading thumbnail…

D3 Scatter plot

This scatter plot visualizes the global sales of top-rated video games from 2016, with each game represented as a circular point. The data, loaded from a local CSV file, maps game names along the x-axis and their sales figures in millions along the y-axis. The visualization is built with D3 v6, using functions like `d3.scaleBand` and `d3.scaleLinear` to manage the axes, while `d3.select`, `d3.append`, and `d3.axisBottom` handle the SVG element creation and axis rendering. Each dot is positioned using the computed scales, and steelblue fill distinguishes the data points.

KKwasi Acquaye

79% match

Loading thumbnail…

D3 Scatter Plot: vgsales.csv

This scatter plot visualizes video game sales data from the vgsales.csv dataset, plotting each game’s release year on the x-axis against its global sales on the y-axis. Rendered as an SVG using D3 v6, the code applies `d3.scaleLinear` for both axes and draws semi-transparent circles with a radius of 4. The data is loaded via `d3.csv`, and axes are generated with `d3.axisLeft` and `d3.axisBottom`, with tick formatting modified to prevent commas in the year labels.

DDaniel Ribaudo

79% match

Loading thumbnail…

CSCE 5320 Assignment 7

This interactive visualization explores video game sales data through four coordinated charts: a scatter plot of regional sales, a pie chart of genre shares, a line chart, and an area chart of global sales over time. Users switch between views using buttons. Built with D3 v6, the example uses `scaleLinear`, `axisLeft`, `axisBottom`, `pie`, `arc`, `line`, and `area` APIs. The scatter plot employs `scaleOrdinal` with `interpolateRainbow` for genre colors, while the line and area charts aggregate data via `rollup` and `sum` from a TSV dataset.

SStorm

79% match