2a:null 2b:["$","title",null,{"children":"Icosahedron faces | linard-y | Observable"}] 31:T1892,OneFace = { const side = 920 ; const margin = [10,60]; const sign = (i) => {return [0,1,2,3,4,6,8,10,12,14].indexOf(i)==-1 ? 1 : 0;} const faceindex = choices.FaceIndex; const face = foldout().faces[faceindex]; const icosaProj = foldout().projection.scale(100*scalefactor); const orthoProj = d3.geoOrthographic() .rotate(faceRotate[faceindex]) .scale(100*scalefactor) .fitExtent([[0,-4-76*(sign(faceindex))], [side, (side*Math.sqrt(3)/2)+68*(1-sign(faceindex))]], face.shape); const smallOrthoProj = d3.geoOrthographic() .rotate(faceRotate[faceindex]) .fitExtent([[0,0], [180, 180]], {type: "Sphere"}); const identityProj = d3.geoIdentity().scale(4); const icosaPath = d3.geoPath(icosaProj); const orthoPath = d3.geoPath(orthoProj); var smallOrthoPath = d3.geoPath(smallOrthoProj); const noProjPath = d3.geoPath(identityProj); const svg = d3.select(DOM.svg(side+2*margin[0], side*Math.sqrt(3)/2+2*margin[1])); const map = svg.append('g'); const globe = svg.append('g').attr("transform", "translate(10," + (10+sign(parseInt(faceindex))*side*0.56) + ")"); const overlaylayer = svg.append("g"); const defs = svg.append("defs"); let centroid = icosaProj(face.centroid); map.attr("transform", "translate(" + (margin[0] + side/2 - centroid[0]) + "," + (margin[1] - sign(faceindex)*Math.round((Math.sqrt(3)/6)*side) + Math.round((Math.sqrt(3)*side/3))- centroid[1]) + ")"); overlaylayer.attr("transform", "translate(" + (margin[0]) + "," + (margin[1]) + ")"); // map defs.append("path") .datum(face.shape) .attr("id", "clipShape") .attr("d", icosaPath); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#clipShape"); map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 1.5) .attr('fill', mapColor(18)) .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); // GRATICULE ON SEA if (choices.Graticule=="Sea"){ map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.2) .attr('fill', 'none') .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); } // LAND map.append('path') .datum(land) .attr('d', icosaPath) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.5) .attr('fill', mapColor(16)) .attr("clip-path", "url(#clip)"); // GRATICULE ON SEA & LAND if (choices.Graticule=="SeaLand"){ map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.2) .attr('fill', 'none') .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); } // SPHERE map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 4) .attr('fill', "none") .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); // FOLD LINES map.append('path') .datum(foldout().folds[faceindex]) .attr('d', icosaPath) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', mapColor(17)) .attr("clip-path", "url(#clip)"); // HEX GRID map.append("path") .datum(face.subdivide(choices.Subdivision).geo) .attr("class", "hexagon") .attr("d", icosaPath) .attr("clip-path", "url(#clip)") .attr('stroke', mapColor(6)) .attr('stroke-width', 1.5) .attr('stroke-opacity', 0.8) .attr('fill', 'none'); map.append("path") .datum(Object({type:"MultiPoint", coordinates: face.subdivide(choices.Subdivision).geo.features.map(d =>d.properties.centroid.coordinates)})) .attr("class", "hexagonCentroid") .attr("d", icosaPath) .attr("clip-path", "url(#clip)") .attr('stroke', mapColor(6)) .attr('stroke-width', 0.5) .attr('stroke-opacity', 0.8) .attr('fill', 'none'); // OVERLAY with orthographic projection if (choices.Overlay) { defs.append("path") .datum(face.shape) .attr("id", "geoClipShape") .attr("d", orthoPath); defs.append("clipPath") .attr("id", "geoClip") .append("use") .attr("xlink:href", "#geoClipShape"); overlaylayer.append('path') .datum(face.shape) .attr('stroke', mapColor(17)) .attr('stroke-opacity', 0.3) .attr('stroke-width', 1.5) .attr('fill', mapColor(18)) .attr('fill-opacity', 0.2) .attr('d', orthoPath); overlaylayer.append('path') .datum(land) .attr('d', orthoPath) .attr('stroke-opacity', 0.3) .attr('stroke', mapColor(0)) .attr('stroke-width', 0.5) .attr('fill-opacity', 0.3) .attr('fill', mapColor(15)) .attr("clip-path", "url(#geoClip)"); overlaylayer.append('path') .datum(face.subdivide(choices.Subdivision).geo) .attr('d', orthoPath) .attr('stroke-opacity', 0.6) .attr('stroke', mapColor(0)) .attr('stroke-width', 0.5) .attr('fill', 'none') .attr("clip-path", "url(#geoClip)"); overlaylayer.append("path") .datum(Object({type:"MultiPoint", coordinates: face.subdivide(choices.Subdivision).geo.features.map(d =>d.properties.centroid.coordinates)})) .attr("class", "geoHexagonCentroid") .attr("d", orthoPath) .attr("clip-path", "url(#geoClip)") .attr('stroke', mapColor(0)) .attr('stroke-width', 1.5) .attr('stroke-opacity', 0.6) .attr('fill', 'none'); } // GLOBE const sphere = globe.append('path') .datum({type: "Sphere"}) .attr('stroke', 'black') .attr('stroke-width', 1.5) .attr('fill', mapColor(18)) .attr("d", smallOrthoPath); globe.append('path') .datum(d3.geoGraticule()()) .attr('stroke', 'black') .attr('stroke-width', 0.2) .attr('fill', 'none') .attr("d", smallOrthoPath); globe.append('path') .datum(land) .attr('stroke', 'black') .attr('stroke-width', 0.5) .attr('fill', mapColor(16)) .attr("d", smallOrthoPath); globe.append('path') .datum(face.shape) .attr('stroke', "black") .attr('stroke-width', .5) .attr('fill', mapColor(2)) .attr('opacity', 0.5) .attr("d", smallOrthoPath); return svg.node() //hex_points }32:Tce8,{ const side = 920 ; const margin = [10,60]; const sign = (i) => {return [0,1,2,3,4,6,8,10,12,14].indexOf(i)==-1 ? 1 : 0;} const faceindex = choices.FaceIndex; const face = foldout().faces[faceindex]; const icosaProj = foldout().projection.scale(100*scalefactor); const orthoProj = d3.geoOrthographic() .rotate(faceRotate[faceindex]) .scale(100*scalefactor) .fitExtent([[0,-4-76*(sign(faceindex))], [side, (side*Math.sqrt(3)/2)+68*(1-sign(faceindex))]], face.shape); const identityProj = d3.geoIdentity().scale(4); const icosaPath = d3.geoPath(icosaProj); const orthoPath = d3.geoPath(orthoProj); const noProjPath = d3.geoPath(identityProj); const svg = d3.select(DOM.svg(side+2*margin[0], side*Math.sqrt(3)/2+2*margin[1])); const map = svg.append('g'); const defs = svg.append("defs"); let centroid = icosaProj(face.centroid); map.attr("transform", "translate(" + (margin[0] + side/2 - centroid[0]) + "," + (margin[1] - sign(faceindex)*Math.round((Math.sqrt(3)/6)*side) + Math.round((Math.sqrt(3)*side/3))- centroid[1]) + ")"); // map defs.append("path") .datum(face.shape) .attr("id", "clipShape") .attr("d", icosaPath); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#clipShape"); map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 1.5) .attr('fill', mapColor(18)) .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); // GRATICULE ON SEA if (choices.Graticule=="Sea"){ map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.2) .attr('fill', 'none') .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); } // LAND map.append('path') .datum(land) .attr('d', icosaPath) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.5) .attr('stroke-opacity', 0.2) .attr('fill', mapColor(16)) .attr('fill-opacity', 0.1) .attr("clip-path", "url(#clip)"); // GRATICULE ON SEA & LAND if (choices.Graticule=="SeaLand"){ map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.2) .attr('fill', 'none') .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); } // SPHERE map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 4) .attr('fill', "none") .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); // FOLD LINES map.append('path') .datum(foldout().folds[faceindex]) .attr('d', icosaPath) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', mapColor(17)) .attr("clip-path", "url(#clip)"); // HEX GRID map.selectAll(".path") .data(geoHex.filter(d => d.properties.completeness!=1/6)) .enter().append("path") .attr("class", "hexagon") .attr("d", icosaPath) .attr("clip-path", "url(#clip)") .attr('stroke', mapColor(6)) .attr('stroke-width', 1.5) .attr('stroke-opacity', 0.8) .attr('fill', d => color(100*(d.properties.area/(d.properties.completeness))/ref-100)); return svg.node() } 33:Tcf6,{ const side = 920 ; const margin = [10,60]; const sign = (i) => {return [0,1,2,3,4,6,8,10,12,14].indexOf(i)==-1 ? 1 : 0;} const faceindex = choices.FaceIndex; const face = foldout().faces[faceindex]; const icosaProj = foldout().projection.scale(100*scalefactor); const orthoProj = d3.geoOrthographic() .rotate(faceRotate[faceindex]) .scale(100*scalefactor) .fitExtent([[0,-4-76*(sign(faceindex))], [side, (side*Math.sqrt(3)/2)+68*(1-sign(faceindex))]], face.shape); const identityProj = d3.geoIdentity().scale(4); const icosaPath = d3.geoPath(icosaProj); const orthoPath = d3.geoPath(orthoProj); const noProjPath = d3.geoPath(identityProj); const svg = d3.select(DOM.svg(side+2*margin[0], side*Math.sqrt(3)/2+2*margin[1])); const map = svg.append('g'); const defs = svg.append("defs"); let centroid = icosaProj(face.centroid); map.attr("transform", "translate(" + (margin[0] + side/2 - centroid[0]) + "," + (margin[1] - sign(faceindex)*Math.round((Math.sqrt(3)/6)*side) + Math.round((Math.sqrt(3)*side/3))- centroid[1]) + ")"); // map defs.append("path") .datum(face.shape) .attr("id", "clipShape") .attr("d", icosaPath); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#clipShape"); map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 1.5) .attr('fill', mapColor(18)) .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); // GRATICULE ON SEA if (choices.Graticule=="Sea"){ map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.2) .attr('fill', 'none') .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); } // LAND map.append('path') .datum(land) .attr('d', icosaPath) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.5) .attr('stroke-opacity', 0.2) .attr('fill', mapColor(16)) .attr('fill-opacity', 0.1) .attr("clip-path", "url(#clip)"); // GRATICULE ON SEA & LAND if (choices.Graticule=="SeaLand"){ map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.2) .attr('fill', 'none') .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); } // SPHERE map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 4) .attr('fill', "none") .attr('d', icosaPath) .attr("clip-path", "url(#clip)"); // FOLD LINES map.append('path') .datum(foldout().folds[faceindex]) .attr('d', icosaPath) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', mapColor(17)) .attr("clip-path", "url(#clip)"); // HEX GRID map.selectAll(".path") .data(geoHex.filter(d => d.properties.completeness!=1/6)) .enter().append("path") .attr("class", "hexagon") .attr("d", icosaPath) .attr("clip-path", "url(#clip)") .attr('stroke', mapColor(6)) .attr('stroke-width', 1.5) .attr('stroke-opacity', 0.8) .attr('fill', d => color2(100*(d.properties.perimeter/(d.properties.completeness==1?6:5))/refL-100)); return svg.node() } 34:Te21,IcosahedronFaceSelector = options => { // Observable makes a thumbnail from the first canvas or svg or image that is at least 320x200. let opts = Object.assign( { value: 0, scalefactor: 0.5, margin: [4,4] }, options ); let Icosahedron = foldout(); const w = Icosahedron.extent.width*opts.scalefactor ; const h = Icosahedron.extent.height*opts.scalefactor ; const margin = opts.margin; let node = DOM.svg(w+2*margin[0], h+2*margin[1]); node.value = parseInt(opts.value); let svg = d3.select(node); svg.append("defs").append("style").text(` .face { stroke: transparent; fill: transparent; opacity: 1; cursor: pointer; } .face:hover { stroke: #FF0000; stroke-width: .5px; stroke-dasharray: 8,3; fill: #ab90a4; opacity: 0.5; cursor: pointer; } .face.selected:hover { fill: #dec367; opacity: 0.5; } .face.selected { fill: #dec367; opacity: 0.5; } `); let map = svg.append('g').attr("transform", "translate(" + margin[0] + "," + margin[1] + ")"); let projection = d3.geoIcosahedral() .scale(100*opts.scalefactor) .rotate([0, 0, 0]) .fitExtent([[0, 0], [w, h]], {type:"Sphere"}); let path = d3.geoPath(projection); map.append('path') .datum({type:"Sphere"}) .attr('stroke', 'none') .attr('fill', mapColor(18)) .attr('d', path); map.append('path') .datum(land) .attr('d', path) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.5) .attr('fill', mapColor(16)); map.append('path') .datum(d3.geoGraticule()()) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.1) .attr('fill', 'none') .attr('d', path); map.append('path') .datum({type:"Sphere"}) .attr('stroke', mapColor(17)) .attr('stroke-width', 2) .attr('fill', "none") .attr('d', path); // Polyhedral projections expose their structure as projection.tree() // To draw them we need to cancel the rotate var centroids = []; Icosahedron.faces.map((d)=>{centroids.push(d.centroid);}); // sites & numbers map.append('path') .attr('d', path.pointRadius(6)({type:"MultiPoint", coordinates: centroids})) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.5) .attr('fill', mapColor(0)); map.selectAll("text") .data(Icosahedron.faces) .enter().append("text") .attr("transform", function(d) { return "translate(" + projection([d.centroid[0],d.centroid[1]-2])[0] + ',' + projection([d.centroid[0],d.centroid[1]-2])[1] + ")"; }) .attr("fill", mapColor(17)) .attr("font-size", "8px") .attr("text-anchor", "middle") .text(function(d) { return d.index; }) // folding lines Icosahedron.folds.forEach(fold => { map.append('path') .datum(fold) .attr('d', path) .attr('stroke', mapColor(17)) .attr('stroke-width', 0.5) .attr('stroke-dasharray', [3,4]) .attr('fill', mapColor(9)); }); // selector map.selectAll("face") .data(Icosahedron.faces) .enter().append("path") .attr("class", function(d){ if (d.index==node.value) { return "face selected"; } else { return "face"; } }) .attr('d', (d)=>{return path(d.shape);}) .on("click", function(event, d) { map.selectAll(".selected").classed("selected", false); d3.select(this).classed("selected", true); node.value = d.index; node.dispatchEvent(new CustomEvent("input", { bubbles: true })); }) return node; }35:[] 2e:{"id":"cf16da113b33cdca","slug":"icosahedron-faces","title":"Icosahedron faces","thumbnail":"c4c01c8eec5ae4c090393b52cf3945eff1ee7f1ad6c245f4bff55025bd53f458","access_level":"public","create_time":"$D2020-02-06T17:49:39.384Z","update_time":"$D2024-08-30T14:55:16.724Z","view_time":null,"first_public_time":"$D2021-06-30T16:35:57.798Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":5224,"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":"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":"Icosahedron faces","cells":[{"id":0,"value":"md`# Icosahedron faces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Here we can select a face in the foldout of an icosahedron to obtain the gnomonic projection of the Earth on that face, in large size, with options for a graticule and a flat-top hexagonal grid.\n\nThe gnomonic projection’s role is to map all geodesic (aka “great circle”) lines on the sphere to straight lines on the plane. To begin to understand the distortion generated by the gnomonic projection centered on the icosahedral face’s centroid, we can overlay the resized orthographic projection and see how the hexagons are dispersed and distorted.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2084,"value":"viewof choices = {\n const faceIndex = IcosahedronFaceSelector({value: \"0\", scalefactor: 0.3, margin: [4,4] });\n const graticuleOption = Inputs.radio(new Map([[\"None\",\"None\"],[\"Sea (only)\", \"Sea\"],[\"Sea & Land\",\"SeaLand\"]]), {value:\"None\", label:\"Graticule:\"});\n const subdivision = Inputs.range([0,40],{value: 4, step: 1, label:\"Subdivision:\"});\n const ortho_overlay = Inputs.toggle({label:\"overlaying the orthographic projection\", value: false});\n const form = html``;\n form.oninput = () => form.value = {\n FaceIndex: faceIndex.value, \n Graticule: graticuleOption.value, \n Subdivision: subdivision.value,\n Overlay: ortho_overlay.value\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5128,"value":"...you get the selected face, enlarged, with a flat-topped hexagonal grid attached to the face. This grid and all its hexagons are obtained by successively dividing the sides of the face in the X,Y plane formed by your screen. In the XY plane, all these hexagons are regular in surface and length (with the exception, of course, of the hexagons cut along the edge of the face).","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5130,"value":"We will now project this grid onto the globe using the ìnvert` method of the icosahedral gnomonic projection and analyze the distortion of the hexagons.","pinned":false,"hidden":false,"mode":"md"},{"id":4113,"value":"geoHex = {\n const faceindex = choices.FaceIndex;\n const face = foldout().faces[faceindex];\n\n let hex = face.subdivide(choices.Subdivision).geo.features;\n\n hex.forEach(h => {\n h.properties['area'] = polygonConvex(h.geometry.coordinates[0]) ? d3.geoArea(h.geometry) : d3.geoArea({type:'Polygon', coordinates:[h.geometry.coordinates[0].slice().reverse()]}); \n h.properties['perimeter'] = polygonConvex(h.geometry.coordinates[0]) ? d3.geoLength(h.geometry) : d3.geoLength({type:'Polygon', coordinates:[h.geometry.coordinates[0].slice().reverse()]}); \n })\n\n return hex\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4658,"value":"centralHex = geoHex[foldout().faces[choices.FaceIndex].subdivide(choices.Subdivision).centralHex]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5120,"value":"## Area distortion","pinned":false,"hidden":false,"mode":"md"},{"id":5010,"value":"md`Area of the selected face, ${tex `A_{face}`} = ${A.toFixed(5)} sr ${tex `\\approx`} ${(A*R*R).toFixed(2)} km²`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5006,"value":"A = d3.geoArea(foldout().faces[choices.FaceIndex].shape)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5031,"value":"md`Number of hexagons on the face, ${tex `n_{hex}`} = ${n} (${fullHex} plain + ${halfHex} half + ${sixthHex} sixth)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5018,"value":"n = d3.sum(geoHex.map(d=>d.properties.completeness))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5021,"value":"fullHex = geoHex.filter(d => d.properties.completeness==1).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":5025,"value":"halfHex = geoHex.filter(d => d.properties.completeness==0.5).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":5028,"value":"sixthHex = geoHex.filter(d => d.properties.completeness==1/6).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":5034,"value":"md`${tex `ref = \\frac{A_{face}}{n}`} = ${ref.toFixed(5)} sr ${tex `\\approx`} ${(ref*R*R).toFixed(2)} km²`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4560,"value":"ref = A/n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4041,"value":"The inversed orthographic projection of the regular planar hexagons (obtained by subdivisions of the icoshedral face creates distortions between the center and the edges, leading to an areal variation between the projected hexagons (in white if you choose to overlay the orthographic projection in the above figure). We can quantitatively estimate this distortion by calculating the area of each hexagon.\n\nBy normalisation with respect to the face area (${tex `A_{face}`}) divided by the number of hexagons (${tex `n`}), we can calculate the distortion in each hexagon imposed by the `geoIcosahedral` projection in the considered face. See figure below.","pinned":false,"hidden":false,"mode":"md"},{"id":4441,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4434,"value":"legend({ color, title: \"Areal distortion\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5220,"value":"The face is drawn with the gnomonic projection, centered on its centroid; consequently the central hexagon must be the less distorded. We can use the mean area of the central hexagons as a aeral reference. ","pinned":false,"hidden":false,"mode":"md"},{"id":5060,"value":"In the same way, we can calculate the internal distortion by normalisation with respect to the mean area of hexagons, to the median area, or to the central hexagon area.\n\nNote that the peripheral hexagons are the most distorted. Moreover, the perimeter of the chosen face is made up entirely of non-complete hexagons. The three triangular corners can't be consedered in our calculation because they don't form hexagon in the global foldout (just pentagons). For the peripheral half hexagons, we can apply a correction factor to the calculation of areas equivalent to the inverse of the hexagon completeness (1/2).","pinned":false,"hidden":false,"mode":"md"},{"id":4999,"value":"mean = d3.mean(geoHex.filter(d => d.properties.completeness!=1/6), d => d.properties.area/(d.properties.completeness))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4697,"value":"median = d3.median(geoHex.filter(d => d.properties.completeness!=1/6), d => d.properties.area/d.properties.completeness)\n/*\n{\n let weightedHexAreas =[];\n let f = [];\n geoHex.map(d => {\n weightedHexAreas.push((d.properties.area)/(d.properties.completeness));\n f.push(1/(d.properties.completeness))\n })\n return d3.median(weightedHexAreas)//d3.sum(weightedHexAreas)/d3.sum(f);\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":3242,"value":"md`Mean area = ${(mean).toFixed(7)} sr ${tex `\\approx`} ${(R*R*mean).toFixed(2)} km²
\n Median area = ${(median).toFixed(7)} sr ${tex `\\approx`} ${(R*R*median).toFixed(2)}km²
\n Central hexagon area = ${(centralHex.properties.area).toFixed(7)} sr ${tex `\\approx`} ${(R*R*centralHex.properties.area).toFixed(2)}km²
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4908,"value":"bins_dis = (data, options) => {\n let result = [];\n \n let opts = ({\n filter: d => d,\n get: d=>d,\n references:[{ref:1}],\n ...options\n });\n opts.references.map(ref => result.push((d3.bin()(data.filter(opts.filter).map(d => opts.get(d, Object.values(ref)[0])))).map(d => Object.assign(d, {reference:Object.keys(ref)[0]}))));\n return result.flat()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4776,"value":"bins = bins_dis(geoHex, {filter:d => d.properties.completeness!=1/6, get:(d,ref) => 100*(d.properties.area/(d.properties.completeness))/ref-100, references:[{\"A/n\":ref}, {mean:mean}, {median:median}, {central_hex:centralHex.properties.area}]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4729,"value":"Plot.plot({\n x: {\n round: true,\n label: \"Hexagon index\"\n },\n y: {\n grid: true,\n label: \"Area\"\n },\n title:\"Hexagon area\",\n caption: \"Figure 2. Areas of hexagons in the choosen face. To take into account of the peripheral half hexagons, their area has been mutliplied by two. The color scale give the distortion with respect to the choosen face area divided by the number of hexagons.\",\n marks: [\n Plot.frame({ stroke: \"#000\" }),\n Plot.dot(geoHex.filter(d => d.properties.completeness!=1/6), {x: d => d.properties.id, y: d => (d.properties.area/(d.properties.completeness)), fill:d => color(100*(d.properties.area/(d.properties.completeness))/ref-100), r:6}),\n Plot.tickY([ref], {\n stroke: \"red\",\n strokeDasharray: [2, 2]\n }),\n Plot.text([{x:40, y:ref*1.02, text:'A / n'}], {x: \"x\", y: \"y\", text:'text', fontSize:'14px', fill: \"red\", textAnchor: \"start\"})\n ]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4453,"value":"Plot.plot({\n width: 1152,\n title: \"Hexagon area distortion\",\n caption: \"Figure 3. Hexagon area distortion with respect to (i) the choosen face area divided by the number of plain hexagons, (ii) the central hexagon area, (iii) the mean hexagon area and (iv) the median hexagon area. The distortion is calculated as the ratio of the area of the considered hexagon to the reference area.\",\n x: {\n round: true,\n label: \"Area distortion (%)\"\n },\n y: {\n grid: true,\n label: \"Frequency\"\n },\n facet: {\n label:null\n },\n marks: [\n Plot.frame({ stroke: \"#000\" }),\n Plot.rectY(bins, {fx: \"reference\", x1: \"x0\", x2: \"x1\", y: \"length\", fill:d => color((d.x1+d.x0)/2)}),\n Plot.ruleY([0]),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5139,"value":"## Length distortion","pinned":false,"hidden":false,"mode":"md"},{"id":5143,"value":"md`Perimeter of the selected face, ${tex `L_{face}`} = ${L.toFixed(5)} r ${tex `\\approx`} ${(L*R).toFixed(2)} km`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5146,"value":"L = d3.geoLength(foldout().faces[choices.FaceIndex].shape)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5153,"value":"md`Number of hexagon side equivalent per edge of the face, ${tex `N_{side}`} = ${Nside}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5150,"value":"Nside = (choices.Subdivision+1)*3","pinned":false,"hidden":false,"mode":"ojs"},{"id":5159,"value":"md`${tex `ref_L = \\frac{L_{face}}{3*N_{side}}`} = ${refL.toFixed(5)} sr ${tex `\\approx`} ${(refL*R).toFixed(2)} km`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5161,"value":"refL = L/(3*Nside)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5167,"value":"md`The perimeters of plain hexagons are 6 sides and those of half-hexagons are 5 sides. By dividing the perimeter of plain hexagons by 6 and that of half-hexagons by 5, we obtain an average value of the side in each hexagon. Compare this with the reference value to obtain the length distortion in each hexagon.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5171,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5176,"value":"legend({color:color2, title: \"Length distortion\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5195,"value":"meanL = d3.mean(geoHex.filter(d => d.properties.completeness!=1/6), d => d.properties.perimeter/(d.properties.completeness==1?6:5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5200,"value":"medianL = d3.median(geoHex.filter(d => d.properties.completeness!=1/6), d => d.properties.perimeter/(d.properties.completeness==1?6:5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5204,"value":"binsL = bins_dis(geoHex, {filter:d => d.properties.completeness!=1/6, get:(d,ref) => 100*(d.properties.perimeter/(d.properties.completeness==1?6:5))/refL-100, references:[{\"L/Nside\":refL}, {mean:mean}, {median:median}, {central_hex:centralHex.properties.perimeter/6}]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5208,"value":"Plot.plot({\n x: {\n round: true,\n label: \"Hexagon index\"\n },\n y: {\n grid: true,\n label: \"Side\"\n },\n title:\"Hexagon length\",\n caption: \"Figure 2. Lengths of mean hexagon side in the choosen face.\",\n marks: [\n Plot.frame({ stroke: \"#000\" }),\n Plot.dot(geoHex.filter(d => d.properties.completeness!=1/6), {x: d => d.properties.id, y: d => (d.properties.perimeter/(d.properties.completeness==1?6:5)), fill:d => color2(100*(d.properties.perimeter/(d.properties.completeness==1?6:5))/refL-100), r:6}),\n Plot.tickY([refL], {\n stroke: \"red\",\n strokeDasharray: [2, 2]\n }),\n Plot.text([{x:40, y:refL*1.02, text:'L / Nside'}], {x: \"x\", y: \"y\", text:'text', fontSize:'14px', fill: \"red\", textAnchor: \"start\"})\n ]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5214,"value":"Plot.plot({\n width: 1152,\n title: \"Hexagon length distortion\",\n caption: \"Figure 3. Hexagon area distortion with respect to (i) the choosen face area divided by the number of plain hexagons, (ii) the central hexagon area, (iii) the mean hexagon area and (iv) the median hexagon area. The distortion is calculated as the ratio of the area of the considered hexagon to the reference area.\",\n x: {\n round: true,\n label: \"Length distortion (%)\"\n },\n y: {\n grid: true,\n label: \"Frequency\"\n },\n facet: {\n label:null\n },\n marks: [\n Plot.frame({ stroke: \"#000\" }),\n Plot.rectY(binsL, {fx: \"reference\", x1: \"x0\", x2: \"x1\", y: \"length\", fill:d => color2((d.x1+d.x0)/2)}),\n Plot.ruleY([0]),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4591,"value":"Math.sqrt(2*11774.08/(Math.sqrt(3)))*0.621371","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2824,"value":"faceRotate = [\n [0, -60, 0], [-72, -60, 0], [-144, -60, 0],[-216, -60, 0],[-288, -60, 0],\n [0, 0, 0], [-36, 0, 0], [-72, 0, 0],[-108, 0, 0],[-144, 0, 0],[-180, 0, 0], [-216, 0, 0], [-252, 0, 0],[-288, 0, 0],[0, 0, 0],\n [-36, 60, 0], [-36*3, 60, 0], [-36*5, 60, 0],[-36*7, 60, 0],[-36*9, -60, 0]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"land = {\n const topojson = await require(\"topojson\");\n const world = await d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\");\n return topojson.feature(world, world.objects.land);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2455,"value":"scalefactor = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":3164,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3160,"value":"mapColor = d3\n .scaleThreshold()\n .domain([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18])\n .range(\"ffff-e6deb2-dec367-ecb45b-ed8238-e07a5f-d9636c-ab90a4-85aab1-6a8782-869e80-80B266-aad09d-b5ddbf-9ac1ae-aea9a4-947f67-000000-b7c9e2\".split(\"-\").map((d) => `#${d}`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4431,"value":"color = d3.scaleSequential(t => d3.scaleLinear()\n .domain([0, 0.5, 1])\n .range([mapColor(9), mapColor(2), mapColor(4)])\n .interpolate(d3.interpolateRgb.gamma(2.2))(1 - t)).domain([-40,20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5173,"value":"color2 = d3.scaleSequential(t => d3.scaleLinear()\n .domain([0, 0.5, 1])\n .range([mapColor(7), mapColor(0), mapColor(18)])\n .interpolate(d3.interpolateRgb.gamma(2.2))(1 - t)).domain([-20,50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5012,"value":"R = 6371 // Earth's radius in km","pinned":false,"hidden":false,"mode":"ojs"},{"id":3931,"value":"import {foldout} from '@linard-y/flat-top-hexagonal-grid-in-an-icosahedral-foldout'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4105,"value":"import {polygonClip, polygonConvex} from '@d3/polygonclip'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4436,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@2\", \"d3-geo-polygon@1\", \"d3-tile@1\", \"d3-geo-voronoi\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"