SFO Peak Wind History 2015-2020

100%

SFO Peak Wind History 2015-2020

✓ Published0🌍 Public

Last edited Sep 18, 2020

Created on Sep 18, 2020

Forked from SFO Peak Wind History 2015-2020

This scatterplot displays daily peak wind speed at San Francisco International Airport from 2015 to 2020, with each semi-transparent circle representing a day’s measurement. Larger circles and reduced opacity reveal the underlying distribution and density of wind speeds across time, sourced from NOAA climate data. The visualization uses React with D3 v6, employing `scaleTime` and `scaleLinear` for axes, custom `AxisBottom` and `AxisLeft` components for ticks, and SVG circles with tooltips rendered via the `Marks` component.

AI-generated description

A variant of the original viz that uses larger circles and opacity to tease out the distribution/patterns more.

This data was requested and collected from the NOAA.

MIT Licensed

Similar vizzes

Loading thumbnail…

SFO Peak Wind History 2015-2020

This chart plots daily peak wind speed at San Francisco International Airport from 2015 to 2020 as a scatterplot, with each circle representing a day’s measurement. The x-axis shows time while the y-axis displays wind speed, and hovering reveals the exact value via SVG `<title>` tooltips. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and reusable axis components to render the visualization in SVG. Data comes from NOAA daily climate records.

AAndre J Denais

97% match

Loading thumbnail…

SFO Peak Wind Speed 2015-2020 with Vega-Lite API

This visualization displays daily peak wind speeds at San Francisco International Airport from 2015 to 2020 as a scatterplot, with each semi-transparent circle representing a day’s measurement. The data is loaded from a NOAA CSV via d3.csv, while the chart itself is built declaratively using the Vega-Lite API, registering Vega and Vega-Lite for rendering. Custom axis and label styling in config.js improves readability, and the plot is rendered as a full-window SVG with tooltips provided by vega-tooltip.

AAndre J Denais

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

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

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

80% match

Loading thumbnail…

SFO Daily Departure From Normal Average Temperature 2015-2020

The chart displays daily temperature departure from the normal average at San Francisco Airport (SFO) from 2015 to 2020, with each point representing one day’s deviation. The visualization uses a React and D3 v6 setup, rendering an SVG scatterplot with d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis. Data is loaded via d3.csv from NOAA’s public dataset, and each circle includes a native SVG `<title>` element for basic tooltip functionality. The axes are constructed using custom React components that map D3 scales to SVG elements.

AAndre J Denais

79% match

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

77% match

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays daily temperature readings in San Francisco over time, with each circle representing a data point plotted along date and temperature axes. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `scaleTime` and `scaleLinear` for axes, `extent` for domain calculation, and `csv` to load data from a VizHub dataset. Axis labels and a title clarify the chart, while semi-transparent green circles reveal data density.

Bbertieip

76% match