31:T1261,function geoCompositeProjection(...projections) { var cache, cacheStream, points = Array(projections.length).fill(null), point, pointStream = { point: function(x, y) { point = [x, y] } }; // store the original translate(), clipExtent(), scale(), etc of each child, because // we're going to update them later if the composite needs to be translated or scaled. var translations = [], clipExtents = [], precisions = [], scales = []; for (var i = 0; i < projections.length; ++i) { translations.push(projections[i].translate()); clipExtents.push(projections[i].clipExtent ? projections[i].clipExtent() : null); precisions.push(projections[i].precision()); scales.push(projections[i].scale()); } function projection(coordinates) { var x = coordinates[0], y = coordinates[1]; point = null; for (let p of points) { p(x, y); if (point) return point; } return point; } projection.stream = function(stream) { if (cache && cacheStream === stream) { return cache; } else { var streams = []; for (var i = 0; i < projections.length; ++i) { streams.push(projections[i].stream(stream)); } cache = multiplex(streams); cacheStream = stream; return cache; } } projection.precision = function(_) { if (!arguments.length) return projections[0].precision(); var factor = _ / precisions[0]; for (var i = 0; i < projections.length; ++i) { projections[i].precision(factor * precisions[i]); } return reset(); }; projection.scale = function(_) { if (!arguments.length) return projections[0].scale(); var factor = _ / scales[0]; for (var i = 0; i < projections.length; ++i) { projections[i].scale(factor * scales[i]); } return projection.translate(projections[0].translate()); }; projection.translate = function(_) { if (!arguments.length) return projections[0].translate(); var x = +_[0], y = +_[1], k = projections[0].scale() / scales[0]; for (var i = 0; i < projections.length; ++i) { function skew(point) { // convert a point from the original coordinate system to the current screen-space coordinate system // point: point in original coordinates needing to be transformed // [x, y]: new root point // translations[0]: old root point // point - translations[0]: vector that needs scaling // (point - translations[0]) * k: scaled vector // scaled vector + [x, y] -> new screen-space coordinate const dx = point[0] - translations[0][0], dy = point[1] - translations[0][1]; return [x + dx * k, y + dy * k] } projections[i].translate(skew(translations[i])); if (projections[i].clipExtent !== undefined && clipExtents[i] !== null) { projections[i].clipExtent([skew(clipExtents[i][0]), skew(clipExtents[i][1])]) } points[i] = projections[i].stream(pointStream); } return reset(); }; projection.clipExtent = function(_) { if (!arguments.length) { // compute the effective clip extent of the whole composite -- equivalent to the smallest bounding // box that contains all the childrens' clip extents, or null if one or more children doesn't have // a clip extent. let bounded = true; let x0 = +Infinity, y0 = +Infinity, x1 = -Infinity, y1 = -Infinity; for (var i = 0; i < projections.length; ++i) { const extent = projections[i].clipExtent ? projections[i].clipExtent() : null; if (extent) { x0 = Math.min(x0, extent[0][0]); y0 = Math.min(y0, extent[0][1]); x1 = Math.max(x1, extent[1][0]); y1 = Math.max(y1, extent[1][1]); } else { bounded = false; } } return bounded ? [[x0, y0], [x1, y1]] : null; } for (var i = 0; i < projections.length; ++i) { // shrink each child's clip extent so that it lies within the input clip extent (_) if (projections[i].clipExtent === undefined) continue; let extent = projections[i].clipExtent(); if (extent === null) continue; projections[i].clipExtent( [[ Math.max(extent[0][0], _[0][0]), Math.max(extent[0][1], _[0][1]) ], [ Math.min(extent[1][0], _[1][0]), Math.min(extent[1][1], _[1][1]) ]]) } return reset(); } function reset() { console.log("RESET"); cache = cacheStream = null; return projection; } return projection; }32:[] 2f:{"title":"U.S. Map with Puerto Rico","cells":[{"id":0,"value":"md`\n# U.S. Map with Puerto Rico\n\nInspired by Mike's comment [here](https://github.com/d3/d3-geo/issues/152#issuecomment-526859645):\n\n> It would be nice to generalize this so that we don’t need as much code duplication with the existing \\`geoAlbersUsa\\`. Contributions welcome.\n\nI took a stab at refactoring \\`geoAlbersUsa\\` so that it wouldn't require as much copy-paste to create a separate \\`geoAlbersUsaPr\\` which included Puerto Rico.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"projection = geoAlbersUsaPr().scale(1300).translate([487.5, 305])","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"map = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"md`\nBasically I wrote \\`geoCompositeProjection\\` (naming suggestions welcome) which takes some projections as arguments and returns a new projection which is all of them layered together. The component projections each keep their original properties (translation, scale, post-clipping) but the aggregate projection can also be operated on as a whole, and does the right thing for the children. For example, if you scale the aggregate projection, the children need to be scaled _and_ translated in order to preserve their positions relative to one another.\n\nNot all the operations are implemented, but in theory I think this approach would work for any set of projections. Below you can see how it's possible to define \\`geoAlbersUsa\\` as the composite of three projections, and \\`geoAlbersUsaPr\\` as the composite of four.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"function geoAlbersUsa() {\n return geoCompositeProjection(\n // LOWER 48\n d3.geoAlbers()\n .scale(1000)\n .translate([480, 250])\n .clipExtent([[0, 0], [900, 500]]),\n \n // ALASKA\n d3.geoConicEqualArea()\n .rotate([154, 0])\n .center([-2, 58.5])\n .parallels([55, 65])\n .scale(350)\n .translate([173, 451])\n .clipExtent([[55, 370], [266, 484]]),\n \n // HAWAII\n d3.geoConicEqualArea()\n .rotate([157, 0])\n .center([-3, 19.9])\n .parallels([8, 18])\n .scale(1000)\n .translate([275, 462])\n .clipExtent([[266, 416], [365, 484]]),\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"function geoAlbersUsaPr() {\n return geoCompositeProjection(\n // LOWER 48\n d3.geoAlbers()\n .scale(1000)\n .translate([480, 250])\n .clipExtent([[0, 0], [900, 500]]),\n \n // ALASKA\n d3.geoConicEqualArea()\n .rotate([154, 0])\n .center([-2, 58.5])\n .parallels([55, 65])\n .scale(350)\n .translate([173, 451])\n .clipExtent([[55, 370], [266, 484]]),\n \n // HAWAII\n d3.geoConicEqualArea()\n .rotate([157, 0])\n .center([-3, 19.9])\n .parallels([8, 18])\n .scale(1000)\n .translate([275, 462])\n .clipExtent([[266, 416], [365, 484]]),\n \n // PUERTO RICO\n d3.geoConicEqualArea()\n .rotate([66, 0])\n .center([0, 18])\n .parallels([8, 18])\n .scale(1000)\n .translate([830, 474])\n .clipExtent([[800, 454], [860, 484]]),\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"md`\nYou can even define \\`geoAlbersUsaPr\\` using \\`geoAlbersUsa\\`, if you like, since the composite projection behaves pretty much like any other projection.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"function geoAlbersUsaPr2() {\n return geoCompositeProjection(\n // LOWER 48, ALASKA, HAWAII\n geoAlbersUsa(),\n \n // PUERTO RICO\n d3.geoConicEqualArea()\n .rotate([66, 0])\n .center([0, 18])\n .parallels([8, 18])\n .scale(1000)\n .translate([830, 474])\n .clipExtent([[800, 454], [860, 484]]),\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":830,"value":"md`\nHere's the implementation. It's a rough draft, but hopefully isn't too hard to follow. Right now it sort of uses the first child projection as the root coordinate system and scales other projections relative to that one. It might be easier to reason about if it instead defined its own new coordinate system so that all the children were treated equivalently.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"function multiplex(streams) {\n const n = streams.length;\n return {\n point(x, y) { for (const s of streams) s.point(x, y); },\n sphere() { for (const s of streams) s.sphere(); },\n lineStart() { for (const s of streams) s.lineStart(); },\n lineEnd() { for (const s of streams) s.lineEnd(); },\n polygonStart() { for (const s of streams) s.polygonStart(); },\n polygonEnd() { for (const s of streams) s.polygonEnd(); }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"us = fetch(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\").then(response => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3-geo@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}