2a:null 2b:["$","title",null,{"children":"Clipped map tiles | D3 | Observable"}] 30:[{"id":"14c365e67f11e89186673ac56deaa53a9e8fc8068eab0114fefdfec01ee16547d856b893ad765f2ac4f1932c76e31c19a3588a11182017224e74b053b053cdfa","href":"https://static.observableusercontent.com/files/14c365e67f11e89186673ac56deaa53a9e8fc8068eab0114fefdfec01ee16547d856b893ad765f2ac4f1932c76e31c19a3588a11182017224e74b053b053cdfa","name":"us.json","type":"application/octet-stream","lastModified":1572543346357.535,"size":656701}] 2e:{"id":"1583d93d5aa304b2","slug":"clipped-map-tiles","title":"Clipped map tiles","thumbnail":"9b5d5b3965ba1e88bf0ff99f9f2dfaae904d2cc2029fedc4006f084bba8f5674","access_level":"public","create_time":"$D2019-07-20T00:49:42.960Z","update_time":"$D2023-08-01T14:41:32.433Z","view_time":null,"first_public_time":"$D2019-07-20T01:00:52.792Z","has_unpublished_edits":null,"fork":{"id":"b08ada9a3fcd4e18","slug":"raster-vector-ii","title":"Raster & vector II","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":36,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":321,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":44,"collection":{"id":"271c421a5537aab2","slug":"d3-tile","title":"d3-tile","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"titling":"auto","title":"Clipped map tiles","cells":[{"id":0,"value":"

Clipped map tiles

D3 › Gallery

\n\n# Clipped map tiles\n\nThis map clips Mapbox Natural Earth II tiles to the contiguous United States. To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel.","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":122,"value":"url = (x, y, z) => `https://${\"abc\"[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/mapbox.natural-earth-2/${z}/${x}/${y}${devicePixelRatio > 1 ? \"@2x\" : \"\"}.png?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoMercator()","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":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":237,"value":"width = 928","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, land)).bounds(land);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"land = FileAttachment(\"us.json\").json()\n .then(topology => topojson.feature(topology, topology.objects.land))\n .then(land => ({type: \"Polygon\", coordinates: land.geometry.coordinates[0]}))","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":"$W30","stdlib":"1"}} 2f:"$2e:body"