Skip to main content
SimilarExport ZIP
100%

Fork of Fork of ICE 7-1 Reusable Scatter Plot

✓ Published1🌍 Public
KKarnisrikanth
Last edited Mar 25, 2023
Created on Mar 25, 2023

This example shows the Iris Dataset as a scatter plot of petal width against sepal length, with each of the three species distinguished by color and a unique symbol shape. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for mapping species to colors and shapes from d3.symbol, and d3.axisBottom and d3.axisLeft for ticks. Every ten seconds, the x-axis variable cycles through four measurements, animating the plot via a setInterval that updates the scatter plot’s xValue accessor and re-renders the SVG.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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
96% 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
96% 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 Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example renders the classic Iris dataset as a reusable scatter plot in D3 v6. It uses d3.scaleLinear and d3.axisBottom/axisLeft to map petal width against sepal length, with d3.scaleOrdinal assigning distinct colors and SVG symbol shapes by species. The chart updates every 10 seconds, cycling through different x-axis columns via setInterval, demonstrating dynamic axis transitions. Data is loaded asynchronously from a CSV URL using d3.csv.

KKarnisrikanth
95% 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 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 ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It animates through all four numeric measurements by updating the x-axis every ten seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. The plot uses D3 v6's `scaleLinear`, `scaleOrdinal`, and `axisBottom` APIs to render SVG symbols, with distinct shapes and colors for each species. Data is loaded from a CSV file via `d3.csv`, and the visualization updates dynamically by re-calling the scatter plot function with new x-value mappings.

KKarnisrikanth
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