3e:null 3f:["$","title",null,{"children":"Climate Connections - Snapshot 2023-02-24 (clean) | Tim Day | Observable"}] 45:T1aa2,ecvs=[ {name:"aerosol", group:"atmospheric", links:["soil moisture","ozone","land cover","ocean colour","sea surface temperature","cloud","fire","greenhouse gases","water vapour","land surface temperature","snow","lakes"], about: "aerosols
Aerosols, and their interaction with clouds, continue to contribute the largest uncertainty to estimates of the Earth’s changing energy budget." }, {name:"ozone", group:"atmospheric", links:["ocean colour","aerosol","fire","cloud","greenhouse gases","water vapour"], //about: "ozone
The ozone layer protects life on Earth from ultraviolet solar radiation and plays an important role in the radiation budget of the atmosphere." about: "ozone
The ozone layer protects life on Earth from ultraviolet solar radiation and plays an important role in the radiation budget of the atmosphere." }, {name:"cloud", group:"atmospheric", links:["soil moisture","aerosol","greenhouse gases","ozone","water vapour","fire","land surface temperature","snow","lakes","ocean colour","sea ice","sea surface temperature"], about: "cloud.
Clouds transport water and help control how much energy we receive from the sun. They are a key uncertainty in understanding how the climate will change in the future." }, {name:"water\nvapour", group:"atmospheric", links:["aerosol","cloud","greenhouse gases","ozone","ice sheets","land surface temperature","lakes","ocean colour","fire","sea level","sea surface temperature"], about: "" }, {name:"greenhouse\ngases", group:"atmospheric", links:["soil moisture","land cover","fire","aerosol","water vapour"], about: "greenhouse gases
Greenhouse gases from human activities are the main driver of climate change, responsible for more than half the increase in global surface temperatures since 1951." }, {name:"land\nsurface\ntemperature", group:"terrestrial", links:["aerosol","cloud","ozone","water vapour","fire","ice sheets","soil moisture","land cover","glaciers","permafrost","snow","lakes","sea ice","sea surface temperature"], about: "" }, {name:"land\ncover", group:"terrestrial", links:["soil moisture","greenhouse gases","aerosol","fire"], about: "land cover
The vegetation types, water bodies and features covering the land surface impact the carbon, nutrient and hydrological cycles, the reflectance of the Earth's surface, atmospheric processes and human activities." }, {name:"soil\nmoisture", group:"terrestrial", links:["greenhouse gases","land cover","cloud","aerosol","fire","water vapour","snow","biomass","glaciers"], about: "soil moisture
Soil moisture links the water, energy and carbon cycles, with influences on hydrological and agricultural processes like runoff generation, drought development and vegetation growth." }, {name:"biomass", group:"terrestrial", links:["soil moisture","greenhouse gases","fire","land cover","land surface temperature","permafrost","snow"], about: "" }, {name:"fire", group:"terrestrial", links:["soil moisture","greenhouse gases","ozone","aerosol","land cover","glaciers","land surface temperature","permafrost","snow","lakes"], about: "fire
Fire has significant climatic effects through its impact on vegetation and its emission of greenhouse gases, aerosols and other aerosol-forming gases." }, {name:"lakes", group:"terrestrial", links:["water vapour","ice sheets","soil moisture","fire","land cover","land surface temperature","permafrost","snow","glaciers"], about: "" }, {name:"glaciers", group:"terrestrial", links:["sea level","land cover","aerosol","fire","ice sheets","permafrost","snow","lakes","sea ice"], about: "glaciers
Glaciers are important freshwater reservoirs, major contributors to sea level rise and sensitive climate indicators, adjusting their size in response to changes in climate." }, {name:"permafrost", group:"terrestrial", links:["cloud","greenhouse gases","water vapour","fire","ice sheets","land cover","soil moisture","glaciers","land surface temperature","snow"], about: "" }, {name:"snow", group:"terrestrial", links:["aerosol","cloud","ozone","water vapour","fire","ice sheets","land cover","soil moisture","glaciers","land surface temperature","permafrost","lakes"], about: "" }, {name:"ice\nsheets", group:"terrestrial", links:["aerosol","ozone","water vapour","land cover","glaciers","sea level"], about: "ice sheets
Ice sheets today are found only in Greenland and Antarctica. Together, these masses of glacial land ice contain over 99% of Earth's frozen freshwater." }, {name:"sea\nsurface\ntemperature", group:"oceanic", links:["sea level","ocean colour","cloud","aerosol","sea ice","water vapour","ozone","greenhouse gases","ice sheets","land surface temperature","sea surface salinity"], about: "sea surface temperature
Ocean temperature has been increasing since the beginning of the twentieth century, contributing to sea level rise and changing the ocean’s uptake of carbon from the atmosphere." }, {name:"ocean\ncolour", group:"oceanic", links:["ozone","sea surface temperature","aerosol","greenhouse gases","fire","permafrost","snow","lakes","sea ice","sea state"], about: "ocean colour
Ocean colour maps show the distribution, size and structure of plankton communities that take up carbon dioxide during photosynthesis, making them important carbon sinks." }, {name:"sea\nsurface\nsalinity", group:"oceanic", links:["greenhouse gases","water vapour","ice sheets","glaciers","ocean colour","sea ice","sea surface temperature","sea state"], about: "" }, {name:"sea\nice", group:"oceanic", links:["sea level","sea surface temperature","ozone","fire","land surface temperature","permafrost","snow","ocean colour","sea state","sea surface salinity"], about:"sea ice
Sea ice cover changes the reflectance of the ocean, insulates it from heat loss, and provides a barrier to the exchange of gases and momentum between atmosphere and ocean." }, {name:"sea\nstate", group:"oceanic", links:["ocean colour","sea level","sea surface salinity"], about: "" }, {name:"sea\nlevel", group:"oceanic", links:["soil moisture","glaciers","sea surface temperature","sea ice","water vapour","ice sheets","permafrost","snow","lakes","sea state"], about: "sea level
Global mean sea level acts as an index of climate change and variability as it incorporates different components of the climate system, including ocean temperature, glaciers and ice sheets." } ] 46:T200e,chords = { document.head.innerHTML+=styling; const width=512; const height=512; var canvas=DOM.canvas(width, height); var ctx=canvas.getContext('2d'); var previousnearestecv=-3; var animating=true; // Flags whether there's anything for animation to actually do, otherwise the canvas can be left as is. const fadeInTime=250.0; // Time (ms) for linear ramp to full focus const fadeOutTime=125.0; // Time (ms) for (1/e) exponential decay fade out let frame; // Precompute label centres var ecvxys=[]; for (var i=0;i0) { if (ecvattns[i]<1.0) stillAnimating=true; ecvattns[i]=Math.min(1.0,ecvattns[i]+dt/fadeInTime); } else { if (ecvattns[i]>1.0/1024.0) stillAnimating=true; ecvattns[i]*=Math.exp(-dt/fadeOutTime); } } // And for the links // Ramp up links from primary to secondary tagged ECVs for (var i=0;i0) { if (ecvlinkattns[i][j]<1.0) stillAnimating=true; ecvlinkattns[i][j]=Math.min(1.0,ecvlinkattns[i][j]+dt/fadeInTime); } else { if (ecvlinkattns[i][j]>1.0/1024.0) stillAnimating=true; ecvlinkattns[i][j]*=Math.exp(-dt/fadeOutTime); } } }; // Now draw arcs according to their attention level for (var i=0;i1.0/256.0) { var gradient = ctx.createLinearGradient(x0,y0,x1,y1); gradient.addColorStop(0,groupcolours[ecvs[i].group]); gradient.addColorStop(1,groupcolours[ecvs[t].group]); ctx.globalAlpha=ecvlinkattns[i][j]; ctx.strokeStyle=gradient; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.quadraticCurveTo(width*0.5,height*0.5,x1,y1); ctx.stroke(); // Draw an arrowhead but only on relevant links if (nearestecv == i && false) { // Arrowheads suppressed for "clean" snapshot ctx.globalAlpha=ecvlinkattns[i][j]*ecvlinkattns[i][j]; ctx.fillStyle=groupcolours[ecvs[t].group]; var dx=x1-width*0.5; var dy=y1-height*0.5; var d=Math.sqrt(dx*dx+dy*dy); dx/=d;dy/=d; var h=4.0; // Arrowhead size ctx.beginPath(); ctx.moveTo(x1+1.5*h*dx,y1+1.5*h*dy); ctx.lineTo(x1-h*dy,y1+h*dx); ctx.lineTo(x1+h*dy,y1-h*dx); ctx.fill(); } } } ctx.globalAlpha=1.0; } // Draw labels for (var i=0;i=0) { if ('about' in ecvs[nearestecv]) elem.innerHTML=ecvs[nearestecv].about; else elem.innerHTML=ecvs[nearestecv].name; } else { elem.textContent=defaultabouttext; } previousnearestecv=nearestecv; } } } invalidation.then(() => cancelAnimationFrame(frame)); return canvas; } 47:T555,## Ideas / TODO - Is there a concrete style guide (ESA or CCI or Trevalabs?); might specify some colours for the groups? Also, fonts? (Freely distributable fonts preferred) - "Grow" the arcs out rather than (or as well as) fade them in? A bit wary of making it too "lively"; might be an interesting experiment to see though. Make it a mode. - Related, it's apparently possible to pass URL parameters into these notebooks: https://observablehq.com/@pac02/how-to-passing-arguments-in-the-url-of-the-notebook - If URL parameters work, make the canvas size controllable by the embedder (currently hardwired). Would need a few things to scale appropriately. - Other ways to add more explanatory information? Tooltips? (Must consider mobile too; they don't tend to work there... no "hover", or pointing precision). - Types of arc. Are there "dependencies" (e.g CO2 related to phytoplankton related to ocean colour) that are different to "interesting to compare"? What does drawing an arrow between 2 ECVs actually mean? (Causality? Something else?) More speculative ideas: - Given the clock/dial like impression... anything to be gained from being able to spin/rotate it? - Introductory animation/video? (Turns it into something more than an embeddable widget though). - Sound effects? Clicks? Wind chime noises? (No idea what web APIs are relevant).48:[] 43:{"id":"6aa83e5fe99621bd","slug":null,"title":"Climate Connections - Snapshot 2023-02-24 (clean)","thumbnail":"366d0b7b7fa1a31677326f9ec722b90fa99c7ebc538052dcc2096f61608331d2","access_level":"public","create_time":"$D2023-02-24T18:07:58.186Z","update_time":"$D2023-02-24T18:13:29.230Z","view_time":null,"first_public_time":"$D2023-02-24T18:07:58.186Z","has_unpublished_edits":null,"fork":{"id":"32d30ede47070702","slug":null,"title":"Climate Connections - WIP","owner":{"id":"1a92493b15781331","login":"timday","name":"Tim Day"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1a92493b15781331","login":"timday","name":"Tim Day","avatar_url":"https://avatars-next.observableusercontent.com/99a72e9fffb4012ff78cd8b348469e0ff259b6b4fcdc29c529c9643b02c3507a","tier":"starter_2024","bio":"","following":false},"version":664,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1afb94c24c163d5","login":"timday","name":"Tim Day","avatar_url":"https://avatars-next.observableusercontent.com/99a72e9fffb4012ff78cd8b348469e0ff259b6b4fcdc29c529c9643b02c3507a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b1afb94c24c163d5","login":"timday","name":"Tim Day","avatar_url":"https://avatars-next.observableusercontent.com/99a72e9fffb4012ff78cd8b348469e0ff259b6b4fcdc29c529c9643b02c3507a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Climate Connections - Snapshot 2023-02-24 (clean)","cells":[{"id":175,"value":"# Climate Connections - Snapshot 2023-02-24 (clean)\n\nBased on what science team leaders say their data might usefully be compared with.\n\n** This version suppresses arrowheads and explanatory \"about\" text **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"climateconnections=html`

${chords}${about}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"## Data\n\nThe main data driving the visualisation is in the `ecvs` cell below. More nodes and links can be added.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"defaultabouttext=\"\" // Text for the \"about\" footer when no or all ECVs are selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"## Implementation\n\nThe code to render the canvas is in the `chords` cell below, and the `about` after that is for the text footer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"about=html`

${defaultabouttext}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"## Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"trevacolour='#2E4B78' // Supplied by Achim; possible header and footer colour, but not currently used.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"groupcolours=[{oceanic:'#007D8A',terrestrial:'#FF8F1C',atmospheric:'#009CDE'}][0] // Standard CCI colours for these groups","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"styling=``","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"