Skip to main content
SimilarExport ZIP
100%

Fork of Trial of Interactive Color Legend

✓ Published0🌍 Public
DDeborah Ong
Last edited Apr 5, 2021
Created on Apr 5, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

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

DDeborah Ong
94% match
Loading thumbnail…

Trial of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, using the D3.js version 5 library within a React framework to render SVG elements. Users can select which attributes to display on the X and Y axes via dropdown menus, with the initial setup showing species data colored by unique categories. The visualization includes an interactive color legend that allows users to hover over categorical labels to highlight specific data points while fading the others, implemented through custom React components that manage hover state and opacity transitions.

DDeborah Ong
79% 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
78% 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
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…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting total students against department on linear scales. Users can hover over the color legend to highlight points of a selected gender category while fading others, using React’s `useState` to manage hover state. The visualization uses `d3.scaleOrdinal` for categorical colors, `d3.scaleLinear` for axes, and renders SVG circles via React components. Data loads asynchronously from a CSV using `d3.csv`.

KKeerthiKandadai
77% match
Loading thumbnail…

Fork of Interactive Color Legend

This example shows an interactive scatter plot of the Iris Dataset, where hovering over a species name in the color legend fades all non-matching data points and highlights the selected group. The visualization uses React components to render SVG circles scaled with d3.scaleLinear and colored by d3.scaleOrdinal, while the legend interacts through mouse events managed by React state.

CCherynJ
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