{
const w = 410,
context = DOM.context2d(w, w),
path = d3
.geoPath(
d3
.geoIdentity()
.scale(100)
.translate([5, 5])
)
.context(context);
let isFrame = true;
for (const contour of contours) {
context.beginPath();
context.fillStyle = color(contour.value);
path(contour);
context.fill();
// Optimization: if a contour is not a frame, subsequent contours are not a frame either
isFrame =
isFrame &&
contour.coordinates[0] &&
d3.polygonArea(contour.coordinates[0][0]) === 4 * 4 - .5;
if (!isFrame) context.stroke();
}
for (let i = 0; i < n; i++) {
for (let j = 0; j < m; j++) {
context.beginPath();
context.arc(100 * (i + .5), 100 * (j + .5), 12, 0, 2 * Math.PI);
context.fillStyle = "white";
context.strokeStyle = "black";
context.fill();
context.stroke();
context.fillStyle = "black";
context.fillText(
values[n * j + i],
100 * (i + .5) - 3,
100 * (j + .5) + 3
);
}
}
return context.canvas;
}
color = d3.scaleSequential(d3.interpolateBlues).domain([0, 4])
values = [0, 4, 2, 0, 3, 4, 2, 0, 3, 0, 1, 0, 3, 1, 1, toggle ? -1 : 0]
n = 4
m = 4
d3 = require("d3@5")
import { checkbox } from "@jashkenas/inputs"
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.
