Skip to main content
SimilarExport ZIP
100%

San Francisco Bay sea level rise projection

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 10, 2012
Created on Jul 27, 2012

The visualization projects sea level rise for the San Francisco Bay by displaying both historical and projected data points as a line chart with a focus chart below. It uses the nvd3 library, built on D3, to render the SVG graphic and includes an animated transition. The data is structured with key-value pairs, and tooltips are enabled. The chart updates its display when the window is resized, and it includes custom axis formatting for dates and y-values.

AI-generated description

Similar vizzes

Loading thumbnail…

San Francisco Bay sea level rise projection

This example projects historic sea level rise in the San Francisco Bay area using an interactive line-with-focus chart built with d3.v2 and the NVD3 library, rendering in SVG with animation. The visualization distinguishes between historic data and projected series, with a focus panel for detailed inspection. It explicitly handles gaps in the 1870–1875 record by preserving undefined Y values to show data absence, while using chart.x(), chart.y(), and chart.forceY() to map timestamps to a time-formatted axis. Data is loaded from a local JSON file.

GGerHobbelt
95% match
Loading thumbnail…

area Chart

This area chart displays temperature trends in San Francisco over time, using a smooth basis curve to fill the region beneath the line with a maroon color. The visualization employs d3.scaleTime and d3.scaleLinear for axes, with d3.area and d3.curveBasis generating the filled path. Data is loaded from a CSV file using d3.csv. SVG rendering includes labeled axes and a title.

NNohaS
72% match
Loading thumbnail…

Area Chart

This area chart displays a week of temperature data for San Francisco, with time on the x-axis and temperature on the y-axis, using a smoothed, filled path to convey the trend. The visualization, built with D3 v5 and rendered as SVG, applies a basis curve to the area generator for a fluid line and fills the shape in maroon with transparency. A CSV file provides the data, loaded asynchronously, while axis tick marks extend across the plot for grid-like reference, and both axes are labeled. The title appears at the top, with styling handled via an external stylesheet.

ZZ-Richard
72% match
Loading thumbnail…

Temperature in San Francisco

This visualization displays San Francisco temperature data as a line chart over time, using a time-scaled x-axis and linear y-axis with gridlines. The SVG is rendered via D3 v5, using `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with a basis curve. Data comes from a GitHub-hosted CSV file, and the chart includes labeled axes, a title, and styled tick lines.

VVlad Bogo
72% match
Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays predicted and preliminary water levels in Los Angeles over time, using data from the Data Canvas - Sense Your City initiative. The visualization renders an SVG with D3 v5, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisLeft`/`axisBottom` for grid lines. The chart titles itself "Los Angeles Water Levels," with time on the x-axis and water level in feet on the y-axis, despite the filename referencing San Francisco temperatures.

Ssaifsre
72% match
Loading thumbnail…

Projections for SSN

This example displays temperature changes in San Francisco over a week using a time-series line chart rendered as SVG. The code loads data from a CSV file and maps timestamps to the x-axis and temperature to the y-axis, with a smooth curve via `d3.line` and `curveBasis`. It uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`axisBottom` to build axes, while `d3.extent` sets domains. The visualization includes labeled axes and a title, styled with custom CSS for the maroon line and grid ticks.

SSean Moore
72% match
Loading thumbnail…

Temperature in San Francisco

This visualization shows the evolution of temperature in San Francisco over time, with a smooth area chart rendered as an SVG. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.area with curveBasis to generate the filled path. The chart includes labeled axes, a title, and a clean grid created via tick lines. The code imports specific D3 v5 modules, such as select, extent, and axisBottom, and applies the d3.axisLeft and d3.axisBottom APIs.

AAnthony-coding
71% match
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature in San Francisco, with the data sourced from Data Canvas - Sense Your City and plotted using an SVG rendered with D3.js. It shows the temperature trend over time, using a maroon curved line on a white background with labeled axes and a title. The implementation imports specific D3 modules like `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `curveBasis`, and loads the CSV data via `d3.csv`. The chart is part of an educational video demonstrating the build process.

Bbart
71% match