Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAndre J Denais
Last edited Jul 30, 2021
Created on Sep 19, 2020

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.

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 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
91% 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
90% 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
87% 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 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
82% 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
81% 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
80% 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
80% match