30:[] 2e:{"title":"Drifting Continents","cells":[{"id":0,"value":"md`# Drifting Continents`","pinned":false,"hidden":false,"mode":"ojs"},{"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) as demonstrated by Torben Jansen in [Mapping the Mediterranean](https://observablehq.com/@toja/mapping-the-mediterranean).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`By adjusting the slider below, you can review how plate tectonics has shifted the positions of the continents over the course of the Earth's history. Note that the underlying dataset is 19.3 MB, so it may take a few moments to load the first map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof fileName = {\n const form = html`

\n \n \n Ma\n `;\n form.oninput = () => {\n const age = Math.abs(form.a.valueAsNumber);\n form.oa.value = `${age}`;\n //form.oa.value = `${(form.value = Math.abs(form.a.valueAsNumber))}`;\n const key = leftpad3(age) + \"Ma\";\n form.value = filenames.find(f => f.name === key).value;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"{\n const contextIn = DOM.context2d(dem.width, dem.height);\n const path = d3.geoPath(d3.geoIdentity(), contextIn);\n\n // bathymetry\n contextIn.lineWidth = 0.5;\n contours\n .filter(f => f.value < 0)\n .forEach(f => {\n contextIn.fillStyle = colorScale(f.value).brighter(0.4);\n contextIn.strokeStyle = colorScale(f.value);\n contextIn.beginPath(), path(f), contextIn.fill(), contextIn.stroke();\n });\n\n // topography\n contours\n .filter(f => f.value > 0)\n .forEach(f => {\n contextIn.fillStyle = colorScale(f.value).brighter(0.3);\n contextIn.strokeStyle = colorScale(f.value);\n contextIn.beginPath(), path(f), contextIn.fill(), contextIn.stroke();\n });\n\n // output: stretch to fill display\n const contextOut = DOM.context2d(width, height);\n contextOut.drawImage(contextIn.canvas, 0, 0, width, height);\n contextOut.canvas.addEventListener('mousemove', pick);\n\n return contextOut.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`Longitude:${lonlat(\n location[0] || 0\n)}° | Latitude:${lonlat(location[1] || 0)}° | Elevation:${elevation(\n location[2] || 0\n)}m`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Reference`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`Scotese, C.R., and Wright, N., 2018. PALEOMAP Paleodigital Elevation Models\n(PaleoDEMS) for the Phanerozoic PALEOMAP Project, https://www.earthbyte.org/paleodem-resource-scotese-and-wright-2018/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`Thanks to Dr. Scotese for permission to use the data!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`## Contours and color scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`The color map is copied from [Mapping the Mediterranean](https://observablehq.com/@toja/mapping-the-mediterranean), except that we extend the lowest interval to include deep ocean trenches.`;","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":29,"value":"contours = d3\n .contours()\n .thresholds(thresholds)\n .size([dem.width, dem.height])(dem.data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"colorScale = chroma.scale(colors).domain(thresholds)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":87,"value":"md`## Preparing the DEM (Digital Elevation Model)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`The data comes in a ZIP archive. We use [JSZip](https://stuk.github.io/jszip/) to unpack it, as demonstrated by Mike Bostock in [Hello, JSZip](https://observablehq.com/@mbostock/hello-jszip)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"archive = fetch(\n \"https://cors-anywhere.herokuapp.com/\" +\n \"https://www.earthbyte.org/webdav/ftp/Data_Collections\" +\n \"/Scotese_Wright_2018_PaleoDEM/PaleoDEMS_long_lat_elev_csv_v2.zip\"\n)\n .then(response => response.arrayBuffer())\n .then(buffer => jszip.loadAsync(buffer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`Next, we extract the file corresponding to the selected geologic time period. (The appropriate filename is selected by the slider above the map.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"filenames = 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"},{"id":96,"value":"map = archive.file(fileName).async(\"text\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`The formatting of the files is not completely consistent. We quickly standardize them so they can all be handled the same way, and then extract the elevation values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"parsedData = 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"},{"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"},{"id":117,"value":"md`We can now construct the DEM object, following the structure used in Torben Jansen's [Shaded Relief](https://observablehq.com/@toja/shaded-relief)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"dem = Object({\n width: 360,\n height: 180,\n data: vals\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`### Projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"projection = d3\n .geoEquirectangular()\n .translate([dem.width / 2, dem.height / 2])\n .precision(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`### Coordinates display and formatting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"mutable location = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"function pick(event) {\n const x = Math.floor((event.layerX / width) * dem.width);\n const y = Math.floor((event.layerY / height) * dem.height);\n mutable location = [\n ...projection.invert([x, y]),\n dem.data[dem.width * y + x]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"lonlat = d3.format(\"\\u2007> 6.2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"elevation = d3.format(\"\\u2007> 5.0f\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":79,"value":"height = Math.floor((width * dem.height) / dem.width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"chroma = require(\"chroma-js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"jszip = require(\"jszip@3.1.5/dist/jszip.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"d3 = require(\"d3@5\", \"d3-geo\", \"d3-format\", \"d3-contour\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}