Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
AAbhilashReddyVenreddy@my.unt.edu
Last edited Sep 26, 2026
Created on Sep 26, 2026
Forked from 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.

AI-generated description

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

A D3.js scatter plot visualization exploring the relationship between video game sales, metacritic scores, and playtime.

Encoding

  • X position: Copies sold (millions) - quantitative
  • Y position: Metacritic score - quantitative
  • Hue (color): Genre - categorical
  • Size (area): Average playtime (hours) - quantitative
  • Highlight: Minecraft receives special emphasis with distinct color and stroke

Data Source

Video game dataset from gist (see DATA_URL in index.js)

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

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.

AAbhilashReddyVenreddy@my.unt.edu
94% 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
88% 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
84% 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
84% match
Loading thumbnail…

Fork of HTML Starter

This chart demonstrates a staged approach to data visualization, showing how different visual encodings can convey information. The first stage uses only x and y positions to map game attributes, while the second adds color to distinguish between genres. The third stage incorporates circle size to represent sales figures, creating a multi-dimensional scatter plot. The visualization is built with D3.js version 7.8.5 and renders as SVG, with interactive controls allowing users to toggle between the three stages.

Ssoumendranathbanerjee999@gmail.com
82% 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
80% match
Loading thumbnail…

Fork of scatter-plot

This scatter plot visualizes global video game sales data, comparing North American and European sales on the x- and y-axes while mapping Japanese and global sales to point radius dimensions. The visualization uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions, rendering circles as SVG elements. Point colors are determined by the game’s publisher, with a custom `marker()` function that assigns distinct colors to specific developers like Ubisoft Montreal and Rockstar North, while defaulting to brown for others. The chart includes axis labels and a title, with styling applied via CSS.

Aajaysonu
80% match
Loading thumbnail…

Fork of D3 Starter

This example displays a bar chart of video game genres from a CSV dataset, plotting each genre’s global sales using a D3 scaleBand for the x-axis and a scaleLinear for the y-axis. The React component loads data via d3.csv, maps sales values to numbers, and renders SVG rectangles with heights proportional to sales. The code uses D3 v6’s scaleBand, scaleLinear, max, and csv functions alongside React hooks like useState and useEffect to manage data fetching and state. The chart is static, with no axes or labels, and uses a dataset hosted as a GitHub gist.

RRED98310
79% match