Plot.plot({
facet: {
data,
x: (_, i) => i % 3,
y: (_, i) => i % 2,
marginRight: 20,
marginTop: 18
},
marks: [
Plot.dot(data, { x: "0", y: "1", fill: "2" }),
() =>
d3
.create("svg:g")
.attr("transform", `translate(0, ${A.scale("y").range[1]})`)
.call(
d3
.axisTop(d3.scaleLinear(A.scale("x").domain, A.scale("x").range))
.ticks(5)
)
.call((g) => g.select(".domain").remove())
.node(),
() =>
d3
.create("svg:g")
.attr("transform", `translate(${A.scale("x").range[1]},0)`)
.call(
d3
.axisRight(d3.scaleLinear(A.scale("y").domain, A.scale("y").range))
.ticks(5)
)
.call((g) => g.select(".domain").remove())
.node()
],
x: { ...A.scale("x"), ticks: 5 },
y: { ...A.scale("y"), ticks: 5 },
fy: A.scale("fy"),
grid: true
})