2c:null 2d:["$","title",null,{"children":"Paleogeography Maps: Drifting Continents | Christophe Yamahata | Observable"}] 32:T4ee,

Earth paleogeographic timelapse by C. Yamahata on Sketchfab

33:Ta6a,// https://observablehq.com/@mbostock/scrubber function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:[{"id":"6038807240411788aa2635263f774f8cce35d21f6cfabf46f706a078b0d9e00bbdbc08a81d4cc4b03953b1e12e535ad396f49ea3cdf9dec3762eca507b284d6b","href":"https://static.observableusercontent.com/files/6038807240411788aa2635263f774f8cce35d21f6cfabf46f706a078b0d9e00bbdbc08a81d4cc4b03953b1e12e535ad396f49ea3cdf9dec3762eca507b284d6b","name":"PaleoDEMS_long_lat_elev_csv_v2.zip","type":"application/zip","lastModified":1727265618151.332,"size":20302272}] 30:{"id":"f95fd8bc636f37df","slug":"paleogeography-maps-drifting-continents","title":"Paleogeography Maps: Drifting Continents","thumbnail":"2f5ac0ab30e0dcb1e65fb2bb9a8b00d4bbed033fabad3fd4d4956dc16716d623","access_level":"public","create_time":"$D2024-09-25T12:00:12.114Z","update_time":"$D2024-10-06T22:44:24.382Z","view_time":null,"first_public_time":"$D2024-09-25T13:11:05.058Z","fork":{"id":"6785ce3f8559ac90","slug":"drifting-continents","title":"Drifting Continents","owner":{"id":"54b0aa2cda468b5a","login":"jjhembd","name":"Jeshurun Hembd"}},"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":798,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"5ea5ed43fe2a637d","slug":"maps","title":"Maps","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Paleogeography Maps: Drifting Continents","cells":[{"id":0,"value":"md`\n# Paleogeography Maps: Drifting Continents\n\n*This notebook is adapted from [Drifting Continents](https://observablehq.com/@jjhembd/drifting-continents ) by Jeshurun Hembd.*\n\nKey enhancements:\n- Zip file as an attachment for archival purposes\n- Map displayed in SVG format\n- Integrated Mike Bostock’s [scrubber](https://observablehq.com/@mbostock/scrubber) function for smoother interaction\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`The [Paleomap Project](http://www.scotese.com/), led by [Christopher Scotese](https://en.wikipedia.org/wiki/Christopher_Scotese), reconstructs the topography of the Earth over its geologic history. This notebook visualizes the raw paleo-digital elevation models (paleoDEMs), available from [EarthByte](https://www.earthbyte.org/paleodem-resource-scotese-and-wright-2018/). Elevation values are discretized for display using [d3-contour](https://github.com/d3/d3-contour).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Click the “Play” button below to explore the dynamic movement of Earth's continents as plate tectonics have reshaped our planet over millions of years. Note that the underlying dataset is 20 MB (see ᥫ file pane), so it may take a few moments to load the first map.\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":257,"value":"viewof Period = Scrubber(period, { initial: 84, loop: false, alternate: true, autoplay: false, delay: 100, format: d => `Time lapse: ${d.toFixed(0) !=0 ? -d.toFixed(0): 0} Ma`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"viewof map_width = Inputs.range([500, 1200], {value: 900, step: 50, label: htl.html`Map width
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":624,"value":"paleomap_equirectangular = {\n // Create the main SVG element\n const svg = d3.select(DOM.svg(map_width, map_width * dem.height / dem.width));\n\n // Append the paleomap SVG\n svg.node().appendChild(paleomap());\n\n // Add text for Paleo period\n const textX = 0.05*map_width; \n const textY = 0.44*map_width; \n svg.append(\"text\")\n .attr(\"x\", textX)\n .attr(\"y\", textY)\n .attr(\"fill\", \"white\") \n .attr(\"font-size\", Period !== 0 ? 60*map_width/1000+\"px\" : 30*map_width/1000+\"px\")\n .attr(\"font-family\", \"sans-serif\")\n .text(Period !== 0 ? `${-Period} Ma` : \"Modern Era\");\n\n // Return the SVG element\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"DOM.download(() => rasterize(paleomap_equirectangular), \"Paleomap_\"+Period+\"_Ma\", \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":789,"value":"*You can render the SVG to a canvas to generate a PNG. \n
Click on “Save as PNG” to convert, then click on “Download.”*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"
\n## Links and references\nC.R. Scotese and N. Wright, “*PALEOMAP Paleodigital Elevation Models\n(PaleoDEMS) for the Phanerozoic PALEOMAP Project*,” 2018. \n
https://www.earthbyte.org/paleodem-resource-scotese-and-wright-2018/\n\n 11 paleogeography maps from Prof. Ron Blakey (NAU Geology).\n
http://www.stromboidea.de/?n=People.RonBlakey","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":445,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":26,"value":"---\n## Data for DEM (Digital Elevation Model)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":90,"value":"// The data comes in a ZIP archive.\narchive = FileAttachment(\"PaleoDEMS_long_lat_elev_csv_v2.zip\")\n .arrayBuffer()\n .then(buffer => jszip.loadAsync(buffer))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"// Extraction of the file corresponding to the selected geologic time period.\nfilenames = Object.values(archive.files)\n .filter(f => f.dir === false)\n .map(f => {\n const age = f.name.replace(/.*_/, \"\").replace(\".csv\", \"\");\n return { name: age, value: f.name };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"map = archive.file(fileName).async(\"text\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"// The formatting of the files is not completely consistent. \nparsedData = d3\n // Standardize carriage returns\n .csvParse(map.replace(/\\r/g, \"\\n\"))\n // Standardize field names\n .map(p => {\n let lon = p[\"# lon\"] !== undefined ? p[\"# lon\"] : p.longitude;\n let lat = p.lat !== undefined ? p.lat : p.latitude;\n let elev = p.elev !== undefined ? p.elev : p.elevation;\n return { lon, lat, elev };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"// Standardize array sizes: some extend to [+180, -90], others stop at [+179, -89]\n// (data is ordered in rows from top left to bottom right)\nvals = parsedData.filter(d => d.lon < 180 && d.lat > -90).map(d => d.elev)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"// Construct the DEM object\ndem = Object({\n width: 360,\n height: 180,\n data: vals\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":371,"value":"### Colors and contours","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":35,"value":"thresholds = [\n -6000,\n -5200,\n -4800,\n -4400,\n -4000,\n -3600,\n -3200,\n -2800,\n -2400,\n -2000,\n -1600,\n -1200,\n -800,\n -400,\n 0,\n 0,\n 50,\n 100,\n 200,\n 400,\n 600,\n 800,\n 1000,\n 1200,\n 1400,\n 1800,\n 2200,\n 2600\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"contours = d3\n .contours()\n .thresholds(thresholds)\n .size([dem.width, dem.height])(dem.data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"colorScale = chroma.scale(colors).domain(thresholds)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"colors = [\n [42, 56, 100],\n [47, 65, 114],\n [52, 75, 128],\n [57, 85, 140],\n [62, 95, 151],\n [68, 105, 160],\n [75, 115, 167],\n [83, 125, 173],\n [91, 135, 179],\n [100, 144, 185],\n [110, 154, 190],\n [121, 163, 196],\n [132, 172, 201],\n [145, 181, 205],\n [157, 189, 209],\n [190, 202, 188],\n [176, 194, 169],\n [166, 185, 162],\n [180, 193, 169],\n [195, 200, 180],\n [211, 212, 202],\n [235, 233, 226],\n [216, 213, 196],\n [193, 185, 163],\n [181, 156, 116],\n [193, 185, 163],\n [215, 210, 195],\n [240, 240, 240]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"period = Array.from({length: 109}, (_, i) => 540 - 5*i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"fileName = {\n const age = Math.abs(Period);\n const key = leftpad3(age) + \"Ma\";\n return filenames.find(f => f.name === key).value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"### Map projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"projection = d3\n .geoEquirectangular()\n .translate([dem.width / 2, dem.height / 2])\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"height = Math.floor((width * dem.height) / dem.width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"leftpad3 = function(num) {\n let padded = \"\";\n if (num < 100) padded += \"0\";\n if (num < 10) padded += \"0\";\n return padded + num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"paleomap = () => {\n const svg = d3.select(DOM.svg(map_width, map_width * dem.height / dem.width))\n .attr(\"viewBox\", `0 0 ${ dem.width} ${dem.height}`);\n \n // Define the projection and path generator\n const projection = d3.geoIdentity();\n const path = d3.geoPath(projection);\n \n // Draw bathymetry contours\n svg.selectAll(\".bathymetry\")\n .data(contours.filter(f => f.value < 0))\n .enter()\n .append(\"path\")\n .attr(\"class\", \"bathymetry\")\n .attr(\"d\", path)\n .attr(\"fill\", d => colorScale(d.value).brighter(0.4))\n .attr(\"stroke\", d => colorScale(d.value))\n .attr(\"stroke-width\", 0.5);\n \n // Draw topography contours\n svg.selectAll(\".topography\")\n .data(contours.filter(f => f.value > 0))\n .enter()\n .append(\"path\")\n .attr(\"class\", \"topography\")\n .attr(\"d\", path)\n .attr(\"fill\", d => colorScale(d.value).brighter(0.3))\n .attr(\"stroke\", d => colorScale(d.value))\n .attr(\"stroke-width\", 0.5);\n\n // Return the SVG element\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"### Imports and functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"chroma = require(\"chroma-js@2.1.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"jszip = require(\"jszip@3.1.5/dist/jszip.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"d3 = require(\"d3@5\", \"d3-geo\", \"d3-format\", \"d3-contour\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"// https://observablehq.com/@mbostock/saving-svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"// https://observablehq.com/@mbostock/saving-svg\nfunction rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"