p5(sketch => {
let system;
const radius = width/175;
const slider = sketch.createSlider(extent[0], extent[1], 1975);
let extraCanvas;
// Hapens ONCE
sketch.setup = function() {
sketch.createCanvas(width, width);
extraCanvas = sketch.createGraphics(width, width);
sketch.strokeWeight(2);
sketch.textSize(32);
sketch.textFont('Georgia');
slider.position(10, 10);
// draw the temperature circles to the background canvas (extraCanvas)
anomalies.forEach((d, i) => {
extraCanvas.noFill();
extraCanvas.strokeWeight(2);
extraCanvas.stroke(colorScale(d.value));
extraCanvas.circle(extraCanvas.width / 2, extraCanvas.height / 2, i * radius);
});
// add background canvas to main canvas
sketch.image(extraCanvas, 0, 0);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
// clear the canvas
sketch.clear();
// redraw background
sketch.image(extraCanvas, 0, 0);
// get data for year selected in slider
const data = anomalies.find(({ year }) => year === slider.value());
const yearIndex = years.indexOf(data.year);
// draw circle for year
sketch.strokeWeight(1.5);
sketch.drawingContext.setLineDash([10, 10]);
sketch.fill("rgba(0,0,0,0)");
sketch.stroke("black");
sketch.circle(sketch.width / 2, sketch.height / 2, yearIndex * radius);
// draw label for year
sketch.textAlign(sketch.CENTER);
sketch.fill("rgba(0,0,0,1)");
sketch.strokeWeight(0);
sketch.textStyle(sketch.NORMAL);
sketch.text(data.year, sketch.width / 2, sketch.height / 2 - 15);
sketch.textStyle(sketch.BOLD);
sketch.text(`${data.value} °C`, sketch.width / 2, sketch.height / 2 + 15);
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
