Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
117761A04F1
Last edited Mar 13, 2023
Created on Mar 12, 2023

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.

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 SCATTER PLOT - WITH DIFFERENT SHAPES - IRIS DATASET

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.

Aakhilgupta11
93% match
Loading thumbnail…

Reusable Scatter Plot - With Different Shapes- ICE7

This example presents a reusable scatter plot built with React and D3.js, visualizing the Iris dataset. It uses D3 scales and axes to map petal width and sepal length, while a `scaleOrdinal` with `symbols` generates distinct shapes for each species. The visualization automatically cycles through different X-axis columns every 15 seconds using `setInterval`, demonstrating dynamic updates. The chart is rendered as SVG with animated transitions, and the code leverages D3's `csv` loader, `axisLeft`, `axisBottom`, and `symbolGenerator` to create an interactive and adaptive plot.

NNavaneeth-Ragi
93% match
Loading thumbnail…

Fork of Fork of Fork of ice 7 Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationships between sepal and petal measurements across three species of iris flowers. Using the D3.js library within a React framework, the visualization animates through four different column pairings, cycling the x-axis between petal width, sepal width, petal length, and sepal length every few seconds. Each data point is colored by species (black, blue, or pink), with a legend identifying the categories, while the SVG rendering includes axis labels, a title, and a dynamic species legend.

NNeeharikaGali
92% match
Loading thumbnail…

ICE-7 - Fork for Reusable_D3_Scatter_Plot.

This interactive scatter plot, built with React and D3, visualizes the Iris dataset, mapping petal and sepal measurements. The plot cycles through four x-axis variables on a timer, animating the data points with D3's `selectAll` and `join` operations. It uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and renders via SVG. Data is loaded from a CSV URL, and the visualization includes a custom color legend for species, with `setInterval` driving the periodic updates.

Aav.dj.2000@gmail.com
92% match
Loading thumbnail…

ICE 7 - Reusable Scatter Plot

This example presents a reusable scatter plot built with React and D3, visualizing the Iris dataset. It displays petal width against sepal length, with points colored by species (red for setosa, black for versicolor, green for virginica). The visualization includes axes and labels, and cycles through different column pairings every 140 milliseconds, animating the scatter plot as it updates the x and y values. The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to handle scaling and axes, rendering SVG circles via a custom `scatterPlot` function.

NNITIN0601
92% 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
92% 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
92% match
Loading thumbnail…

ICE 7 - Reusable D3 ScatterPlot.

This example presents an animated scatterplot of the Iris dataset, cycling through different petal and sepal measurements on the x-axis while the y-axis remains fixed on sepal length. The visualization uses D3 v6 within a React framework, rendering SVG circles whose colors correspond to iris species. A reusable `scatterPlot` function, built with `scaleLinear`, `axisLeft`, and `axisBottom`, handles the axes and marks, while `setInterval` triggers periodic updates to the x-axis mapping. The code also includes custom legend labels and axis titles generated dynamically.

NNaveen Kumar
92% match