Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Sep 23, 2026

Created on Sep 23, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

83% match

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

82% 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…

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.

Ssahithya.voleti@gmail.com

80% match

Loading thumbnail…

Fork of HTML Starter

This multi-series line chart displays three synthetic data streams—sales, profit, and expense—across 150 indexed points. The visualization uses D3 v7 to generate the data and render an SVG line chart with distinct colored lines for each series. The chart includes labeled axes for the index and value, a chart title, and a manual legend identifying each line. The code uses d3.range to create the data, and d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft to construct the visualization.

Ssaiabhishekmunnangi@gmail.com

80% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a scatter plot of fruit dataset attributes, with each point colored by fruit type (apple, orange, banana, grape) and positioned by width on the x-axis and height on the y-axis. The code uses D3.js v6 functions including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load data from a GitHub gist. It renders SVG circles with a radius of 5 pixels and includes custom axis labels for "Width" and "Height" in green, with a red title heading. The plot fills the browser window using dynamic width and height values.

Ssahithya.voleti@gmail.com

79% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu

79% match

Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

GGavin Sykes

79% match