Skip to main content
SimilarExport ZIP
100%

Fork of ICE 7-1 Reusable Scatter Plot

✓ Published0🌍 Public
NNikitha123171
Last edited Mar 25, 2023
Created on Mar 25, 2023

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.

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

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying points colored and shaped by species (virginica, versicolor, and setosa) using D3.js v6. The reusable chart implementation, adapted from "Towards Reusable Charts," plots petal width against sepal length, with axes automatically updating every 10 seconds to cycle through different variable combinations. The chart supports dynamic transitions via SVG path elements, scales from `d3.scaleLinear`, and ordinal scales for categorical color and symbol mapping.

Ssnehareddygurram
96% match
Loading thumbnail…

Fork of ICE - 7 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, visualizing relationships between sepal and petal dimensions. Each point is colored by species (setosa, versicolor, virginica) and uses a distinct symbol shape via d3.symbol and scaleOrdinal. The plot cycles through different X-axis variables every five seconds using setInterval, re-calling the scatterPlot function. Built with d3.scaleLinear, axisLeft, and axisBottom, the visualization renders as animated SVG paths and includes an on-page legend.

NNitheeshSama
95% match
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, cycling through different measurement pairs on the x-axis to compare sepal and petal dimensions. It uses D3 v6 to render SVG circles, with colors encoded by iris species and a reusable chart module (scatterPlot) that handles axes and scales. The visualization updates automatically every few seconds, rotating through petal width, sepal width, petal length, and sepal length, while a legend maps species to colors. The code integrates D3 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to generate the axes and scales.

Vvinodreddysagam929@gmail.com
95% match
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, cycling through different measurement pairs on the x-axis to compare sepal and petal dimensions. It uses D3 v6 to render SVG circles, with colors encoded by iris species and a reusable chart module (scatterPlot) that handles axes and scales. The visualization updates automatically every few seconds, rotating through petal width, sepal width, petal length, and sepal length, while a legend maps species to colors. The code integrates D3 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to generate the axes and scales.

Vvinodreddysagam929@gmail.com
95% match
Loading thumbnail…

Fork of ICE- 7 Reusable Scatter Plot

This visualization displays the Iris Dataset as a scatter plot of petal width against sepal length, with each species colored according to the d3.schemeCategory10 ordinal scale. The chart uses d3.scaleLinear for both axes and d3.axisLeft/axisBottom for gridlines. A setInterval updates the x-axis variable every 10 seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. Data points render as SVG paths with d3.symbol shapes differentiated by species, animated through D3’s data join and update pattern.

Bbhanuprasadk19
95% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This scatter plot visualizes the Iris flower dataset, positioning each specimen by its petal width against sepal length with a fixed channel mapping color to species (red for setosa, orange for versicolor, white for virginica). Built with D3 v6, it leverages the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct axes and render SVG circles. The visualization demonstrates a reusable scatter plot module that updates its x-axis mapping cyclically through the dataset’s numeric columns, though the current example only displays one configuration.

RRadhakrishna246
95% match
Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This scatter plot displays the Iris dataset, mapping petal width along the x-axis and sepal length along the y-axis. Each flower species is represented by a distinct SVG symbol, rendered using D3’s `scaleOrdinal`, `symbol`, and `symbolGenerator`. The chart reads CSV data asynchronously via `d3.csv` and builds axes with `axisLeft` and `axisBottom`. It follows a reusable chart pattern, exposing configuration methods like `.width()`, `.height()`, and `.margin()` for customization. The visualization uses D3 v6 and is styled with the Share Tech font in SVG.

NNikitha123171
95% match