Skip to main content
SimilarExport ZIP
100%

Fork of dv.35 - interactive color legend

✓ Published1🌍 Public
HHowardHan99
Last edited Oct 19, 2021
Created on Oct 19, 2021

This interactive scatter plot visualizes the Iris dataset, mapping population attributes via dropdown menus with an axis-swap control. The color legend, built with D3’s `scaleOrdinal`, highlights points by country, dimming non-hovered marks via opacity changes. React manages state and renders SVG circles, axes, and labels, while D3’s `csv` loads the external data file.

AI-generated description

A scatter plot of The Iris Dataset.

--
Datavis 2020 #35

MIT Licensed

Similar vizzes

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
93% match
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
92% match
Loading thumbnail…

Fork of 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.

Eeourm20
92% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Hovering over a species label in the color legend fades non-matching points to 20% opacity while highlighting the selected group. Built with React and D3 v5, the code uses `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, rendering SVG circles and axes via reusable components. The color legend triggers hover events through React state to dynamically filter and emphasize data points.

MMatthew Talty Colvard
90% 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
90% 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
89% 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
89% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width while color-coding data points by species. Hovering over a species name in the color legend highlights only that species' points and fades the rest, using React state and event handlers. Built with React and d3.scaleOrdinal, d3.scaleLinear, and d3.extent, the SVG rendering includes custom axes and a color legend component. The code loads CSV data via d3.csv and displays tooltips through SVG `<title>` elements.

Rrajibbanerjee
89% match