31:Tb70,view = { const clipExtent = [[margin, margin], [width - margin, height - margin]]; // const projection = d3 // .geoAlbers() // .rotate([0, 0]) // .center([0, 38.7]) // .scale(1280) // .translate([width / 2, height / 2]) // .precision(0.1) // .clipExtent(clipExtent); const projection = d3[projectionFactory]() .center([4.7638784, 52.3545362]) // Amsterdam .scale(350) .translate([width / 2, height / 2]) .precision(0.1) .clipExtent(clipExtent); const path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width, height)); svg .append("path") .datum(outline) .attr("class", "outline") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2) .attr("d", path); const land_path = svg .append("path") .datum(land) .attr("fill", "rebeccapurple") .attr("d", path); const tile_layer = svg .append("g") .attr("fill", "none") .attr("stroke", "black"); const label_layer = svg .append("g") .attr("text-anchor", "middle") .attr("font-family", "sans-serif"); function key(t) { return t.key.join(", "); } function redraw(transform) { const { x, y, k } = transform; projection.scale(k).translate([x, y]); const zoomLevel = (0 | (Math.log(projection.scale()) / Math.LN2)) - 5; land_path.attr("d", path); const all_tiles = quadTiles( projection.clipExtent([[1, 1], [width - 1, height - 1]]), zoomLevel ); // all tiles const tile = tile_layer.selectAll("path").data(all_tiles, key); tile.exit().remove(); tile .enter() .append("path") .merge(tile) .attr("d", path); const highlighted_tiles = quadTiles( projection.clipExtent(clipExtent), zoomLevel ); // subselection of highlighted tiles tile_layer .selectAll("path") .data(highlighted_tiles, key) .attr("fill", "rebeccapurple") .attr("fill-opacity", 0.2) .exit() .attr("fill", "none"); // labels const label = label_layer.selectAll("text").data(highlighted_tiles, key); label.exit().remove(); label .enter() .append("text") .text(key) .merge(label) .attr("transform", t => `translate(${projection(t.centroid)})`); svg.node().value = { all_tiles, highlighted_tiles, transform, projection, zoomLevel, N: 2 ** Math.max(0, zoomLevel) }; svg.node().dispatchEvent(new CustomEvent("input")); } const zoom = d3 .zoom() .scaleExtent([50, 1e6]) .on("zoom", function() { redraw(d3.event.transform); }); const initialTransform = d3.zoomIdentity .translate(...projection.translate()) .scale(projection.scale()); svg.call(zoom).call(zoom.transform, initialTransform); redraw(initialTransform); return svg.node(); }32:Tb1f,function quadTiles(projection, zoomLevel) { const tiles = []; let inside; const N = 2 ** Math.max(0, zoomLevel); const _remembered_precision = projection.precision(); const s = projection.precision(960).stream({ point() { inside = true; }, lineStart() {}, lineEnd() {}, polygonStart() {}, polygonEnd() {} }); function subdivide(left, top, right, bottom) { const diff = right - left; const lat_max = latmap(top); const lat_min = latmap(bottom); const step = Math.max(.2, Math.min(1, .01 * zoomLevel)) * diff; inside = false; // Trace the projected tile (which will be a polygon), // to see whether it s.polygonStart(); s.lineStart(); for (var lng = left; right + step / 2 > lng && !inside; lng += step) { s.point(lng, lat_max); } // Why are these unnecessary?! // for (var v_lat = top; latmap((v_lat += step)) < lat_min && !inside; ) { // console.log("b"); // s.point(right, latmap(v_lat)); // } for (var lng = right; lng > left - step / 2 && !inside; lng -= step) { s.point(lng, lat_min); } // Why are these unnecessary?! // for (var v_lat = bottom; latmap((v_lat -= step)) > lat_max && !inside; ) { // console.log("d"); // s.point(left, latmap(v_lat)); // } // Unnecessary? // if (!inside) s.point(left, lat_max); s.lineEnd(); s.polygonEnd(); if (!inside) return; if (360 / N >= diff) { tiles.push({ type: "Polygon", // Don't understand how we can get away with so few vertical points in this object, // ..apparently they do produce smooth curves. Must have something to do how geoPath works? coordinates: [ [ ...d3.range(left, right + step / 2, step).map(t => [t, top]), [right, 0.5 * (top + bottom)], ...d3.range(right, left - step / 2, -step).map(t => [t, bottom]), [left, 0.5 * (top + bottom)], [left, top] ].map(([lng, v_lat]) => [lng, latmap(v_lat)]) ], key: [ 0 | (((180 + left) / 360) * N), 0 | (((180 + top) / 360) * N), zoomLevel ], pre_bounds: { left, top, right, bottom }, coordinate_bounds: { north: lat_max, south: lat_min, west: left, east: right }, centroid: [0.5 * (left + right), 0.5 * (lat_max + lat_min)] }); } else { const hmid = 0.5 * (left + right); const vmid = 0.5 * (top + bottom); subdivide(left, top, hmid, vmid); subdivide(hmid, top, right, vmid); subdivide(left, vmid, hmid, bottom); subdivide(hmid, vmid, right, bottom); } } subdivide(-180, -180, 180, 180); projection.precision(_remembered_precision); return tiles; }33:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1577981133664.918,"size":545534}] 2f:{"title":"Jason Davies' Automatic Projection Tiles","cells":[{"id":0,"value":"md`# Jason Davies' Automatic Projection Tiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`This is just a port of [Jason Davies' sketch](https://www.jasondavies.com/maps/tile/), migrated to d3v5, and with the Earth's land shape added. _Disclaimer: I don't really know what I'm doing, I justed ported the code. Some projection stuff is broken, and I'll be looking into it later ;)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"viewof projectionFactory = {\n const p = select({\n title: \"Projection\",\n options: [\n \"geoAlbers\",\n \"geoAiry\",\n \"geoPatterson\",\n \"geoNaturalEarth2\",\n \"geoConicConformal\",\n \"geoConicEquidistant\",\n \"geoHealpix\",\n \"geoGuyou\",\n \"geoStereographic\",\n \"geoInterruptedHomolosine\",\n \"geoInterruptedMollweideHemispheres\"\n ],\n value: \"geoStereographic\"\n });\n p.input.style.fontSize = \"20px\";\n p.input.style.marginTop = \"8px\";\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"viewdata = Generators.input(view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"outline = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"world = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`## Lib`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"function latmap(t) {\n return (360 * Math.atan(Math.exp((-t * Math.PI) / 180))) / Math.PI - 90;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"{\n const S = 2;\n const uid = DOM.uid();\n const N = 16;\n const pre_lats = [...Array(N).keys()].map(i => i * (360 / N) - 180);\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}