3e:null 3f:["$","title",null,{"children":"Climate Connections | treva | Observable"}] 45:T1fe8,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=0.4; 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:[{"id":"2740a7e1b0494041253fb5b0f0f13d1a7778d7de537e09a8e39b7a0e1c875632f36e4869e91a1d7088cfe4a70bd8b52f2b0e36b10155cd6b3213f3f96d454f7e","href":"https://static.observableusercontent.com/files/2740a7e1b0494041253fb5b0f0f13d1a7778d7de537e09a8e39b7a0e1c875632f36e4869e91a1d7088cfe4a70bd8b52f2b0e36b10155cd6b3213f3f96d454f7e","name":"ecvs@15.json","type":"application/json","lastModified":1677916922715.534,"size":8472}] 43:{"id":"8530f09f5bbec377","slug":null,"title":"Climate Connections","thumbnail":"9f247d2e087a2192dba907325688ff846e43e1de10e4b344ee1729d82e4e27fe","access_level":"public","create_time":"$D2023-03-04T08:02:02.715Z","update_time":"$D2023-03-19T09:19:07.259Z","view_time":null,"first_public_time":"$D2023-03-04T08:02:02.715Z","has_unpublished_edits":null,"fork":{"id":"32d30ede47070702","slug":null,"title":"Climate Connections - WIP","owner":{"id":"1a92493b15781331","login":"timday","name":"Tim Day"}},"stars":1,"starred":false,"owner":{"type":"team","id":"980ab5762f0c5fda","login":"climate2023","name":"treva","avatar_url":"https://avatars-next.observableusercontent.com/45864a9a54f6a87217313a27cd74c7b6b8befe08b16d98388d4d0a124b83c4cb","tier":"starter_2024","bio":"","following":false},"version":742,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e3c5c41bb4ac527","login":"climate2023","name":"treva","avatar_url":"https://avatars-next.observableusercontent.com/45864a9a54f6a87217313a27cd74c7b6b8befe08b16d98388d4d0a124b83c4cb","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1e3c5c41bb4ac527","login":"climate2023","name":"treva","avatar_url":"https://avatars-next.observableusercontent.com/45864a9a54f6a87217313a27cd74c7b6b8befe08b16d98388d4d0a124b83c4cb","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","cells":[{"id":175,"value":"# Climate Connections \n\nFork of \"Climate Connections - WIP\" by @timday. This branch is for the purposes of cosmetic refinements only.\n\n-\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":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='#000000' ","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":"$W46","stdlib":"1"}} 44:"$43:body"