Skip to main content
SimilarExport ZIP
100%

ICE 7 - REUSABLE SCATTER PLOT - WITH DIFFERENT SHAPES - IRIS DATASET

✓ Published1🌍 Public
Aakhilgupta11
Last edited Mar 11, 2023
Created on Mar 10, 2023
Forked from HTML Starter

This interactive visualization presents the classic Iris dataset as a scatter plot, with each flower species rendered using a distinct D3 symbol shape. Data points plot petal width against sepal length, and the x-axis automatically cycles through the four measurement columns every 15 seconds, updating the visualization with animation. Built as a reusable React component, it leverages D3 scales (scaleLinear, scaleOrdinal), axes (axisLeft, axisBottom), and symbol generators to create the marks. The SVG rendering updates dynamically as the axis changes, offering a live exploration of relationships within the dataset.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width against sepal length with distinct SVG symbols representing each species. Built with D3 v6 and React, the chart uses `scaleLinear`, `scaleOrdinal`, and the `symbol` generator to render data points. Every 15 seconds, the x-axis automatically cycles through different floral measurements (petal width, sepal width, petal length, sepal length) using a `setInterval` loop, dynamically updating the plot while axes and points animate via D3's join pattern.

TTejaswi@3271
93% match
Loading thumbnail…

ICE #7 - Reusable Scatterplot Iris Dataset

This interactive scatterplot explores the classic Iris dataset, displaying measurements of sepal and petal dimensions across three flower species. The visualization cycles through different feature combinations on the x-axis while the y-axis remains fixed, with colored elliptical markers distinguishing species. Built with React, D3.js, and SVG animation, it uses the `scaleLinear`, `axisLeft`, and `axisBottom` APIs for scaling and axes, while `setInterval` drives the sequential feature rotation. The chart reads CSV data from a remote source, fitting axes and plotting points for each iteration.

KKevin Raj
93% match
Loading thumbnail…

Fork of ICE 7 - REUSABLE SCATTER PLOT - WITH DIFFERENT SHAPES - IRIS DATASET

A reusable scatter plot built with D3 and React visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each of the three Iris species appears as a distinct SVG symbol shape (circle, square, or diamond) generated with `d3.symbol` and `scaleOrdinal`, with colors assigned via a separate ordinal scale. The chart updates every 15 seconds by cycling the x-axis through four measurement columns using `setInterval`, re-rendering the plot with animated transitions. Axes are created with `axisLeft` and `axisBottom`, and the visualization fills the window with a custom "Share Tech" font style.

117761A04F1
93% match
Loading thumbnail…

ICE-7 Reusable Scatter Plot

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. The visualization uses the D3.js library loaded via React, rendering points as SVG circles whose colors map to three Iris species. It incorporates a dynamic legend and axis labels that update with each animation frame, driven by D3's `setInterval` and the reusable `scatterPlot` function.

BBhanuMotupalli
92% match
Loading thumbnail…

ICE7 reusable

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal length for three species of iris flowers. The visualization cycles through different x-axis variable combinations every 2.1 seconds, enabling comparisons across all four floral measurements. Built with React and D3 v6, the code uses the `scaleLinear`, `scaleOrdinal`, and `axisBottom` APIs to render SVG circles and axes, with a `setInterval` timer driving the animation. Data is loaded from a CSV file via D3's `csv` parser.

Vvegurusaiprathyusha
92% match
Loading thumbnail…

ICE7.1 Reusable_D3_Scatter_Plot.

This animated scatter plot visualizes Iris flower measurements, cycling through different feature combinations on the x-axis while plotting petal width against sepal length. The visualization uses D3.js v6 with SVG rendering and animation, leveraging scales (scaleLinear), axes (axisLeft, axisBottom), and data loading via d3.csv. Circles are colored by species (red, violet, orange) with a legend, and the plot updates every few seconds to display different variable pairings from the Iris dataset.

KKetha
92% match
Loading thumbnail…

ICE7-reusable scatter plot

This visualization displays the Iris dataset as a scatter plot, animating through different attribute combinations on the x-axis while showing petal width and sepal length on the y-axis. Circles represent individual data points, colored by species with a legend for Setosa, Versicolor, and Virginica. Built with React and D3, the code uses `csv` loading, `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot` to render SVG elements. A `setInterval` timer cycles through petal_width, sepal_width, petal_length, and sepal_length for dynamic x-axis updates, with custom styling from the Share Tech font.

Nnavyasrimeka9@gmail.com
92% match
Loading thumbnail…

Reusable scatter plot ICE-7

This interactive scatter plot uses the Iris dataset to explore relationships between four flower measurements. It cycles through different x-axis variables every two seconds, showing petal width versus sepal length, with points colored by species. Built with React and D3.js, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circle elements. A legend with colored markers identifies the three Iris species, while the chart title and axis labels update dynamically.

Vvagdevi-369
92% match