Skip to main content
SimilarExport ZIP
100%

Fork of ICE - 7 Reusable Scatter Plot

✓ Published1🌍 Public
RRadhakrishna246
Last edited Mar 28, 2022
Created on Mar 28, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE - 7 Reusable Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, with three species of flowers colored red, orange, or white, mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom to generate axes and SVG circles for data points. The reusable scatterPlot function dynamically updates the x-axis value to cycle through additional iris columns, demonstrating modular chart construction. Data is loaded via d3.csv from a GitHub gist.

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

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). Using D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, it implements a reusable scatter plot function. Every two seconds, a `setInterval` cycles through different columns—petal_width, sepal_width, petal_length, sepal_length—switching the x-axis dimension and updating SVG circles via data joins.

Ssumitradevipolina
94% 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
93% match