Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Color Legend

✓ Published0🌍 Public
TTrashBoatDora
Last edited Sep 26, 2022
Created on Sep 26, 2022

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with color encoding species and a legend for reference. The visualization uses React with D3 v5, employing `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `extent` to set domains. Marks are drawn as SVG circles with tooltips showing formatted values. The code defines reusable axis and legend components, and loads data via `d3.csv` from a remote URL.

AI-generated description

A scatter plot of The Iris Dataset with color legend.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. A color legend on the right maps each species to a distinct color, while axis labels and tick marks provide context. Built with React and D3 v5, it uses `scaleLinear` for positioning, `scaleOrdinal` for colors, and custom SVG components for axes, marks, and legend. Data is loaded via `d3.csv` and rendered as SVG circles with hover tooltips.

Cchar0496
97% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with points colored by iris species. It uses a color legend to map species to categorical colors. Built with React and D3 v5, the SVG rendering uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` APIs to compute scales, while axes and legend ticks are generated via custom React components. The data is loaded asynchronously from a CSV URL using D3’s `csv` function, with tooltips showing the petal length formatted via `format`.

AAnkit-Ian-53787
96% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width, with points colored by species and accompanied by a color legend. Built with React and D3 v5, it uses d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color encoding. The SVG rendering separates axis, legend, and mark components, with circle elements representing each flower. Data is loaded asynchronously via d3.csv from a GitHub gist, and tick formatting uses d3.format for compact notation.

Ffaqihisaninja
96% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot, encoding petal length on the x-axis, sepal width on the y-axis, and species as color through a categorical legend. It uses D3 scales (scaleLinear, scaleOrdinal) to map data to positions and colors, while React components—AxisBottom, AxisLeft, ColorLegend, and Marks—render the SVG axes, circles, and legend. The data loads asynchronously via d3.csv, and the chart includes native SVG tooltips via the title element.

RRitik Raj
96% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot, encoding petal length on the x-axis, sepal width on the y-axis, and species as color through a categorical legend. It uses D3 scales (scaleLinear, scaleOrdinal) to map data to positions and colors, while React components—AxisBottom, AxisLeft, ColorLegend, and Marks—render the SVG axes, circles, and legend. The data loads asynchronously via d3.csv, and the chart includes native SVG tooltips via the title element.

RRitik Raj
96% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for each sample, with points colored by species using a D3 scaleOrdinal color scale. The visualization is built with React, using D3.forscaleLinear for positioning axes and marks, and renders to SVG. A custom color legend displays the three species, and hovering over a point reveals its petal length via a tooltip. The code imports D3 utilities like `csv`, `scaleLinear`, `scaleOrdinal`, and `format` to load data and manage scales.

AAnthony Le
96% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width and coloring each point by species. The visualization includes axes, tick marks, a species color legend with circular swatches, and hover tooltips displaying formatted x-values. Built with React and D3 v5, it uses `scaleLinear` for positional encoding, `scaleOrdinal` for categorical colors, and `csv` for data loading. The SVG rendering includes custom axis components and circular marks, with the legend positioned to the right of the plot area.

DDanier
96% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the classic Iris dataset, plotting petal length against sepal width for three flower species. Each point is a colored circle, with a legend mapping species to colors, and axis labels clearly identifying the measurements. The visualization uses a React component structure with D3 scales, including `scaleLinear` for axes and `scaleOrdinal` for the color mapping, rendering SVG elements through React. Data is loaded asynchronously via the D3 `csv` utility, and the legend and axes are composed from modular React components.

VVishwanath Hegde
96% match