Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Apr 5, 2021

Created on Apr 5, 2021

This interactive scatter plot visualizes missing persons cases in California, plotting age against the year reported missing and coloring each point by gender. Built with React and D3 v5, it renders SVG circles using custom `Marks` components and scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Hovering over a legend item in the `ColorLegend` component highlights matching data points while fading others, using React state to track the selection. The visualization loads CSV data from a GitHub gist through `d3.csv`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Trial of Interactive Color Legend

This interactive scatter plot visualizes California missing persons data, allowing users to explore relationships between attributes like age, county, and gender. A color legend for gender is interactive, highlighting points of a selected category while fading others via React state management and hover events. The visualization uses React components, D3 scales for positioning, and renders as SVG. The data is loaded using D3’s `csv` parser from a GitHub gist, with dropdown menus controlling the X and Y axis attributes.

DDeborah Ong

94% match

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

PPeter Maida

79% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes COVID-19 total cases over time for nine countries, with each country represented by a distinct color. Hovering over a legend item highlights that country’s data points while fading all others. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping. The data comes from the JHU COVID-19 dataset loaded via `d3.csv`, rendered as SVG circles with hover-driven opacity changes through React state.

Aamanoakane

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

77% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event plotted by reported date against total dead and missing. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, while React components render SVG circles for data marks. The code imports data through D3’s `csv` loader, applies date and numeric parsing in the row function, and includes interactive tooltips via SVG `<title>` elements showing formatted dates.

MMatthew Talty Colvard

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

77% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting days since the first attack against distance from it, with points colored by region. Hovering over a region in the color legend highlights matching data points and fades the rest, providing a clear way to explore categorical groupings. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and a custom `ColorLegend` component that tracks hover state.

Eethanjones-git

77% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, where each circle represents a single migration event. The x-axis maps the reported date over time, while the y-axis shows the total number of dead and missing individuals. Built with React and D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, rendered as SVG circles with tooltips revealing exact dates. The code demonstrates reusable components for axes and marks, with data loaded asynchronously via `d3.csv`.

YYedrup

77% match