Skip to main content
SimilarExport ZIP
100%

Interactive color legend

✓ Published0🌍 Public
Rrvdv
Last edited Jan 6, 2022
Created on Jan 3, 2022

This interactive scatter plot visualizes penguin measurements of bill depth and length, colored by species. The visualization uses React with D3 v7 to render SVG circles, mapping species to an ordinal color scale. An interactive color legend allows users to hover over a species name, which triggers a cross-filtering effect: other species' marks fade to 20% opacity while the selected species remain prominent. The axis components are custom-built, utilizing D3’s scaleLinear with nice ticks and a formatter that abbreviates large numbers.

AI-generated description

https://www.youtube.com/watch?v=2LhoCfjm8R4&t=30512

MIT Licensed

Similar vizzes

Loading thumbnail…

Penguin Scatter Plot With Interactive Color Legend

A scatter plot of penguin bill length versus bill depth, colored by species using a D3 ordinal color scale. The visualization uses React for component structure and renders as SVG. An interactive color legend allows users to hover over species names to highlight corresponding data points, applying a fade effect to non-selected species. Data comes from a cleaned penguins CSV dataset loaded via d3.csv.

PPrashish Paudel
93% match
Loading thumbnail…

Rough of 2. Penguin Scatter Plot with Color Legend Interaction

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill length and bill depth for three penguin species. Users can hover over the color legend to highlight points from a specific species while fading all others. The visualization uses React with D3 scales and SVG rendering, including `scaleLinear` for axes and `scaleOrdinal` for categorical colors. The `ColorLegend` component manages hover interactions, while `Marks` renders the circles with tooltips via SVG `<title>` elements.

PPrashish Paudel
89% match
Loading thumbnail…

2. Penguin Scatter Plot with Color Legend Interaction

This interactive scatter plot visualizes the Palmer Penguins dataset, showing bill length against bill depth for three penguin species. The SVG visualization uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) to position circles colored by species. A color legend on the right implements hover interaction: mousing over a species name fades all other points to 20% opacity while highlighting the selected species. The chart includes formatted axes and a native SVG tooltip via the `<title>` element, with data loaded asynchronously from a remote CSV using `d3.csv`.

PPrashish Paudel
89% match
Loading thumbnail…

Scatter plot with color legend

This scatter plot visualizes the relationship between bill depth and bill length for penguin species, colored by species with a categorical legend. The React-based visualization uses D3 v7 scales (scaleLinear, scaleOrdinal) to map data to SVG circle positions and colors, with data loaded from a CSV file. Custom axis components generate tick marks and labels, while tooltips display formatted values on hover.

Rrvdv
89% match
Loading thumbnail…

Penguins Scatter

This interactive scatter plot visualizes the penguins dataset, allowing users to explore relationships between four physical measurements—bill depth, bill length, body mass, and flipper length—for three species. The visualization uses D3’s scale functions (`scaleLinear`, `scaleOrdinal`) to map data to SVG circles, with React managing state for axis selections and hover interactions. Users can switch the X and Y axes via dropdown menus, and hovering over a species name in the color legend highlights only that species’ points by fading others. The plot includes labeled axes and a legend, rendered with SVG elements and custom React components.

AAnthony Ynami
87% match
Loading thumbnail…

Scatter plot with color

This scatter plot displays the relationship between bill depth and bill length for penguins, with each point colored by species. Built with React and D3 v7, it renders as an SVG using modular components for axes and marks. The data loads from a remote CSV via `d3.csv`, and the visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for species-based coloring, and `extent` to set the domain. The axis labels are rotated, and tick marks are styled with a light gray color.

Rrvdv
86% match
Loading thumbnail…

Penguins!

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between bill depth and bill length for three penguin species. Users can hover over the color legend to highlight points from a specific species while fading the others. Built with D3 v5 and React, the visualization uses scales from d3-scale, renders SVG circles via React components, and loads data with d3.csv.

CCurran Kelleher
85% match
Loading thumbnail…

Interactive Color Legend

This example shows an interactive scatter plot of the Iris Dataset, where hovering over a species name in the color legend dims all points except those belonging to that species. The visualization uses React to manage hover state and render SVG elements, while d3.scaleOrdinal, d3.scaleLinear, and d3.extent handle color and positional scales. Marks are drawn as circles, and the legend triggers mouse events to filter the data for highlighting.

YYenTingWu
84% match