Skip to main content
100%

All 'building:part' in San Francisco. data exported by overpass turbo

✓ Published0🌍 Public
AAlan McConchie
Last edited Apr 13, 2016
Created on Apr 13, 2016

This visualization displays every building part in San Francisco as mapped in OpenStreetMap, with each polygon representing a structural component such as towers, apartments, or generic building sections. The map uses D3’s `d3.geoPath` to render the GeoJSON features, which were exported via Overpass Turbo and include attributes like height and building levels. The rendering appears as a flat, monochrome outline map, emphasizing the density and distribution of building parts across the city rather than their vertical dimensions.

AI-generated description

Similar vizzes

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock
70% match
Loading thumbnail…

Gist 2db974b808d174057e76a03a03f32843

Overlapping semi-transparent polygons on a map of San Francisco show drive-time catchments around a central point, with each ring colored by travel time in 60-second increments from 60 to 300 seconds. The polygons are loaded from a GeoJSON file, and their irregular shapes reflect road-network reachability.

Aapburnes
67% match
Loading thumbnail…

MapboxGL extrusions

MapboxGL renders a tilted, 3D view of San Francisco with yellow, semi-transparent extruded building footprints and parcel outlines. The map uses the MapboxGL JavaScript library with a custom vector tile style, a pitch of 45 degrees, and a bearing of -17.6 degrees. Two vector sources from Mapbox tilesets supply the parcel and building data, with building heights assigned from the `height` property using `fill-extrusion-height`. The example demonstrates the `fill-extrusion` layer type for realistic 3D visualization of urban geometry.

AAlan McConchie
65% match
Loading thumbnail…

San Francisco County Map

This map shows the geographic boundaries of San Francisco County as an SVG-rendered chloropleth, with county shapes drawn from a TopoJSON source loaded via `d3.json`. The visualization uses `feature` from topojson to extract GeoJSON data and `d3.geoPath` with an `geoEqualEarth` projection to render each county outline as a path. The React-based component, `Marks.js`, maps over the GeoJSON features to generate the SVG paths, while the map initially displays a "Loading..." state until the asynchronous data fetch completes via `useEffect`.

AAndre J Denais
64% match
Loading thumbnail…

Gist c567d9b561f1c907337ac2df48b52d73

This example displays the boundaries of Paris’s arrondissements, rendered as black paths on a white background. It loads GeoJSON data containing the district polygons and projects them using `d3.geo.albersUsa()` with a custom translation, then draws each feature as an SVG path via `d3.geo.path()` within D3 v3. The visualization presents a straightforward, unadorned map of the city’s administrative divisions.

SSamyMe
63% match
Loading thumbnail…

Vector Tiles

This example displays a static map of San Francisco’s roads, styled by road type, without panning or zooming. It uses Mapzen vector tiles served as GeoJSON, with the D3.js v3 library and a custom `d3.geo.tile` helper to compute tile coordinates. The SVG paths are rendered via `d3.geo.path` with a Mercator projection, and the code fetches tile data asynchronously using `d3.json`. Road classes like highways and rails are distinguished by CSS classes. Data comes from OpenStreetMap through Mapzen’s vector tile API.

JJuanSMartinez
63% match
Loading thumbnail…

Choropleth map

A choropleth map shows San Francisco’s 2025 tree-canopy rate by supervisor district, colored on a green sequential scale with a gradient legend and hover tooltips. Built with D3 v7, it uses `d3.geoMercator` and `d3.geoPath` to render GeoJSON district boundaries, while district-level data from a CSV is joined via a `Map`. `d3.scaleSequential` with `interpolateGreens` drives fills, and the vertical legend uses `d3.axisRight` and a linear gradient.

Hhxu51@usfca.edu
63% match
Loading thumbnail…

Display buildings in 3D

This example displays buildings in 3D on a Mapbox GL map centered on downtown Los Angeles, with a tilted and rotated perspective. It uses the Mapbox GL JS API to render a `fill-extrusion` layer from the `building` source-layer in the `composite` vector source, which contains OpenStreetMap building-height data. The extrusion height and base are interpolated from zoom level 15 to 15.05, creating a smooth transition as the user zooms in, with a gray color and 0.6 opacity.

AAlan McConchie
62% match