Skip to main content
SimilarExport ZIP
100%

Color Legends

✓ Published1🌍 Public
Llefat92
Last edited Aug 20, 2023
Created on Aug 20, 2023

This scatterplot displays the Iris dataset, plotting petal length against sepal width. Each flower is represented by a circle colored according to species, with a categorical color legend indicating the mapping. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, rendered as SVG via React. Axes, tick formatting, and interactive tooltips are implemented using reusable React components that call d3 APIs like extent, format, and scale functions.

AI-generated description

A program that loads in the Iris data set and and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color Legends

This interactive scatterplot displays measurements from the Iris flower dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React components with D3 scales, including d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Hovering over a color legend item dims non-matching data points while highlighting the selected species, demonstrating interactive filtering through React state management and SVG circle elements with tooltips.

11993-INDALKAR
96% match
Loading thumbnail…

Color Legend Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. A categorical color legend distinguishes the three iris species via a d3.scaleOrdinal color scale with custom ranges. The visualization uses React components to render SVG elements, with d3.scaleLinear for both axes and separate AxisBottom, AxisLeft, Marks, and ColorLegend components. Data is loaded asynchronously using d3.csv from a remote Gist URL.

TTsaiJie
95% match
Loading thumbnail…

Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. A color legend categorizes the three iris species, and hovering over a legend item highlights the corresponding points while fading the rest. The visualization uses React with ReactDOM, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and renders SVG circles with tooltips. Data is loaded asynchronously via `csv`, and interactivity is managed through React state hooks.

AAnthony Zornig
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Zzyniax
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length versus sepal width for individual flowers. A color legend on the right encodes species membership using an ordinal color scale. Built with D3 v5 and React, the visualization uses SVG for rendering. The axes are generated by custom components using D3’s scaleLinear, while the legend and marks are rendered with React components that map data to SVG circles.

CCurran Kelleher
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is rendered as a circle using SVG, with color encoding species membership through a categorical color scale. The visualization includes axes, axis labels, and an interactive color legend that logs species names on hover. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading.

Wwenleicao
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is colored by species using a categorical ordinal scale, with a custom color legend placed to the right. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. The SVG rendering includes custom React components for axes, marks, and the legend, with tooltips showing formatted petal length values.

TTaweewat Somboonpanyakul
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing how sepal and petal measurements vary across three flower species. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal with schemeCategory10 for color encoding, and React components to structure the SVG rendering. Each circle represents a flower sample, with color indicating species and a color legend displaying the categorical mapping. The axes are generated using d3.axisBottom and d3.axisLeft, while circle elements include tooltip titles for hover details.

Vvaynexie
95% match