Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend with Menus

✓ Published1🌍 Public
AAlaouiadnane
Last edited Feb 19, 2020
Created on Feb 19, 2020

This interactive scatter plot explores the College Dataset, showing relationships between academic metrics like enrollment, admissions, and faculty qualifications. Users dynamically select which attributes appear on the x and y axes using React dropdown menus, while the color legend distinguishes public versus private institutions. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleOrdinal` for positioning and coloring, rendering as SVG. Hovering over legend items filters the displayed points and fades non-matching data, providing an interactive way to compare institutional characteristics.

AI-generated description

A scatter plot of The College Dataset.

Enroll: number of new students enrolled. Phd: Percent of faculty with Ph.D's Private: Public/Private indicator.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between academic attributes such as applications, enrollment, and faculty credentials. Users select X and Y axes via dropdown menus, while a color legend distinguishes public from private institutions. Hovering over legend items highlights matching points and fades others using React state management. The visualization uses D3 scales and SVG rendering, with React components for axes, marks, and interactive controls, demonstrating a React-D3 integration pattern for exploratory data analysis.

AAlaouiadnane
98% match
Loading thumbnail…

Interactive Color Legend with Menus

An interactive scatter plot of the College Dataset explores relationships among academic metrics. Dropdown menus switch the X and Y attributes, while hovering over the ordinal color legend highlights points from either public or private institutions by fading non-matching circles. The React and D3 v5 implementation uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage selections and hover interactions, rendering the SVG marks with reusable axis and legend components.

AAlaouiadnane
97% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot explores the relationship between two user-selected attributes from the College Dataset, showing each institution as a circle colored by its public or private status. Two dropdown menus, built with ReactDropdown, control which numeric columns (such as Enroll, PhD, or Outstate) appear on the x and y axes. A custom color legend, implemented as an SVG component, highlights points of one category on hover while fading the others, using d3.scaleOrdinal for color mapping and d3.scaleLinear for axis scales. All marks and axes render as React components with d3 scales, with data loaded asynchronously via d3.csv.

AAlaouiadnane
96% match
Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between attributes like enrollment numbers and faculty PhD percentages, with points colored by public/private status. Users select X and Y axes from dropdown menus built with ReactDropdown, while hovering over the color legend highlights matching points and fades others. The visualization uses React for component composition, D3 scales for positioning and color mapping, and renders data as SVG circles with axis components from D3.

Yyinhao0424
96% match
Loading thumbnail…

College Interactive Color Legend

A scatter plot of the College Dataset displays enrollment numbers versus the percentage of faculty with PhDs, with points colored by public or private institution. An interactive color legend filters the visualization: hovering over a legend item highlights the matching points while fading others, using React state for hover tracking. The visualization is built with React and D3 v5, using scaleLinear for axes, scaleOrdinal for colors, and SVG for rendering. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAlaouiadnane
89% match
Loading thumbnail…

College Interactive Color Legend

This example visualizes the College Dataset, plotting PhD percentage against enrollment numbers for each institution, with color encoding the public or private status. Built with React and D3 v5, it uses a custom SVG renderer with scales for the axes and a categorical color scale for the legend. The interactive color legend allows hovering to highlight data points of a selected category, fading the rest, which is implemented through React state management and event handlers on the legend circles.

Yyinhao0424
87% 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
84% match
Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Interactive Colour Legend)

This interactive scatter plot displays the classic Iris dataset, letting users choose any two attributes for the x- and y-axes via React dropdown menus. The visualization uses an interactive color legend where hovering over a species name dims all other points, highlighting the selected species. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` to map measurements and species to positions and colors, rendering all marks as SVG circles.

RRyAlpha
84% match