Skip to main content
SimilarExport ZIP
100%

Fork of ICE 7 Reusable D3 Scatter Plot

✓ Published3🌍 Public
Ssaiteja0725
Last edited Mar 28, 2022
Created on Mar 28, 2022

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.

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 interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the axes while using different symbols to represent each flower species. The visualization automatically cycles through four data columns every 15 seconds, updating the x-axis to explore different variable relationships. Built with D3.js version 6.7.0, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to create an SVG chart with animated transitions. The reusable chart component demonstrates a modular approach to data visualization.

Ttejasviprasad06@gmail.com
96% 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
95% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the Iris dataset, where each flower species is represented by a distinct symbol from d3.symbol. The plot visualizes sepal length against petal width, with axes generated using d3.axisLeft and d3.axisBottom. A d3.scaleOrdinal maps species to symbol types, while d3.scaleLinear handles the x and y scales. Every 15 seconds, the x-axis dynamically switches between four numeric attributes—petal width, sepal width, petal length, and sepal length—using setInterval to re-render the chart with updated scales and positions.

Mmanvithareddykarra
95% match
Loading thumbnail…

Fork of ICE 7: Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, encoding sepal length against petal width. Built with D3.js (v6), it uses SVG rendering and a reusable `scatterPlot` function. Points are colored by species and use distinct D3 symbols (circle, square, triangle). A legend identifies the species, and axis labels update dynamically. Every 1.5 seconds, the x-axis cycles through different petal and sepal measurements via `setInterval`, demonstrating how the chart re-renders with new data mappings. Data is loaded from a CSV URL and parsed with `d3.csv`. Axis scales are created using `d3.scaleLinear` and `d3.extent`.

JJAIDEEP BOMMIDI
95% 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
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-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