3e:null 3f:["$","title",null,{"children":"Climate Connections - Snapshot 20230601 | Tim Day | Observable"}] 45:T1fe9,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 ) { 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; } 46:T734,## Ideas / TODO - Is there a relevant "style guide" follow? (ESA or CCI or Trevalabs?) - Group colours (atmospheric/terrestrial/ocean) are as specified. - Distributable (by woff/woff2) fonts? - "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 over individual arcs? - (Must consider mobile too; they don't tend to work there... no "hover", or pointing precision). - Are there different "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 two ECVs actually mean? (Causality/influence? 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? Restful noises related to the ECVs? (No idea what web APIs are relevant). A completely "audio version"? - Use the interlinking data to drive clustering or a mass-spring graph layout algorithm? - Related: the ordering of ECVs within their group is largely driven by what worked graphically and avoided having to shrink the font. It's therefore somewhat subjective. A more objective automatic ordering could be driven by clustering of more interlinked ECVs.47:[{"id":"2740a7e1b0494041253fb5b0f0f13d1a7778d7de537e09a8e39b7a0e1c875632f36e4869e91a1d7088cfe4a70bd8b52f2b0e36b10155cd6b3213f3f96d454f7e","href":"https://static.observableusercontent.com/files/2740a7e1b0494041253fb5b0f0f13d1a7778d7de537e09a8e39b7a0e1c875632f36e4869e91a1d7088cfe4a70bd8b52f2b0e36b10155cd6b3213f3f96d454f7e","name":"ecvs@15.json","type":"application/json","lastModified":1685690592508.122,"size":8472}] 43:{"id":"f3e9582d8baccc9a","slug":null,"title":"Climate Connections - Snapshot 20230601","thumbnail":"954c35fc36a17f685f7b7cfc56d16b2634ca78e57a5e977379190615ec2f2be4","access_level":"public","create_time":"$D2023-06-02T07:23:12.508Z","update_time":"$D2023-06-02T07:23:35.075Z","view_time":null,"first_public_time":"$D2023-06-02T07:23:12.508Z","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":697,"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 20230601","cells":[{"id":175,"value":"# Climate Connections - Snapshot 20230601 \n\nBased on a survey of which other ECVs (Essential Climate Variables) the science team leaders say their ECV influences.","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.\n\nThe \"definitive\" version of this should be considered to be the file `data/ecvs.json` in the repository at `git@github.com:trevalabs/clip_03_ecv_connections.git`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":659,"value":"ecvs = FileAttachment(\"ecvs@15.json\").json()","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":"$45","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":"$46","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":"$W47","stdlib":"1"}} 44:"$43:body"