Fork of Fork of dv.35 - interactive color legend

100%

Fork of Fork of dv.35 - interactive color legend

✓ Published0🌍 Public

Last edited Jun 4, 2021

Created on Jun 4, 2021

Forked from 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.

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

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…

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 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 scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species in the color legend highlights only that species’ points while dimming the others. Built with D3 v5 scales and React components, the visualization uses SVG circles for marks and implements hover interactions through React state and mouse events. The color legend uses `d3.scaleOrdinal` and supports opacity fading via the `fadeOpacity` prop.

JJoshuoYang

93% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width and encoding species by color. Users can hover over a species in the color legend to highlight corresponding data points while dimming others to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles for marks. The legend leverages mouse events to trigger state changes that filter the rendered data, creating a focused comparison between species groups.

JJONATHAN SIMON

93% match