3f:null 40:["$","title",null,{"children":"D3 Vector Tiles | Maksim Surguy | Observable"}] 46:[] 44:{"id":"79f6252f976d8910","slug":"d3-vector-tiles","title":"D3 Vector Tiles","thumbnail":"73202717205974254e6f4bddb882ce2738d5dc6a88c53175618c711a639e78a5","access_level":"public","create_time":"$D2018-11-05T17:49:42.186Z","update_time":"$D2018-11-05T18:03:13.927Z","view_time":null,"first_public_time":"$D2018-11-05T18:00:49.753Z","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":"b70866d97388e132","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":"starter_2024","bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false},"version":117,"publish_version":117,"role":null,"authored":false,"authors":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false}],"members":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Vector Tiles","cells":[{"id":0,"value":"md`# D3 Vector Tiles\n\nThis notebook demonstrates using [d3-tile](https://github.com/d3/d3-tile) to display [Mercator-projected](https://github.com/d3/d3-geo/blob/master/README.md#geoMercator) [GeoJSON](https://github.com/d3/d3-geo/blob/master/README.md#geoPath) vector tiles. The vector tiles are provided by [Nextzen](https://www.nextzen.org/) and require an API key.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"map = svg``\n// !d.properties.boundary))}\">\n// d.properties.boundary))}\">","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoMercator()\n .center([-122.3321, 47.6072])\n .scale((1 << 23) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .precision(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=NznU3WTwQ86gckiDphBTNg`); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"