Scatter Plot with color

100%

Scatter Plot with color

✓ Published1🌍 Public

Last edited Oct 4, 2021

Created on Oct 4, 2021

A React-based scatter plot visualizes the Iris dataset, plotting sepal length against sepal width. Each point is colored by species using a d3.scaleOrdinal color scale with three categorical colors. The visualization uses React components to render SVG circles for marks and custom axis components built with d3.scaleLinear scales. Hovering over a circle reveals a tooltip with the sepal length value, implemented via a native SVG title element.

AI-generated description

A program that loads data about CSS named colors and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With Color

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width, with each of the three iris species distinguished by a unique color from a d3.scaleOrdinal range. Built with React and rendered as SVG, the chart uses d3.scaleLinear for both axes and d3.format for tick labels. Data is loaded asynchronously via d3.csv. A native SVG `<title>` element provides simple tooltips on each circle.

SSong Tao Chen

96% match

Loading thumbnail…

Scatterplot with Color

This scatterplot displays the Iris dataset, plotting sepal length on the x-axis and sepal width on the y-axis, with each species assigned a distinct color. The visualization uses D3’s `scaleLinear` for positioning, `scaleOrdinal` for color mapping, and React to render SVG circles and axis components. The data is loaded asynchronously via `d3.csv` and parsed into numeric fields. Hovering over a point reveals its sepal length through a native SVG `<title>` tooltip.

Ffjvoris

95% match

Loading thumbnail…

React Scatter Plot w/ Colors

A React scatter plot visualizes the Iris dataset, showing sepal length against sepal width. Each of the three species receives a distinct color via D3's `scaleOrdinal`. The visualization uses D3's `scaleLinear` and `extent` for axes, with custom React components generating SVG ticks and circles. Hovering reveals formatted values via native SVG `<title>` tooltips. Data loads asynchronously from a CSV URL using a custom `useData` hook.

AAnthony Ynami

95% 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

95% match

Loading thumbnail…

Scatter Plot with Colors

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width, with each point colored by species. A color legend allows users to hover over a species to highlight corresponding data points and fade the others, aiding comparison across groups. Built with React and rendered as an SVG, the visualization uses D3 v7 APIs like `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for the categorical color mapping.

GGabriel

95% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. The visualization uses React to render SVG elements, with d3.scaleLinear for positioning and d3.scaleOrdinal for categorical color mapping. Custom React components for axes and marks handle the rendering, while d3.csv loads and parses the dataset. A d3.format function formats tick labels, and the color scheme distinguishes the three iris species.

BBen Brophy

95% 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

94% match

Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris dataset displays petal length against sepal width, with each species represented by a distinct color from an ordinal scale. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and SVG circles with tooltips. Data is loaded asynchronously via `d3.csv` from a remote URL, with axes rendered using custom React components that map tick values through `d3.format`.

Wwindwaver

94% match