27:null 28:["$","title",null,{"children":"Global Temperature since the Last Glacial Maximum (24000 yr BP) | LiangweiOIO | Observable"}] 2d:T426,md`### geoContours
With topdown() we rearrange the data to go from 90° (North pole) to -90° (South pole). With cylinder() we add a copy of the first column to the right of the matrix, so that contours can be seamless on the globe (treated as a cylinder: the neighbours of point 359 are 358 and 0). Then d3.contours() computes the (planar) contours for this matrix. With invert() we transform these contours into GeoJSON, following Mike’s [GeoTIFF Contours II](https://bl.ocks.org/mbostock/83c0be21dba7602ee14982b020b12f51)) example. But we fix the cusps by: 1. Adding contact points so that stitching works even if only 1 point is situated on either side of the antimeridian line. 2. After stitching, removing the shared points (at 180°), as their latitude might be off, creating cusps. Finally, we use topojson.simplify() to limit the number of dots. (The density of dots in the planar contours is uniform, which makes them too dense near the poles of the globe.) `2e:T975, function invert(d) { var shared = {}; var p = { type: "Polygon", coordinates: d3.merge(d.coordinates.map(function(polygon) { return polygon.map(function(ring) { return ring.map(function(point) { return [point[0] / (isize + 1) *360 - 180, 90 - point[1] / jsize * 180]; }).reverse(); }); })) }; // Add contact points with the antimeridian. var epsilon = 1e-5; p.coordinates = p.coordinates .map(function(ring) { ring.pop(); var r = []; for (var i = 0, l = ring.length; i < l; i++) { var p = ring[i]; if (p[0] === 180 && ring[(i+l-1)%l][0] < 180) r.push([p[0], p[1] + epsilon]); if (p[0] === -180 && ring[(i+l-1)%l][0] > -180) r.push([p[0], p[1] - epsilon]); r.push(p); if (p[0] === 180 && ring[(i+1)%l][0] < 180) r.push([p[0], p[1] - epsilon]); if (p[0] === -180 && ring[(i+1)%l][0] > -180) r.push([p[0], p[1] + epsilon]); } r.push(r[0]); return r; }); // Record the y-intersections with the antimeridian. p.coordinates.forEach(function(ring) { ring.forEach(function(p) { if (p[0] === -180 || p[0] === 180) { shared[p[1]] |= p[0] === -180 ? 1 : 2; } }); }); // Offset any unshared antimeridian points to prevent their stitching. p.coordinates.forEach(function(ring) { ring.forEach(function(p) { if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) { p[0] = p[0] === -180 ? -179.9995 : 179.9995; } }); }); p = d3.geoStitch(p); // After stitching remove the shared points -- they are off // see https://github.com/d3/d3-contour/issues/25 p.coordinates = p.coordinates .map(function(ring) { ring.pop(); ring = ring .map(function(p) { var p0 = (p[0] + 180) * (isize + 1) / isize - 180; return [p0, p[1]]; }); ring = ring.filter(function(p) { return Math.abs(p[0]) < 179.9999; }); ring.push(ring[0]); return ring; }) .filter(function(ring) { return ring.length > 0; }); // If the MultiPolygon is empty, treat it as the Sphere. return p.coordinates.length ? {type: "Polygon", coordinates: p.coordinates, value: d.value} : {type: "Sphere", value: d.value}; }2f:T584,function map() { var canvas = this || DOM.canvas(width, 500), context = canvas.getContext("2d"), path = d3 .geoPath() .projection( projection.fitExtent( [ [1, 1], [width - 1, 500 - 1] ], { type: "Sphere" } ) ) .context(context); const render = function () { context.clearRect(0, 0, width, 500); polygons.forEach((p) => { context.beginPath(), path(p), (context.fillStyle = color(p.value)), context.fill(), (context.strokeStyle = "grey"), (context.lineWidth = 0.1), context.stroke(); }); context.beginPath(), path(d3.geoGraticule()()), (context.lineWidth = 0.2), (context.strokeStyle = "black"), context.stroke(); context.beginPath(), path(land), (context.lineWidth = 1.5), (context.strokeStyle = "black"), context.stroke(); context.beginPath(), path({ type: "Sphere" }), (context.lineWidth = 1.5), (context.strokeStyle = "rgba(0,0,0,.5)"), context.stroke(); }; if (d3.geoInertiaDrag) d3.geoInertiaDrag( d3.select(canvas).style("cursor", "move"), null, projection ); var timer = d3.timer(render); invalidation.then( () => (timer.stop(), (timer = null), d3.select(canvas).on(".drag", null)) ); return canvas; }30:[] 2b:{"id":"0589c921cccae1a9","slug":null,"title":"Global Temperature since the Last Glacial Maximum (24000 yr BP)","thumbnail":"0716800dd64528e5a5f213da2598342572ecd3e894cfecfb13b4b60f28dfd1fd","access_level":"public","create_time":"$D2023-04-07T13:29:24.597Z","update_time":"$D2023-04-07T13:29:24.597Z","view_time":null,"first_public_time":"$D2023-04-07T13:29:24.597Z","has_unpublished_edits":null,"fork":{"id":"3589f4659cf711a6","slug":"temperature-change-since-the-last-glacial-maximum-24000-ye","title":"Global Temperature since the Last Glacial Maximum (24000 yr BP)","owner":{"id":"f2c21786e0c9f50c","login":"cadasa","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"5b1f845af070d16a","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":"starter_2024"},"version":1307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null}],"members":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Global Temperature since the Last Glacial Maximum (24000 yr BP)","cells":[{"id":0,"value":"title = md`# Global Temperature since the Last Glacial Maximum (24000 yr BP)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"dashboard2 = html` \n \n \n \n \n \n

\n ${viewof select}\n

\n ${viewof projName}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"visual = map(polygons)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"legend = html`\n\n \n \n \n \n \n \n

\n ${viewof toggle}\n

\n ${legend2}\n

\n Map designed by Khanh Nguyen, 2021
\n Data source: https://www.ncdc.noaa.gov/paleo/study/33112\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"//viewof select = Inputs.select(d3.range(100,24100,200), {value: 23900, label: \"Years BP\", width: 200})\nviewof select = Scrubber(d3.range(23900,-100,-200), {\n delay: 1000,\n autoplay: false,\n initial: 0,\n loop: false,\n format: (select) => \"Age: \" + (select + 100) + \" - \" + (select - 100) + \" yr BP\",\n alternate: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"viewof toggle = Inputs.toggle({value: \"True\", label: md`Compare with
200 - 0 yr BP?`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof projName = radio({\n title: \"Choose projection\",\n description: \"\",\n options: [\n { label: \"Orthographic\", value: \"ortho\" },\n { label: \"Equirectangular\", value: \"equirectangular\" },\n { label: \"Hill\", value: \"hill\" },\n { label: \"Equal-Earth\", value: \"equalearth\" },\n { label: \"AzEqualArea\", value: \"azequalarea\" }\n ],\n value: \"ortho\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"legend2 = toggle? Legend(d3.scaleDiverging(t=>d3.interpolateRdBu(1-t)).domain([-17, 0, 17]), {\n title: \"Change of surface air temperature (SAT) at reference height (°C)\",\n tickFormat: (d) => `${d}°C`,\n tickSize: 3,\n width: 440,\n height: 55,\n ticks: 10\n}): Legend(d3.scaleDiverging(t=>d3.interpolateRdBu(1-t)).domain([-55, 0, 55]), {\n title: \"Surface air temperature (SAT) at reference height (°C)\",\n tickFormat: (d) => `${d}°C`,\n tickSize: 3,\n width: 440,\n height: 55,\n ticks: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"{ \n while (true) {\n var p = projection.rotate().map(d3.format(\".2f\"));\n yield md`Angles: λ = ${p[0]}, φ = ${p[1]}, γ = ${p[2]}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"viewof dataSource = radio({\n title: 'Choose data source',\n description: '',\n options: sources.map((d,i) => (d.value = i, d)),\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`### Read NetCDF`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"netcdf = require('https://unpkg.com/netcdfjs@0.3.1/dist/netcdfjs.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"sources = [\n {src: \"navy_winds_2.nc\", variable: \"UWND\", label: \"Winds UWND\"},\n {src: \"navy_winds_2.nc\", variable: \"VWND\", label: \"Winds VWND\"},\n {src: \"etopo60_2.nc\", variable: \"ROSE\", label: \"Topography\"},\n {src: \"temp.nc\", variable: \"TEMP\", preprocess: true, label: \"Ocean temperatures\"},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"source = sources[dataSource]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"// WND values are -1000000 for Earth and there is a 160° shift\nfunction preprocessWnd(values) {\n values = values.map(d => d < -1e4 ? -3 : d);\n for (var j=0; j topology.arcs[r[0]].length > 2);\n var p = topojson.feature(topology, topology.objects.polygon);\n p.value = polygon.value;\n return p;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`### Creating the map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"color =toggle? d3.scaleDiverging([-17, 0, 17],d3.interpolateRdBu): d3.scaleDiverging([55, 0, -55],d3.interpolateRdBu)//.domain(d3.extent(values))\t\t// https://github.com/d3/d3-scale-chromatic\n// .domain(d3.extent(values))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"color.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"projection = {\n switch (projName) {\n case \"ortho\":\n var p = d3.geoOrthographic().precision(0.1);\n d3.timer((_) =>\n p.rotate([p.rotate()[0] + 0.1, p.rotate()[1], p.rotate()[2] || 0])\n );\n return p;\n case \"hill\":\n return d3.geoHill();\n case \"azequalarea\":\n return d3.geoAzimuthalEqualArea();\n case \"equalearth\":\n return d3.geoEqualEarth().rotate([0, 0]);\n case \"equirectangular\":\n default:\n return d3.geoEquirectangular();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"land = {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"d3 = require(\"d3-selection@1\", \"d3-geo@1\", \"d3-format@1\", \"d3-scale-chromatic@1\", \"d3-scale@2\", \"d3-interpolate@1\", \"d3-contour@1\", \"d3-array@2\", \"d3-fetch@1\", \"d3-geo-projection@2\", \"d3-timer@1\", \"d3-inertia@0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"viewof sat = csvInput({\n initialUrl: \"https://cadasa.github.io/sat.txt\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"sat.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"import {csvInput} from \"@bcardiff/csv-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"sat_sel = new Float32Array((sat.data.filter(d => d.age ==select).map((d) => (d.value = +d.lon >= 180.0? +d.lon - 180.0: +d.lon + 180.0, d)).map(d => [+d.lat, d.value, +d.sat])).sort((a, b) => a[0] - b[0] || a[1] - b[1]).map(d =>+d[2]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"sat100 = new Float32Array((sat.data.filter(d => d.age ==100).map((d) => (d.value = +d.lon >= 180.0? +d.lon - 180.0: +d.lon + 180.0, d)).map(d => [+d.lat, d.value, +d.sat])).sort((a, b) => a[0] - b[0] || a[1] - b[1]).map(d =>+d[2]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"values = toggle? sat_sel.map((d, i) => sat100[i] - d): sat_sel","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"//ages = sat.data.map(d => d.age).filter( function( item, index, inputArray ) {\n// return inputArray.indexOf(item) == index;\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"