2a:null 2b:["$","title",null,{"children":"The new geoPylmyst projection | linard-y | Observable"}] 31:T1151,{ const {svg, proj, proj_fix, foldout, extent} = PylmystSVGRenderer(world, { scale, angle, showOceans:true, showLand:true, gridResolution:0, showGridOnLand:false, showGridOnOceans:false, showGraticuleOnLand:false, showGraticuleOnOceans:true, showEquator:true, showFolds:true, highlightIrregularCells:false, showFaceNumber:false, margins:[6,6], backFillColor:'#FFF', backStrokeColor:'#000', landColor: "#947f67", landStrokeWidth: 1, landGridColor: "#e6deb2", oceansColor: "#b7c9e2", oceansGridColor: "#b7c9e2", equatorColor: '#000', legend:"Mô'Omgaïa - EN - projection geoPylmyst - YLDev @ 2018", }); const path = d3.geoPath(proj); const path_fix = d3.geoPath(proj_fix); const display = d3.select(svg).select(".display"); display.append('rect') .attr('x',0) .attr('y',0) .attr('width', extent.width) .attr('height', extent.height) .attr('stroke','#000') .attr('fill','none'); display.append('rect') .attr('x',3) .attr('y',3) .attr('width', extent.width- 6) .attr('height', extent.height- 6) .attr('stroke','#000') .attr('stroke-width', 6) .attr('stroke-opacity', 0.5) .attr("stroke-dasharray","16, 28") .attr("stroke-linecap","square" ) .attr('fill','none'); display.append('line') .attr('x1', 6) .attr('y1', extent.height/2) .attr('x2', extent.width - 12) .attr('y2', extent.height/2) .attr("stroke-dasharray","16.8, 15.2") .attr("stroke-width", 3 ) .attr("stroke-linecap","round" ) .attr("stroke-dashoffset",-3.6) .attr("stroke-opacity",0.3) .attr('stroke','lightgrey'); display.append('line') .attr('x1', extent.width/2) .attr('y1', 6) .attr('x2', extent.width/2) .attr('y2', extent.height - 12) .attr("stroke-dasharray","16.8, 15.2") .attr("stroke-width", 3 ) .attr("stroke-linecap","round" ) .attr("stroke-dashoffset",-3.6) .attr("stroke-opacity",0.3) .attr('stroke','lightgrey'); const layer = d3.select(svg).select(".addLayer"); // UNFOLDING TREE layer.selectAll(".ls") .data(foldout.branches) .join("path") .classed('ls', true) .attr("fill", "transparent") .attr("stroke", "#ff0000") .attr("d", d => path_fix(d.geometry)); layer.selectAll(".centroids") .data(foldout.centroids) .join("path") .classed('centroids', true) .attr("fill", "transparent") .attr("stroke", "#ff0000") .attr("d", d => path_fix(d.geometry)); layer.selectAll("text") .data(foldout.centroids.map(d => ({loc:proj_fix(d.geometry.coordinates), id:d.id}))) .join("text") .attr("fill", "#ff0000") .attr("font-size", `${Math.min(16*scale, 18)}px`) .attr("x", d => d.loc[0]+10) .attr("y", d => d.loc[1]-5) .text(d => d.id); layer.append('path') .classed('reference', true) .datum({type: "Point", coordinates: [0,0]}) .attr("fill", "blue") .attr("stroke", "blue") .attr("d", path); layer.append('path') .classed('proj_center', true) .datum({type: "Point", coordinates: proj_fix.center()}) .attr("fill", "orange") .attr("stroke", "orange") .attr("d", path_fix); // TOOLTIP const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden"); const map = d3.select(svg).select(".map"); map.selectAll(".lands") .on('mouseover', function(event, d) { d3.select(this).style("fill", "#e6deb2"); d3.select(".tooltip") .text(`land ${d.properties.ID}`) .style("color","green") .style("top", event.pageY + "px") .style("left", event.pageX + "px") .style("visibility", "visible"); }) .on("mousemove", function(event) { d3.select(".tooltip") .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") }) .on('mouseout', function() { d3.select(this).style("fill", null); d3.select(".tooltip").style("visibility", "hidden"); }); return svg; }32:Td67,function pylmystRaw() { const degrees = 180 / Math.PI; const theta = Math.atan(0.5) * degrees; const faceProjection = (face) => { const c = face.refPt; face.direction = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 0 : 60; return d3.geoProjection(d3.geoGnomonicRaw) .scale(1) .translate([0, 0]) .rotate([-c[0], -c[1], face.direction || 0]); } const vertices = [[0, 90], [0, -90]].concat( d3.range(10).map((i) => [(i * 36 + 180) % 360 - 180, i & 1 ? theta : -theta]) ); // icosahedron const polyhedron = [ [0, 3, 11], [0, 5, 3], [0, 7, 5], [0, 9, 7], [0, 11, 9], // North [2, 11, 3], [3, 4, 2], [4, 3, 5], [5, 6, 4], [6, 5, 7], [7, 8, 6], [8, 7, 9], [9, 10, 8], [10, 9, 11], [11, 2, 10], // Equator [1, 2, 4], [1, 4, 6], [1, 6, 8], [1, 8, 10], [1, 10, 2] // South ].map((iVertex) => iVertex.map((i) => vertices[i])); // add reference point (= centroid) polyhedron.forEach((vertex) => (vertex.refPt = d3.geoCentroid({ type: "MultiPoint", coordinates: vertex }))); // split the relevant faces: // * face[13] in the middle of the side: this will become face[13] and face[20] // Split face 13 at the edge. let vertex = polyhedron[13]; let ref = vertex.refPt; let tmp = vertex.slice(); const a = faceProjection(vertex)(vertex[0]); const b = faceProjection(vertex)(vertex[2]); let mid = faceProjection(vertex).invert([(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]); vertex[0] = mid; // (new) face[13] // build the new half face let newVertex = [tmp[0], tmp[1], mid]; newVertex.refPt = ref; // use original face[13] centroid polyhedron.push(newVertex); // face[20] // cut face 14 to connect to 13 vertex = polyhedron[14]; ref = vertex.refPt; tmp = vertex.slice(); vertex[2] = mid; // (new) face[14] // build the new half face newVertex = [mid, tmp[1], tmp[2]]; newVertex.refPt = ref; polyhedron.push(newVertex); // face[21] const faces = polyhedron.map((vertex, i) => { const polygon = vertex.slice(); polygon.push(polygon[0]); return { face: vertex, site: vertex.refPt, id: i, contains: (lambda, phi) => { return d3.geoContains({ type: "Polygon", coordinates: [polygon] }, [lambda * degrees, phi * degrees]); }, project: faceProjection(vertex) }; }); // Connect each face to a parent face. const parents = [ // N -1, // 0 2, // 1 3, // 2 4, // 3 0, // 4 // Eq 0, // 5 7 , // 6 8, // 7 9, // 8 2, // 9 9, // 10 3, // 11 11, // 12 4, // 13 13, // 14 // S 16, // 15 8, // 16 10, // 17 12, // 18 18, // 19 12, // 20 14 // 21 ]; parents.forEach((d, i) => { const node = faces[d]; node && (node.children || (node.children = [])).push(faces[i]); }); function getFace(lambda, phi) { for (let i = 0; i < faces.length; ++i) { if (faces[i].contains(lambda, phi)) return faces[i]; } } // Polyhedral projection const proj = polyhedral( faces[0], // the root face getFace // a function that returns a face given coords ); proj.faces = faces; return proj; }33:T1336,polyhedral = (tree, face) => { const degrees = 180 / Math.PI; const radians = Math.PI / 180; const epsilon = 1e-5; // Converts an array of n face vertices to an array of n + 1 edges. function faceEdges(face) { const n = face.length; const edges = []; for (let i = 0, a = face[n - 1]; i < n; ++i) edges.push([a, a = face[i]]); return edges; } function pointEqual(a, b) { return a && b && a[0] === b[0] && a[1] === b[1]; } function hasInverse(node) { return node.project.invert || node.children && node.children.some(hasInverse); } function inverse(m) { const k = 1 / (m[0] * m[4] - m[1] * m[3]); return [ k * m[4], -k * m[1], k * (m[1] * m[5] - m[2] * m[4]), -k * m[3], k * m[0], k * (m[2] * m[3] - m[0] * m[5]) ]; } function outline(stream, node, parent) { let point, edges = node.edges, n = edges.length, edge, multiPoint = {type: "MultiPoint", coordinates: node.face}, notPoles = node.face.filter(function(d) { return Math.abs(d[1]) !== 90; }), b = d3.geoBounds({type: "MultiPoint", coordinates: notPoles}), inside = false, j = -1, dx = b[1][0] - b[0][0]; // TODO node.centroid = dx === 180 || dx === 360 ? [(b[0][0] + b[1][0]) / 2, (b[0][1] + b[1][1]) / 2] : d3.geoCentroid(multiPoint); // First find the shared edge… if (parent) while (++j < n) { if (edges[j] === parent) break; } ++j; for (let i = 0; i < n; ++i) { edge = edges[(i + j) % n]; if (Array.isArray(edge)) { if (!inside) { stream.point((point = d3.geoInterpolate(edge[0], node.centroid)(epsilon))[0], point[1]); inside = true; } stream.point((point = d3.geoInterpolate(edge[1], node.centroid)(epsilon))[0], point[1]); } else { inside = false; if (edge !== parent) outline(stream, edge, node); } } } recurse(tree, {transform: null}); function recurse(node, parent) { node.edges = faceEdges(node.face); // Find shared edge. if (parent.face) { const shared = node.shared = sharedEdge(node.face, parent.face); const m = matrix(shared.map(parent.project), shared.map(node.project)); node.transform = parent.transform ? multiply_3x2_matrices(parent.transform, m) : m; // Replace shared edge in parent edges array. let edges = parent.edges; for (let i = 0, n = edges.length; i < n; ++i) { if (pointEqual(shared[0], edges[i][1]) && pointEqual(shared[1], edges[i][0])) edges[i] = node; if (pointEqual(shared[0], edges[i][0]) && pointEqual(shared[1], edges[i][1])) edges[i] = node; } edges = node.edges; for (let i = 0, n = edges.length; i < n; ++i) { if (pointEqual(shared[0], edges[i][0]) && pointEqual(shared[1], edges[i][1])) edges[i] = parent; if (pointEqual(shared[0], edges[i][1]) && pointEqual(shared[1], edges[i][0])) edges[i] = parent; } } else { node.transform = parent.transform; } if (node.children) node.children.forEach((child) => recurse(child, node)); return node; } function forward(lambda, phi) { const node = face(lambda, phi); const point = node.project([lambda * degrees, phi * degrees]); const t = node.transform; return t ? [t[0] * point[0] + t[1] * point[1] + t[2], -(t[3] * point[0] + t[4] * point[1] + t[5])] : [point[0], -point[1]]; } // Naive inverse! A faster solution would use bounding boxes, or even a // polygonal quadtree. if (hasInverse(tree)) forward.invert = function(x, y) { const coordinates = faceInvert(tree, [x, -y]); return coordinates && (coordinates[0] *= radians, coordinates[1] *= radians, coordinates); }; function faceInvert(node, coordinates) { const invert = node.project.invert; let point = coordinates; let p; let t = node.transform; if (t) { t = inverse(t); point = [t[0] * point[0] + t[1] * point[1] + t[2], (t[3] * point[0] + t[4] * point[1] + t[5])]; } if (invert && node === faceDegrees(p = invert(point))) return p; const children = node.children; for (let i = 0, n = children && children.length; i < n; ++i) { p = faceInvert(children[i], coordinates); if (p) return p; } } function faceDegrees(coordinates) { return face(coordinates[0] * radians, coordinates[1] * radians); } const proj = d3.geoProjection(forward); // run around the mesh of faces and stream all vertices to create the clipping polygon const p = []; const geometry = {type: "MultiPolygon", coordinates: [[p]]}; outline({point: (lambda, phi) => p.push([lambda, phi])}, tree); p.push(p[0]); proj.preclip(d3.geoClipPolygon(geometry).clipPoint(d3.geoArea(geometry) < 4 * Math.PI - 0.1)); proj.tree = function() { return tree; }; return proj; }34:T739,getPylmystFoldout = (proj, options) => { let opts = Object.assign( { scaleFactor: proj.scale()/100, εε: 1e-3, angle:proj.angle(), ε:proj.precision() }, options ); let nodes = []; const faces = []; const folds = []; const shared = []; const centroids = []; const branches = []; const εεRound = (d) => {return Math.round(d/opts.εε)*opts.εε;} const path = d3.geoPath(proj); const bounds = path.bounds({type: "Sphere"}); const extent = ({width:εεRound(bounds[1][0]-bounds[0][0]), height:εεRound(bounds[1][1]-bounds[0][1])}); const faceSide = εεRound(extent.width/5); // vrai, uniquement si angle == 0 const faceHeight = εεRound(extent.height/5); // vrai, uniquement si angle == 0 function recurse(data) { nodes.push(data); let face = new pylmystFace(data, proj, options); faces.push(face); if (data.children) { data.children.forEach(child => {recurse(child)}) } } recurse(proj.tree()); nodes = Array.from(new Set(nodes.map(d => d.face.slice(0,3)).flat())); faces.sort(function(a, b) { return ((a.index < b.index) ? -1 : ((a.index > b.index) ? 1 : 0));}); faces.map(d => {if (d.folds.length>0) return d.folds.map(d=>folds.push(d))}); faces.map(d => {if (d.shared.length>0) return shared.push(d.shared[0])}); faces.map(d => centroids.push({type:"Feature", id:d.index, geometry:{type:"Point", coordinates:d.centroid}})); centroids.sort(function(a, b) { return ((a.id < b.id) ? -1 : ((a.id > b.id) ? 1 : 0));}); faces.map(d => {if (d.branches.length>0) return d.branches.map(d=>branches.push(d))}); return {nodes, faces, folds, shared, vertices:faces.map(f => f.vertices), centroids, branches, projection:proj, extent, bounds, faceSide, faceHeight, scale:proj.scale(), rotation:proj.rotate(), tanslation:proj.translate()} }35:T5af,class pylmystFace extends Face { constructor(data, proj, options) { super(data, proj); const projIco = d3.geoIcosahedral() .scale(proj.scale()/100) .rotate([0,0,0]) .translate([0,0]) .angle(proj.angle()) .center([0, 0]) .precision(proj.precision()); const icosahedron = getIcosahedronFoldout(projIco); switch(data.id) { case 3: this.vertices.reverse(); this.from = icosahedron.faces[3]; break; case 6: this.from = icosahedron.faces[6]; break; case 10: this.vertices.reverse(); this.from = icosahedron.faces[10]; break; case 11: this.vertices.reverse(); this.from = icosahedron.faces[11]; break; case 12: this.vertices.reverse(); this.from = icosahedron.faces[12]; break; case 13: this.from = icosahedron.faces[13]; break; case 14: this.from = icosahedron.faces[14]; break; case 15: this.from = icosahedron.faces[15]; break; case 19: this.from = icosahedron.faces[19]; break; case 20: this.from = icosahedron.faces[13]; break; case 21: this.from = icosahedron.faces[14]; break; default: this.from = icosahedron.faces[data.id]; } } subdivide(sub) { return this.from.subdivide(sub); } }36:T2ba7,PylmystSVGRenderer = (land, options) => { let opts = Object.assign({ scale:1, angle:180, ε: 1e-5, showOceans: true, showLand: true, showEquator: true, showGraticuleOnOceans: true, showGraticuleOnLand: true, showGridOnLand:true, showGridOnOceans:true, gridResolution:1, showFaceNumber:true, showFolds:true, highlightIrregularCells:true, margins:[6,6], backFillColor:'#F5F5DC', backStokrColor:'transparent', landColor: "#947f67", landStrokeWidth: 0.5, landGridColor: "#e6deb2", oceansColor: "#b7c9e2", oceansGridColor: "#b7c9e2", equatorColor: '#000', equatorStrokeWidth: 2, equatorStrokeOpacity: 0.6, legend:"projection geoPylmyst - YLDev @ 2018", numbers:{shift:[0,1], color:"#000"}, sites:{strokeColor:"#000", fillColor:"#fff"} }, options); const half = 364*opts.scale; const extent = ({width: 2*(half+opts.margins[0]), height:2*(half+opts.margins[1])}); const proj = geoPylmyst() .scale(opts.scale*100) .angle(opts.angle) .center([176.33671292158206, 44.80877202222518]) // projection's center = centroid of {type:"Sphere"} .translate([extent.width/2, extent.height/2]) .precision(opts.ε); const proj_fix = geoPylmyst() .scale(opts.scale*100) .angle(opts.angle) .rotate([0, 0, 0]) .center([176.33671292158206, 44.80877202222518]) .translate([extent.width/2, extent.height/2]) .precision(opts.ε); const foldout = getPylmystFoldout(proj_fix, {ε: 1e-5}); const path = d3.geoPath(proj); const path_fix = d3.geoPath(proj_fix); const center = proj_fix.center(); let flatWorld ; if (land.features[0].type!="MultiPolygon") { flatWorld = ({ type: "FeatureCollection", features: [{ type: "Feature", geometry: { type: "MultiPolygon", coordinates: land.features.map(f => f.geometry.coordinates) } }] }) } else { flatWorld = land; } const svg = d3.select(DOM.svg(extent.width, extent.height)); // Svg definitions const defs = svg.append("defs"); // -- Definition of clipPath -- defs.append("path") .datum(flatWorld.features[0].geometry) .attr("id", "clipLandGeometry") .attr("d", path); defs.append("clipPath") .attr("id", "clipLand") .append("use") .attr("xlink:href", "#clipLandGeometry"); defs.append("path") .datum({type:"Sphere"}) .attr("id", "clipSphereGeometry") .attr("d", path_fix); defs.append("clipPath") .attr("id", "clipSphere") .append("use") .attr("xlink:href", "#clipSphereGeometry"); // Svg layers const display = svg.append('g').classed(`display`, true); const background = display.append('rect'); const baseOceans = display.append('g').attr("clip-path", "url(#clipSphere)"); // layer for oceans and graticule on oceans const gridOceans = display.append('g').attr("clip-path", "url(#clipSphere)"); // layer for hex grid on oceans const map = display.append('g').classed(`map`, true).attr("clip-path", "url(#clipSphere)"); //layer for land const baseLand = display.append('g').attr("clip-path", "url(#clipLand)"); // layer for graticule on land const gridLand = display.append('g').attr("clip-path", "url(#clipLand)");// layer for hex grid on land const foldoutLayer = display.append('g').attr("clip-path", "url(#clipSphere)"); // layer for foldout construction const additionalLayer = display.append('g').classed(`addLayer`, true); // layer for complementary data const legend = display.append('g'); // layer for legend const finition = display.append('g').attr("clip-path", "url(#clipSphere)"); // layer for sphere border // BACKGROUND background .attr('x',opts.margins[0]) .attr('y',opts.margins[1]) .attr('width', extent.width- 2*opts.margins[0]) .attr('height', extent.height- 2*opts.margins[1]) .attr('stroke', opts.backStrokeColor) .attr('fill', opts.backFillColor); // OCEANS if (opts.showOceans) { baseOceans.append('path') .datum({type:"Sphere"}) .attr('stroke', 'none') .attr('fill', opts.oceansColor) .attr("fill-opacity", 0.5) .attr('d', path); } // GRATICULE ON OCEANS if (opts.showGraticuleOnOceans) { baseOceans.append('path') .datum(d3.geoGraticule().step([20, 20])()) .classed('graticule', true) .attr('stroke', '#000000') .attr('stroke-width', 0.1) .attr('fill', 'none') .attr('d', path); } // GRID ON OCEANS if (opts.showGridOnOceans) { foldout.faces.forEach((face,i) => { gridOceans.selectAll(`.fhex${i}`) .data(face.subdivide(opts.gridResolution).geo.features) .join("path") .classed(`fhex${i}`, true) .attr("d", d => path_fix(d)) .style("stroke", opts.oceansGridColor) .style("fill", "none") .style("stroke-width", 0.5) .attr("stroke-opacity", 0.8); }) } // IRREGULAR GRID CELLS ON OCEANS if (opts.highlightIrregularCells) { foldout.faces.forEach((face,i) => { gridOceans.selectAll(`.penta${i}`) .data(face.subdivide(opts.gridResolution).geo.features.filter(h =>h.geometry.coordinates[0].length==4)) .join("path") .classed(`penta${i}`, true) .attr("d", d => path_fix(d)) .style("stroke", "#00000") .style("fill", "#b7c9e2") .style("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 0.7); }) } // LAND map.selectAll(".lands") .data(land.features) .join("path") .classed('lands', true) .attr("d", path) .attr("fill", opts.landColor) .attr('stroke-width', opts.landStrokeWidth) .attr("stroke", "#000000"); // GRATICULE ON LAND if (opts.showGraticuleOnLand) { baseLand.append('path') .datum(d3.geoGraticule().step([20, 20])()) .classed('graticule', true) .attr('stroke', '#fff') .attr('stroke-width', 0.1) .attr('fill', 'none') .attr('d', path); } // EQUATOR if (opts.showEquator) { map.append('path') .attr("id", "Equator") .datum(d3.geoGraticule().step([0,100]).extent([[-179.99, -25], [179.99, 25]])()) .classed('equator', true) .attr('stroke', opts.equatorColor) .attr('stroke-width', opts.equatorStrokeWidth) .attr("stroke-dasharray","16.8, 15.2") .attr("stroke-linecap","round" ) .attr("stroke-dashoffset",-3.6) .attr("stroke-opacity",opts.equatorStrokeOpacity) .attr('fill', 'none') .attr('d', path); map.selectAll(".equator_txt") .data(d3.range(17,95,25)) .join("text") .classed('equator_txt', true) .append("textPath") .attr("href", "#Equator") .attr("dominant-baseline", "hanging") .attr("font-size", `${Math.min(16*scale, 18)}px`) .attr("fill", opts.equatorColor) .attr("fill-opacity", opts.equatorStrokeOpacity) .attr("text-anchor", "middle") .attr("startOffset", d => `${d}%`) .text("Equator"); } // GRID ON LAND if (opts.showGridOnLand) { foldout.faces.forEach((face,i) => { gridLand.selectAll(`.fhex${i}`) .data(face.subdivide(opts.gridResolution).geo.features) .join("path") .classed(`fhex${i}`, true) .attr("d", d => path_fix(d)) .style("stroke", opts.landGridColor) .style("fill", "none") .style("stroke-width", 0.5) .attr("stroke-opacity", 0.5); }) } // IRREGULAR GRID CELLS ON LAND if (opts.highlightIrregularCells) { foldout.faces.forEach((face,i) => { gridLand.selectAll(`.penta${i}`) .data(face.subdivide(opts.gridResolution).geo.features.filter(h =>h.geometry.coordinates[0].length==4)) .join("path") .classed(`penta${i}`, true) .attr("d", d => path_fix(d)) .style("stroke", "#00000") .style("fill", "#e6deb2") .style("stroke-width", 0.5) .style("stroke-opacity", 0.5) .attr("fill-opacity", 0.5); }) } // FOLD LINES if (opts.showFolds) { foldoutLayer.selectAll(".fold") .data(foldout.folds) .join("path") .classed('fold', true) .style("fill", "transparent") .style("stroke", "#000") .style("stroke-dasharray", "4 1 4") .style("stroke-opacity", 0.5) .attr("d", d => path_fix(d)); } // FACE NUMBERS if (opts.showFaceNumber) { foldoutLayer.selectAll(".site") .data(foldout.faces.map(face => proj_fix(face.centroid))) .join("circle") .classed('site', true) .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", `${Math.min(9*opts.scale, 18)}px`) .style("fill", opts.sites.fillColor) .style("stroke", opts.sites.strokeColor) .style("stroke-width", 0.3); foldoutLayer.selectAll(".number") .data(foldout.centroids.map(d => ({site:proj_fix(d.geometry.coordinates), id:d.id}))) .join("text") .classed('number', true) .attr("x", d => d.site[0]+opts.numbers.shift[0]) .attr("y", d => d.site[1]+opts.numbers.shift[1]) .attr("dy", 3) .style("font-size", `${Math.min(10*opts.scale, 16)}px`) .style("fill", opts.numbers.color) .attr("text-anchor", "middle") .text(d=>d.id); } // LEGEND let pt1 = proj_fix(foldout.faces[11].vertices.slice(2,3)[0]); let pt2 = proj_fix(foldout.faces[18].vertices.slice(0,1)[0]); legend.append('path') .attr("id", "BaselineTitle") .datum(({type: "LineString", coordinates:[[pt1[0]+2,pt1[1]+2], [pt2[0]+2,pt2[1]+2]]})) .attr('stroke', 'none') .attr('stroke-width', 3) .attr('fill', "none") .attr('d', d =>d3.geoPath(d3.geoIdentity())(d)); legend .append("text") .append("textPath") .attr("href", "#BaselineTitle") .attr("dominant-baseline", "hanging") .attr("font-size", `${Math.min(9*opts.scale, 14)}px`) .attr("fill", "#6a8782") .attr("text-anchor", "middle") .attr("startOffset",'55%') .text(opts.legend); // SPHERE (FOLDOUT) BORDER finition.append('path') .datum({type:"Sphere"}) .attr('class','sphere final') .attr('id','sphere') .attr('stroke', '#000000') .attr('stroke-width', 2) .attr('fill', "none") .attr('d', path); return ({svg:svg.node(), proj, proj_fix, foldout, extent}); }37:T1417,PylmmystSVGFaceRender = (index, land, options={}) => { let opts = Object.assign({ showGraticuleOnOceans: true, showGraticuleOnLand: true, showGridOnLand:true, showGridOnOceans:true, gridResolution:1, land:[], margins:[3,3] }, options); const face = faces[index]; const spin = face.isUpwards(); const northRef = [centroids[index][0], centroids[index][1] + 10]; const path = d3.geoPath(proj); const path_norot = d3.geoPath(proj_fix); const extent = ({width:faceHeight*4/3, height:faceHeight*4/3}); const shift = [proj(centroids[index])[0]-(1+spin)*extent.height/3, proj(centroids[index])[1]-extent.height/2]; const svg = d3.select(DOM.svg(extent.width+2*opts.margins[0], extent.height+2*opts.margins[1])); // Svg definitions const defs = svg.append("defs"); // -- Definition of clipPath -- defs.append("path") .datum(face.shape) .attr("id", "clipShape") .attr("d", path_norot); defs.append("clipPath") .attr("id", "clipFace") .append("use") .attr("xlink:href", "#clipShape"); // Svg layers const display = svg.append('g'); display.append('rect') .attr('x',0) .attr('y',0) .attr('width',extent.width+2*opts.margins[0]) .attr('height',extent.height+2*opts.margins[1]) .attr('fill','#F5F5DC'); // layer for sphere and graticule on oceans const base = display.append('g') .attr('transform',`translate(${opts.margins[0]-shift[0]},${opts.margins[1]-shift[1]})`) .attr("clip-path", "url(#clipFace)"); // layer for hex grid on oceans const grid1 = display.append('g') .attr('transform',`translate(${opts.margins[0]-shift[0]},${opts.margins[1]-shift[1]})`) .attr("clip-path", "url(#clipFace)"); //layer for land const map = display.append('g') .attr('transform',`translate(${opts.margins[0]-shift[0]},${opts.margins[1]-shift[1]})`) .attr("clip-path", "url(#clipFace)"); // layer for graticule on land const baseLand = display.append('g') .attr('transform',`translate(${opts.margins[0]-shift[0]},${opts.margins[1]-shift[1]})`).attr("clip-path", "url(#clipMystara)") .attr("clip-path", "url(#clipFace)"); // layer for hex grid on land const grid2 = display.append('g') .attr('transform',`translate(${opts.margins[0]-shift[0]},${opts.margins[1]-shift[1]})`) .attr("clip-path", "url(#clipFace)"); // layer for foldout construction const foldoutLayer = display.append('g').attr('transform',`translate(${opts.margins[0]-shift[0]},${opts.margins[1]-shift[1]})`) // Sphere base.append('path') .datum(face.shape) .attr('class','sphere init') .attr('stroke', '#000000') .attr('stroke-width', 2) .attr('fill', "#fff") .attr('d', path_norot); // Graticule on oceans if (opts.showGraticuleOnOceans) { base.append('path') .datum(d3.geoGraticule().step([20, 20])()) .classed('graticule', true) .attr('stroke', '#000000') .attr('stroke-width', 0.1) .attr('fill', 'none') .attr('d', path); } // Grid on oceans if (opts.showGridOnOceans) { grid1.selectAll(`.fhex${index}`) .data(face.subdivide(opts.gridResolution).geo.features) .join("path") .classed(`fhex${index}`, true) .attr("d", d => path_norot(d)) .style("stroke", "#b7c9e2") .style("fill", "none") .style("stroke-width", 0.5) .attr("stroke-opacity", 0.8); } // Land map.append("path") .datum(opts.land[0].features[0].geometry) .classed('land', true) .attr("d", path) .attr("fill", "#947f67") .attr('stroke-width', 0.5) .attr("stroke", "#000000"); // Graticule on land if (opts.showGraticuleOnLand) { baseLand.append('path') .datum(d3.geoGraticule().step([20, 20])()) .classed('graticule', true) .attr('stroke', '#fff') .attr('stroke-width', 0.1) .attr('fill', 'none') .attr('d', path); } // Grid on land if (opts.showGridOnLand) { grid2.selectAll(`.fhex${index}`) .data(face.subdivide(opts.gridResolution).geo.features) .join("path") .classed(`fhex${index}`, true) .attr("d", d => path_norot(d)) .style("stroke", "#e6deb2") .style("fill", "none") .style("stroke-width", 0.5) .attr("stroke-opacity", 0.5); } // 3. Project both points const [cx, cy] = proj(centroids[index]); const [nx, ny] = proj(northRef); const cent = foldoutLayer .append("g") .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 5) .attr("fill", "blue") .attr("stroke", "none"); foldoutLayer .append("line") .attr("x1", cx) .attr("y1", cy) .attr("x2", nx) .attr("y2", ny) .attr("stroke", "black") .attr("stroke-width", 2); return ({svg:svg.node(), path}); }38:T14d3,PylmystCanvasRenderer = (land, options) => { let opts = Object.assign({ scale:1, angle:180, ε: 1e-6, showOceans: true, showLand: true, showEquator: true, showGraticuleOnOceans: true, showGraticuleOnLand: true, showGridOnLand:true, showGridOnOceans:true, gridResolution:1, showFaceNumber:true, showFolds:true, highlightIrregularCells:true, margins:[6,6], backColor:'#F5F5DC', landColor: "#947f67", landGridColor: "#e6deb2", oceansColor: "rgba(183, 201, 226, 0.5)", //"#b7c9e2", oceansGridColor: "rgba(76, 138, 224, 1)", //"#b7c9e2", equatorColor: "rgba(0, 0, 0, 0.6)", legend:"Mystara - FR - projection geoPylmyst - YLDev @ 2018", numbers:{shift:[0,4], color:"#000"}, sites:{strokeColor:"#000", fillColor:"#fff"} }, options); const half = 364*opts.scale; const extent = ({width: 2*(half+opts.margins[0]), height:2*(half+opts.margins[1])}); const proj = geoPylmyst() .scale(opts.scale*100) .angle(opts.angle) .center([176.33671292158206, 44.80877202222518]) // projection's center = centroid of {type:"Sphere"} .translate([extent.width/2, extent.height/2]) .precision(opts.ε); const proj_fix = geoPylmyst() .scale(opts.scale*100) .angle(opts.angle) .rotate([0, 0, 0]) .center([176.33671292158206, 44.80877202222518]) .translate([extent.width/2, extent.height/2]) .precision(opts.ε); const foldout = getPylmystFoldout(proj_fix, {ε: opts.ε}); let flatWorld ; if (land.features[0].type!="MultiPolygon") { flatWorld = ({ type: "FeatureCollection", features: [{ type: "Feature", geometry: { type: "MultiPolygon", coordinates: land.features.map(f => f.geometry.coordinates) } }] }) } else { flatWorld = land; } const context = DOM.context2d(extent.width, extent.height); const path = d3.geoPath(proj, context); const path_fix = d3.geoPath(proj_fix, context); context.save(); context.beginPath(); context.fillStyle = opts.backColor; context.fillRect(0, 0, extent.width, extent.height); context.restore(); // SPHERE canvasDrawSphere(context, path, {stroke: "none", fill:opts.oceansColor}); // GRATICULE ON OCEANS if (opts.showGraticuleOnOceans) { canvasDrawGraticule(context, path, null); } // HEX GRID ON OCEANS if (opts.showGridOnOceans) { canvasDrawHexGrid(context, foldout.faces, path_fix, null, {stroke:opts.oceansGridColor, resolution:opts.gridResolution}); } if (opts.highlightIrregularCells) { canvasDrawHexGrid(context, foldout.faces, path_fix, null, {fill: "rgba(76, 138, 224, 0.5)", stroke: "rgba(0, 0, 0, 0.1)", resolution:opts.gridResolution, lineWidth:0.3, filter:(h)=>h.geometry.coordinates[0].length==4}); } // LAND canvasDrawLand(context, path, flatWorld, {fill:opts.landColor}); // EQUATOR if (opts.showEquator) { context.save(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = opts.equatorColor; path(d3.geoGraticule().step([0,100]).extent([[-179.99, -25], [179.99, 25]])()); context.stroke(); context.restore(); } // GRATICULE ON LAND if (opts.showGraticuleOnLand && land) { canvasDrawGraticule(context, path, land); } // HEX GRID ON LAND if (opts.showGridOnLand && land) { canvasDrawHexGrid(context, foldout.faces, path_fix, land, {stroke:opts.landGridColor, resolution:opts.gridResolution}); } if (opts.highlightIrregularCells) { canvasDrawHexGrid(context, foldout.faces, path_fix, land, {fill: "rgba(230, 222, 178, 0.5)", stroke: "rgba(0, 0, 0, 0.1)", resolution:opts.gridResolution, lineWidth:0.3, filter:(h)=>h.geometry.coordinates[0].length==4}); } // FOLDING LINES foldout.shared.map(d => { context.save(); context.beginPath(); context.lineWidth = 0.5; context.setLineDash([4, 1, 4]); context.strokeStyle = "rgba(0, 0, 0, 0.8)"; path_fix(d); context.stroke(); path_fix(foldout.faces[d.index].shape); context.clip(); context.restore(); }); // CENTROID LABEL if (opts.showFaceNumber) { context.save(); context.beginPath(); path_fix.pointRadius(`${Math.min(9*opts.scale, 18)}`)({type:"MultiPoint", coordinates: foldout.centroids.map(c => c.geometry.coordinates)}); context.strokeStyle = "#000"; context.fillStyle = "#fff"; context.stroke(); context.fill(); context.restore(); context.save(); context.beginPath(); context.fillStyle = '#000000'; context.font = `${Math.min(10*opts.scale, 16)}px Oswald`; context.textAlign = 'center'; foldout.centroids.map((d,i) => { let [X,Y] = proj_fix(d.geometry.coordinates); context.fillText(i, X+opts.numbers.shift[0], Y+opts.numbers.shift[1]); }); context.restore(); } // SPHERE canvasDrawSphere(context, path_fix); path({type: "Sphere"}); context.clip(); return ({context, proj, proj_fix, foldout}); }39:T99b,PylmystCanvasFillContours = (valuePoint, options) => { let opts = Object.assign({ showGraticuleOnOceans: true, showGraticuleOnLand: true, showGridOnLand:true, showGridOnOceans:true, gridResolution:1, showFaceNumber:true, showFolds:true, land:[], margin:[3,3], N: 5000, thresholds: 40, fill : d3.scaleLinear().range(["orange", "lime"]) }, options); // from https://observablehq.com/@mbostock/spherical-fibonacci-lattice const phi = (1 + Math.sqrt(5)) / 2; const fibonacci = (i, N) => [i / phi, (i + 0.5) / N]; const points = Array.from({ length: opts.N }, (_, i) => { const [x, y] = fibonacci(i, opts.N); return [(x * 360) % 360, (Math.acos(2 * y - 1) / Math.PI) * 180 - 90]; }); const v = d3.geoVoronoi(points); const contours = d3 .tricontour() .thresholds(opts.thresholds) .triangulate(() => v.delaunay.delaunay) .pointInterpolate((i, j, a) => d3.geoInterpolate(points[i], points[j])(a)) .value(valuePoint) .ringsort((rings) => [rings]); const context = DOM.context2d(2*half+2*opts.margin[0], 2*half+2*opts.margins[1]); const path = d3.geoPath(proj, context); context.save(); context.beginPath(); context.fillStyle = "#F5F5DC"; context.fillRect(0, 0, 2*half+2*opts.margin[0], 2*half+2*opts.margins[1]); context.restore(); context.translate(opts.margin[0], opts.margin[1]); // SPHERE drawSphere(context, path, {stroke: "black", fill:"white", lineWidth:2}); let first = true; for (const c of contours.isobands(points)) { if (first) { first = false; context.beginPath(); path({ type: "Sphere" }); context.fillStyle = opts.fill(c.value); context.fill(); } rearrange(c.coordinates); context.beginPath(); path(c); context.strokeStyle = opts.fill((c.value + c.valueMax) / 2); context.fillStyle = opts.fill((c.value + c.valueMax) / 2); context.fill(); context.stroke(); } drawLand(context, path, opts.land, {fill:"transparent", stroke: "#000000", lineWidth:0.4}); drawGraticule(context, path, null, {stroke: "#000000", graticuleStep:[20, 20], lineWidth:0.1}); drawSphere(context, path, {stroke: "black", fill:"transparent", lineWidth:2}); return ({context, path}); }3a:[{"id":"b5f4efe3930a080b4378b65cf73117328ab420a742edd83b5295d2e0f35ab15d1675e9f41ce08ad135266030707ae104f4a98c84adce8ce8d21ecec96dab37cd","href":"https://static.observableusercontent.com/files/b5f4efe3930a080b4378b65cf73117328ab420a742edd83b5295d2e0f35ab15d1675e9f41ce08ad135266030707ae104f4a98c84adce8ce8d21ecec96dab37cd","name":"mystara2018_FR_YLDev-3.geojson","type":"application/geo+json","lastModified":1788770502816.828,"size":715818}] 2e:{"id":"c81f5e27f11e6019","slug":"geopylmyst","title":"The new geoPylmyst projection","thumbnail":"7ee8a90357e156c4e91f5fd89779f1e415e60304a243e3a087f61ebba3d62dd0","access_level":"public","create_time":"$D2025-05-09T21:58:57.029Z","update_time":"$D2026-09-07T09:15:51.214Z","view_time":null,"first_public_time":"$D2025-05-13T15:11:43.892Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":1816,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"06f314aa212f58b3","slug":"mystara","title":"Mystara","owner":{"id":"9784867a3e59436b","login":"linard-y","name":""}},"type":"notebook","body":{"title":"The new geoPylmyst projection","cells":[{"id":0,"value":"# The new geoPylmyst projection","pinned":false,"hidden":false,"mode":"md"},{"id":855,"value":"_A new **geoP**rojection developped by **y**-**l**inard to **Myst**ara's world._","pinned":false,"hidden":false,"mode":"md"},{"id":859,"value":"This new projection is based on an icosahedral-gnomonic projection with a specific arrangement of icosahedral faces. In addition, one face (face 13) is split in two in the same way as the geoAirocean projection to fit the contours of [Mystara](https://en.wikipedia.org/wiki/Mystara) without cutting off land.","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"The implementation of the code for this projection is based on [the work of Fil Rivière](https://github.com/d3/d3-geo-polygon/blob/main/src/airocean.js) to implement the [geoAirocean projection](https://observablehq.com/@fil/airocean-projection).","pinned":false,"hidden":false,"mode":"md"},{"id":915,"value":"This projection is in response to a challenge launched on another notebook named [Do it like bucky!](https://observablehq.com/@linard-y/do-it-like-bucky#challenge) where the aim was to find a way of unfolding and cutting out the faces of an icosaedre to represent Mystara without any discontinuity of the land.","pinned":false,"hidden":false,"mode":"md"},{"id":1646,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"viewof scale = Inputs.range([0.5,1.5], {label:\"scale\", step:0.1, value:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"viewof angle = Inputs.range([0,360], {label:\"angle\", step:1, value:210})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1736,"value":"#### World data","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"world = FileAttachment(\"mystara2018_FR_YLDev-3.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1729,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1738,"value":"#### Projection definition","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"geoPylmyst = function () {\n const p = pylmystRaw();\n\n p.faceSideExtent = [4*Math.sqrt(3)/2,5];\n\n return p\n .rotate([108, -32, 80])\n .scale(100)\n .angle(-150)\n .translate([30,116]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":" // Finds a shared edge given two clockwise polygons.\nfunction sharedEdge(a, b) {\n const n = a.length;\n let x, y, found = null;\n for (let i = 0; i < n; ++i) {\n x = a[i];\n for (let j = b.length; --j >= 0;) {\n y = b[j];\n if (x[0] === y[0] && x[1] === y[1]) {\n if (found) return [found, x];\n found = x;\n }\n }\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"matrix = (a, b) => {\n\n // Subtracts 2D vectors.\n function subtract(a, b) {\n return [a[0] - b[0], a[1] - b[1]];\n }\n\n // Angle between two 2D vectors.\n function angle(a, b) {\n return Math.atan2(a[0] * b[1] - a[1] * b[0], a[0] * b[0] + a[1] * b[1]);\n }\n\n // Magnitude of a 2D vector.\n function length(v) {\n return Math.sqrt(v[0] * v[0] + v[1] * v[1]);\n }\n \n const u = subtract(a[1], a[0]);\n const v = subtract(b[1], b[0]);\n const phi = angle(u, v);\n const s = length(u) / length(v);\n\n return multiply_3x2_matrices([\n 1, 0, a[0][0],\n 0, 1, a[0][1]\n ], multiply_3x2_matrices([\n s, 0, 0,\n 0, s, 0\n ], multiply_3x2_matrices([\n Math.cos(phi), Math.sin(phi), 0,\n -Math.sin(phi), Math.cos(phi), 0\n ], [\n 1, 0, -b[0][0],\n 0, 1, -b[0][1]\n ])));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":" // Multiplies two 3x2 matrices.\n function multiply_3x2_matrices(a, b) {\n return [\n a[0] * b[0] + a[1] * b[3],\n a[0] * b[1] + a[1] * b[4],\n a[0] * b[2] + a[1] * b[5] + a[2],\n a[3] * b[0] + a[4] * b[3],\n a[3] * b[1] + a[4] * b[4],\n a[3] * b[2] + a[4] * b[5] + a[5]\n ];\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1746,"value":"#### Foldout","pinned":false,"hidden":false,"mode":"md"},{"id":1566,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1752,"value":"#### Renderer","pinned":false,"hidden":false,"mode":"md"},{"id":1643,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"canvasDrawSphere = (context, path, options = {}) => {\n\n let opts = Object.assign({\n stroke: \"black\",\n fill: \"transparent\",\n lineWidth:1\n }, options);\n \n context.save();\n context.beginPath();\n context.lineWidth = opts.lineWidth;\n path({type: \"Sphere\"});\n context.strokeStyle = opts.stroke;\n context.fillStyle = opts.fill;\n context.fill();\n context.stroke();\n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"canvasDrawGraticule = (context, path, land, options={}) => {\n\n let opts = Object.assign({\n stroke: \"#000000\",\n lineWidth:0.1,\n graticuleStep:[20, 20]\n }, options);\n \n context.save();\n if(land) {\n path(land);\n context.clip();\n }\n context.beginPath(); \n path(d3.geoGraticule().step(opts.graticuleStep)());\n context.lineWidth = opts.lineWidth;\n context.strokeStyle = opts.stroke;\n context.stroke();\n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"canvasDrawLand = (context, path, land, options={}) => {\n\n let opts = Object.assign({\n stroke: \"#000000\",\n fill: \"#947f67\",\n lineWidth:0.4\n }, options);\n \n context.save();\n context.beginPath(); \n path(land);\n context.fillStyle = opts.fill;\n context.fill();\n context.lineWidth = opts.lineWidth;\n context.strokeStyle = opts.stroke;\n context.stroke();\n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1774,"value":"canvasDrawHexGrid = (context, faces, path, land, options={}) => {\n\n let opts = Object.assign({\n fill:'transparent',\n stroke: \"rgba(183, 201, 226, 1)\",\n lineWidth:0.2,\n resolution:0,\n filter:(f)=>true\n }, options);\n \n context.save();\n if(land) {\n path(land);\n context.clip();\n }\n\n faces.map(face => {\n const gridCells = face.subdivide(opts.resolution).geo.features.filter(opts.filter);\n gridCells.map(cell => {\n context.save();\n context.beginPath();\n context.lineWidth = opts.lineWidth;\n context.fillStyle = opts.fill;\n context.strokeStyle = opts.stroke;\n path(cell);\n context.fill();\n context.stroke();\n path(face.shape);\n context.clip();\n context.restore();\n })\n });\n context.restore();\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1759,"value":"#### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"import {getIcosahedronFoldout, Face} from \"@linard-y/flat-top-hexagonal-grid-in-an-icosahedral-foldout\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@7\", \"d3-geo-polygon@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 2f:"$2e:body"