SFO Daily Departure From Normal Average Temperature 2015-2020

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.

88% match

Temperature in SanFrancisco

This visualization displays daily temperature measurements in San Francisco over time, with each point representing a single day’s temperature. The chart uses a scatterplot with circular markers to show the relationship between date and temperature. The code leverages D3 v5’s `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and the `axisBottom` and `axisLeft` helpers to render gridlines and ticks. Data is loaded from a CSV file, with timestamps parsed into `Date` objects and temperatures converted to numbers. SVG is used for rendering, with a clean layout featuring styled axis labels and a title.

Jjeelong

81% match

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.

81% match

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.

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.

temperature in sanfrancisco area chart

This visualization shows daily temperature variations in San Francisco with a smooth area chart over time. The chart uses a time-scaled x-axis for timestamps and a linear y-axis for temperature readings, filled with a maroon area beneath the curve. Built with React and rendered as SVG, the code leverages D3 v5 utilities including `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` for labeled axes. Data is loaded from a remote CSV file containing timestamp and temperature values.

Ssingularity6033

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

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.