Ice7-Reusable D3 Scatter Plot

100%

Ice7-Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

87% match

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

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

ice 7

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`.

TTejamod

84% match

Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com

82% match

Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com

81% match

Loading thumbnail…

Bonus ice scatter

This 3D scatter plot visualizes video game sales data, showing Global Sales on the x-axis, Year on the y-axis, and Regional Sales on the z-axis. Two traces distinguish North American and European sales as separate scatter point sets. The visualization uses Plotly’s `scatter3d` type within `Plotly.newPlot`, with data loaded via D3’s `d3.csv` from a GitHub-hosted CSV file. Axis titles and fonts are configured through the layout’s scene object, and marker styling includes adjustable sizes, colors, and opacity levels.

TTejamod

81% match

Loading thumbnail…

ICE7- Scatter plot

This interactive scatter plot visualizes global sales data for PlayStation 4 games, with each circle representing a game positioned by release year and worldwide sales. The visualization uses vega-lite-api to build the chart and d3.csv to load data from a Gist-hosted CSV file derived from the UCI Machine Learning Repository’s Auto MPG dataset. Publishers are distinguished by color, and hovering reveals the game title via vega-tooltip. The chart encodes quantitative fields for year and global sales, with a custom color encoding for the categorical publisher field.

Aanushaanumula

81% match