3e:null 3f:["$","title",null,{"children":"Climate Connections - Snapshot 2023-02-24 - Last Snapshot with font included | Tim Day | Observable"}] 45:T5e6,// ECV = Essential Climate Variable ecvs=[ {name:"aerosol",group:"atmospheric",links:["soil moisture","ozone","land cover","ocean colour","sea surface temperature","cloud","fire"]}, {name:"cloud",group:"atmospheric",links:["soil moisture","aerosol"]}, {name:"carbon\ndioxide",group:"atmospheric",links:["soil moisture","methane","land cover","fire"]}, {name:"methane",group:"atmospheric",links:["soil moisture","carbon dioxide","fire"]}, {name:"ozone",group:"atmospheric",links:["ocean colour","aerosol","fire"]}, {name:"fire",group:"terrestrial",links:["soil moisture","carbon dioxide","methane","ozone","aerosol","land cover","aerosol"]}, {name:"soil\nmoisture",group:"terrestrial",links:["sea level","carbon dioxide","methane","land cover","sea surface temperature","cloud","aerosol","fire"]}, {name:"land\ncover",group:"terrestrial",links:["soil moisture","carbon dioxide","aerosol","fire"]}, {name:"glaciers",group:"terrestrial",links:["glaciers","sea level","land cover"]}, {name:"ice sheets",group:"terrestrial",links:[]}, // No links!?! {name:"sea\nsurface\ntemperature",group:"oceanic",links:["soil moisture","sea level","ocean colour","cloud","aerosol","sea ice"]}, {name:"ocean colour",group:"oceanic",links:["sea level","ozone","sea surface temperature","aerosol"]}, {name:"sea level",group:"oceanic",links:["soil moisture","glaciers","ocean colour","sea surface temperature","sea ice"]}, {name:"sea ice",group:"oceanic",links:["sea level","sea surface temperature"]} ]46:T1864,chords = { document.head.innerHTML+=styling; const width=512; const height=512; var canvas=DOM.canvas(width, height); var ctx=canvas.getContext('2d'); const fadeInTime=250.0; // Time (ms) for linear ramp to full focus const fadeOutTime=500.0; // Time (ms) for (1/e) exponential decay fade out let frame; // Precompute label centres var ecvxys=[]; for (var i=0;i0) { ecvattns[i]=Math.min(1.0,ecvattns[i]+dt/fadeInTime); } else { ecvattns[i]*=Math.exp(-dt/fadeOutTime); } } // And for the links // Ramp up links from primary to secondary tagged ECVs for (var i=0;i0) { ecvlinkattns[i][j]=Math.min(1.0,ecvlinkattns[i][j]+dt/fadeInTime); } else { 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(); } } ctx.globalAlpha=1.0; } // Draw labels for (var i=0;i cancelAnimationFrame(frame)); return canvas; } 47:T69e,## Ideas / TODO - Add more ECVs (is there "lakes" and "biomass"?). In progress: connections being researched. - There's a 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. - How 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"? - Possible mobile issue: the lack of a visible mouse pointer means that having selected a node and having the arcs drawn from it to nodes which are also rendered at full opacity, there's no visible feedback which was the primary node and which are hanging off it. It is obvious from the structure of the arcs when there are more than two. 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:[{"id":"d6c7abcd73d3681efde82e78253d718730a305c8d09e69dc349c6b08e701ab467f5d4a2c2c4466656bc088cf9cb9c395c0d8d6e40a33a7fdf8862a8ca762ed5d","href":"https://static.observableusercontent.com/files/d6c7abcd73d3681efde82e78253d718730a305c8d09e69dc349c6b08e701ab467f5d4a2c2c4466656bc088cf9cb9c395c0d8d6e40a33a7fdf8862a8ca762ed5d","name":"ECVlinks.png","type":"image/png","lastModified":1677236921611.392,"size":58411},{"id":"fafb4ea12cf6771bf6cfec26e20d43f598b8e58327fe4e5ec6e7583e51e775a531ac0399605110f206a4b8f64df3c7616a0bdaeafa2279436e375d958e955854","href":"https://static.observableusercontent.com/files/fafb4ea12cf6771bf6cfec26e20d43f598b8e58327fe4e5ec6e7583e51e775a531ac0399605110f206a4b8f64df3c7616a0bdaeafa2279436e375d958e955854","name":"notesstyle-bold-updatedtf.woff2","type":"font/woff2","lastModified":1677236921611.392,"size":11444}] 43:{"id":"f003debd02f59cb3","slug":null,"title":"Climate Connections - Snapshot 2023-02-24 - Last Snapshot with font included","thumbnail":"e2afe445ed9c82b8dbe5263269a851e4e00651564d125451d4901d4826d9485b","access_level":"public","create_time":"$D2023-02-24T11:08:41.611Z","update_time":"$D2023-02-24T11:09:24.095Z","view_time":null,"first_public_time":"$D2023-02-24T11:08:41.611Z","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":484,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Climate Connections - Snapshot 2023-02-24 - Last Snapshot with font included","cells":[{"id":175,"value":"# Climate Connections - Snapshot 2023-02-24 - Last Snapshot with font included\n\nBased on what science team leaders say their data might usefully be compared with.\n\nOriginally collated in this matrix:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"ecvlinks = FileAttachment(\"ECVlinks.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"A more dynamic \"chord\" visualisation. Mouse-over the ECV labels to see their connections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"climateconnections=html`

${header}
${chords}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"header=html`

t Climate Connections

`\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"## Data\n\nThe data driving the visualisation. 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":7,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$46","pinned":false,"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","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]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"NB. If forking the project, check the .woff2 file attachment has come with it, and still has this URL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"fonturl=\"https://static.observableusercontent.com/files/fafb4ea12cf6771bf6cfec26e20d43f598b8e58327fe4e5ec6e7583e51e775a531ac0399605110f206a4b8f64df3c7616a0bdaeafa2279436e375d958e955854\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"fontfile=FileAttachment(\"notesstyle-bold-updatedtf.woff2\") // This is only here to tag the woff2 file as \"In use\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"//preload=html`` // Not sure this is needed.","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"