Skip to main content
SimilarExport ZIP
100%

SharanyaFork of ICE-7: Reusable D3 Scatter Plot

✓ Published2🌍 Public
SSharanyaSriram
Last edited Mar 26, 2023
Created on Mar 26, 2023

This animated scatter plot visualizes the Iris dataset, encoding sepal and petal measurements along the x and y axes while using distinct colors and D3 symbol shapes to differentiate the three iris species. Built as a reusable chart function, it cycles the x-axis variable through all four measurement columns every second. The visualization uses D3 v6 scales, axes, and symbol generators to render the SVG marks, with a legend displaying species colors.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SharanyaFork of ICE-7: Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length for individual iris flowers. The reusable chart, built with D3 v6, uses d3.scaleLinear for axes and d3.symbol with d3.scaleOrdinal to render distinct symbols colored by species (setosa, versicolor, virginica). A legend displays the color mapping, while a setInterval loop cycles through different column pairs every second, dynamically updating the x-axis mapping to explore correlations between sepal and petal measurements. The SVG rendering updates smoothly via a reusable function pattern.

GGogineni44
93% match
Loading thumbnail…

Sharanya ICE 7:Reusable D3 Scatter Plot

This example shows a reusable D3 scatter plot of the Iris dataset, displaying the relationship between sepal length and petal width, with points colored by species. The x-axis automatically cycles through four numeric columns every 1.5 seconds, updating the axis label and circle positions via animation. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` and `scaleOrdinal` for scales, and `axisBottom`/`axisLeft` for axes. The SVG rendering includes a legend and custom labels, all driven by a modular `scatterPlot` function with fluent setters.

SSharanyaSriram
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
89% match
Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species (green for setosa, indigo for versicolor, red for virginica). The visualization cycles through different column pairings every two seconds, animating the axes and point positions across four variable combinations. Built with D3 v6, the example uses a reusable scatterPlot module that employs scaleLinear, extent, axisLeft, and axisBottom to render the SVG chart, with circles encoded with both x/y positions and rx/ry attributes for elliptical shapes.

SSravyaAnnadi
89% match
Loading thumbnail…

ICE-7:Fork of Reusable D3 Scatter Plot

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.

Mmanasanimmagadda13
89% 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
89% match
Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This visualization is an animated scatter plot of the Iris flower dataset, colored by species (setosa, versicolor, and virginica). It cycles through different combinations of sepal and petal measurements every two seconds, allowing viewers to see how the data clusters shift across various dimensions. Built with D3.js (version 6.7.0), the plot uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. The SVG circles are rendered with inline styling, using a `setInterval` loop to update the x-axis mapping and redraw the plot.

SSravyaAnnadi
89% match
Loading thumbnail…

Fork of Reusable Scatter Plot- ICE 7

This animated scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species appears as a distinct color—orange, blue, and black—with a custom legend and labels. Built with D3 v6, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `setInterval` to cycle through measurement columns. Circles are rendered as SVG elements with custom `rx` and `ry` attributes, and axes are drawn using `axisLeft` and `axisBottom`.

Mmandalasaikrishna007
89% match