Skip to main content
SimilarExport ZIP
100%

Fork of SPAC_ Interactive Color Legend

✓ Published0🌍 Public
Aayonghosh2003
Last edited Jun 7, 2021
Created on Jun 7, 2021

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.

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
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
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
85% match
Loading thumbnail…

Fork of Reusable Scatter PLot

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

Sserebryanaya.n@gmail.com
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. Users can hover over the color legend to highlight a selected species while dimming all other data points. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. React manages state for hover interactions, while SVG elements render the axes, legend, and data marks. The code also includes reusable AxisBottom, AxisLeft, ColorLegend, and Marks components.

AAnkit-Ian-53787
76% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup
76% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup
76% match
Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset uses React and D3 v5 to position circles by petal length and sepal width, colored by species. Hovering over a legend entry fades unrelated marks and highlights only the matching species. The visualization includes custom React components for axes, marks, and an interactive color legend built with SVG. Data loads via d3.csv from a GitHub gist and scales come from d3.scaleLinear and scaleOrdinal.

EElliot Hill
76% match