Skip to main content
SimilarExport ZIP
100%

Color Scatter Plot

✓ Published1🌍 Public
11993-INDALKAR
Last edited Nov 1, 2021
Created on Nov 1, 2021
Forked from Scatter Plot

This color scatter plot displays the Iris flower dataset, plotting petal length against sepal width with points colored by species. The visualization uses React with D3 v5 scales and SVG rendering. The `scaleLinear` functions map the data dimensions to pixel coordinates, while `scaleOrdinal` assigns distinct colors to each species. Custom `AxisBottom` and `AxisLeft` components generate ticks, and the `Marks` component renders circles with tooltips displaying population values.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Each point is colored by species using a d3.scaleOrdinal with a categorical color range, and the plot includes labeled axes with tick marks formatted using d3.format. The visualization is built with React, rendering SVG elements through reusable AxisBottom, AxisLeft, and Marks components that leverage d3.scaleLinear for positioning and d3.extent for domain calculation.

Jjwlam83
96% 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 code uses React, D3 v6, and SVG rendering, with `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `csv` to load data from a GitHub gist. Custom `AxisBottom` and `AxisLeft` components generate ticks, while the `Marks` component draws circles with tooltips.

TTaweewat Somboonpanyakul
95% match
Loading thumbnail…

Scatterplot with color

This scatterplot visualizes the Iris dataset, displaying petal length against sepal width for different iris species. Each circle represents a flower, with color encoding its species via a categorical ordinal scale. The visualization is built using React and D3 v5, leveraging the `scaleLinear`, `scaleOrdinal`, and `extent` APIs to map data to SVG coordinates and colors. Axes are rendered as custom React components, with tick marks and labels styled through CSS. Data originates from the classic Iris dataset, loaded asynchronously via D3’s CSV parser, and tooltips show values on hover.

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

Color Scatter Plot

This color scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is represented as a colored circle, with the color scale mapping to the species attribute using a D3 ordinal scale with three distinct colors. The visualization is built with React and rendered as an SVG, using D3's scaleLinear for the x and y axes, which include formatted tick labels and axis titles. Hovering over a point reveals its exact value through an SVG title tooltip.

TTsaiJie
95% 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
95% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each data point colored by species using an ordinal color scale. It uses React with D3 v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders circles in SVG. Tooltips reveal exact petal length values, and the axes include formatted tick labels and clear axis titles.

Cching-tw
95% match