Published unlisted
Edited
Dec 20, 2021
1 star
Insert cell
Insert cell
multipleAxesPlot(
{
facet: {
data,
x: (_, i) => "ABC"[(i % 3) % (i % 2 ? 3 : 2)],
y: (_, i) => (i % 2 ? "🤯" : "🚀"),
marginTop: 20
},
fx: { paddingInner: 0.21 },
fy: { axis: "left", padding: 0.21 },
marks: [Plot.frame(), Plot.dot(data, { x: "0", y: "1", fill: "2" })],
nice: true,
marginRight: 40,
y: { ticks: 5 },
x: { ticks: 5 },
grid: true,
marginTop: 40
},
{ x: "top", y: "right" }
)
Insert cell
function multipleAxesPlot(def, { x, y } = {}) {
const A = Plot.plot(def);

const xAxis =
x === "top" ? d3.axisTop : x === "bottom" ? d3.axisBottom : null;
const xTranslate =
x === "top"
? A.scale("y").range[1]
: x === "bottom"
? A.scale("y").range[0]
: null;

const yAxis =
y === "left" ? d3.axisLeft : y === "right" ? d3.axisRight : null;
const yTranslate =
y === "left"
? A.scale("x").range[0]
: y === "right"
? A.scale("x").range[1]
: null;

return Plot.plot({
...def,
marks: [
...(xAxis
? [
() =>
d3
.create("svg:g")
.attr("transform", `translate(0,${xTranslate})`)
.call(
xAxis(
d3.scaleLinear(A.scale("x").domain, A.scale("x").range)
).ticks(5)
)
.call(
def.x?.line === true
? () => {}
: (g) => g.select(".domain").remove()
)
.node()
]
: []),
...(yAxis
? [
() =>
d3
.create("svg:g")
.attr("transform", `translate(${yTranslate},0)`)
.call(
yAxis(
d3.scaleLinear(A.scale("y").domain, A.scale("y").range)
).ticks(5)
)
.call(
def.y?.line === true
? () => {}
: (g) => g.select(".domain").remove()
)
.node()
]
: []),
...def.marks
]
});
}
Insert cell
Insert cell
A = Plot.plot({
facet: { data, x: (_, i) => i % 3, y: (_, i) => i % 2 },
fx: { paddingInner: 0.2 },
fy: { paddingInner: 0.2 },
marks: [Plot.dot(data, { x: "0", y: "1", fill: "2" })],
nice: true,
marginRight: 40,
y: { ticks: 5 },
x: { ticks: 5 },
grid: true
})
Insert cell
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
})
Insert cell
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