Skip to main content
SimilarExport ZIP
100%

ice 7

✓ Published0🌍 Public
TTejamod
Last edited Jul 2, 2022
Created on Jul 2, 2022

This example visualizes video game sales data from a CSV file, showing a scatter plot where each circle represents a game’s release year against its platform. The visualization cycles through different dimensions—marks, year, and global sales—every five seconds, updating the x-axis mapping dynamically. Built with D3.js, it uses `scaleLinear` for axes and `axisLeft`/`axisBottom` for rendering. The reusable `scatterPlot` module follows the Towards Reusable Charts pattern, with SVG circles for marks and animated transitions driven by `setInterval`.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ice 7 scatter

The visualization plots video game sales data from a CSV file, showing the relationship between sales figures and release year as animated scatter points. It cycles through different sales metrics—Global, NA, and EU—every two seconds using `setInterval`, updating the x-axis mapping via `scatterPlot()` from D3.js. The chart uses `scaleLinear` and `extent` for scales, with `axisLeft` and `axisBottom` for axes, rendered in SVG. Animated transitions between metrics reveal shifting sales distributions over time.

TTejamod
94% match
Loading thumbnail…

ice 7 scatter

This scatter plot visualizes global video game sales across years, with each circle representing a game and colored by genre. Hovering over a point reveals the game’s name via a tooltip. Built with Vega-Lite’s API (vl.markCircle), it encodes year and global sales on the x- and y-axes. The code uses vega-tooltip for interactivity, d3.csv to load the game sales dataset, and custom styling from a config file to adjust font sizes and axis colors.

TTejamod
87% match
Loading thumbnail…

ICE-6 Scatter Plot 11554625

This scatter plot visualizes video game sales data from a CSV file, plotting North American sales on the x-axis against release year on the y-axis. Each circle represents a game, colored by genre using a custom `marker` function that maps genre names to specific colors (blue, yellow, or red). The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering scales. The SVG rendering fills the full browser window with a heading and styled tick labels.

MManohar Kowthavarapu
86% match
Loading thumbnail…

ice 7 scatter

This scatter plot visualizes video game sales data, displaying each game as a circle positioned by sales volume and unit price, with color encoding the item category and a tooltip revealing the exact sale amount on hover. The visualization is built with the Vega-Lite API, using its `markCircle` and `encode` methods to map fields from the Iris dataset, and renders interactive tooltips through the vega-tooltip `Handler` class.

SSaiSree0122
85% match
Loading thumbnail…

Fork of ICE7 Reusable Scatter

This example visualizes PS4 game sales data as an animated scatter plot, showing global sales against release year across product categories. The visualization cycles the x-axis between Year and North American sales every few seconds. Built with D3 v6 and React, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, renders circles as SVG marks, and includes a hand-coded legend with color-coded categories. Data loads from a CSV via `d3.csv`, with axis transitions driven by `setInterval`.

Mmaheganesh
84% match
Loading thumbnail…

Ice7-Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes PS4 video game sales data, showing the relationship between sales figures in different regions (Global, North America, Europe) and the year of release. The plot updates its x-axis and data points every two seconds, cycling through these different sales metrics for the same y-axis. Constructed using D3’s modular components like `scaleLinear`, `axisLeft`, and `axisBottom`, the chart is designed to be idempotent and reusable. It renders as an SVG with an animation driven by `setInterval`, and uses the `csv` function to load data from a remote URL.

Aanushaanumula
84% match
Loading thumbnail…

ice 7 line

This line chart visualizes global video game sales from 2003 to 2014, plotting annual total sales in millions against the year. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with axes generated by d3.axisBottom and d3.axisLeft. A d3.line generator draws the path, colored blue, over the SVG canvas. Data is loaded asynchronously via d3.csv from a public GitHub Gist, with parsed numerical sales and date objects.

TTejamod
82% match
Loading thumbnail…

ice 7 Pie Chart

This example presents a pie chart of global video game sales, visualizing the market share of ten games as percentages of total sales. The chart uses SVG rendering with D3.js v5, fetching data from a CSV file via the `csv` function. It leverages `d3.pie` and `d3.arc` to generate segments, `scaleOrdinal` for color mapping, and custom text labels for percentages. A legend, added manually, lists game names alongside their sales figures in millions, with all values formatted using `d3.format`.

TTejamod
82% match