Fork of ICE 7-1 Reusable Scatter Plot

100%

Fork of ICE 7-1 Reusable Scatter Plot

✓ Published2🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from 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.

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

97% match

Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, encoding species with distinct colors and shapes while mapping petal width and sepal length to the x and y axes. It cycles through four quantitative columns every ten seconds, updating the x-axis domain and point positions with animation. The visualization uses the D3 v6 module API, including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` for shape encoding, with SVG rendering driven by a `setInterval` loop that re-invokes the chart function.

KKarnisrikanth

95% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length with points colored and shaped by species—setosa, versicolor, and virginica. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbol generators to render SVG marks. The axes dynamically cycle through different measurement columns every ten seconds via setInterval, updating the chart through a reusable closure-based chart function that returns getter and setter accessors.

NNikitha123171

94% 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

94% match

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

94% match

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This fork of the ICE 7 reusable D3 scatter plot visualizes the Iris dataset, rendering each flower as a symbol whose shape encodes species and position encodes petal width and sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` within a custom reusable chart function. The plot animates every 15 seconds by cycling the x-axis through four different numeric columns using `setInterval`, updating the scales and re-rendering the SVG dynamically.

NNaimisha-M

94% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This example presents an animated scatter plot of the classic Iris flower dataset, encoding sepal length and petal width measurements. It dynamically cycles through four different attribute pairs on the x-axis every ten seconds, with species distinguished by color (using `d3.scaleOrdinal` and `schemeCategory10`) and unique SVG symbol shapes. Built with D3 v6, the reusable chart leverages `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to update axes smoothly, while the enter-update-exit pattern animates the repositioning of data points.

SSANEEM MOHAMMAD

94% match

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with each point colored by species (setosa, versicolor, or virginica). It cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis scale via D3's `scaleLinear` and `axisBottom`. The visualization is built with a reusable `scatterPlot` function, leveraging D3 v6 modules like `csv`, `select`, and `extent`, rendered as SVG circles with custom fill colors and axis labels.

SSharmilaChowdhari

94% match