2. Penguin Scatter Plot with Color Legend Interaction

100%

2. Penguin Scatter Plot with Color Legend Interaction

✓ Published1🌍 Public

Last edited Apr 2, 2021

Created on Apr 2, 2021

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`.

AI-generated description

A Interactive scatter plot of The Penguin Dataset.

MIT Licensed

Similar vizzes

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

95% match

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…

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

91% match

Loading thumbnail…

Interactive color legend

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.

Rrvdv

89% match

Loading thumbnail…

Penguin Scatter Plot with Menus

This interactive scatter plot visualizes the Palmer Penguins dataset, allowing users to switch both the x- and y-axis attributes between bill length, bill depth, flipper length, body mass, species, and sex. Built with React and D3 v5, it renders the plot as SVG circles with tooltips, axes, and dropdown menus for dynamic attribute selection. The code uses `scaleLinear`, `extent`, and `format` from D3, with React hooks like `useState` and `useEffect` to manage state and load the CSV data via `d3.csv`.

PPrashish Paudel

89% match

Loading thumbnail…

Scatter Plot for Penguin Dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping flipper length and bill length with points colored by species. Built with React and D3 v5, the visualization renders as an SVG with animated transitions. The code uses `d3.csv` to load data and `d3.scaleLinear` for axes, with `d3.axisLeft` and `d3.axisBottom` for chart scaffolding. A second implementation adds user controls through a D3 menu system, enabling dynamic re-mapping of axes.

NNavaneeth-Ragi

89% match

Loading thumbnail…

Penguin Scatter Plot

A scatter plot of the Palmer Penguins dataset, showing the relationship between bill length and bill depth for individual penguins. Each point is rendered as a circle, and hovering reveals the exact bill length. The visualization is built with React and D3 v5, using SVG for rendering. Axes are generated with `scaleLinear` and custom `AxisBottom` and `AxisLeft` components, while the data is loaded asynchronously from a CSV file using the `csv` function.

PPrashish Paudel

88% 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

88% match