San Francisco civic atlas

The city, by the numbers.

Explore how San Francisco voted, watch its district boundaries change, and follow the lines that connect the city.

Explore the atlasWatch districts change
  • 11supervisorial districts
  • 3district map years
  • 44local measures
  • 56candidate contests

June 2, 2026 · Certified results

How San Francisco voted.

Choose a measure, then select a district to see its Yes and No votes. Explore 44 local measures across the 2002, 2012, and 2022 district maps in the full atlas.

Explore every map year

Ballot measure

Choose a ballot measure
Map view
Choose map colors
Sources and method

Vote shares exclude undervotes and overvotes. Passage is determined citywide.

Measure A · Yes vote share

Loading district map…

2022 districts · Select a numbered area
0%100%

Districts over time

A changing city.

Watch district lines morph between the official 2002, 2012, and 2022 maps. The motion illustrates change; each dated map is the published geometry.

Showing 2022 boundaries
2022supervisorial districts
Choose district map year

The coastline is a common display mask, while each year keeps its own district geometry. See geographic sources

A city in motion

Follow a line through San Francisco.

Ride a schematic path between eight official BART station locations. A moving marker makes the route easy to follow; the straight connections are not track geometry or a live train.

Open standalone journey
Schematic route over a San Francisco map with parks and BART stations
Embarcadero → Balboa Park Eight stations · 28-second loop

Go further

More ways to see the city.

Browse all examples

One spot, three San Franciscos

Pick a point and see how neighborhood names and district boundaries change around it.

Explore a place

Explore neighborhoods

Find an SFAR realtor area, inspect its boundary, and download its GeoJSON.

For your next project

Small maps.
Room for your ideas.

Start with the lightweight guide data. It loads only selected geography, and you can request detailed data separately.

Read the API documentation

Migrating to v3: removed compatibility APIs and examples

import { createMap }
  from '@kahwee/sf-map-svg';
import { guideMapData }
  from '@kahwee/sf-map-svg/guide/data';

const map = createMap(guideMapData, {
  mode: 'neighborhoods',
  layers: { roadLabels: false },
});
document.querySelector('#map')
  .append(map.element);
// On unmount: map.destroy();
pnpm add @kahwee/sf-map-svg@4.0.1

v4.0.1 · Available on npm

Maps and interactive examples use the current package release. See what changed