Scatter plot with color legend

100%

Scatter plot with color legend

✓ Published1🌍 Public

Last edited Jan 3, 2022

Created on Jan 3, 2022

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

92% match

Loading thumbnail…

Scatter plot with React & D3

This scatter plot visualizes the relationship between bill depth and bill length for penguins, using data loaded from a CSV file via `d3.csv`. Each circle represents a penguin, with a native SVG `<title>` element providing tooltip information. Built with React components that render D3 scales, the chart uses `d3.scaleLinear`, `extent`, and `format` for axis ticks, with axes and marks created by custom React components. The visualization demonstrates a React-D3 integration pattern where D3 handles data scaling and formatting while React manages the SVG rendering.

Rrvdv

90% 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…

Scatter Plot with Different Colors

A scatter plot displays penguin bill length against bill depth, with each point colored by species using a D3 ordinal color scale. The visualization loads data from an external CSV file and renders circles in an SVG container. It uses D3 v6 scaleLinear for the axes, scaleOrdinal with schemeCategory10 for colors, and includes axis labels and a legend generated from the color scale's domain.

HHarshithaAmbilpur

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

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

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

86% match