Fork of Fork of Fork of ICE 7-1 Reusable Scatter Plot

100%

Fork of Fork of Fork of ICE 7-1 Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from 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.

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 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.

KKarnisrikanth

95% match

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

95% match

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

94% 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

93% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, cycling the x-axis through four flower measurements while keeping petal width on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisBottom and axisLeft for grid lines. SVG circles are colored by species—orange, blue, and black—with a static legend and rotating axis labels via setInterval. The reusable scatterPlot function manages the chart structure and updates.

RRupeshGandham

93% match

Loading thumbnail…

Fork of ICE 7 Reuse Scatter Plot

This visualization displays the Iris Dataset as an animated scatter plot, cycling through four different axes every 10 seconds to reveal patterns across sepal and petal measurements. Using d3.v6 with SVG rendering, the chart employs d3.scaleOrdinal to assign unique colors and symbol shapes to each species. The reusable chart pattern from Bostock’s “Towards Reusable Charts” is implemented via a scatterPlot function, with d3.axisLeft and d3.axisBottom updating dynamically as the x-value changes.

Aajaysonu

93% 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

93% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different combinations of Iris flower measurements, displaying sepal and petal dimensions on the x- and y-axes. The visualization uses D3 v6 to render circles colored by species (setosa, versicolor, virginica) with a custom legend, while a `setInterval` triggers updates to the axis scales and labels. Data comes from a CSV of the classic Iris dataset loaded via `d3.csv`. The code leverages reusable chart patterns from `scatterPlot.js` with `scaleLinear`, `axisLeft`, and `axisBottom` APIs, alongside a fixed y-axis label for sepal length.

RRupeshGandham

92% match