Plot.plot({
width: 400 * 2,
height: (400 / volcano.width) * volcano.height - 20,
padding: 0,
margin: 0,
x: { axis: null, range: [0, 400 * 2] },
y: { axis: null, range: [0, (400 / volcano.width) * volcano.height] },
marks: [
Plot.cell(
d3.cross([0, 1], [0]).map(([a, b]) => ({ a, b })),
{
x: "a",
y: "b",
render: (
index,
{ x, y },
{
x: X,
y: Y,
channels: {
x: { value: a },
y: { value: b }
}
}
) =>
d3
.create("svg:g")
.call((g) =>
g
.selectAll()
.data(index)
.join("g")
.attr("transform", (i) => `translate(${X[i] + 10},${Y[i]})`)
.append((i) =>
subPlot(
data,
a[i],
b[i],
x.bandwidth() - 20,
y.bandwidth() - 20
)
)
)
.on(
"pointerenter pointermove",
(event) => (mutable mouse_pos = d3.pointer(event))
)
.node()
}
)
]
})