Skip to main content
SimilarExport ZIP
100%

ICE7

✓ Published0🌍 Public
Kkpavithrasai@gmail.com
Last edited Mar 29, 2026
Created on Mar 29, 2026
Forked from CV: Scatter Plot

This example displays a scatter plot of the Iris dataset, mapping sepal length to the x-axis and sepal width to the y-axis. Each of the 150 data points is rendered as a circle, colored by species. The visualization is built with React, using D3 v7’s selection and data join methods to render SVG circles and axes, with linear scales created via `d3.scaleLinear`. Clicking a circle highlights it with a white fill and black stroke, demonstrating interactive selection within the chart.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6 - Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping sepal length against sepal width for 150 samples. The visualization uses a React frontend with D3 v7, leveraging `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Circles are rendered with d3’s data join, featuring interactive click selections that highlight the chosen data point with white fill and black stroke. The SVG output includes labeled axes and animated transitions on circle styling, with data loaded from a CSV file and parsed into numeric values.

Bbrodyoneal10@gmail.com
91% match
Loading thumbnail…

ice-7 resuable scatter plot

This example visualizes the Iris dataset, plotting petal length against petal width. Each point is colored by species (setosa, versicolor, or virginica) using a simple switch statement, and the circle’s horizontal and vertical radii are set to the sepal length and width values, respectively. Built with React and D3 v6, it uses the `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, create scales, and render SVG axes and circles. The chart fills the browser window, with large tick text and axis labels for clarity.

Pprashanth yamala
91% match
Loading thumbnail…

ICE7

This scatterplot visualizes the Iris dataset, comparing sepal length against sepal width across three species. The chart uses D3.js scales and axes to map the quantitative dimensions, while a color scale distinguishes species, with hover interactions on the legend highlighting corresponding data points through opacity changes. The SVG rendering is built with D3.js selection and join methods, loading data from a CSV file containing Fisher's Iris measurements.

Ssrinathkarumuru@my.unt.edu
90% match
Loading thumbnail…

ICE7

This example visualizes the Iris dataset using a reusable scatter plot built with D3.js. It animates through different numeric attribute pairings on the x-axis every two seconds, while color-coded circles represent the three iris species—setosa, versicolor, and virginica—in yellow, purple, and green. The plot uses D3 scales, axes, and data joins to render SVG circles, with each mark’s size and position driven by sepal and petal measurements. The code includes a custom scatterPlot factory function to manage margins, scales, and axis updates.

Ssowmyanagula@my.unt.edu
90% match
Loading thumbnail…

ICE7

This visualization displays the Iris dataset as a scatter plot, mapping petal width on the x-axis against sepal length on the y-axis using D3 v7. The code loads data from a CSV URL, scales the coordinates with `scaleLinear`, and renders teal circles with a black stroke via SVG. Axes are drawn using `axisBottom` and `axisLeft`, while the chart fills the browser window.

Ssrinathkarumuru@my.unt.edu
90% 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
90% 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
90% match
Loading thumbnail…

ICE-6

This example visualizes the relationship between sepal width and sepal length for iris flowers using a scatterplot. It shows individual data points as green circles, with sepal width on the x-axis and sepal length on the y-axis. The visualization is built with React and D3 v7, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `csv` to load the Iris dataset from GitHub. The code explicitly parses numeric values for both dimensions and renders the plot in SVG format, with clear axis labels.

66264kusuma@gmail.com
90% match