Skip to main content
100%

ICE-7 Reusable Scatter Plot with Menu

✓ Published0🌍 Public
Bbharathsivakumar07
Last edited Jul 3, 2022
Created on Jul 2, 2022

This interactive scatter plot displays daily wind measurements from multiple weather stations over time, with each station represented by a distinct color in an ordinal color scale. A dropdown menu lets viewers switch the y-axis among five different wind attributes, including sustained wind speed and peak wind direction. Hovering over a color legend item triggers React’s state management to fade non-selected stations by 80%, isolating their data points for comparison. Built with React and SVG, the visualization uses D3 v6 utilities like `scaleLinear`, `scaleTime`, and `scaleOrdinal` for axes and coloring, while the `react-dropdown` library powers the menu, all rendered from CSV data fetched via D3’s `csv` function.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes