3e:null 3f:["$","title",null,{"children":"Earth Temperature Spiral | Ruzgar Imski | Observable"}] 45:T11d0,radialChart = { const years = data2.map(e => e.year); const minYear = Math.min(...years); const maxYear = Math.max(...years); const nbYear = maxYear - minYear + 1; const values = data2.map(e => e.T); const minValue = Math.min(...values); const maxValue = Math.max(...values); const months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; const angles = d3.range(0, 360, 360 / months.length).map(e => e - 360 / 4); const angleMonths = d3.zip(angles, months); const floorValue = Math.floor(minValue); const capValue = Math.floor(maxValue) + 1; const minDomain = floorValue; const maxDomain = capValue + 0.5; const shift = minDomain; const refCircles = [ { value: 0 - shift, text: '+0°C' }, { value: 1.5 - shift, text: '+1.5°C' }, { value: 2 - shift, text: '+2.0°C' } ]; // console.log(`minValue = ${minValue}, maxValue = ${maxValue}`); // console.log(`floorValue = ${floorValue}, capValue = ${capValue}`); // console.log(`minDomain = ${minDomain}, maxDomain = ${maxDomain}`); // console.log(`shift = ${shift}`); const dataFull = data2.map((d, i) => { return { angle: (i * 2 * Math.PI) / 12, radius: d.T - shift, year: d.year, month: d.month }; }); const width = 900, height = 600, radius = Math.min(width, height) / 2 - 30; const r = d3 .scaleLinear() .domain([minDomain - shift, maxDomain - shift]) .range([0, radius]); const line = d3 .radialLine() .angle(function(d) { return d.angle; }) .radius(function(d) { return r(d.radius); }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block"); const ref = svg .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); const gr = ref .append('g') .attr('class', 'r axis') .selectAll('g') .data(refCircles) .enter() .append('g'); gr.append('circle').attr('r', function(d) { return r(d.value); }); gr.append('text') .attr('y', function(d) { return -r(d.value) - 4; }) .attr('transform', 'rotate(0)') .style('text-anchor', 'middle') .text(function(d) { return d.text; }); const ga = ref .append('g') .attr('class', 'a axis') .selectAll('g') .data(angleMonths) .enter() .append('g') .attr('transform', function(d) { return 'rotate(' + d[0] + ')'; }); ga.append('line').attr('x2', radius); ga.append('text') .attr('x', radius + 6) .attr('dx', '.0em') .attr('dy', '.0em') .attr('transform', function(d) { return d[0] < 180 && d[0] > 0 ? 'rotate(-90 ' + (radius + 6) + ',0)' : 'rotate(90 ' + (radius + 6) + ',0)'; }) .style('text-anchor', 'middle') .style('font-size', 15) .text(function(d) { return d[1]; }); const arrPath = d3.range(nbYear).map(() => ref.append('path')); const dot = ref.append('circle'); const date = ref .append('text') .attr('dy', '.35em') .style('text-anchor', 'middle') .style('font-size', '16px'); const chunkData = function(data) { const dataLocal = data.slice(0); const chunkInit = dataLocal.splice(0, 12); const chunks = [chunkInit]; while (dataLocal.length) { let chunk = dataLocal.splice(0, 12); let lastChunk = chunks[chunks.length - 1]; let lastElt = lastChunk[lastChunk.length - 1]; chunk.unshift(lastElt); chunks.push(chunk); } return chunks; }; const chunkDataPad = function(data, nbArray) { let chunks = chunkData(data); for (let i in d3.range(nbArray - chunks.length)) chunks.push([]); return chunks; }; const updatePlot = function(n) { const data = dataFull.slice(0, +n + 1); const lineEnd = data[data.length - 1]; const point = d3.pointRadial(lineEnd.angle, r(lineEnd.radius)); const chunks = chunkDataPad(data, nbYear); for (const [i, path] of arrPath.entries()) { path .datum(chunks[i]) .attr('class', 'line') .attr('stroke', () => { return d3.rgb(d3.interpolateRainbow(i / nbYear)); }) .attr('d', line); } dot .attr('class', 'dot') .attr('cx', point[0]) .attr('cy', point[1]) .attr('r', 5) .attr('fill', 'black'); date.text(lineEnd.year); }; updatePlot(0); return Object.assign(svg.node(), { update: updatePlot }); }46:T40d,viewof focus = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const brush = d3 .brushX() .extent([ [margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5] ]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [ x(d3.utcYear.offset(x.domain()[1], -50)), x.range()[1] ]; svg.append("g").call(xAxis, x, focusHeight); svg .append("path") .datum(data) .attr("fill", "steelblue") .attr("d", area(x, y.copy().range([focusHeight - margin.bottom, 4]))); const gb = svg .append("g") .call(brush) .call(brush.move, defaultSelection); function brushed({ selection }) { if (selection) { svg.property("value", selection.map(x.invert, x).map(d3.utcDay.round)); svg.dispatch("input"); } } function brushended({ selection }) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }47:T4d7,{ const colorMin = 'DodgerBlue'; const colorMax = 'Crimson'; const max = d3.max(dataExtrema.map(e => e.maxT)); const min = d3.min(dataExtrema.map(e => e.minT)); const mm = d3.max([Math.abs(max), Math.abs(min)]); return table(dataExtrema, { // rank: true, style: 'compact', columns: { dateMax: { title: 'Max.', type: 'string' }, maxT: { title: 'Deviation (°C)', type: 'string', formatter(val, i) { const width = (val / mm) * 60; return html`

${d3.format( '.2f' )(val)}

`; } }, dateMin: { title: 'Min', type: 'string' }, minT: { title: 'Deviation (°C)', type: 'string', formatter(val, i) { const width = (val / mm) * 60; return html`

${d3.format( '.2f' )(val)}

`; } } } }); }48:[] 43:{"id":"97af9cd54c05178b","slug":null,"title":"Earth Temperature Spiral","thumbnail":"ff853f97461c658a36a26d312fdcd74cb4fba9f294b5f55942bf2acee553f946","access_level":"public","create_time":"$D2023-05-13T19:56:38.418Z","update_time":"$D2023-05-13T19:56:38.418Z","view_time":null,"first_public_time":"$D2023-05-13T19:56:38.418Z","has_unpublished_edits":null,"fork":{"id":"4982e24ad9b7c9fc","slug":"earth-temperature-spiral","title":"Earth Temperature Spiral","owner":{"id":"caa24eaf0dba3b8c","login":"oscar6echo","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":501,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Earth Temperature Spiral","cells":[{"id":0,"value":"md`# Earth Temperature Spiral\nInspired by [Ed Hawkins](https://en.wikipedia.org/wiki/Ed_Hawkins_(climatologist) visualisation of rising Earth temperature, [published in 2016](https://www.climatecentral.org/news/see-earths-temperature-spiral-toward-2c-20332). \nBased on Met Office Hadley Centre observations dataset [hadcrut4](https://www.metoffice.gov.uk/hadobs/hadcrut4).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"viewof date = {\n const data = d3.range(data2.length);\n const format = e => {\n const d = data2[e];\n const m = new Date(`${d.year}-${d.month}`).toString().split(' ')[1];\n radialChart.update(e);\n return `${d.year} ${m}`;\n };\n const p = Player(data, {\n width: 500,\n autoplay: true,\n initial: 0,\n delay: 150,\n loop: false,\n format\n });\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md`## World Temperature Variations vs. 1850-1900 Average\nNote that by definition of world average temperature nobody could experienced it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"display\", \"block\");\n\n const clipId = DOM.uid(\"clip\");\n\n svg\n .append(\"clipPath\")\n .attr(\"id\", clipId.id)\n .append(\"rect\")\n .attr(\"x\", margin.left)\n .attr(\"y\", 0)\n .attr(\"height\", height)\n .attr(\"width\", width - margin.left - margin.right);\n\n const gx = svg.append(\"g\");\n\n const gy = svg.append(\"g\");\n\n const path = svg\n .append(\"path\")\n .datum(data)\n .attr(\"clip-path\", clipId)\n .attr(\"fill\", \"steelblue\");\n\n return Object.assign(svg.node(), {\n update(focusX, focusY) {\n gx.call(xAxis, focusX, height);\n gy.call(yAxis, focusY, data.y);\n path.attr(\"d\", area(focusX, focusY));\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"md`## Extrema\nMaxima are almost always after 2015, minima almost always before 1900.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"dataExtrema = {\n const s = d3.sort(data, (a, b) => d3.ascending(a.T, b.T));\n const n = 20;\n return d3.range(n).map(e => ({\n maxDate: fmtDate(s[s.length - 1 - e].date),\n maxT: s[s.length - 1 - e].T,\n minDate: fmtDate(s[e].date),\n minT: s[e].T\n }));\n // return { min: s.slice(0, n), max: s.slice(-n) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`## Chart Utils\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`### Radial Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"cssRadiatChart = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`### Zoom Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"update = {\n const [minX, maxX] = focus;\n const [minY, maxY] = d3.extent(\n data,\n d => d.T\n // minX <= d.date && d.date <= maxX ? d.T : NaN\n );\n chart.update(x.copy().domain(focus), y.copy().domain([minY, maxY]));\n return focus;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"area = (x, y) =>\n d3\n .area()\n .defined(d => !isNaN(d.T))\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.T))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(data, d => d.T))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"xAxis = (g, x, height) =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"yAxis = (g, y, title) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .selectAll(\".title\")\n .data([title])\n .join(\"text\")\n .attr(\"class\", \"title\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(title)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"height = 440","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"focusHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`## Data\n+ Source: Met Office Hadley Centre observations datasets\nhttps://www.metoffice.gov.uk/hadobs/hadcrut4\n\n+ Global average temperature variations vs. pre-industrial 1850-1900 average\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"data2 = dataRaw.map(e => {\n const f = { ...e };\n f.T = f.T - avg_1850_1900;\n return f;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"data = {\n const d = dataRaw.map(e => {\n const f = {\n date: new Date(`${e.year}-${(\"0\" + e.month).slice(-2)}-01`),\n T: e.T - avg_1850_1900\n };\n\n return f;\n });\n d.y = 'Avg °C';\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"avg_1850_1900 = d3.mean(\n dataRaw.filter(e => e.year >= 1850 && e.year <= 1900).map(e => e.T)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"dataRaw = {\n const res = await fetchp(url); // many thanks to https://observablehq.com/@tomlarkworthy/fetchp\n const text = await res.text();\n console.log(res);\n console.log(text);\n const obj = text\n .split(\"\\n\")\n .map((e) =>\n e\n .split(/[\\s/]/)\n .filter((e) => e)\n .slice(0, 3)\n )\n .map((e) => ({\n year: +e[0],\n month: +e[1],\n T: +e[2]\n }))\n .filter((e) => Number.isFinite(e.T));\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"url = 'https://www.metoffice.gov.uk/hadobs/hadcrut4/data/current/time_series/HadCRUT.4.6.0.0.monthly_ns_avg.txt'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`## Annex\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"fmtDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"import { style as faStyle } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"import { Player } from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"import { table } from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"