Skip to main content
SimilarExport ZIP
100%

Fork of dv.35 - interactive color legend

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

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.

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

Fork of dv.35 - interactive color legend

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.

HHowardHan99
93% 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 visualizes the Iris dataset, mapping petal length against sepal width. Users can hover over the color legend to highlight data points belonging to a specific species, with non-matching points fading to 20% opacity. The visualization is built using React and D3 v5, with SVG rendering. It uses `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and React state to manage hover interactions.

SStudentCZ
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
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatterplot of the Iris flower dataset lets users explore relationships between four measured attributes (sepal length/width, petal length/width) by selecting which attribute appears on each axis via drop-down menus. Points are colored by the three Iris species, with a color legend that fades the opacity of non-hovered classes and filters the underlying data on hover. Built with React and D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and renders marks as SVG circles with tooltips.

Eexchoco
93% 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
93% match