2d:null 2e:["$","title",null,{"children":"A climate spiral fit for 2020 | Graham Snyder | Observable"}] 33:T15dc,md`Let's run through some critiques, and how I've tried to address them: #### Lines between data points are straight Joining the data points on a polar plot with straight lines creates an artefact where the radius of the curve diminishes between datapoints, as if the temperature anomaly had dropped. A constant anomaly should appear as a constant radius – i.e., a circle – but instead on Ed's chart this appears as a dodecahedron. It's understandable – MATLAB's handling of polar plots is pretty poor – but nevertheless there's room for improvement and indeed others have done so – for example, Tim Osborn's [uses linear changes in radius](https://interpretingcc.wordpress.com/2016/08/19/spirographs/), which best approximates Ed's chart without the chord artifact, and Ed Weibe uses [what appears to be cubic splines](http://scribili.ca/HadCRUT4_spiral.php) to smooth out the sudden changes in gradient. I think there remains room for improvement on both of these approaches. For me, the idea of this sort of visualisation is not to perfectly represent the underlying dataset – indeed, trying to read exact values off this spaghetti would be a nightmare. Instead the point is to convey an optimal *impression* of of what's going on. Using linearly-changing radius is true to the underlying dataset – we can see from the kinks in the line where the actual datpoints are, and infer the resolution of the data. But the resolution of the underlying data is not important to the message, and the kinks in the line suggest sudden discontinuities in the way the data is changing – perhaps declining smoothly over January then switching to an upward trend instantaneously on February 1st. Cubic splines address this by smoothing out data, giving a better qualitative impression of the way continuous systems vary – but they do a bad job of it, having a tendency to introduce spurious peaks and troughs, sometimes far outside the range of variation in the underlying data. You can see this happening in Ed Weibe's chart, especially in the earlier years. My effort instead uses D3's Catmull-Rom interpolation, which better accounts for the wider context of each data point, producing a smooth and plausible best-fit curve. To be clear, the interpolated values are no more "real" than the linear or cubic-interpolated ones, but the impression of smooth, gentle variation between data points and no sudden changes in gradient gives a more realistic impression of how the data might vary if it were measured at high resolution. In D3, the line is converted to polar coordinates *after* the interpolation, ensuring no artefacts arise as a result of the conversion. #### The meaning of the colours is unclear In Ed's original visualisation, the colour of the line varies over the course of the animation, starting off a deep blue and ending a bright yellow. The change in colour as the temperature increases gives the impression that perhaps the colour is representing something related to the temperature – but it's clear that can't be the whole story because overlapping lines often have different colours. Indeed, the colour is representing something correlated with temperature: time. But there is no intuitive mapping here – recentness has no relationship to yellowness, nor the past to blueness. Temperature, conversely, does – red and yellow hues intuitively correspond to higher temperatures and blues and greens to lower ones. Indeed, these "warm" and "cool" categorisations are built into our language. Whether this is an instinctive relationship (from fire and ice, for example) or one learned by convention is irrelevant – the point is that it is universally understood. So the fact that the chosen colour scale happens to map roughly to the increasing temperatures being conveyed is convenient, but at the same time confusing, because at the same time we can see the supposed pattern being violated. Indeed, Ed's own website [includes](http://www.climate-lab-book.ac.uk/2016/spiralling-global-temperatures/), in its FAQ on the spiral, the question "What do the colours mean?". The very fact that this question is asked reveals that there is a problem, and from a designer's perspective, it's a red flag: good design should not need explanation, but should be able to be grasped intuitively. We can hypothesise about why a colour scale was deemed necessary: MATLAB is not a friendly environment for rich visualisations. If the colour of the line does not change over the course of the animation, lines that overlap would have the same colour, eventually merging into a single, indecipherable blob. The colour scale solves this issue, but introduces its own: "what does the colour mean?". This is compounded by the choice of the Viridis colourmap, which while commendably chosen for its colourblind-friendliness, prompts the viewer to try to interpret it in terms of temperature. A further unfortunate side-effect of the opaque lines is the gradual obscuring of the 0ºC line, so that the viewer is no longer able to get an absolute reference for the temperature – in turn further encouraging the misinterpretation of the colour. What is the solution? The temperature-correlated colour scale does have the positive side-effect of underscoring the trend in the data. So let's keep that and refine it, by using a red-blue diverging colour scale, where temperature anomalies below zero are shown in increasingly cool blues and those above in increasingly warm yellows and reds. Fortuitously, this colour mapping is also fully accessible to the colourblind.`34:Tde3,md`With the colour now representing temperature direcly rather than changing over time, we need to find new ways to show when paths overlap and to convey the passage of time. The solutions are simple: first, we can use blending modes to make overlapping lines interact: where two lines of similar colour overlap, the colour becomes deeper and more saturated. This works even when the lines are fully opaque, and becomes more intense with a higher density of overlapping lines, giving intuitive understanding. Second, after a part of the line is first plotted, it begins to fade, ultimately reaching 20% opacity after 20 further years' worth of data have been plotted. Again, this fading is grasped intuitively – paints and dyes fade in a literal sense over the passage of time, and analogies of the past as something less visible, more distant, shrouded in mist, are common. It is a natural mapping. At the same time, it is clear to the viewer which lines are most recently plotted, so that the trend over the course of the animation is obvious. Finally, the axes are superimposed on the chart, but are semi-transparent, so as not to obscure underlying data. Important axis labels are opaque, with a white stroke to improve readability on a background of messy lines. #### It's... kinda ugly This isn't really Ed's fault – I've worked extensively with MATLAB and trying to get it to output pleasing graphics is a frustrating and often fruitless experience. Text handling, anti-aliasing, axis properties, transparency, and so on are all poor. Animated output is either live in MATLAB or by rendering frame-by-frame to file. The built-in colourmaps used to be abysmal and are now acceptable for practical data presentation but remain underwhelming. Effective custom colourmaps are notoriously hard to create by hand. Other aspects are design choices that MATLAB does make available but are not the ones I would make – the centre of the chart feels extremely cramped, for example, with the plot encroaching on the central date. The power and flexibility of SVG, canvas and D3 enable clear, attractive typography, scalability, practical use of transparency, and pleasing and intuitive colour scales. There's certainly more that could be explored – especially in terms of interactivity, where the web opens up the possibility of mouseovers and the like. For now, I have chosen to end this project here with a simple replay button. One critique of the original graph that I haven't attempted to address is the visualisation of uncertainty in the data; there's certainly scope for this, perhaps in the same style as Mike Bostock's graph, but I think it would introduce unhelpful busyness to the chart and distract from the principal message. And one area the original graph succeeds but I haven't yet replicated is the clear demarcation of the 1.5ºC and 2ºC thresholds as representing dangerous milestones to reach. I think the use of just 0, 1.5 and 2ºC gridlines was a great design choice, and I've followed Ed's lead there, but at time of publishing I'm still exploring ways to convey the "danger zone". ### About the author I've you've got this far, thanks for reading! I'm an engineer, designer, and project manager with a strong ethical focus. I'd love to do more work in science communication and data visualisation and I'm expanding my toolset to that end. If you're trying to make the world better and think you can make use of my skills, please don't hesitate to get in touch. And if you're interested in the nitty gritty, read on.`35:T82a,md`The chart uses D3's \`\`timer\`\` to animate the plotting of the HadCRUT4 historical global temperature anomaly dataset. Plotting is handled with two HTML \`\`canvas\`\` elements and an SVG, all superimposed. Mike Bostock's [radial area chart example](https://observablehq.com/@d3/radial-area-chart), on which this chart is based, is drawn entirely in SVG, but the aesthetic intent in my chart (specifically, the fading out of older data and the use of blending modes to show where paths overlap) necessitated that individual line segments were plotted separately. Performance-wise, browsers do not cope well with SVGs with over 2000 elements, and to accomplish the fading transition of the paths in HTML canvas still requires all of the fading paths to be redrawn every frame. As such, to achieve satisfactory performance, plotting was divided between two canvases: newly-added paths that are still fading out are drawn to a canvas that is redrawn every frame of the animation, but as soon as a path has faded to its minimum opacity, it is instead drawn to a second, static canvas below the first. Because the paths on the second canvas are no longer changing, the canvas never needs to be cleared or redrawn, so the demanding continuous plotting is restricted to the small (and fixed-size) subset of paths on the top canvas. The canvas plotting makes use of a virtual DOM to keep track of the status of the plot's line segments over the course of the animation. This allows the use of D3 \`\`join\`\`s to manage the addition and removal of segments from the appropriate canvases, and D3's transition handling for the fading. The structure resides in only memory, never actually entering the page DOM. SVG is retained for the axes to make use of its superior text handling – for example, native support for text-on-path, as used for the month labels. Since the axes are simple and largely static, there is little to be gained performance-wise from using canvas. They are also persistent, being drawn once at setup with only the year figure and replay button changing thereafter.`36:T4e2,md`The \`\`main\`\` block is the top level of the execution hierarchy. Its execution is regulated by the reference to the \`\`replay\`\` variable at the start of the block. The chart itself is a view of the replay variable and dispatches a custom input event whenever the replay button is clicked, signifying that the value of \`\`replay\`\` may have changed; this in turn triggers Observable to re-evaluate all cells that reference it – in this case just \`\`main\`\`. Once the replay button has been clicked, the rest of the block re-runs the animation from scratch – deleting and replacing the virtual DOM, clearing the canvases, and hiding the replay button, then starting the timer that manages the animation. The timer continuously passes the elapsed time (along with a reference to the new virtual DOM object) to the update function. After the full duration has elapsed, the timer is stopped and replay button reinstated. The starting of the animation timer is itself governed by a small \`\`setTimeout\`\` delay, so as to allow the replay button's hide transition to work before the animation itself eats up the whole event queue. The timer itself is a global object so that it is not possible to run muliple instances of it at once.`37:T480,md`The \`\`update\`\` function handles the plotting of individual frames of the animation. The latest date to be plotted, \`\`t\`\`, is determined by the elapsed time as a proportion of the total duration of the animation. From this, the parts of the dataset that shoud be plotted to the static and dynamic canvases are determined according to how long the paths should take to fade out. Custom DOM elements are created separately for the static and dynamic canvases. For the dynamic canvas, D3's \'\'join\'\' is used to give newly-introduced line segments a transition to gradually fade their opacity, and to remove fully faded segments from the DOM. All the segments that remain are then plotted: for each, the appropriate opacity is read from the virtual DOM, the canvas context's \`\`strokeStyle\`\` is set accordingly, and a block of four datapoints from the data array is passed to \`\`drawSeg\`\`. On the static canvas, newly-faded segments are added to the virtual DOM and plotted. Nothing is read back from the virtual DOM here; it is used only to keep track of which path segments are new to the static canvas and hence need to be plotted.`38:T81d,update = (root, elapsed) => { const year_in_ms = 365.25*24*3600*1000 const fade_after = 0 const fade_over = 30 * year_in_ms * duration / date_extent const faded_after = fade_after + fade_over let t = date_extent*elapsed/duration t = moment(data_extended[1].date).add(t, "milliseconds") const d_faded = t.clone().subtract(date_extent*faded_after/duration, "milliseconds") // date before which all segments are finished fading const elapsed_data = data_extended.slice(1,-2).filter(d => d.date <= t._d) const static_path_data = elapsed_data.filter(d => d.date < d_faded._d) const dynamic_path_data = elapsed_data.filter(d => d.date >= d_faded._d) axes.select("#year") .text(t.year()) contexts.dynamic.clearRect(-chart_width/2, -chart_height/2, chart_width, chart_height) let dynamic_paths = root.select("custom#dynamic").selectAll("custom.pathsegment") dynamic_paths .data(dynamic_path_data, d => d.date) .join( enter => enter.append("custom") .attr("class", "pathsegment") .attr("date", d => d.date) .attr("strokeOpacity", 1) .call(enter => enter.transition() .duration(fade_over) .delay(fade_after) // .ease(d3.easeLinear) .ease(d3.easeCubicIn) .attr("strokeOpacity", 0.2))) dynamic_paths = root.select("custom#dynamic").selectAll("custom.pathsegment") dynamic_paths .each((d,i) => { const segment = dynamic_paths.nodes()[i] const opacity = segment.getAttribute("strokeOpacity") contexts.dynamic.strokeStyle = radialColour(contexts.dynamic, opacity) drawSeg(contexts.dynamic, data_extended.slice(d.i, d.i+4)) }) root.select("custom#static").selectAll("custom.pathsegment") .data(static_path_data, d => d.date) .enter() .append("custom") .attr("class", "pathsegment") .each((d,i) => drawSeg(contexts.static, data_extended.slice(d.i, d.i+4))) }39:T452,thetaAxis = g => g .call(g => g.append('style').text(barlow_fontface)) .attr('font-family', "Barlow-Light") .attr("font-size", outerRadius/20) .call(g => g.selectAll("g") .data(theta.ticks()) .join("g") .each((d, i) => d.id = DOM.uid("month")) .call(g => g.append("path") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("d", d => ` M${d3.pointRadial(theta(d), innerRadius)} L${d3.pointRadial(theta(d), outerRadius)} `)) .call(g => g.append("path") .attr("id", d => d.id.id) .datum(d => [d, d3.utcMonth.offset(d, 1)]) .attr("fill", "none") .attr("d", ([a, b]) => ` M${d3.pointRadial(theta(a), outerRadius)} A${outerRadius},${outerRadius} 0,0,1 ${d3.pointRadial(theta(b), outerRadius)} `)) .call(g => g.append("text") .append("textPath") .attr("startOffset", 12) .attr("xlink:href", d => d.id.href) .text(d3.utcFormat("%B"))))3a:T846,rAxis = g => g .call(g => g.append('style').text(barlow_fontface)) .attr('font-family', "Barlow-Light") .attr("text-anchor", "end") .attr("font-size", outerRadius/20) /* experimenting with labelling "danger zone" .call(g => g.append("defs") .append("radialGradient") .attr("id", "danger-zone") // .attr("gradientUnits", "userSpaceOnUse") .call(grad => grad.append("stop") .attr("offset", "84%") .attr("stop-color", d3.interpolateRgbBasis(d3.schemeRdBu[10])(0.17)) .attr("stop-opacity", 0.5) ) .call(grad => grad.append("stop") .attr("offset", "90%") .attr("stop-color", d3.interpolateRgbBasis(d3.schemeRdBu[10])(0.17)) .attr("stop-opacity", 0.5) ) .call(grad => grad.append("stop") .attr("offset", "100%") .attr("stop-color", d3.interpolateRgbBasis(d3.schemeRdBu[10])(0.17)) .attr("stop-opacity", 0) ) ) .call(g => g.append("path") .attr("d", d3.arc() .innerRadius(r(1.5)) .outerRadius(r(2.3)) .startAngle(0) .endAngle(2 * Math.PI) ) .attr("fill", "url(#danger-zone)"))*/ .call(g => g.selectAll("g") .data([2, 1.5, 0])//r.ticks().reverse()) .join("g") .attr("fill", "none") .call(g => g.append("circle") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .attr("r", r)) .call(g => g.append("text") .attr("x", "-0.5em") .attr("y", d => -r(d)) .attr("dy", "0.35em") .attr("stroke", "#fff") .attr("stroke-width", 4) .text((x, i) => `${x.toFixed(1)}${i ? "" : "°C"}`) .clone(true) .attr("fill", "currentColor") .attr("stroke", "none"))) 3b:T4bf,replayLink = g => { g.attr("id", "replay") // should probably use DOM.uid .on("mouseover", (d,i) => g.select("line") .transition() .attr("stroke-opacity", 1)) .on("mouseout", (d,i) => g.select("line") .transition() .attr("stroke-opacity", 0)) .attr("visibility", "hidden") .attr("font-size", outerRadius/20) .attr("opacity", 0) .append("text") .call(g => g.append('style').text(barlow_fontface)) .attr("font-family", "Barlow-Light") .attr("letter-spacing", "0.2em") .attr("x", 0) .attr("y", innerRadius/2) .attr("text-anchor", "middle") .text("REPLAY") .attr("fill", "#444") let uline_length = axes.select("#replay").node().getBBox().width g.append("line") .attr("x1", -uline_length/2 + outerRadius*0.005) .attr("y1", innerRadius/2 + outerRadius*0.01) .attr("x2", uline_length/2)// - outerRadius/75) .attr("y2", innerRadius/2 + outerRadius*0.01) .attr("stroke", "#444") .attr("stroke-opacity", 0) .attr("stroke-width", outerRadius*0.002) }3c:[{"id":"10110d9b0ac08c9b98b6b0d46473d28ac8769aa9381cb0a81b56443f514304389b8a47c9880550d1d9b76ac28fd1d59a3a77af7df39bc2364afc1698cf3fad88","href":"https://static.observableusercontent.com/files/10110d9b0ac08c9b98b6b0d46473d28ac8769aa9381cb0a81b56443f514304389b8a47c9880550d1d9b76ac28fd1d59a3a77af7df39bc2364afc1698cf3fad88","name":"HadCRUT.4.6.0.0.monthly_ns_avg.csv","type":"text/csv","lastModified":1589280761450.905,"size":167292}] 31:{"id":"b2e5d172898ba243","slug":"climate-spiral","title":"A climate spiral fit for 2020","thumbnail":"3dd69456f671c56e92d6fbc8d740ea27ef12e9ed6960bb56c1049a246833982d","access_level":"public","create_time":"$D2020-05-12T09:38:40.344Z","update_time":"$D2020-08-27T14:47:05.093Z","view_time":null,"first_public_time":"$D2020-05-28T14:19:40.407Z","has_unpublished_edits":null,"fork":true,"stars":47,"starred":false,"owner":{"type":"team","id":"9edfd252a1e7c68c","login":"grahamsnyder","name":"Graham Snyder","avatar_url":"https://avatars-next.observableusercontent.com/700c1969cd2ce22cc4ad0f99634b521dd0d43fbcd2a9988d6a19d878c02ae9f3","tier":"starter_2024"},"version":3685,"publish_version":3685,"role":null,"authored":false,"authors":[{"type":"individual","id":"14f7c7deab027a14","login":"grahamsnyder","name":"Graham Snyder","avatar_url":"https://avatars-next.observableusercontent.com/700c1969cd2ce22cc4ad0f99634b521dd0d43fbcd2a9988d6a19d878c02ae9f3","tier":null}],"members":[{"type":"individual","id":"14f7c7deab027a14","login":"grahamsnyder","name":"Graham Snyder","avatar_url":"https://avatars-next.observableusercontent.com/700c1969cd2ce22cc4ad0f99634b521dd0d43fbcd2a9988d6a19d878c02ae9f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"title":"A climate spiral fit for 2020","cells":[{"id":3667,"value":"md`# A climate spiral fit for 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2280,"value":"viewof replay = {\n let container = document.createElement(\"figure\")\n\n container.appendChild(axes.node())\n container.appendChild(canvases.static)\n container.appendChild(canvases.dynamic)\n container.appendChild(html`

Animated temperature spiral showing HadCRUT4 temperature anomalies above 1850–1900 baseline, from 1850 to March 2020.

`)\n\n d3.select(container).on(\"click\", _ => {\n if (d3.event.target.id == \"replay\" || d3.event.target.parentNode.id == \"replay\") \n container.dispatchEvent(new CustomEvent(\"input\"))})\n \n setTimeout(setup)\n\n container.value = \"\"\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"md`In 2016, Ed Hawkins [published](https://twitter.com/ed_hawkins/status/729753441459945474) the first iteration of his animated chart of global temperature anomalies over time on Twitter. It was an inspired visualisation – something about the dramatic outward spiralling captured the accelerating nature of the emergency uniquely well, and it was shared widely, going on to spawn a [whole raft of other related visualisations](http://www.climate-lab-book.ac.uk/spirals/).\n\nI'm a big fan of Ed's animation, but there are a number of valid critiques that have been made of it, and in the time since, several people have published variations intended to improve upon it. As a data-vis enthusiast learning D3, I couldn't resist having a go myself; the result is shown above. For comparison, here's Ed's original from 2016 (the data have been updated several times since, but the overall design has not changed):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3611,"value":"html`

Ed Hawkins's original climate spiral, from 2016

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3637,"value":"html`

${ramp(d3.interpolateViridis)}\n

The Viridis colourmap is colourblind-friendly, continuously increasing in brightness, and evokes a temperature scale, but doesn't have a clear centre point

\n
\n${ramp(d3.interpolateRgbBasis([...d3.schemeRdBu[10]].reverse()))}\n

A red-blue diverging colourmap intuitively suggests temperatures above and below a reference value, while remaining colourblind-friendly

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3629,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2614,"value":"md`## The code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3302,"value":"md`### Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2660,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3305,"value":"md`### Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3330,"value":"md`\\`\\`setup()\\`\\` clears and redraws the axes to start from a clean slate, sets the stroke style for the static canvas (since this only needs to be done once) and registers our custom DOM namespace so that the elements don't cause any errors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3064,"value":"setup = () => { \n axes.selectAll(\"g\").remove()\n axes.selectAll(\"text\").remove()\n drawAxes()\n \n contexts.static.strokeStyle = radialColour(contexts.static, 0.2)\n \n d3.namespaces.custom = \"https://d3js.org/namespace/custom\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3333,"value":"md`Before we can start to add elements to the virtual DOM, we need to create one; this is abstracted into its own function for readability.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3051,"value":"newDOM = () => {\n const custom = d3.create(\"custom\")\n \n custom.selectAll(\"custom.pathlist\")\n .data([{name: \"dynamic\"}, {name: \"static\"}])\n .join(\"custom\")\n .attr(\"class\", \"pathlist\")\n .attr(\"id\", d => d.name)\n return custom\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3340,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3005,"value":"main = { \n replay\n \n d3.selectAll(\"custom\").remove()\n let root = newDOM()\n \n contexts.static.clearRect(-chart_width/2, -chart_height/2, chart_width, chart_height)\n contexts.dynamic.clearRect(-chart_width/2, -chart_height/2, chart_width, chart_height)\n \n axes.select(\"#year\").text(\"\")\n hideReplay()\n \n const runTimer = () => {\n timer.restart(elapsed => {\n if (elapsed >= duration) { \n update(root, duration)\n\n timer.stop()\n setTimeout(showReplay, 250)\n }\n\n else update(root, elapsed)\n })\n }\n \n setTimeout(runTimer, 250)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3068,"value":"hideReplay = () => {\n axes.select(\"#replay\")\n .transition()\n .attr(\"opacity\", 0)\n .on(\"end\", _ => axes.select(\"#replay\")\n .attr(\"visibility\", \"hidden\"))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3077,"value":"showReplay = () => {\n axes.select(\"#replay\")\n .attr(\"visibility\", \"visible\")\n .transition()\n .attr(\"opacity\", 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3170,"value":"timer = d3.timer(_ => _) // global timer object for convenient restarting instead of creating duplicates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3351,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2350,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"duration = 15000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"date_extent = {\n const date_range = d3.extent(data, d=>d.date)\n return date_range[1]-date_range[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3362,"value":"md`The \\`\\`drawSeg\\`\\` function plots the line segments that make up the spiral itself. Taking a reference to a canvas context and an array of datapoint objects each containing a date and temperature anomaly, a line segment is interpolated and drawn to the canvas. In practise, the data arrays are always four-datapoint-long slices of the \\`\\`\\data_extended\\`\\` array containing the full dataset. Four datapoints are required to plot each line segment using D3's \\`\\`catmullRomOpen\\`\\` curve interpolation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1974,"value":"drawSeg = (context, data) => {\n context.beginPath()\n let fn = d3.lineRadial()\n .context(context)\n .curve(d3.curveCatmullRomOpen)\n .angle(d => theta(Date.UTC(0, d.month, 0)))\n .radius(d => r(d.anomaly))\n \n let line = fn(data)\n \n context.stroke()\n \n return line\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3235,"value":"md`### Setting up the axes and canvases\n\n#### Constants\nGlobal variables govern the overall size and proportions of the chart; maximum chart size is hard-coded but for smaller displays the \\`\\`width\\`\\` variable should cause the chart to adapt.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"chart_width = Math.min(width, 750)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"chart_height = chart_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"margin = 0.05*chart_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"innerRadius = chart_width / 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"outerRadius = chart_width / 2 - margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3242,"value":"md`#### Scales\nD3 scales are defined for the angular and radial dimensions of the plot:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"theta = d3.scaleUtc()\n .domain([Date.UTC(0, 0, 1), Date.UTC(1, 0, 1) - 1])\n .range([0, 2 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"r = d3.scaleLinear()\n .domain([-1, 2.4])\n .range([innerRadius, outerRadius])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3524,"value":"data.map(d => d.anomaly).reduce((a,b) => Math.min(a,b))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3244,"value":"md`#### Colour mapping\nThe \\`\\`radialColour()\\`\\` function underlies the paths' colour mapping. It returns a radial gradient in the given canvas context that diverges in colour from 0ºC on the \\`\\`r\\`\\` scale. This gradient can then be used as the stroke style for a line segment; this approach allows the colour to vary according to temperature value even within the length of an individual line segment. \n\nIt is necessary to have a function to generate radial gradients (rather than a single, fixed gradient acting as the colour map) to enable the fading of line segments as they age. In Canvas, the opacity of a path is incorporated in the stroke style, so if a gradient is used as the stroke style, the opacity is inherited from that gradient and cannot be set separately. As such, for the dynamic canvas, a new, unique radial gradient is generated for every line segment every frame, by passing an \\`\\`opacity\\`\\` argument to \\`\\`radialColour\\`\\` according to time since the segment was plotted.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"radialColour = (context, alpha=1) => {\n let interpolateColScheme = d3.interpolateRgbBasis(d3.schemeRdBu[10])\n let colour = d3.scaleDiverging(interpolateColScheme)\n .domain([-1.5, 0, 1.5].reverse())\n let grd = context.createRadialGradient(0,0, r(colour.domain()[0]), 0, 0, r(colour.domain()[2]))\n let stops = 50\n for (let i = 0; i <= stops; i ++){\n let stop = i/stops;\n grd.addColorStop(stop, d3.color(interpolateColScheme(stop)).copy({opacity:alpha}))\n }\n\n return grd\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3312,"value":"\nmd`Here's what the gradient looks like at full opacity; you can see how the colour variation maps to the [-1.5, 1.5] range of the final chart:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"{ const c = newContext()\nc.fillStyle = radialColour(c, 1)\nc.fillRect(-chart_width/2, -chart_height/2, chart_width, chart_height)\nreturn c.canvas }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3265,"value":"md`#### Axes\nThe following six cells handle the creation of the \\`\\`axes\\`\\` svg object and the plotting of the various parts of the axes: the gridlines and scales (\\`\\`thetaAxis\\`\\` and \\`\\`rAxis\\`\\`), the central text showing the year (\\`\\`yearDisplay\\`\\`) and the replay button that is displayed when the animation has completed. \\`\\`axes\\`\\` is a globally-accesible object and the four plotting functions are called by \\`\\`drawAxes()\\`\\, which runs at setup.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2278,"value":"axes = d3.create(\"svg\")\n .attr(\"viewBox\", [-chart_width / 2, -chart_height / 2, chart_width, chart_height])\n .attr(\"width\", chart_width)\n .attr(\"height\", chart_height)\n .style(\"left\", \"0px\")\n .style(\"top\", \"0px\")\n .style(\"z-index\", 3)\n .style(\"position\", \"relative\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2606,"value":"drawAxes = () => {\n axes.append(\"g\")\n .call(thetaAxis);\n\n axes.append(\"g\")\n .call(rAxis);\n \n axes.append(\"text\")\n .call(yearDisplay);\n \n axes.append(\"g\")\n .call(replayLink)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2597,"value":"yearDisplay = text => {\n text\n .attr(\"id\", \"year\") // should probably use DOM.uid\n .call(g => g.append('style').text(barlow_fontface))\n .attr(\"font-family\", \"Barlow-Light\")\n .attr(\"font-size\", 0.5*innerRadius)\n .attr(\"y\", 0)\n .attr(\"fill\", \"#444\")\n .attr(\"dominant-baseline\", \"central\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"visibility\", \"visible\")\n \n text\n .text(data.slice(-2)[0].date.getFullYear())\n \n let length = axes.select(\"#year\").node().getBBox().width\n \n text\n .attr(\"x\", -length*0.5)\n .attr(\"fill-opacity\", 1)\n .text(\"\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2812,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3276,"value":"md`#### Canvases \nSimilarly, the bases of the two canvases are laid down here, creating two identical contexts and making them and the assosciated canvases available globally for convenience.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"newContext = function () { \n const c = DOM.context2d(chart_width, chart_height);\n c.translate(chart_width/2, chart_height/2);\n c.lineWidth = 1.5;\n c.globalCompositeOperation = \"multiply\";\n return c\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2290,"value":"contexts = ({\n static: newContext(),\n dynamic: newContext()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2293,"value":"canvases = {\n let canvases = {static: contexts.static.canvas, dynamic: contexts.dynamic.canvas}\n \n for (let [name, canvas] of Object.entries(canvases)) {\n d3.select(canvas)\n .style(\"position\", \"absolute\")\n .style(\"left\", \"0px\")\n .style(\"top\", \"0px\")\n .style(\"mix-blend-mode\", \"multiply\")\n }\n \n d3.select(canvases.static)\n .style(\"z-index\", 0)\n\n d3.select(canvases.dynamic)\n .style(\"z-index\", 1)\n \n return canvases\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2587,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"data_extended = {\n let data_extended = Array.from(data)\n \n // Duplicate first and last values\n data_extended.unshift(Object.assign({}, data_extended[0]))\n data_extended.push(Object.assign({}, data_extended[data_extended.length-1]))\n \n // Offset first and last date/month by 1 month\n data_extended[0].date = d3.utcParse(\"%m/%d/%Y\")(moment(data_extended[0].date).subtract(1,\"months\").calendar())\n data_extended[0].month = data_extended[0].date.getMonth()\n \n data_extended[data_extended.length-1].date = d3.utcParse(\"%m/%d/%Y\")(moment(data_extended[data_extended.length-1].date).add(1, \"months\").calendar())\n data_extended[data_extended.length-1].month = data_extended[data_extended.length-1].date.getMonth()\n \n\n for (let i=0; i d.date > Date.UTC(1850,0,0) && d.date< Date.UTC(1901,0,0)).map(d => d.anomaly)\n return anomalies_1850_1900.reduce((a,b) => a += b) / anomalies_1850_1900.length\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3517,"value":"{ // Verify 1961–1990 average ~= 0:\n const anomalies_1961_1990 = data.filter(d => d.date > Date.UTC(1961,0,0) && d.date < Date.UTC(1991,0,0)).map(d => d.anomaly)\n const mean_1961_1990 = anomalies_1961_1990.reduce((a,b) => a += b) / anomalies_1961_1990.length\n return mean_1961_1990\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"data = {\n const text = urltext;\n const parseDate = d3.utcParse(\"%Y/%m\");\n const parseMonth = d => parseDate(d).getMonth();\n return d3.csvParseRows(text, d => ({\n date: parseDate(d[0]),\n month: parseMonth(d[0]),\n anomaly: +d[1],\n lb_bias: +d[2], \n ub_bias: +d[3],\n lb_meas_samp: +d[4],\n ub_meas_samp: +d[5],\n lb_cov: +d[6],\n ub_cov: +d[7],\n lb_meas_samp_bias: +d[8],\n ub_meas_samp_bias: +d[9],\n lb_all: +d[10],\n ub_all: +d[11]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"urltext = url.text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"url = FileAttachment(\"HadCRUT.4.6.0.0.monthly_ns_avg.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2617,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3633,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2926,"value":"import {toDataURL} from \"@mootari/embedding-fonts-into-an-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2929,"value":"barlow_fontface = getFontStyle(\"Barlow-Light\", \"https://fonts.gstatic.com/s/barlow/v4/7cHqv4kjgoGqM7E3p-ks51ostz0rdg.woff2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2932,"value":"async function getFontStyle(fontName, fontURL, fontType = 'woff2') {\n const fontData = await toDataURL(fontURL);\n return `\n @font-face {\n font-family: '${fontName}';\n src: url(${fontData}) format('${fontType}');\n }\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"moment = require(\"moment\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"