2b:null 2c:["$","title",null,{"children":"Moon GeoTIFF contours on Icosahedron | astroclockface | Observable"}] 31:Tba3,deltoidal_f = { var degrees = 180 / Math.PI; var theta = Math.atan(0.5) * degrees; // construction inspired by // https://en.wikipedia.org/wiki/Regular_icosahedron#Spherical_coordinates var vertices = [[0, 90], [0, -90]].concat( [0,1,2,3,4,5,6,7,8,9].map(function(i) { var phi = (i * 36 + 180) % 360 - 180; return [phi, i & 1 ? theta : -theta]; }) ); // icosahedron var 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(function(face) { var t = face.map(function(i) { return vertices[i]; }); // create 3 polygons from these using centroid and midpoints var f1 = [ t[0], d3.geoInterpolate(t[0],t[1])(0.5), d3.geoCentroid({type:"MultiPoint", coordinates:t}), d3.geoInterpolate(t[0],t[2])(0.5) ]; var f2 = [ t[1], d3.geoInterpolate(t[1],t[2])(0.5), d3.geoCentroid({type:"MultiPoint", coordinates:t}), d3.geoInterpolate(t[1],t[0])(0.5) ]; var f3 = [ t[2], d3.geoInterpolate(t[2],t[0])(0.5), d3.geoCentroid({type:"MultiPoint", coordinates:t}), d3.geoInterpolate(t[2],t[1])(0.5) ]; return [f1, f2, f3]; }); var polygons = { type: "FeatureCollection", features: polyhedron.flat().map(function(face) { face.push(face[0]); return { properties: { sitecoordinates: d3.geoCentroid({type:"MultiPoint", coordinates: face}) }, geometry: { type: "Polygon", coordinates: [ face ] } }; }) }; var parents = [ -1, // 0 2, // 1 0, // 2 5, // 3 5, // 4 22, // 5 8, // 6 8, // 7 28, // 8 11, // 9 11, // 10 34, // 11 14, // 12 14, // 13 40, // 14 16, // 15 2, // 16 16, // 17 17, // 18 18, // 19 18, // 20 19, // 21 21, // 22 21, // 23 23, // 24 24, // 25 24, // 26 25, // 27 27, // 28 27, // 29 29, // 30 30, // 31 30, // 32 31, // 33 33, // 34 33, // 35 35, // 36 36, // 37 36, // 38 37, // 39 39, // 40 39, // 41 41, // 42 42, // 43 42, // 44 46, // 45 20, // 46 46, // 47 49, // 48 26, // 49 49, // 50 52, // 51 32, // 52 52, // 53 55, // 54 38, // 55 55, // 56 58, // 57 44, // 58 58, // 59 ]; //return polygons; return d3.geoPolyhedralVoronoi() .parents(parents) .angle(0) .polygons(polygons) .rotate([108,0]) .scale(131.777) .center([162, 0]); };32:T1260,function map(proj) { const context = d3.create("svg") .attr("viewBox", [0, 0, width, width/2]); proj.fitExtent([[2,2],[width-2, width/2-2]], {type:"Sphere"}); var mpath = d3.geoPath(proj); var map = context.append("g").attr("class", "map").attr("id", "map"); var surface = map.append("g").attr("class", "surface").attr("id", "surface"); var heights = map.append("g").attr("class", "heights").attr("id", "heights"); var labels = map.append("g").attr("class", "labels").attr("id", "labels"); var grid = map.append("g").attr("class", "grid").attr("id", "grid"); var f = map.append("g").attr("class", "faces").attr("id", "faces"); var facecircles = f.append("g").attr("class", "facecircles").attr("id", "facecircles"); var facelabels = f.append("g").attr("class", "facelabels").attr("id", "facelabels"); var c = map.append("g").attr("class", "cuts").attr("id", "cuts"); var holes = c.append("g").attr("class", "holes").attr("id", "holes"); var edges = c.append("g").attr("class", "edges").attr("id", "edges"); if (show_sphere) grid.append("path").datum(d3.geoGraticule()()) .attr("d", mpath) .attr("fill", "none") .attr("stroke", "black") .attr("opacity", .7) .attr("stroke-width", 0.5); if (show_surface) { heights.selectAll("path") .data(moon) .join("path") .attr("d", mpath) .attr("stroke", "black") .attr("stroke-width", 0.1) //.attr("fill", d => d.color) .attr("fill", "none") .attr("opacity", 1); labels .selectAll("text") .data(moon_features2.features) .join("text") .datum(d => d) .text(c => c.properties.clean_name) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", 4) //.attr("transform", c => `rotate(${-c.geometry.coordinates[0]} ${proj(c.geometry.coordinates)[0]} ${proj(c.geometry.coordinates)[1]})`) .attr("x", c => proj(c.geometry.coordinates)[0]) .attr("y", c => proj(c.geometry.coordinates)[1]) } // Polyhedral projections expose their structure as projection.tree() // To draw them we need to cancel the rotate if (show_structure) { var rotate = proj.rotate(); proj.rotate([0,0,0]); // run the tree of faces to get all sites and folds var sites = [], folds = [], cuts = [], corners = [], i = 0; function recurse(face) { var site = d3.geoCentroid({type:"MultiPoint", coordinates:face.face}); site.id = face.id || i++; sites.push(site); var line = face.face line.push(line[0]) cuts.push({ type:"LineString", coordinates: line.map( e => d3.geoInterpolate(e, face.centroid)(1e-5) ) }); face.face.forEach(function(v) { corners.push({ type:"Point", coordinates: d3.geoInterpolate(v, face.centroid)(0.115) }); }); if (face.children) { face.children.forEach(function(child) { folds.push({ type:"LineString", coordinates: child.shared.map( e => d3.geoInterpolate(e, face.centroid)(1e-5) ) }); recurse(child); }); } } recurse(proj.tree()); // sites & numbers if (show_numbers) { facecircles .selectAll("circle") .data(sites) .join("circle") .datum(d => d) .attr("cx", c => proj(c)[0]) .attr("cy", c => proj(c)[1]) .attr("r", 10) .attr("fill", "white") .attr("stroke", "black") .attr("opacity", 1); facelabels .selectAll("text") .data(sites) .join("text") .datum(d => d) .text(c => c.id + 1) .attr("dy", ".4em") .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", 14) .attr("x", c => proj(c)[0]) .attr("y", c => proj(c)[1]) .attr("opacity", 1); } holes .selectAll("circle") .data(corners) .join("circle") .datum(d => d) .attr("cx", c => proj(c.coordinates)[0]) .attr("cy", c => proj(c.coordinates)[1]) .attr("r", 1) .attr("fill", "none") .attr("stroke", "red") .attr("opacity", 1); // map piece edges edges.selectAll("path") .data(cuts) .join("path") .attr("d", mpath) .attr("fill", "none") .attr("stroke", "red") .attr("opacity", 1) .attr("stroke-width", 1); // restore the projection’s rotate proj.rotate(rotate); } return context; }33:[{"id":"7094fa74ac830fb22f330997100a62f3c88485a27f1cb4385dc18298c294032eb2f7cab4d979aebedec517d2a4f800adc3bee531d2ce4c24f8c8bbed9c394473","href":"https://static.observableusercontent.com/files/7094fa74ac830fb22f330997100a62f3c88485a27f1cb4385dc18298c294032eb2f7cab4d979aebedec517d2a4f800adc3bee531d2ce4c24f8c8bbed9c394473","name":"ldem_4.tif","type":"image/tiff","lastModified":1711449377283.784,"size":4153352},{"id":"134196f4a779919c7050256e7eda00faf1b4d12b61994b66139ad2fc7db95ea7646b5e00739a187ddba6d76a509c969b1ec230c1f10152677bbf873665a927f4","href":"https://static.observableusercontent.com/files/134196f4a779919c7050256e7eda00faf1b4d12b61994b66139ad2fc7db95ea7646b5e00739a187ddba6d76a509c969b1ec230c1f10152677bbf873665a927f4","name":"moon_features.json","type":"application/json","lastModified":1711469669190.014,"size":7948566},{"id":"b7ab76981c922a417c9364b1e293e6f69ddf09973ba63236957839254e70b39b0678ce89cf727f81646532badfb1df67d2130a968d47decc904a28f1b826f086","href":"https://static.observableusercontent.com/files/b7ab76981c922a417c9364b1e293e6f69ddf09973ba63236957839254e70b39b0678ce89cf727f81646532badfb1df67d2130a968d47decc904a28f1b826f086","name":"lroc_color_poles_2k.tif","type":"image/tiff","lastModified":1711613968577.353,"size":3339438}] 2f:{"id":"bd72235a03f5e262","slug":null,"title":"Moon GeoTIFF contours on Icosahedron","thumbnail":"7274093135d14837ab391d2b5525e8facf1cd7de4d69b0bbc14f084e23444718","access_level":"public","create_time":"$D2024-03-26T10:35:12.972Z","update_time":"$D2024-04-19T12:28:44.467Z","view_time":null,"first_public_time":"$D2024-03-26T10:35:12.972Z","has_unpublished_edits":null,"fork":{"id":"6ac0a38a2ff5829c","slug":"geotiff-contours-ii","title":"GeoTIFF contours II","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9aa4d20708b4bb78","login":"astroclockface","name":"astroclockface","avatar_url":"https://avatars-next.observableusercontent.com/045d8f6674c0be38934e97186c0283085a000586d0b839e7f7178a6cdffd1e00","tier":"starter_2024"},"version":338,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0a8a3e973a4f485","login":"ronnie-bathoorn","name":"Ronnie Bathoorn","avatar_url":"https://avatars-next.observableusercontent.com/ee2cd0c7cb801fca20d88fd5c40aa3697e70ce6bdf4fdff970d8f02e931e00d0","tier":null}],"members":[{"type":"team","id":"9aa4d20708b4bb78","login":"astroclockface","name":"astroclockface","avatar_url":"https://avatars-next.observableusercontent.com/045d8f6674c0be38934e97186c0283085a000586d0b839e7f7178a6cdffd1e00","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b0a8a3e973a4f485","login":"ronnie-bathoorn","name":"Ronnie Bathoorn","avatar_url":"https://avatars-next.observableusercontent.com/ee2cd0c7cb801fca20d88fd5c40aa3697e70ce6bdf4fdff970d8f02e931e00d0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Moon GeoTIFF contours on Icosahedron","cells":[{"id":0,"value":"

Moon GeoTIFF contours on Icosahedron

D3 › Gallery

\n\n# Moon GeoTIFF contours on Icosahedron\n\nThese contours are computed in equirectangular coordinates and then reprojected.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"display = {\n var div = html`

`;\n div.appendChild(ICOSAHEDRAL.node())\n div.style.resize = 'horizontal';\n div.style.width = \"1024px\";\n div.style.maxWidth = '100%';\n div.style.minWidth = '100px';\n div.style.overflow = 'hidden';\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"ICOSAHEDRAL = map(d3.geoIcosahedral().rotate([180,0]));//deltoidal_f.rotate([180,63])); //.angle(4).rotate([-73.5, 18, -85]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof show_structure = Inputs.toggle({ label: \"show structure\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"viewof show_sphere = Inputs.toggle({ label: \"show sphere\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"viewof show_surface = Inputs.toggle({ label: \"show surface\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof show_numbers = Inputs.toggle({ label: \"show numbers\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"surface_image = surface_tiff.getImage();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"moon_surface = {\n var raster = await surface_image.readRasters();\n var pixels = raster[0];\n return {\n image: surface_image,\n raster: raster,\n pixels: pixels\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"moon = contours(values).map(function(d) { var x = invert(d); x.value = d.value; x.color = color(1 - d.value); return x;} );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"moon_features2 = {\n return {\n type: \"FeatureCollection\",\n features: moon_features.features.filter(moon_feature_filter)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"moon_feature_filter = function (f) {\n if (f.properties.type.startsWith(\"Montes\") && f.properties.diameter > 200) return true;\n if (f.properties.type.startsWith(\"Mare\") && f.properties.diameter > 200) return true;\n if (f.properties.type.startsWith(\"Catenae\") && f.properties.diameter > 200) return true;\n if (f.properties.type.startsWith(\"Crater\") && f.properties.diameter > 80) return true;\n return false;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"moon_features = FileAttachment(\"moon_features.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"contours = d3.contours().size([n, m]).thresholds(thresholds)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"color = d3.scaleSequential(d3.extent(values), d3.interpolateGreys)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"image = tiff.getImage()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"thresholds = d3.range(-8, 10, 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"values = (await image.readRasters())[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"n = image.getWidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"m = image.getHeight()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"The *rotate* function rotates a GeoTIFF’s longitude from ${tex`[0, 360]`} to ${tex`[-180, +180]`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"function rotate(values) {\n var l = n >> 1;\n for (var j = 0, k = 0; j < m; ++j, k += n) {\n values.subarray(k, k + l).reverse();\n values.subarray(k + l, k + n).reverse();\n values.subarray(k, k + n).reverse();\n }\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"The *invert* function converts [*x*, *y*] in pixel coordinates to [*longitude*, *latitude*]. This assumes the source GeoTIFF is in equirectangular coordinates.\n\nInverting the projection breaks the polygon ring associations: holes are no longer inside their exterior rings. Fortunately, since the winding order of the rings is consistent and we’re now in spherical coordinates, we can just merge everything into a single polygon!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"function invert(d) {\n const shared = {};\n\n let p = {\n type: \"Polygon\",\n coordinates: d3.merge(d.coordinates.map(polygon => {\n return polygon.map(ring => {\n return ring.map(point => {\n return [point[0] / n * 360 - 180, 90 - point[1] / m * 180];\n }).reverse();\n });\n }))\n };\n\n // Record the y-intersections with the antimeridian.\n p.coordinates.forEach(ring => {\n ring.forEach(p => {\n if (p[0] === -180) shared[p[1]] |= 1;\n else if (p[0] === 180) shared[p[1]] |= 2;\n });\n });\n\n // Offset any unshared antimeridian points to prevent their stitching.\n p.coordinates.forEach(ring => {\n ring.forEach(p => {\n if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) {\n p[0] = p[0] === -180 ? -179.9995 : 179.9995;\n }\n });\n });\n\n p = d3.geoStitch(p);\n\n // If the MultiPolygon is empty, treat it as the Sphere.\n return p.coordinates.length\n ? {type: \"Polygon\", coordinates: p.coordinates}\n : {type: \"Sphere\"};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"surface_tiff = FileAttachment(\"lroc_color_poles_2k.tif\").arrayBuffer()\n .then(buffer => GeoTIFF.fromArrayBuffer(buffer))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"tiff = FileAttachment(\"ldem_4.tif\").arrayBuffer()\n .then(buffer => GeoTIFF.fromArrayBuffer(buffer))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"GeoTIFF = require(\"geotiff@2.0.7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-array\", \"d3-scale\", \"d3-selection@3\", \"d3-fetch@3\", \"d3-geo@3\", \"d3-geo-polygon@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"