Skip to main content
SimilarExport ZIP
100%

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

✓ Published0🌍 Public
KKhatera Alizada
Last edited Feb 6, 2023
Created on Feb 5, 2023

This interactive scatterplot visualizes NOAA monthly climate data from 1946 to 2020 for SFO and Oceanside stations. Users can switch between different temperature metrics using a dropdown menu, while the interactive color legend highlights one station at a time. Built with React and D3 v6, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and coloring. Data is loaded via `d3.csv` from a GitHub gist, with SVG circles rendered through reusable React components like Marks and ColorLegend.

AI-generated description

A scatter sample with dropdown menus and interactive legends

This data was requested and collected from the NOAA.
Created using D3 and js, this time with a menu for the y axis.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes monthly NOAA climate data from SFO and Oceanside stations between 1946 and 2020, plotting temperature measurements against time. Users can switch the y-axis attribute through a React dropdown menu, while hovering over the color legend highlights data points from a specific station. The visualization uses React with D3 v6 scales (scaleTime, scaleLinear, scaleOrdinal) to render SVG circles, with interactive brushing effects applied through opacity changes when legend items are hovered.

Eethanjones-git
98% match
Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes NOAA climate data from two Bay Area stations (SFO and Oceanside) from 1946 to 2020, plotting temperature metrics over time. A dropdown menu lets users switch between four temperature attributes for the y-axis, while a color legend distinguishes the two stations and supports hover highlighting to fade non-selected data. Built with React and D3 v6, the SVG visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, with custom React components for axes, marks, and legend rendering.

EEngineerRajeev
98% match
Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes NOAA monthly climate summaries from 1946–2020 for two Bay Area stations (SFO and Oceanside). A dropdown menu lets users switch the y-axis between temperature attributes, while hovering over the ordinal color legend highlights one station's data points. Built with React, D3 v6 (scales, extent, timeFormat), and SVG rendering, the visualization uses ReactDropdown for selection, d3.csv for loading data, and mouse events on legend circles to toggle highlight opacity.

Ddasari234
97% match
Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

A scatterplot of NOAA monthly summaries from 1946-2020 lets users compare temperature and wind metrics between SFO and Oceanside stations. A dropdown menu switches the y-axis attribute among yearly options, while an interactive legend filters circles by station through mouse hover, dimming non-selected points. Built with React and D3 v6, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, rendering SVG circles with tooltips showing formatted values.

NNikithakatta30
96% match
Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This scatterplot visualizes monthly NOAA climate summaries for two Bay Area stations from 1946 to 2020. A dropdown menu allows users to switch the y-axis among temperature attributes, while an interactive color legend filters the display by station. Built with React and D3 v6, the SVG renderings use `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for station colors. Hovering over the legend dims the non-selected station’s points.

AAsherpranayp
96% match
Loading thumbnail…

SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays monthly NOAA climate summaries for SFO and Oceanside stations from 1946 to 2020, with a dropdown menu to switch between temperature attributes on the y-axis. The visualization uses React with D3 v6 scales and axes, rendering SVG circles colored by station through a ordinal color scale. An interactive legend allows hovering to highlight selected station data by adjusting circle opacity, while tooltips reveal exact temperature values on hover.

AAndre J Denais
95% match
Loading thumbnail…

SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus

A scatterplot displays monthly NOAA climate summaries for SFO and Oceanside from 1946 to 2020, with a dropdown menu to switch between four temperature-related y-axis attributes. React manages the UI state, while D3 v6 handles the scales, axes, and SVG circle rendering, with each point tooltipped by its value. The data loads from a CSV hosted on GitHub, and the axis labels update dynamically based on the user’s selection.

AAndre J Denais
93% match
Loading thumbnail…

SFO NOAA Summary of the Month 1955-2020 with Menus

This interactive scatterplot visualizes monthly NOAA climate summaries for San Francisco from 1955 to 2020. A dropdown menu allows users to switch the y-axis between five meteorological attributes, including average wind speed and temperature extremes. The React-based application uses d3.scaleTime and d3.scaleLinear to map the CSV data, rendering each month as a semi-transparent SVG circle. Datasets are loaded asynchronously via d3.csv, with axes and ticks generated by custom React components.

AAndre J Denais
88% match