Public
Edited
Mar 30, 2023
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
canvas = {
const context = DOM.context2d(w, h);

//draw background
context.fillStyle = getColor(0);
context.fillRect(0, 0, w, h);

//draw cells
for (let c of cells) {
//set fill color
context.fillStyle = getColor(c.pop);

//compute screen position
const pos = getPosition(c.GRD_ID);
const sPos = geoToScreen(pos);

//draw cell
context.fillRect(
sPos.x,
sPos.y,
resolution / view.z + 0.5,
-resolution / view.z - 0.5
);
}

return context.canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
cells = dbGrid.query(
"SELECT GRD_ID, TOT_P_" +
year +
" AS pop FROM _" +
resolution +
" WHERE TOT_P_" +
year +
">0"
)
Insert cell
h = 800
Insert cell
w = width
Insert cell
Insert cell
view = {
return { x: 4400000, y: 2830000, z: 2500 };
}
Insert cell
Insert cell
geoToScreen = ({ x: x, y: y }) => {
return {
x: (x - view.x) / view.z + w * 0.5,
y: -(y - view.y) / view.z + h * 0.5
};
}
Insert cell
Insert cell
popMax = (
await dbGrid.query(
"SELECT max(TOT_P_" + year + ") AS max FROM _" + resolution
)
)[0].max
Insert cell
Insert cell
getColor = (pop) => {
let t = 1 - pop / popMax;
t = Math.pow(t, 100);
return d3.interpolateMagma(1 - t);
}
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell

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.
Learn more