Skip to main content
SimilarExport ZIP
100%

horcepower legend highlight

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

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

Scatter Plot with Color Legend

This example displays a scatter plot of cycling race data from the FreeCodeCamp ProjectReferenceData repository, plotting year on the x-axis and race time on the y-axis. The visualization uses D3 v5 scales and axes, with a time format for the y-axis and a linear scale for years. React 16.9 renders the interface, while D3’s `json` loads the dataset. The code includes both a React-based color legend component and circle marks, though the main chart uses D3’s append pattern within a single SVG.

Vvaynexie
70% match
Loading thumbnail…

horsepower

A scatterplot shows gross sales amounts over time for a vacuum cleaner product, colored by currency code. The visualization is built using the Vega-Lite API, which registers with Vega and Vega-Lite to render the chart as an SVG. It loads CSV data from a GitHub gist via d3.csv, with circles sized at 200 pixels and 10% opacity to reveal overlapping points. Axes are customized through a config object, and tooltips display the currency code on hover.

EEnes Gök
70% 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
69% 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
69% 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
68% match
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
68% match