25:["$","title",null,{"children":"Raster & vector | Brody Smith | Observable"}] 49:[{"id":"02e9dc28423a57887f0b7d4836aaad3951dd79e68435fc46d6912e93ecde808890c182ccaaadacaeb58429fb154b47b76f5fcdeedbb570be0827f48bfcd39951","href":"https://static.observableusercontent.com/files/02e9dc28423a57887f0b7d4836aaad3951dd79e68435fc46d6912e93ecde808890c182ccaaadacaeb58429fb154b47b76f5fcdeedbb570be0827f48bfcd39951","name":"countries@2.geojson","type":"application/geo+json","lastModified":1709707368227.037,"size":3057},{"id":"8af262c3b0b22beab6f193a09d395250f30d0c93361e88c16b21cb1ad6f35ffcdaed6fac9adc7044f1e24142b644965e278a5dfd11d92abcdc4e15008a2abca4","href":"https://static.observableusercontent.com/files/8af262c3b0b22beab6f193a09d395250f30d0c93361e88c16b21cb1ad6f35ffcdaed6fac9adc7044f1e24142b644965e278a5dfd11d92abcdc4e15008a2abca4","name":"countries.json","type":"application/json","lastModified":1709710077517.674,"size":1284},{"id":"c36a133e071d93e7df5d8f04148a66783cb21e9e737c822507c14396e3c44a389b3822ea7cf33f7a999dbf0d4eb58da5f0899c160e8569d47b38f519304575d6","href":"https://static.observableusercontent.com/files/c36a133e071d93e7df5d8f04148a66783cb21e9e737c822507c14396e3c44a389b3822ea7cf33f7a999dbf0d4eb58da5f0899c160e8569d47b38f519304575d6","name":"pacific-boundaries.json","type":"application/json","lastModified":1709724193043.174,"size":150966}] 29:{"id":"c3f236948571aec5","slug":null,"title":"Raster & vector","thumbnail":"2c80da07fb297398283e80b899786d067436e21e6459046b70e7e7b3ef1dc795","access_level":"public","create_time":"$D2024-03-06T05:50:24.325Z","update_time":"$D2024-03-06T11:30:30.363Z","view_time":null,"first_public_time":"$D2024-03-06T05:50:24.325Z","has_unpublished_edits":null,"fork":{"id":"dd07258f01d43139","slug":"raster-vector","title":"Raster & vector","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6591f25561a896fa","login":"brodysmith1","name":"Brody Smith","avatar_url":"https://avatars-next.observableusercontent.com/897c5529ee1fbb1f05ddbe2b1d8daddf2d2140c9635611c4f62c9560e048d91e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":507,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2d63ad51d6e68a2a","login":"brodysmith1","name":"Brody Smith","avatar_url":"https://avatars-next.observableusercontent.com/897c5529ee1fbb1f05ddbe2b1d8daddf2d2140c9635611c4f62c9560e048d91e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2d63ad51d6e68a2a","login":"brodysmith1","name":"Brody Smith","avatar_url":"https://avatars-next.observableusercontent.com/897c5529ee1fbb1f05ddbe2b1d8daddf2d2140c9635611c4f62c9560e048d91e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"circles = countries.map(p => {\n const [x,y] = projection([p.lon,p.lat]);\n const circle = svg``\n const label = svg`${p.iso2}`\n return [circle, label];\n}).flat()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"url = (_x, _y, _z) => {\n const [x, y, z] = d3.tileWrap([_x, _y, _z])\n return `https://api.mapbox.com/styles/v1/brody1/cltfjsd5100gw01r577hg2eo0/tiles/${tileSize}/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}?access_token=pk.eyJ1IjoiYnJvZHkxIiwiYSI6ImNrbTQ1d2oweTAxZ3cyb3J0d3MydDN0cmsifQ.SP2rehihX6dZ_h5rqVjdOA`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n .tileSize(tileSize)\n .clampX(false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"tileSize = 256","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = {\n // const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, points)).bounds(points);\n const height = ~~(width / 2); // Math.ceil(y1 - y0);\n // const scale = projection.scale() * (2 * Math.PI);\n \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 \n return height;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"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":344,"value":"projection = d3.geoMercator().rotate([-180, 0]).fitExtent([[padding, padding],[width - padding, height - padding]],points)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"padding = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"boundaries = topojson.feature(boundaries_topo, boundaries_topo.objects[\"Pacific countries\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"boundaries_topo = FileAttachment(\"pacific-boundaries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"points = FileAttachment(\"countries@2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"countries = FileAttachment(\"countries.json\").json()","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@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null