Skip to main content
SimilarExport ZIP
100%

SFO 2015-2020 DailyClimateData with Menus & Legend

✓ Published2🌍 Public
AAndre J Denais
Last edited Nov 5, 2020
Created on Nov 3, 2020

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.

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…

HistogramPractice Corpus Christi & SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot displays daily climate measurements from Corpus Christi and San Francisco International Airport stations between 2015 and 2020, sourced from NOAA. A dropdown menu lets users switch between five wind-related y-axis attributes, while each point represents a daily observation colored by station. A brushable time-series histogram at the bottom filters the main scatterplot by date range, and hovering over the color legend highlights points from a selected station with reduced opacity. The visualization uses React with D3 v6 scales, axes, brushing, and ordinal color mapping rendered as SVG circles.

AAndre J Denais
89% 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
Loading thumbnail…

Corpus Christi & SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot lets users explore daily climate data from two NOAA stations, Corpus Christi and San Francisco, between 2015 and 2020. A dropdown menu switches between five wind-related variables plotted on the y-axis. Points are colored by station using a D3 ordinal scale, and hovering over the legend highlights that station's points while fading the others. Built with React and D3 v6, the visualization renders as SVG with axes generated by `AxisBottom` and `AxisLeft`.

AAndre J Denais
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
85% 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
85% 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
85% 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
84% 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
84% match