Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
FFAN CHI YU(范紀予)
Last edited Oct 19, 2022
Created on Oct 19, 2022

This reusable scatter plot, built with D3.js, visualizes the NBA dataset from a GitHub Gist, with each point representing a player. It shows the relationship between two selected attributes—initially petal width and sepal length—while coloring the points by team abbreviation. The plot’s axes and circles are rendered as SVG, with an animation cycling through four different attribute combinations every two seconds. The implementation uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs to construct the chart dynamically.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

A scatter plot visualizes NBA player statistics with points colored by rebounds, showing the relationship between points and assists across players. The visualization uses React components with D3 v5 scales, including `scaleLinear` for both axes and `scaleOrdinal` for categorical color mapping. Data loads asynchronously from a CSV file via `useEffect` and `d3.csv`, rendering circles in an SVG with positioned axes.

FFAN CHI YU(范紀予)
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal and sepal measurements across four dimensions. The chart cycles through different variable pairings every two seconds, dynamically updating the x-axis while points shift and recolor by species (green, yellow, red). The reusable chart pattern from Bostock’s “Towards Reusable Charts” uses d3.scaleLinear, axisBottom, axisLeft, and SVG circles. Data loads via d3.csv from a GitHub gist, with viewport-sized rendering and custom label annotations.

AAshrith Kudidhi
81% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris flower dataset across four measurable attributes: petal width, sepal width, petal length, and sepal length. Using D3’s scaleLinear, axisBottom, and axisLeft functions, it renders data points as circles in an SVG canvas, with axes updated every two seconds as the x-axis variable cycles through the dataset columns. The chart is built as a reusable function via a scatterPlot closure, adapting to the browser window’s dimensions and drawing on the CSV data loaded with d3.csv.

RRadhakrishna246
80% match
Loading thumbnail…

Colorful Scatter Plot of NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes player statistics from the NBA 2018-2019 playoffs, with each circle representing an individual player’s performance across two selectable attributes. Dropdown menus let users switch between metrics like points, assists, and rebounds, while hovering over the team legend highlights players from that team and fades the rest. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for team colors, and SVG circles with hover tooltips to reveal player names. The data comes from a Kaggle dataset of basketball player stats per season.

ZZiyang Gao
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot uses the D3.js library to visualize the Iris Dataset, cycling through different feature combinations every two seconds. The chart displays petal and sepal measurements as circles, with axes that update to reflect the currently selected dimensions. Using D3's `scaleLinear`, `extent`, and axis functions, the visualization smoothly transitions between four variable pairings, always keeping the y-value fixed on sepal width while rotating the x-axis through petal width, sepal width, petal length, and sepal length.

MManideepChakilam
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization demonstrates a reusable scatter plot displaying the Iris dataset, cycling through four attribute combinations every two seconds to compare petal and sepal measurements. Built with D3.js v6, the chart uses `scaleLinear` and `extent` for scales, `axisLeft` and `axisBottom` for axes, and SVG circles for data points. The code implements a reusable chart pattern with configurable accessors, and the animation transitions between different x-axis variables using `setInterval` while maintaining a fixed y-axis of sepal length. The implementation includes a custom font and full-window responsive sizing.

NNaimisha-M
80% match
Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot

The scatter plot visualizes NBA player statistics, displaying player efficiency with darker dots representing higher points-per-minute ratios. The x-axis shows minutes played, while the y-axis can be switched between points, rebounds, assists, steals, and blocks. Built with D3 v6 using SVG, the visualization includes dropdown menus for axis selection and hover tooltips revealing player names. The code uses d3.scaleLinear, d3.scaleSequential with the interpolatePuRd color scale, d3.axisLeft, and d3.axisBottom, with animated transitions updating circle positions and colors when the selected statistic changes.

YYichen Li
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates an animated scatter plot of the Iris dataset, cycling through four different feature pairs every two seconds. The visualization uses D3.js v6 to render SVG circles and axes, with scales and extents computed from the data. The reusable chart module (scatterPlot.js) accepts configurable accessors for x and y values, margin, and radius, while index.js imports the CSV data and drives the animation using setInterval to switch the x-axis mapping. The plot smoothly updates the circle positions and axis ticks, showing relationships between sepal and petal measurements across the dataset's species.

Rrobertotienonyaranga@gmail.com
80% match