2d:null 2e:["$","title",null,{"children":"GeoTIFF contours II | Brady Sheridan | Observable"}] 33:T95c,globe = { const sensitivity = 10, height = 500, width = 500 const svg = d3.create("svg") .attr("id", "orthographic") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto") .style("max-width", "640px") // var projection = d3.geoOrthographic() // .scale(190) // .center([0, 0]) // .rotate(rotationOverrides[filename] || defaultRotation) // .translate([width / 2, height / 2]) // .precision(0.3) const initialScale = projection.scale() var path = d3.geoPath(projection) var globe = svg.append("circle") .attr("id", "globe") .attr("fill", "transparent") .attr("stroke", "#aaa") .attr("stroke-width", "2") .attr("stroke-dasharray", "10 10 10 10") .attr("cx", width / 2) .attr("cy", height / 2) .attr("r", projection.scale()) .style("opacity", 1) // .transition().duration(500).delay(200) // transition 2 // .style("opacity", 1) // Continent contours var map = svg.append("g") .selectAll("path") .data(Array.from(contoursByAge[filename])) .join( enter => enter.append("path") .attr("class", "continent") .attr("fill", "#eee") // .attr("d", d => path(invert(d))) .style("opacity", 1) .transition().duration(3000) .attr("d", d => path(invert(d))) // .transition().duration(1000) // transition 1 // .style("opacity", 1) , update => update.attr("d", d => path(invert(d))) ) // Graticule svg.append("path") .datum(d3.geoGraticule()()) .attr("class", "graticule") .attr("d", path) .attr('fill', 'none') .attr('stroke', 'rgba(0, 0, 0, 0.1)') .attr('stroke-width', '0.5px') // Wisconsin // const wisconsinCoords = [-89.28762583485099,43.031576229845484] // svg // .append("circle") // .attr("cx", wisconsinCoords[1]) // .attr("cy", wisconsinCoords[0]) // .attr("r", 5) // .attr("fill", "green") // Rotate if (rotating) { d3.timer(function() { const rotate = projection.rotate() const k = sensitivity / projection.scale() projection.rotate([rotate[0] - 1 * k, rotate[1]]) path = d3.geoPath().projection(projection) svg.selectAll("path.continent").attr("d", d => path(invert(d))) }) } yield svg.node() }34:T5c2,// globeText = { // const sensitivity = 10, // height = 500, // width = 500 // const svg = d3.create("svg") // .attr("viewBox", `0 0 ${width} ${height}`) // .style("width", "100%") // .style("height", "auto") // .style("max-width", "640px") // var textArc = svg.append("path") // .attr("id", "text-arc") // .attr("transform", `translate(${width / 2}, ${height / 2})`) // .attr("fill", "transparent") // .attr("d", d3.arc()({ // innerRadius: 0, // outerRadius: 190 + 18, // startAngle: -Math.PI, // endAngle: Math.PI // })); // var text = svg.append("text") // .style("font-family", "verdana") // .style("letter-spacing", 6) // .style("font-size", 40) // .style("font-weight", 900) // var textPath = text.append("textPath") //append a textPath to the text element // .attr("xlink:href", "#text-arc") //place the ID of the path here // .style("text-anchor","middle") //place the text halfway on the arc // .attr("startOffset", "38%") // .text("SQUAD WORLD RECORDS") // .style("opacity", 1) // // .transition().duration(500).delay(350) // transition 2 // // .style("opacity", 1) // // Rotate // d3.timer(function() { // const k = sensitivity / 190 // const textOffset = parseFloat(textPath.attr("startOffset")) // textPath.attr("startOffset", `${textOffset + 0.15 * k}%`) // }) // yield svg.node() // }35:[{"id":"16aa16ef5d2e6690cfc0cfcf557ab5bbf6fe61629fbb0ec5752de3cb4403d7a88e3cdb95138b3a37841b019514c29d8d7dd67b27ec6697c692bf1e809e63b1e0","href":"https://static.observableusercontent.com/files/16aa16ef5d2e6690cfc0cfcf557ab5bbf6fe61629fbb0ec5752de3cb4403d7a88e3cdb95138b3a37841b019514c29d8d7dd67b27ec6697c692bf1e809e63b1e0","name":"Map_000Ma.csv","type":"text/csv","lastModified":1697644623637.721,"size":1206624},{"id":"9bed3586dbb0e0835996f5374aef1a5a21cfbbe69a34a324e4bc24f2288277c09bb66887aa9a87f93866d05b76f3f26e3fb8bb4045c080044fa2b638b31290e4","href":"https://static.observableusercontent.com/files/9bed3586dbb0e0835996f5374aef1a5a21cfbbe69a34a324e4bc24f2288277c09bb66887aa9a87f93866d05b76f3f26e3fb8bb4045c080044fa2b638b31290e4","name":"Map_255Ma.csv","type":"text/csv","lastModified":1697654491694.379,"size":872663},{"id":"c43cf9d87ac0cd247bebf21884b578c61494b2af019c94ff785269de5128e16d0571fe4bbcdd0098c177f41921fac28a00a95ec4fc0b0fac7a97ba0d9794e042","href":"https://static.observableusercontent.com/files/c43cf9d87ac0cd247bebf21884b578c61494b2af019c94ff785269de5128e16d0571fe4bbcdd0098c177f41921fac28a00a95ec4fc0b0fac7a97ba0d9794e042","name":"allContours.json","type":"application/json","lastModified":1697674410988.812,"size":9263882},{"id":"933f22a3ea2e62e6508f1e820329399b0943ddc341ba19cd96da5b1f1470752f5c41717a99c9a66f80b2e82886f10f2cca50f5b7ca10b7e5ebb2edf3b68c4bdc","href":"https://static.observableusercontent.com/files/933f22a3ea2e62e6508f1e820329399b0943ddc341ba19cd96da5b1f1470752f5c41717a99c9a66f80b2e82886f10f2cca50f5b7ca10b7e5ebb2edf3b68c4bdc","name":"allContours@1.json","type":"application/json","lastModified":1697676846490.676,"size":8884075},{"id":"eec2477b85e4f5260e81733dcb538ec3a503c4c6b79364d7e45d189c617ce562b7db882fbab0e3e264ac650ae0f7c5813305696c9b3c6cb8df9f6cef26911fe4","href":"https://static.observableusercontent.com/files/eec2477b85e4f5260e81733dcb538ec3a503c4c6b79364d7e45d189c617ce562b7db882fbab0e3e264ac650ae0f7c5813305696c9b3c6cb8df9f6cef26911fe4","name":"allContours@2.json","type":"application/json","lastModified":1697679157687.04,"size":8995382}] 31:{"id":"168bb247be697e7e","slug":"pangea-animation","title":"GeoTIFF contours II","thumbnail":"57ff0389d641bf0168eeed995f4512ae0e7dd482750de29422b254085b74f73d","access_level":"public","create_time":"$D2023-10-18T15:54:26.378Z","update_time":"$D2024-02-26T19:25:17.388Z","view_time":null,"first_public_time":"$D2023-10-18T15:54:26.378Z","has_unpublished_edits":null,"fork":{"id":"6ac0a38a2ff5829c","slug":"geotiff-contours-ii","title":"GeoTIFF contours II","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c53761f873c0cf85","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/eba47f1e12636c97c2b31113a48adef698955cf2d0a1a2f3b8e79dce27f9187f","tier":"starter_2024"},"version":1374,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6be94d5fe1da32d","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5b3e4179948ad2f4395b85f96ea1b025e38d654f49ee7cf2e171f012f03a484c","tier":null}],"members":[{"type":"individual","id":"c6be94d5fe1da32d","login":"bradysheridan","name":"Brady Sheridan","avatar_url":"https://avatars-next.observableusercontent.com/5b3e4179948ad2f4395b85f96ea1b025e38d654f49ee7cf2e171f012f03a484c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"GeoTIFF contours II","cells":[{"id":0,"value":"

GeoTIFF contours II

D3 › Gallery

\n\n# Reverse continental drift animation (Modern day -> pangea)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1087,"value":"mutable rotating = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"viewof ageSlider = Inputs.range([540, 0], {label: \"World age (Ma)\", step: 5, value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"animationState = {\n var age = null,\n min = 0,\n max = 300,\n step = 5,\n dir = \"inc\"\n\n const increment = () => {\n age += step\n if (age === 255)\n age += step\n }\n const decrement = () => {\n age -= step\n if (age === 255)\n age -= step\n }\n const reverse = () => dir = (dir === \"inc\") ? \"dec\" : \"inc\"\n const iterate = () => {\n if (null === age)\n age = 0\n if (\"inc\" === dir && age === max || \"dec\" === dir && age === min) {\n reverse()\n return iterate()\n }\n if (\"inc\" === dir) increment()\n if (\"dec\" === dir) decrement()\n }\n const getFilename = () => `Map_${String(age).padStart(3, '0')}Ma`\n\n yield { age, filename: getFilename() }\n\n while (age < max) {\n iterate()\n await Promises.delay(5000)\n yield { age, filename: getFilename() }\n }\n\n if (age === max) {\n mutable rotating = true\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"projectionInitialScale = 190","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"mutable projection = d3.geoOrthographic()\n .scale(projectionInitialScale)\n .center([0, 0])\n .rotate(rotationOverrides[filename] || defaultRotation)\n .translate([width / 2, height / 2])\n .precision(0.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1131,"value":"## To Do\n- Implement enter, update and exit transitions for continental drift animation (helpful notebook [here](https://observablehq.com/@d3/selection-join))\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1135,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1143,"value":"## Source data\n\n\n*The source data is a 1x1° equirectangular elevation map 360° wide and 180° tall where an elevation of 0 indicates surface level (land). It's pulled from [here](https://observablehq.com/d/578c9dc967a5325f). I processed data locally, using [d3-contour](https://d3js.org/d3-contour) to generate contour polygons at an elevation threshold of 0 for each of the snapshots in the data set (1 snapshot every 5 million years from present-day back to 540Ma). The result is stored here in **contoursByAge**.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"contoursByAge = FileAttachment(\"allContours@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"## State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"filename = \"Map_\" + String(animationState.age ? animationState.age : ageSlider).padStart(3, \"0\") + \"Ma\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"## Rotation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":897,"value":"scaleRotationX = d3.scaleLinear()\n .domain([0, 245])\n .range([60, 15]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"scaleRotationY = d3.scaleLinear()\n .domain([0, 245])\n .range([-9, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"defaultRotation = [\n scaleRotationX(animationState.age ? animationState.age : ageSlider),\n scaleRotationY(animationState.age ? animationState.age : ageSlider)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"rotationOverrides = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":">> *There is an unresolved bug where some combinations of source data / projection rotation yield broken polygons and cause inverted or totally blacked out fill effects on the globe. Ideally I will fix this bug eventually. In the meantime, this array can manually override the default rotation value for a given data set.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1149,"value":"## Contour generation\n\nNot currently used. Leaving in place in-case it's needed later. Right now I'm generating contours locally and uploading them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"n = 360 /* width */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"m = 180 /* height */","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"contourGenerator = d3.contours().size([n, m]).thresholds([0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"