Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAndre J Denais
Last edited Sep 26, 2020
Created on Sep 25, 2020

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.

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
87% 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
87% 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
86% 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
83% 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
83% 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
82% 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
81% match
Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

A scatterplot of NOAA monthly summaries from 1946-2020 lets users compare temperature and wind metrics between SFO and Oceanside stations. A dropdown menu switches the y-axis attribute among yearly options, while an interactive legend filters circles by station through mouse hover, dimming non-selected points. Built with React and D3 v6, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, rendering SVG circles with tooltips showing formatted values.

NNikithakatta30
81% match