SFO NOAA Summary of the Month 1955-2020 with Menus

100%

SFO NOAA Summary of the Month 1955-2020 with Menus

✓ Published2🌍 Public

Last edited Sep 25, 2020

Created on Sep 24, 2020

Forked from SFO NOAA Summary of the Month 1955-2020

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.

AI-generated description

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…

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

92% match

Loading thumbnail…

SFO NOAA Summary of the Month 1955-2020

This scatterplot displays the average monthly temperature at San Francisco Airport from 1955 to 2020, with each point representing a single month's reading. The chart uses a time-scaled x-axis for dates and a linear y-axis for temperatures, with circles colored in teal. Built with React and D3 v6, it renders SVG elements, including axes and circle marks, while loading CSV data from a NOAA gist. The code employs D3's `scaleTime`, `scaleLinear`, `extent`, and `csv` functions to process and map the data.

AAndre J Denais

90% 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

90% 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

89% 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

89% match

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

88% match

Loading thumbnail…

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

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.

KKhatera Alizada

88% match

Loading thumbnail…

SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot visualizes daily climate measurements at San Francisco International Airport from 2015 to 2020. A dropdown menu lets users switch which weather attribute—such as wind speed, humidity, or temperature deviation—is plotted on the y-axis against time. A color legend identifies data points by station, with hover states that fade non-matching points for comparison. Built with React and D3 v6, the SVG visualization uses `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` for station colors, and fetches its CSV data from a remote gist via a custom `useData` hook.

AAndre J Denais

88% match