Scatter Plot with Colour

100%

Scatter Plot with Colour

✓ Published1🌍 Public

Last edited Nov 18, 2021

Created on Nov 18, 2021

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width. Each of the 150 data points is rendered as a colored circle, with color encoding species type (setosa, versicolor, virginica) using a d3.scaleOrdinal with a categorical color range. Users can hover over any point to see its petal length value in a native browser tooltip. The visualization is built with React for component management and D3 v5 for scales, axes, and data loading via d3.csv, rendered as SVG with custom AxisBottom and AxisLeft components.

AI-generated description

A Scatter Plot based on Iris Data

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Colour Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each point is colored by species, with a categorical color legend displaying the three species types (setosa, versicolor, and virginica) using distinct colors. Built with React and D3 v5, the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color encoding, and renders as an SVG with circles representing individual data points. The code includes hover tooltips showing the petal length value, and the data is loaded from a CSV file containing 150 iris flower measurements.

CChris Briggs

96% match

Loading thumbnail…

Scatterplot with Color

This interactive scatterplot visualizes the Iris dataset, plotting petal length against sepal width. Each flower specimen appears as a circle colored by species using d3.scaleOrdinal with a categorical color palette. The visualization is built with React and D3 v7, using SVG rendering for precise control. Axes are generated with d3.scaleLinear, and circles include native SVG `<title>` elements providing tooltips on hover. Data is loaded asynchronously from a CSV file using d3.csv, with numeric parsing applied to measurement columns.

KK3zter

96% match

Loading thumbnail…

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 distinct hues. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and SVG for rendering. Hovering reveals tooltips via native SVG `<title>` elements.

Ssophburke

96% match

Loading thumbnail…

Scatter Plot with Color

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each point is colored by species using a d3.scaleOrdinal with a categorical color range. The visualization is rendered as an SVG using React, with axes generated by custom AxisBottom and AxisLeft components that use d3.scaleLinear and tick formatting via d3.format. Tooltips display the petal length value for each circle.

WWill Carter

96% match

Loading thumbnail…

Scatter Plots with Color

This interactive scatter plot visualizes the Iris flower dataset, showing petal length against sepal width. Each point is colored by species using a categorical color scale, and hovering reveals a tooltip with the formatted petal length. Built with React and D3 v5, the visualization uses React components for axes and marks, with D3's `scaleLinear` and `scaleOrdinal` for positioning and coloring. SVG rendering handles the circles, while a custom tick formatter appends units to axis labels.

Llefat92

96% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal width against petal length for individual flowers. Each circle is colored by species using a D3 ordinal color scale, with a tooltip revealing the petal length on hover. The visualization is built with React and rendered as an SVG, using D3’s scaleLinear for axes and scaleOrdinal for categorical colors. Axis components and data marks are structured as modular React components, and the dataset is loaded via D3’s csv parser.

Nnpelliccia

96% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. Each point is colored by species using a d3.scaleOrdinal with a categorical color range. The visualization uses React components for rendering SVG elements, with d3.scaleLinear for the x and y axes. Axes are constructed manually from d3 scale ticks, and hover tooltips display the petal length value via SVG title elements.

CCurran Kelleher

96% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width. Each point is colored according to the species of the flower, using a categorical color scale from `d3.scaleOrdinal`. The visualization is built with React and rendered as SVG, using `d3.scaleLinear` for the axes and data mapping. Hovering over a point reveals the petal length via a tooltip using the SVG `<title>` element. The data is loaded asynchronously from a CSV file using `d3.csv`.

Aaakarsh satyam

96% match