Skip to main content
SimilarExport ZIP
100%

Fork of IC6 Iris Dataset Scatter Plot

✓ Published0🌍 Public
VVenkata Sai Preetham
Last edited Jun 26, 2022
Created on Jun 26, 2022

This scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal length across three species of iris flowers. Each species is color-coded—blue for setosa, red for versicolor, and black for virginica—using SVG circles rendered with D3’s `scaleLinear` and `extent` functions. The visualization is built with React and D3 v6, using a decoupled architecture where `VizWrapper` manages the SVG container and the `viz` function handles the rendering, including axes generated with `axisLeft` and `axisBottom`.

AI-generated description

This viz is a starter that demonstrates patterns used in real world projects in which complexity is anticipated to scale.

  • Decoupled React & D3 integration
  • Opening moves for scalable complexity
  • Industry standard ES modules and JSX
  • Copy-paste into existing projects

Any questions? Ask on Twitter!

Also viewable in:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris dataset, showing the relationship between petal length on the x-axis and petal width on the y-axis. Points are colored by species (setosa, versicolor, virginica) using blue, red, and black, with circles that also encode sepal dimensions through their rx and ry attributes. The example demonstrates a decoupled React and D3 integration, where the `useData` hook loads and parses CSV data, and the `viz` function uses d3.scaleLinear, d3.extent, and d3.csv to render SVG circles and axes. The rendering approach combines React state management with D3’s selection and join methods inside a window-sized SVG.

VVenkata Sai Preetham
93% match
Loading thumbnail…

IC6 Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris dataset, showing petal length against sepal length. Each point is colored by species (setosa, versicolor, virginica) to reveal clustering patterns in flower measurements. The visualization demonstrates a clean React and D3 integration, using d3.scaleLinear for axis scaling, d3.axisLeft and d3.axisBottom for tick marks, and a d3.selection join to render SVG circles. Data loads asynchronously via d3.csv into the React state, with layout dimensions derived from the window size.

VVenkata Sai Preetham
92% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal width on the y-axis, with points colored by species (blue for setosa, yellow for versicolor, red for virginica). Built with React and D3 v6, it uses `d3.csv` to load data, `d3.scaleLinear` with `d3.extent` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes. Data is rendered as SVG circles via `selectAll().data().join()`, with custom axis labels styled in red.

Vviswak12
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes while coloring points by species (setosa, versicolor, and virginica). Using D3 v6, the code loads the CSV data, applies linear scales via `scaleLinear` and `extent`, and renders circles with SVG. It also passes sepal measurements as `rx` and `ry` attributes, though these do not affect circle radius, which remains fixed. Axes are drawn with `axisLeft` and `axisBottom`.

Ppreethamkesa
91% match
Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against petal width for individual flowers. Each point is colored by species, using blue, red, and black to distinguish setosa, versicolor, and virginica. The visualization uses D3 v6 APIs including `select`, `scaleLinear`, `extent`, and `axisBottom` to map data to SVG circles, with point radius fixed while sepal dimensions are encoded as rx and ry attributes on the circle elements. The chart fills the entire browser window.

DDivyaVellanki
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and petal width on the y-axis. Each point is colored by species (setosa, versicolor, or virginica), though the code also loads sepal dimensions without displaying them. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Circles are rendered as SVG elements with `selectAll` and `join`, with axis labels added via SVG text elements.

MMeghanaArepalli
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species (blue for setosa, red for versicolor, black for virginica). The code loads the data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders the circles as SVG elements using `selectAll` and `join`, while also storing sepal measurements for potential use. Axes are added with `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire viewport.

Ppreethamkesa
91% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris Dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (setosa, versicolor, virginica) via a custom marker function. Built with vanilla HTML and D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The data loads from a remote CSV using `d3.csv`, and the plot fills the browser window, with marks carrying additional sepal measurements as unused `rx` and `ry` attributes.

Ppreethamkesa
91% match