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

100%

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

✓ Published0🌍 Public

Last edited Sep 19, 2020

Created on Sep 19, 2020

Forked from SFO NOAA Summary of the Month: Average Temperature 1955-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.

AI-generated description

A visualization constructed using the vega-lite-api. 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

89% match

Loading thumbnail…

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.

CCurran Kelleher

88% match

Loading thumbnail…

SFO NOAA Summary of the Month: Average Temperature 1955-2020 with Vega-Lite API

This visualization plots monthly average temperatures recorded at San Francisco International Airport (SFO) from 1955 to 2020. Each semi-transparent circle represents a single month’s average temperature on a time-series axis, with a tooltip showing the exact value. The chart uses the Vega-Lite API and its `markCircle` encoding, with `vl.x().fieldT` for the date and `vl.y().fieldQ` for the temperature. Data is loaded via D3’s `csv` function from a NOAA-hosted GitHub gist, and the rendering is handled by Vega-Lite with custom axis styling from a config file.

AAndre J Denais

81% match

Loading thumbnail…

SFO NOAA Summary of the Month 1955-2020 with Vega-Lite API Template

This example visualizes the average monthly temperature at San Francisco’s SFO airport from 1955 to 2020, with each point representing a month. The visualization uses the Vega-Lite API to encode the date on the x-axis and the average temperature on the y-axis, with tooltips displaying the temperature values. Data is loaded from a CSV file via d3.csv, and the chart is rendered with Vega-Lite and displayed using the Vega renderer, with a custom dark theme configuration for improved readability.

AAndre J Denais

81% match

Loading thumbnail…

SFO NOAA Summary of the Month 1955-2020 Playground with Vega-Lite API

This interactive visualization plots monthly extreme minimum temperatures at San Francisco Airport from 1955 to 2020 as a scatterplot of circles, using color opacity to reveal density. It is built with the Vega-Lite API, registering Vega and Vega-Lite 4, and loads CSV data from the NOAA via d3.csv. The chart features a dark-themed config with larger fonts and tooltips, rendering SVG that fits the window dimensions.

AAndre J Denais

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

77% match

Loading thumbnail…

Vega-Lite API Temperature Chart

This interactive chart displays San Francisco temperature trends over time, rendered as a thin line with tooltips that reveal exact temperature values on hover. Built using the Vega-Lite API, it leverages `vl.markLine`, `vl.x().fieldT`, and `vl.y().fieldQ` to encode the temporal and quantitative data, while `vega-tooltip`’s `Handler` provides the interactive popups. The visualization pulls CSV data from a GitHub gist via D3’s `csv` function, with styling customized through the `config` object. The chart resizes to fill the browser window using `autosize` and renders as SVG.

Ddrc6587

76% match

Loading thumbnail…

NOAA Summary of the Month with Vega-Lite API: Oceanside and SFO

This visualization plots NOAA monthly summary data for Oceanside and SFO as a scatterplot of average temperature over time, with points colored by temperature value and a tooltip showing the exact reading. The chart loads CSV data via d3.csv and renders with the Vega-Lite API, using vl.markCircle, vl.encode, and field mappings for the x-axis, y-axis, and color scale. Appearance is customized through a config object that adjusts axis ticks and label fonts for readability.

AAndre J Denais

76% match