ecvs = FileAttachment("ecvs@15.json").json()
chords = {
document.head.innerHTML+=styling;
const width=1200;
const height=1200;
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;i<ecvs.length;i++) {
const ecv=ecvs[i];
const a=(2.0*Math.PI*(1+i))/(ecvs.length+1);
const dx= 0.4*width*Math.sin(a);
const dy= -0.4*height*Math.cos(a);
const x=width*0.5+dx;
const y=height*0.5+dy;
ecvxys.push(
[x,y]
);
}
// Names with "\n" line breaks replaced by " "
var ecvnames=[];
for (var i=0;i<ecvs.length;i++) {
ecvnames.push(ecvs[i].name.replaceAll("\n"," "));
}
// Lookup from ecvname to its index
var ecvindices={};
for (var i=0;i<ecvs.length;i++) {
ecvindices[ecvnames[i]]=i;
}
// Precompute enumerated links
var ecvlinks=[];
for (var i=0;i<ecvs.length;i++) {
var row=[];
for (var j=0;j<ecvs[i].links.length;j++) {
if (ecvs[i].links[j] in ecvindices) {
row.push(ecvindices[ecvs[i].links[j]]);
} else {
console.log("Bad ECV link: can't find "+ecvs[i].links[j]+" from "+ecvs[i].name);
}
}
ecvlinks.push(row);
}
// An array of ecv "highlight level"s... [0...1].
// These will fade in or out depending on focus
var ecvattns=new Array(ecvs.length).fill(0.0);
// And the same for the links
var ecvlinkattns=new Array(ecvs.length);
for (var i=0;i<ecvs.length;i++) {
ecvlinkattns[i]=new Array(ecvlinks[i].length).fill(0.0);
}
var nearestecv= -2; // -1 means near centre
var t0=Date.now();
function tick() {
const t1=Date.now();
const dt=t1-t0;
if (animating) {
var stillAnimating=false;
if (mystery) {
if (mysteryFade<1.0) stillAnimating=true;
mysteryFade=Math.min(1.0,mysteryFade+dt/mysteryFadeTime);
} else {
if (mysteryFade>1.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;i<ecvs.length;i++) {
const ecv=ecvs[i];
for (var j=0;j<ecvlinks[i].length;j++) {
const t=ecvlinks[i][j];
const x0=width*0.5+0.8*(ecvxys[i][0]-0.5*width);
const y0=height*0.5+0.8*(ecvxys[i][1]-0.5*height)
const x1=width*0.5+0.8*(ecvxys[t][0]-0.5*width);
const y1=height*0.5+0.8*(ecvxys[t][1]-0.5*height);
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.quadraticCurveTo(width*0.5,height*0.5,x1,y1);
ctx.stroke();
}
}
ctx.globalAlpha=1.0;
ctx.shadowBlur = 0.0;
// Tag which ecvs are "active" with 2 or 1 depending on primary or secondary
var activeecvs=new Array(ecvs.length).fill(0);
for (var i=0;i<ecvs.length;i++) {
if (i==nearestecv || nearestecv== -1) {
activeecvs[i]=2;
for (var j=0;j<ecvlinks[i].length;j++) {
activeecvs[ecvlinks[i][j]]=Math.max(activeecvs[ecvlinks[i][j]],1);
}
}
}
// Update attention levels depending on activeness
for (var i=0;i<ecvattns.length;i++) {
if (activeecvs[i]>0) {
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;i<ecvlinkattns.length;i++) {
for (var j=0;j<ecvlinkattns[i].length;j++) {
if (activeecvs[i]==2 && activeecvs[ecvlinks[i][j]]>0) {
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;i<ecvs.length;i++) {
const ecv=ecvs[i];
for (var j=0;j<ecvlinks[i].length;j++) {
const t=ecvlinks[i][j];
const x0=width*0.5+0.8*(ecvxys[i][0]-0.5*width);
const y0=height*0.5+0.8*(ecvxys[i][1]-0.5*height)
const x1=width*0.5+0.8*(ecvxys[t][0]-0.5*width);
const y1=height*0.5+0.8*(ecvxys[t][1]-0.5*height);
if (ecvlinkattns[i][j]>1.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<ecvs.length;i++) {
const ecv=ecvs[i];
// Draw label
ctx.font='bold 14px Helvetica Neue,Helvetica,Arial,sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha=0.2+0.8*ecvattns[i];
ctx.fillStyle=groupcolours[ecv.group];
const lines=ecv.name.split('\n');
if (lines.length==1) {
ctx.fillText(ecv.name,ecvxys[i][0],ecvxys[i][1]);
} else {
const lineHeight=ctx.measureText('M').width*1.2 // Doesn't measure height!
for (var line=0;line<lines.length;line++) {
ctx.fillText(lines[line],ecvxys[i][0],ecvxys[i][1]+lineHeight*(-(lines.length-1)/2.0+line));
}
}
ctx.globalAlpha=1.0;
}
}
if (!stillAnimating) {
console.log('Climate Connections animation stopping animation, for now');
}
animating=stillAnimating;
} // if (animating)
frame = requestAnimationFrame(tick);
t0=t1;
}
tick();
function sqr(x) {return x*x;}
canvas.onmouseout = function(e) {
mystery=true;
nearestecv = -2;
animating=true;
var elem = document.getElementById("mystery");
elem.style.visibility='visible';
elem = document.getElementById("about");
elem.textContent="";
}
canvas.onmousemove = function(e) {
animating=true; // Assume any sort of mouse move will trigger something.
const rect = canvas.getBoundingClientRect();
const ex = e.clientX - rect.left;
const ey = e.clientY - rect.top;
nearestecv= -1;
var nearestd=4.0*Math.sqrt(sqr(ex-0.5*width)+sqr(ey-0.5*height));
for (var i=0;i<ecvs.length;i++) {
const x=ecvxys[i][0];
const y=ecvxys[i][1];
const d=Math.sqrt(sqr(x-ex)+sqr(y-ey));
if (d<nearestd) {
nearestecv=i;
nearestd=d;
}
if (nearestecv!=previousnearestecv) {
mystery=false;
// TODO: Could be done a bit more cleanly... avoid hide then un-hide path
var elem = document.getElementById("mystery");
elem.style.visibility='hidden';
elem = document.getElementById("about");
if (nearestecv>=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;
}
about=html`<div class="about"><div class="aboutText" id="about"></div><div id="mystery">${mysterytext}</div></div>`
mysterytext=`<div class="mysteryTitle">climate connections</div><div class="mysteryStrapline">essential climate variables</div>`
groupcolours=[{oceanic:'#007D8A',terrestrial:'#FF8F1C',atmospheric:'#009CDE'}][0] // Standard CCI colours for these groups
styling=`<style>
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
canvas {
// Actually, this is all controlled from code
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
}
div.about {
position: relative;
max-width: 100%;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background-color: #f1eede; // Sampled from style guide
}
div.aboutText {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 84px;
vertical-align: top;
padding: 16px;
//display: table-cell; // Don't think this does anything useful.
}
#mystery {
position: absolute;
top: 0;
left: 0;
}
div.mysteryTitle {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: bold;
padding: 16px;
}
div.mysteryStrapline {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12px;
padding-left: 16px;
}
</style>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.