Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color

✓ Published1🌍 Public
Tthomasjungcoe
Last edited Mar 18, 2021
Created on Mar 18, 2021

This interactive scatter plot visualizes the Iris dataset in SVG, mapping petal length and sepal width against a categorical color scale for species. Users change the X and Y axes through React dropdown menus. The visualization uses React with d3.v5 for scales, axes, and color encoding, with custom AxisBottom, AxisLeft, and Marks components rendering circles with tooltip titles.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with Color

This interactive scatter plot visualizes the Iris Dataset, using color to encode species alongside selectable X and Y axes. Users can switch between sepal and petal measurements via React dropdowns, with axes and scales updating dynamically. The visualization is built with React components rendering SVG circles, while D3 v5 handles data loading, linear scaling, ordinal color mapping, and axis generation.

FFloorNummer
96% 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
96% match
Loading thumbnail…

Scatter Plot with Color

This interactive scatter plot visualizes the Iris dataset, plotting measurements like petal length and sepal width against each other. It uses color to distinguish the three Iris species, with a dropdown menu letting users select which attributes appear on the X and Y axes. Built with React, D3, and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components that leverage D3's `scaleLinear` and `scaleOrdinal` for scaling, along with tooltips showing values on hover.

CCodeDuckie99
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 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, 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
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 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 interactive scatter plot visualizes the Iris Dataset, displaying species colored by a categorical scale. Using React with D3 scales, the chart allows users to select which sepal and petal measurements appear on the x and y axes via dropdown menus. The SVG rendering employs `scaleLinear` and `scaleOrdinal` to map data values to positions and colors, with tooltips showing exact values on each point.

SShuyu Zheng
95% match
Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris dataset displays sepal width against petal length, with each point colored by species using an ordinal color scale. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv to load data. Interactive dropdown menus allow switching between four numeric flower measurements for both axes, while SVG circles include native tooltip titles.

TThomas Cormican
95% match