SPAC_ Interactive Color Legend

100%

SPAC_ Interactive Color Legend

✓ Published3🌍 Public

Last edited May 16, 2021

Created on May 16, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

legend mark

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

EEnes Gök

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

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

74% match

Loading thumbnail…

SPAC IPO Counts and Proceeds Stacked Bar Charts

This interactive visualization displays SPAC IPO counts and proceeds as stacked bar charts, with bars segmented by company and colored by mission status. A dropdown menu lets users switch the x-axis attribute between company name, country, or rocket status. The chart is rendered using the vega-lite-api library with vega-lite and vega, while React manages the UI state and dropdown interactions. Hovering over bars reveals tooltips with mission counts, and the data comes from a CSV file containing IPO counts, proceeds, year, and type information.

Ppnlinyz

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

74% match

Loading thumbnail…

Interactive Color Legend with Menus

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.

AAlaouiadnane

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

73% match