Skip to main content
SimilarExport ZIP
100%

dpka-ICE-7 Reusable D3 Scatter Plot

✓ Published0🌍 Public
DDeepikaGoud08
Last edited Mar 30, 2023
Created on Mar 30, 2023

This example presents an animated scatter plot of vehicle tire measurements from a CSV dataset, cycling through four column combinations as axes every two seconds. Built with D3 v6, it renders SVG shapes whose form and color encode the tire brand via `d3.scaleOrdinal` with `symbols` and a custom color array. The reusable chart pattern from Bostock’s “Towards Reusable Charts” exposes setter/getter functions, while `setInterval` triggers axis updates. It uses `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, with data parsed as numeric fields before plotting.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes a road and ride measurement dataset, cycling through four attribute combinations on the x-axis while y remains fixed. Data points are colored by category (word-wrap, word-color, word-country) and rendered as ellipses with variable rx and ry radii. The visualization uses D3 v6 with the reusable `scatterPlot` module, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` for rotation. It loads data via `d3.csv`, appends SVG circles, and includes a custom legend with labels.

AAnanthulaaditya
82% match
Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

A scatter plot cycles through four flag and stand measurements from a CSV dataset, updating the x-axis and axis label every few seconds. The visualization uses D3 v6 to render circles colored by a "color" attribute, with red, green, and blue indicated in a legend. It employs reusable scatter plot and scale functions, rendering through SVG with animation for the rotating axes and labels.

Hharika-1929
81% match
Loading thumbnail…

ICE7 Reusable scatter plot

This interactive scatter plot visualizes automotive data, cycling through four variables—mileage, engine size, car age, and horsepower—on the x-axis every two seconds. Built with D3.js, the chart uses the `scaleLinear` and `extent` APIs to map data to coordinates, while `axisLeft` and `axisBottom` render axes. The SVG rendering is animated via `setInterval`, and the reusable `scatterPlot` component accepts configurable width, height, margins, and radius, demonstrating a modular chart design.

MM
81% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot explores relationships between four variables from the auto-mpg dataset, cycling which variable maps to the x-axis while the y-axis consistently tracks AvilaAdobe. Built with D3.js (v6.7.0), it renders circles in an SVG, with data points colored by year (pink for 2014, green for 2015, black for 2016). The chart updates via `setInterval`, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and appends legend markers and axis labels dynamically.

Hharika-1929
81% 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
80% match
Loading thumbnail…

Reusable D3 Scatter Plot-ICE7

This example shows an animated scatter plot of the Iris dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, and sepal length) every 1.5 seconds while keeping sepal length as the y-axis. It uses D3 v6 with the reusable `scatterPlot` module, which employs `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Species are color-coded via an ordinal scale, and a legend is drawn manually. The data is loaded from a GitHub gist CSV using `d3.csv`, with `setInterval` triggering the axis transitions.

NNitheeshSama
80% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot Divya

This reusable scatter plot visualizes room measurements from the Iris dataset, with each point’s shape encoding species and axes dynamically cycling through four numeric columns every 15 seconds. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, `axisBottom`, and `join` for SVG rendering. The chart animates by resetting its x-value accessor and re-invoking the chart function, demonstrating the reusable chart pattern.

Ddivyakota99
80% match
Loading thumbnail…

ICE 7 Reusable Scatter Plot (Sai Kaushik Ganji)

A reusable D3 scatter plot displays the relationship between Horsepower and Fuel Efficiency, with points colored and shaped by vehicle segment. The chart reads from the local `vehicles.csv` file using `d3.csv` and `d3.autoType`. It builds an SVG using `d3.select`, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` to map categories to colors from `d3.schemeSet2` and symbol types from `d3.symbolCircle`, `d3.symbolSquare`, `d3.symbolTriangle`, and `d3.symbolDiamond`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and data points are rendered via `d3.symbol` with a size of 100, including a legend listing each segment.

SSai Kaushik Ganji
80% match