draw = (n = "Now") => {
let plt = Plot.plot({
title: `Heatmap: ${n}`,
x: { nice: true, axis: false },
y: { nice: true, axis: false, reverse: toggle },
color: { scheme: "Blues" },
aspectRatio: 1.0,
marks: [
toggle
? Plot.contour(data, {
x: "x",
y: "y",
stroke: "c",
blur: 5,
interval: 3
})
: Plot.cell(data, {
x: "x",
y: "y",
fill: "c",
strokeWidth: 1,
stroke: "c"
})
]
});
return plt;
}
{
let rnd = d3.randomUniform(),
kTInv = 1 / kT;
data.map((d) => {
if (rnd() < 0.0) {
return;
}
let { v, neighbors } = d,
u = 1 - v,
e0 = d3.sum(neighbors, (i) => Math.abs(data[i].v - v)),
e1 = d3.sum(neighbors, (i) => Math.abs(data[i].v - u)),
r = Math.exp((e1 - e0) * kTInv),
p = r / (1 + r),
w = rnd() < p ? v : u;
d.w = w;
});
data.map((d) => {
d.v = d.w;
d.c = d.v + d3.sum(d.neighbors, (i) => data[i].v);
});
return now;
}
data = {
let width = 100,
height = 100,
rnd = d3.randomInt(2),
data = [];
for (let i = 0; i < width; ++i) {
for (let j = 0; j < height; ++j) {
data.push({ x: i, y: j, neighbors: [], v: rnd() });
}
}
data.map((d, offset) => {
let { x, y, neighbors, v } = d;
for (let i = 0; i < 3; ++i) {
for (let j = 0; j < 3; ++j) {
if ((i === 1) & (j === 1)) {
continue;
}
neighbors.push(
data.findIndex((d) => (d.x === x + i - 1) & (d.y === y + j - 1))
);
}
}
// neighbors.push(data.findIndex((d) => (d.x === x - 1) & (d.y === y)));
// neighbors.push(data.findIndex((d) => (d.x === x + 1) & (d.y === y)));
// neighbors.push(data.findIndex((d) => (d.x === x) & (d.y === y - 1)));
// neighbors.push(data.findIndex((d) => (d.x === x) & (d.y === y + 1)));
d.neighbors = neighbors.filter((d) => d > -1);
d.w = v;
d.c = v;
});
return data;
}
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.
