Public
Edited
Aug 18, 2022
height = 400
viewof area = {
const context = DOM.context2d(width, height);
const canvas = context.canvas;
const barHeights = [height];
const barWidth = 500;
const stepWidth = 2;
const stepHeight = 3;
const dotWidth = 2;
const dotHeight = 2;
// Whenever the circles move, redraw the canvas.
function render() {
context.clearRect(0, 0, width, height);
for(let [i, barHeight] of barHeights.entries()) {
for(let x = 0; x < barWidth; x+= stepWidth) {
for(let y = 0; y < barHeight; y+= stepHeight) {
const draw = Math.random() > 1 - y / height;
if(draw) {
const yPos = height - y;
//context.fillStyle = y > barHeight / 2 ? "#d6d7d7" : "#ffce99"; // : "";
context.fillStyle = y > barHeight / 2 || i === 0 ? `rgba(93, 111, 176, .4)` : `rgba(93, 111, 176, .15)`; // : "";
context.fillRect(
x + barWidth * barHeights.length / barHeights.length * i + 40 * i,
yPos,
dotWidth,
dotHeight
);
}
}
}
}
}
// Render the initial canvas.
render();
return canvas;
}
data = {
const response = await FileAttachment("Global_h-ssp119_pixel_output_coarse.json").json();
const distribution = response.data.distribution.reduce((acc, row, rowIndex) => {
row.forEach((value, colIndex) => acc.push({
value: value || null,
x: response.yearStart + response.yearStep * rowIndex,
y: response.valueStart + response.valueStep * colIndex,
}))
return acc;
}, [])
const mean = response.data.mean.map((value, i) => ({value, x: response.yearStart + i}))
return {distribution, mean}
}
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.
