Scatter plot with colors

100%

Scatter plot with colors

✓ Published1🌍 Public

Last edited May 2, 2024

Created on May 2, 2024

This example visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. Each point is colored by species using a categorical color scale. The visualization is built with React and D3 v5, using `scaleLinear` to map data to coordinates and `scaleOrdinal` for species colors. Axes are rendered as SVG elements, with numeric formatting applied to tick labels via D3’s `format` function.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This example visualizes the Iris dataset, encoding petal length on the x-axis and sepal width on the y-axis. Each flower is a circle colored by its species using a categorical color scale. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and `format` for tick labels. SVG primitives render the chart, while the data is loaded asynchronously via the `csv` utility.

MMorgan Worrell

97% match

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…

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

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

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, 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