ICE-7 Reusable Scatter Plot with Menu
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 descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.