Skip to main content
SimilarExport ZIP
100%

Scatter Chart with Color

✓ Published1🌍 Public
RRichardPearce60
Last edited Feb 24, 2022
Created on Feb 24, 2022

This interactive scatter chart displays the Iris dataset, plotting sepal and petal measurements against each other with points colored by species. Users can dynamically switch which measurement appears on each axis via dropdown menus. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical color mapping, and SVG circles for rendering data points. The code demonstrates reusable axis and mark components with React state management.

AI-generated description

Iris Scater Chart [Iris Data] (https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv)

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React with d3.v5 scales, including scaleLinear for positioning and scaleOrdinal to encode species identity with distinct colors. SVG circles render the data points with tooltips showing exact values, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The code employs d3.csv for data loading and d3.format for axis tick formatting.

MMrMartin85
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The chart displays data points colored by species, with dropdown menus to switch which attributes appear on the x and y axes. Built with React and D3 v7, it uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical coloring, and d3.csv, d3.extent, and d3.max for data processing and scale domains. SVG rendering with React components handles axes, marks, and hover tooltips.

JJoe Hutchins
95% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The chart uses color encoding to distinguish species, with dropdown menus to switch which quantitative attributes are plotted on the x- and y-axes. Built with React and D3 v5, it renders SVG circles for each data point, using d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.extent for domain computation. Data is loaded asynchronously via d3.csv from a remote source.

SSam Hege
95% match
Loading thumbnail…

Scatter Plot with Color

Interactive scatter plot of the Iris dataset using React, D3 v5, and SVG, which visualizes relationships between sepal and petal measurements. Users can switch the X and Y axes via dropdown menus to explore different attribute combinations. A categorical color scale (`d3.scaleOrdinal`) distinguishes the three iris species, with `d3.scaleLinear` mapping numeric coordinates. The plot includes formatted axes and tooltips showing values on hover.

RRajat Dangat
95% match
Loading thumbnail…

Scatter plot with colour

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically select which numeric attributes appear on the x and y axes, with the chart updating through React state management. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and renders SVG circles through a reusable Bars component. Data loads asynchronously via d3.csv from a remote gist, with axis ticks styled through CSS classes and formatted using d3.format.

Jjackcaldwellnichols
95% match
Loading thumbnail…

Scatter Plot With Color

This interactive scatter plot visualizes the Iris dataset, plotting continuous measurements (sepal width, sepal length, petal width, petal length) against one another with points colored by species. Users select attributes for the X and Y axes via React dropdown menus, which update the chart reactively. The visualization uses React, D3 scales (`scaleLinear`, `scaleOrdinal`), and renders SVG circles, axes, and a color legend. Data is loaded asynchronously with `d3.csv`, and the chart includes labeled axes, a species-based legend, and tooltips showing formatted values.

NNick Pearson
95% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, letting users explore relationships between sepal and petal measurements across three flower species. Color encodes species, while dropdown menus dynamically select which attributes map to the x and y axes. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and SVG circles rendered by custom React components. Axis components generate ticks and labels, while `csv` loads the remote dataset. A native SVG `<title>` element provides hover tooltips.

AAudrey
95% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus switch which numeric attribute appears on the x- and y-axes, while a categorical color scale distinguishes the three iris species. Powered by React and D3 v5, the SVG visualization uses `scaleLinear`, `scaleOrdinal`, and `csv` to load and render data from a GitHub gist, with axis and mark components built from reusable React functions.

Ccynichole
95% match