ICE-7:Fork of Reusable D3 Scatter Plot

100%

ICE-7:Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings on the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3.js, it employs a reusable chart API with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Points are colored by species via `scaleOrdinal`, and the SVG circles animate through a `setInterval` loop, with a legend and custom Share Tech font styling.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through four measured features (petal width, sepal width, petal length, and sepal length) every two seconds. The visualization colors each data point by species—blue for setosa, red for versicolor, and yellow for virginica—using D3.js v6. It demonstrates a reusable scatter plot component built with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, updating the x-axis domain and circle positions via `setInterval`. The SVG rendering includes styled axes and white-stroked circles on a black background.

SSaiSreya1

93% match

Loading thumbnail…

Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, cycling through different variable pairings on the x-axis every 15 seconds while the y-axis remains fixed on sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft`, rendering SVG paths with custom symbols via the `symbol` generator to distinguish species. The chart is built as a reusable function following the Towards Reusable Charts pattern, with axes and marks updating dynamically through `selection.join` and interval-driven re-calls.

PPujitha14challagulla

93% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. The plot cycles through four variable combinations on the x-axis every three seconds, while the y-axis remains fixed on sepal length. Built with D3.js version 6.7.0, the visualization uses SVG rendering and animation. The code implements a reusable scatter plot component with configurable scales, axes, and symbol types, following the "Towards Reusable Charts" pattern. The Iris data is loaded from a GitHub gist, with points symbolized by species.

NNaveenrajaYalagandula

92% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, with each flower's species distinguished by both color and point shape. The chart animates every 10 seconds, cycling through the four measured dimensions on the x-axis while keeping sepal length constant on the y-axis. Built with D3 v6, the visualization uses `scaleLinear` and `axisBottom` to configure scales and axes, while `scaleOrdinal` maps species to shape and color. The `join` operation efficiently updates SVG paths, enabling smooth transitions between data dimensions.

NNeeharikaGali

92% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with each species represented by a distinct SVG symbol. Built as a reusable chart module using D3 v6, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` for positioning and symbol encoding. The axes and points update dynamically every 15 seconds as the x-axis cycles through four measurement columns. The visualization uses an SVG rendering approach with animated transitions between attribute mappings.

Bbindhureddy98

92% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, encoding flower species through both color and symbol shapes. The visualization cycles through four numeric attributes every ten seconds, updating the x-axis scale to display different variable combinations. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` for color and shape mapping, and `axisBottom`/`axisLeft` for rendering. SVG paths represent data points with transitions between updates, while `setInterval` drives the automatic axis changes. The dataset includes sepal and petal measurements for three iris species.

NNeeharikaGali

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot animates through the Iris flower dataset, cycling the x-axis through four measured attributes while keeping sepal length on the y-axis. Data points are colored by species (setosa in red, versicolor in cyan, virginica in grey) and rendered as SVG circles. The visualization uses d3.csv for data loading, d3.scaleLinear and axis components from D3 v6, with a setInterval driving the rotating axis selection and plot redraw.

MManideepChakilam

92% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, mapping sepal length against petal width. Built with D3.js, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbols` to render SVG marks. The plot cycles its x-axis through four flower measurements every 15 seconds, creating an animated exploration of correlations. Data is loaded from a remote CSV, and the chart is constructed as a reusable function with configurable accessors for dimensions, data, and scales.

Ssaiteja0725

92% match