Fork of dv.35 - interactive color legend

100%

Fork of dv.35 - interactive color legend

✓ Published1🌍 Public

Last edited Jun 4, 2021

Created on Jun 4, 2021

Forked from dv.35 - interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species. Users can select which attributes appear on the x and y axes via React Dropdown menus or swap them with the AxisSwap button. Hovering over the color legend highlights circles of that species by reducing the opacity of others. The visualization uses React with D3 v6 scales (scaleLinear, scaleOrdinal), SVG rendering, and custom axis and legend components.

AI-generated description

A scatter plot of The Iris Dataset.

--
Datavis 2020 #35

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of dv.35 - interactive color legend

This interactive scatter plot visualizes the classic Iris dataset, using color to distinguish species. A legend with circles and text labels enables hovering to highlight a selected species and fade the others, while also adjusting axis opacity. Users can swap the X and Y axes between sepal and petal measurements using dropdowns and a swap button. Built with React and D3 v6, the visualization uses `scaleLinear`, `scaleOrdinal`, `extent`, and `cs` for data loading and rendering SVG marks and axes.

Jjun-yu172

97% match

Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements. The visualization uses a color legend for species, which supports hover interactions that dim non-matching data points. Users can swap the X and Y axes via a dedicated control, with dropdowns to select attributes. Built with React and D3 v6, the SVG renderings use `scaleLinear` and `scaleOrdinal` for positioning and color encoding, with data loaded from a CSV file.

HHowardHan99

96% match

Loading thumbnail…

dv.35 - interactive color legend

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting axes via React dropdowns or swapping them with a button. The visualization uses D3 scales for positioning and an ordinal color scale to encode species, rendered as SVG circles. An interactive color legend highlights points of a selected species by fading others, implemented with React state and mouse event handlers.

Zzach b.

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup

94% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with points colored by species. A color legend on the right allows users to hover over a species name, which fades all non-matching points to 20% opacity while highlighting the selected group. The visualization uses React for the interface, d3.v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders as SVG. The code also includes native tooltips showing the x-axis value on hover.

TTOLBA Rafik

93% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot of the Iris dataset maps petal length against sepal width, with each species represented by a distinct color. Users can hover over the color legend to highlight points of a particular species while dimming all others, using React state for hover tracking. The visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading and scaling, with SVG rendering through React components for axes, marks, and the interactive legend.

Eevers-codeshop-ai

93% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot shows the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend to the right of the plot allows hovering over a species name to highlight the corresponding points and fade all others. The visualization is built with React and D3's scaleLinear, scaleOrdinal, and csv loading functions, rendering SVG marks and axes. Hover interactions are managed through React state, with fading applied by adjusting opacity on both the legend entries and data circles.

Hhung2606

93% match