31: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 }); }32:T7d7,ts = { reset; const sl = d3.scaleLinear(); const fmt_date = d3.timeFormat("%Y-%m-%d"); const marks = [ Plot.ruleY([0]), Plot.dot(data, { x: "date", y: "T", stroke: "T", tip: false }), Plot.lineY( data, Plot.windowY(12, { x: "date", y: "T", stroke: "black", opacity: 0.5 }) ), Plot.tip( data, Plot.pointerX({ x: "date", y: "T", title: (d) => [fmt_date(d.date), d.T.toFixed(2)].join("\n") }) ) ]; const renderPlot = (xDomain, yDomain) => Plot.plot({ width: 960, height: 450, marks, x: { domain: xDomain, grid: true }, y: { domain: yDomain, grid: true, tickFormat: "+f", label: "↑ avg temp vs. ref (°C)" }, color: { scheme: "BuRd", legend: false }, caption: "The spectacular rise of the Earth average surface temperature over since 1900" }); const insertPlot = (xDomain, yDomain) => { const chart = renderPlot(xDomain, yDomain); div_chart.html("").append(() => chart); div_legend.html("").append(() => chart.legend("color")); return [chart.scale("x"), chart.scale("y")]; }; const zoomed = (e) => { // console.log(e.transform); const x = sl.domain(xScale.domain).range(xScale.range); const xDomain = e.transform .rescaleX(x) .domain() .map((e) => new Date(e)); const y = sl.domain(yScale.domain).range(yScale.range); const yDomain = e.transform.rescaleY(y).domain(); insertPlot(xDomain, yDomain); }; const div_chart = d3.create("div"); const div_legend = d3.create("div"); const xDomain = d3.extent(data, (d) => d.date); const yDomain = d3.extent(data, (d) => d.T); const [xScale, yScale] = insertPlot(xDomain, yDomain); const zoom = d3.zoom().scaleExtent([1, 10]).on("zoom", zoomed); div_chart.call(zoom); return { chart: div_chart.node(), legend: div_legend.node() }; }33: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)}

`; } } } }); }34:[] 2f:{"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 [hadcrut5](https://www.metoffice.gov.uk/hadobs/hadcrut5/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":558,"value":"ts.legend","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"ts.chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"viewof reset = Inputs.button(\"reset zoom\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"md`## Extrema\nMaxima are almost always after 2015, minima almost always before 1900.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"dataExtrema = {\n const s = d3.sort(data, (a, b) => d3.ascending(a.T, b.T));\n const n = 25;\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"},{"id":706,"value":"---\n \n## Data\n \n+ Source: Met Office Hadley Centre observations dataset \n**deprecated**: https://www.metoffice.gov.uk/hadobs/hadcrut4 \n**replaced by**: https://www.metoffice.gov.uk/hadobs/hadcrut5/ \n\n+ Global average temperature variations vs. pre-industrial 1850-1900 average\n","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":736,"value":"dataRaw = {\n const res = await fetchp(url2); // many thanks to https://observablehq.com/@tomlarkworthy/fetchp\n console.log(res);\n const txt = await res.text();\n // console.log(txt);\n const arr = await d3.csvParse(txt);\n console.log(arr);\n const arr2 = arr.map((e) => {\n const [year, month] = e[\"Time\"].split(\"-\");\n return {\n year: +year,\n month: +month,\n T: e[\"Anomaly (deg C)\"],\n T_lower: e[\"Lower confidence limit (2.5%)\"],\n T_higher: e[\"Upper confidence limit (97.5%)\"]\n };\n });\n console.log(arr2);\n return arr2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"url2 = \"https://www.metoffice.gov.uk/hadobs/hadcrut5/data/HadCRUT.5.0.2.0/analysis/diagnostics/HadCRUT.5.0.2.0.analysis.summary_series.global.monthly.csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"---\n## Annex","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"cssRadiatChart = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"fmtDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"import { style as faStyle } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"import { fetchp } from \"@tomlarkworthy/fetchp\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"import { Player } from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"import { table } from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}