30:[] 2e:{"title":"Vector tiles","cells":[{"id":0,"value":"

Vector tiles

\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"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await fetch(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=SAI-dMzMQ866u3VyVAntDg`).then(response => response.json()); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":84,"value":"function filter({features}, test) {\n return {type: \"FeatureCollection\", features: features.filter(test)};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-geo@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}