Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Reusable D3 Scatter Plot- ICE7

✓ Published0🌍 Public
Hharika-1929
Last edited Jul 3, 2022
Created on Jul 3, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Reusable Scatterplot

This interactive scatterplot visualizes a car dataset, plotting various numerical attributes like mileage, price, horsepower, and displacement against each other in an animated loop. The visualization includes a legend with colored markers for car brands (Honda, Mercedes, Ferrari) and dynamically updates the x-axis every two seconds to cycle through data attributes. Built with D3.js, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for chart construction, and `setInterval` for animation. The data is loaded via `csv()` from a remote CSV file, with SVG rendering handling all graphical elements.

Mmanojgne
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

Animated scatter plot of Los Angeles museum attendance data, cycling through four different x-axis variables (Avila Adobe, Firehouse, Chinese American, and America Tropical) while mapping years to colored points. The visualization uses D3 v6 with a reusable `scatterPlot` module, SVG rendering, and `setInterval` to progressively swap the x-axis values. It includes a custom legend with year labels, axis labels, and a title, drawing from CSV data loaded via `d3.csv`.

SSravyaAnnadi
85% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot- ICE7

This visualization shows an animated scatter plot of iris data, cycling through four different yield measurements on the x-axis while the y-axis remains fixed. Colored circles represent three sites (StPaul, Duluth, and Morris) with distinct colors, and the chart includes a legend, axis labels, and a title. The plot updates every few seconds using `setInterval`, swapping the x-value mapping among the dataset columns. It uses D3 v6 with the `csv` loader, `scaleLinear`, `axisLeft`, `axisBottom`, and custom reusable chart functions from `scatterPlot.js`, rendering SVG elements with animated transitions.

MMgk1255
85% 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
85% match
Loading thumbnail…

Fork of ICE-6 Scatter Plot

This interactive scatter plot lets users explore the relationship between any two variables from the auto-mpg dataset by switching columns via dropdown menus. Rendered as an SVG with D3 v5, the visualization uses `scaleLinear` for axes and `dropdownMenu` to bind selections to x and y coordinates. The code parses numeric fields with `+d.mpg` and updates the plot dynamically through callbacks, demonstrating reusable D3 components for data-driven comparisons.

RRevanthGrreddy
84% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, cycling the x-axis through four flower measurements while keeping petal width on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisBottom and axisLeft for grid lines. SVG circles are colored by species—orange, blue, and black—with a static legend and rotating axis labels via setInterval. The reusable scatterPlot function manages the chart structure and updates.

RRupeshGandham
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

An animated scatter plot of the Iris dataset cycles through four flower measurements on the x-axis while keeping petal width fixed on the y-axis. The visualization uses D3 v6’s `selectAll`, `data`, `join`, and `scaleLinear` to render SVG circles colored by species, with `setInterval` updating the x-scale domain and axis labels every few seconds. Data is loaded from a CSV via `d3.csv`, and the reusable chart module `scatterPlot.js` encapsulates the axes and marks.

Ppravallikayaram12
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through the Iris dataset's four numeric attributes on the x-axis while keeping sepal length fixed on the y-axis, with points colored by species (orange, blue, black). Built with D3 v6, the visualization uses `setInterval` to update the x-scale domain and axis via a reusable `scatterPlot` function, rendering SVG circles and labels. Data loads from a CSV using `d3.csv`, with elements re-bound and joined on each interval tick.

RRakshithaRao27
83% match