2b:null 2c:["$","title",null,{"children":"Vector tiles | Ingrid Burrington | Observable"}] 31:[] 2f:{"id":"0cb2b2fe3b684b19","slug":null,"title":"Vector tiles","thumbnail":"89831f012c58a9c2429fd20dfbaf54e7ce5869b1e57e352dc2fc94e658f8b6c5","access_level":"public","create_time":"$D2026-10-03T17:40:38.099Z","update_time":"$D2026-10-03T17:42:21.205Z","view_time":null,"first_public_time":"$D2026-10-03T17:40:38.099Z","has_unpublished_edits":null,"fork":{"id":"27823d7d147e66d4","slug":"vector-tiles","title":"Vector tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":138,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null}],"members":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vector tiles","cells":[{"id":0,"value":"

Vector tiles

D3 › Gallery

\n\n# Vector tiles\n\nThis notebook demonstrates using [d3-tile](https://github.com/d3/d3-tile) to display [Mercator-projected](https://d3js.org/d3-geo/cylindrical#geoMercator) [GeoJSON](https://d3js.org/d3-geo/path#geoPath) vector tiles. The vector tiles are provided by [Nextzen](https://www.nextzen.org/) and require an API key.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"tiles.map((t) => t.data.roads)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"tiles = Promise.all(\n tile().map(async (d) => {\n d.data = await fetch(\n `https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=wGb5wgtHSpC5E5_2RTkisA`\n ).then((response) => response.json()); // Sign up for an API key: https://www.nextzen.org\n return d;\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoMercator()\n .center([-122.4183, 37.7750])\n .scale(Math.pow(2, 21) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"function filter({features}, test) {\n return {type: \"FeatureCollection\", features: features.filter(test)};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"