30:[{"id":"5a534fd924ac1f6f9b4b5bbeaa864cdf04fa110657bae45e0dbc4138d25bef8fadec842b73777694c9a6a5a81b8093c2c9e07c6be66d255d224a7691735a5cfb","href":"https://static.observableusercontent.com/files/5a534fd924ac1f6f9b4b5bbeaa864cdf04fa110657bae45e0dbc4138d25bef8fadec842b73777694c9a6a5a81b8093c2c9e07c6be66d255d224a7691735a5cfb","name":"detroit.json","type":"application/octet-stream","lastModified":1572543007925.223,"size":562084}] 2e:{"title":"Raster & vector","cells":[{"id":0,"value":"

Raster & vector

D3 › Gallery

\n\n# Raster & vector\n\nThis notebook demonstrates using [d3-tile](https://github.com/d3/d3-tile) to display [Mercator-projected](https://d3js.org/d3-geo/cylindrical#geoMercator) raster tiles underneath [TopoJSON](https://github.com/topojson) vectors. Map tiles by Mapbox; data by OpenStreetMap.","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(projection)","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]))\n .tileSize(512)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, vectors)).bounds(vectors);\n const height = Math.ceil(y1 - y0);\n const scale = projection.scale() * (2 * Math.PI);\n projection.center(projection.invert([width / 2, height / 2]));\n projection.scale(Math.pow(2, Math.floor(Math.log2(scale))) / (2 * Math.PI));\n projection.translate([width / 2, height / 2]);\n return height;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"vectors = topojson.feature(topology, topology.objects.detroit)","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"topology = FileAttachment(\"detroit.json\").json()","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"}