Skip to main content
SimilarExport ZIP
100%

legend mark

✓ Published0🌍 Public
EEnes Gök
Last edited Dec 2, 2021
Created on Dec 2, 2021

This example visualizes SPAC investment data as an interactive scatter plot, showing the relationship between current price and annualized return for various companies. Each point is colored by sector and sized by market cap, with a color legend on the right. Hovering over a legend item highlights the corresponding sector’s points while fading others, using React state and `onMouseEnter` handlers. The chart is rendered with SVG via D3 scales (`scaleLinear`, `scaleOrdinal`, `scaleSqrt`) and React components, reading CSV data through `d3.csv`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

SPAC_ Interactive Color Legend

This interactive scatter plot visualizes SPAC investment data, plotting annualized returns against current price with circles sized by market cap. A color legend on the right encodes sector membership; hovering over a legend category fades unrelated points and highlights only the selected sector. Built with React and D3 v5, it uses `scaleOrdinal` for colors, `scaleSqrt` for circle radius, and React state (`useState`) to manage hover interactions. The legend component applies opacity transitions dynamically, while native SVG `<title>` elements provide tooltips with investment details.

Ppnlinyz
89% match
Loading thumbnail…

Fork of SPAC_ Interactive Color Legend

A React and D3.js scatter plot visualizes SPAC performance, plotting current price against annualized return for each company. Circles are sized by market cap and colored by sector through an ordinal color scale. Users can hover over the interactive color legend to highlight points from a specific sector while dimming the rest. Data comes from a CSV file loaded via `d3.csv`, with all marks rendered as SVG circles.

Aayonghosh2003
87% match
Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz
81% match
Loading thumbnail…

legend date

This scatterplot displays daily GrossAmount values over time, with each point colored by its price category through a categorical ordinal scale. The visualization includes an interactive color legend that highlights points matching the hovered value while fading others. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map date, price, and color encodings, rendering circles as SVG marks. Data comes from NOAA, loaded via `d3.csv`, with axes generated by custom `AxisBottom` and `AxisLeft` components.

EEnes Gök
79% match
Loading thumbnail…

horcepower legend highlight

A scatter plot of financial data displays GrossAmount over Date, with each point sized by GrossAmount and colored by Name. Hovering over a legend entry highlights only the corresponding data points while fading the rest to 20% opacity. The visualization is built with React, D3 v5 scales (`scaleLinear`, `scaleOrdinal`, `scaleSqrt`), and SVG rendering, using CSV data from a GitHub gist.

EEnes Gök
74% match
Loading thumbnail…

Interactive Color Legend for game publishers

A scatter plot maps global video game sales against release year, with each point colored by publisher. An interactive color legend on the right highlights a selected publisher by dimming all other points, while the legend itself fades in sync. Built with React and D3 v5, it uses SVG circles for marks, `scaleOrdinal` for color mapping, and a custom `ColorLegend` component with mouse events to toggle the hover state. Data comes from a CSV of videogame sales loaded via `d3.csv`.

VVamsi Bhargav Sukamanchi
73% 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
72% match
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
72% match