Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot

✓ Published1🌍 Public
Vvarun-030
Last edited Mar 27, 2022
Created on Mar 27, 2022
Forked from Scatter Plot

This scatter plot visualizes the Iris dataset, encoding petal length and width as the x and y coordinates while also mapping sepal length and width to the `rx` and `ry` attributes of each circle. The code uses D3 v6 functions such as `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` within a React-independent SVG rendering context. Each species receives a distinct fill color, and the plot loads CSV data via `d3.csv` with explicit numeric parsing.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It also attaches sepal length and width values as redundant radius properties on the SVG circles, though these do not affect the visual size. The code loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom` in an SVG element within a React-less HTML page.

Rrohinikotha
95% match
Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width along the x and y axes while coloring each point by species (setosa, versicolor, virginica) in blue, red, and purple. The code loads data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders SVG circles with `selectAll().join()`. Axis labels are added with `axisLeft` and `axisBottom`, while the plot also encodes sepal measurements as `rx` and `ry` attributes, though these do not visually alter the circle shapes.

RRakshithaRao27
94% match
Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers. Each circle is color-coded by species using a d3.scaleOrdinal with a custom range, and axes are rendered with d3.scaleLinear and custom React components. The d3.csv loader parses numeric fields, while React components handle SVG rendering of axes and marks.

Oonceup
94% match
Loading thumbnail…

Fork of Scatter Plot for Iris DataSet

This scatter plot visualizes the Iris dataset, displaying petal length and width for three species of iris flowers, each marked by a distinct color. Built with React and D3 v6, the visualization uses `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map values to SVG circle positions. The code creates axes with `d3.axisLeft` and `d3.axisBottom`, and applies non-standard `rx` and `ry` attributes to the circles, which are not used for scaling. Data is sourced from a GitHub gist.

Rrohinikotha
94% match
Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset by mapping petal length and sepal width for individual flowers. Each circle is colored by species using a D3 ordinal scale. The React-based code uses `d3.scaleLinear` and `d3.scaleOrdinal` to position and color the marks, rendered as SVG `circle` elements, with `d3.csv` loading the data for display.

PPiotr Paszek
94% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v7 providing the linear scales (`scaleLinear`) that map data values to pixel coordinates. Axis components generate ticks and labels, while circular marks represent each data point. The chart includes a tooltip showing the x-axis value for each point. The dataset is loaded asynchronously via D3's `csv` function from a remote gist URL.

AArefa Patwary
94% match
Loading thumbnail…

Fork of Fork of Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The visualization encodes additional sepal dimensions as circle radii, using the `rx` and `ry` attributes. Built with React and D3 v3, it uses `d3.csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG, with custom margins, axis labels, and a large canvas-sized layout.

Bblikitha
94% match
Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal color scale, with axes rendered as React components. The code loads CSV data via d3.csv, applies linear scales for positioning, and uses React with SVG to render the visualization with tooltips on each mark.

AAnnie Ulichney
94% match