v5.0.0 · on npm
SF MapSVG

Example 3 · Candidate votes · 2016–2026

Who each supervisorial district voted for.

Six elections, eleven districts. See who led where and by how much, then follow any candidate across the city.

Certified San Francisco resultsVotes cast in SF onlySource and method

Election
Map shows

Loading the map…

Leading candidate by district. Lighter fills mark closer races.

Citywide, all candidates

    District by district

    The whole ballot, eleven times.

    Each bar splits a district’s valid votes among the leading candidates. Select a row to highlight that district on the map.

    Source and method

    Reading the vote

    A candidate’s share is their votes divided by all valid votes in that contest and area, so every other candidate counts in the denominator. District results are votes cast within San Francisco, not a profile of residents.

    Download this election
    Coloring districts by leader
    import { createMap } from '@kahwee/sf-map-svg';
    
    const map = createMap(data, {
      mode: 'districts',
      year: election.districtYear, // 2012 or 2022 boundaries
      appearance: {
        districtStyle: (district) => ({ fill: leaderInk(district.id) }),
      },
    });
    // Repaint when the contest changes; with layerTransitions the fills crossfade.
    map.setDistrictStyle((district) => ({ fill: leaderInk(district.id) }));