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

100%

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

✓ Published0🌍 Public

Last edited Sep 18, 2020

Created on Sep 18, 2020

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.

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

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

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

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

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

81% match

Loading thumbnail…

SanFran Temp Data Using Vega-Lite API Template

This example displays San Francisco temperature trends over time using a line mark from the Vega-Lite API, with tooltips revealing exact temperature values. The visualization pulls weekly temperature data from a CSV file via d3.csv, then renders it with vega, vega-lite, and vega-lite-api. The chart is configured with custom axis styling and a dark color scheme for readability, and it automatically fits to the full browser window size using the autosize option.

JJason Tiller

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

80% match