3e:null 3f:["$","title",null,{"children":"Climate Connections - WIP | Tim Day | Observable"}] 45:T259b,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=125.0; // Time (ms) for (1/e) exponential decay fade out var previousnearestecv=-3; var mystery=true; // Flags whether we're in "mystery mode" (on startup and mouse-out) var mysteryFade=1.0; // For fade of mystery "look" const mysteryFadeTime=500.0; // Background will fade linearly var animating=true; // Flags whether there's anything for animation to actually do, otherwise the canvas can be left as is. let frame; // Precompute label centres var ecvxys=[]; for (var i=0;i1.0/1024.0) stillAnimating=true; mysteryFade=Math.max(0.0,mysteryFade-dt/mysteryFadeTime); } // Draw the background ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, width, height); ctx.globalAlpha=mysteryFade; ctx.fillStyle = "#51477d"; // Purple colour from style guide (actually for Ozone) ctx.fillRect(0, 0, width, height); // Draw faint lines for all the possible connections, whether active or not // Do this first so that these never overdraw the primary lines ctx.strokeStyle='#eeeeee'; ctx.globalAlpha=0.2+0.8*mysteryFade; ctx.lineWidth=1; ctx.shadowOffsetX=0; ctx.shadowOffsetY=0; ctx.shadowBlur=mysteryFade; ctx.shadowColor = '#eeeeee' 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 if (!mystery) { 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=""; elem = document.getElementById("mystery"); elem.style.visibility='visible'; } previousnearestecv=nearestecv; } } } invalidation.then(() => cancelAnimationFrame(frame)); return canvas; } 46:T7c7,## Ideas / TODO - There is a style guide; are we following it accurately enough? - "Group colours" (atmospheric/terrestrial/ocean) are as specified. - Fonts could be customized beyond the simple CSS via attaching woff/woff2 files. - "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? - Experimented with this at but it is not very interesting. - 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":1677778356844.472,"size":8472}] 43:{"id":"32d30ede47070702","slug":null,"title":"Climate Connections - WIP","thumbnail":"9ad23c91d5b3e61164d7cc4119d0a62dad6d977edf695c216a7425837ebe2a20","access_level":"public","create_time":"$D2023-01-17T12:57:22.942Z","update_time":"$D2023-06-27T09:18:18.501Z","view_time":null,"first_public_time":"$D2023-01-17T12:57:22.942Z","has_unpublished_edits":null,"fork":true,"stars":1,"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":815,"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":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Climate Connections - WIP","cells":[{"id":175,"value":"# Climate Connections - WIP \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, loaded from the `ecvs.json` file attached to this notebook. More nodes and links can be added.\n\nThe \"definitive\"/\"released\" version of this project should be considered to be the repository at `git@github.com:littlepictures/clip_ecv_connections.git` (which is an export of this notebook - including a runtime - which can be hosted independently of observablehq's infrastructure).\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":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":721,"value":"The `about` html is the box under the canvas. It'll either show the ECV name and description or the startup \"look\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"about=html`

${mysterytext}

climate connections

essential climate variables

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"## Export and testing\n\nOnce exported for standalone use, can be tested with `http-server` or (if that's not available e.g MacOS) `python3 -m http.server --cgi 8080`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":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":true,"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"