Plot as an inset for another Plot
<div style="position: relative; width: 800px; height: 500px">
${dotplot}
<div style="position: absolute; right:0px; bottom: 30px; border: solid 1px black;">
${bar}
</div>
</div>
bar = Plot.rectY(
olympians,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
).plot({ x: { domain: [180, 20] }, height: 200, width: 400 })
dotplot = Plot.plot({
width: 800,
height: 500,
marks: [
Plot.dot(olympians, {
x: "weight",
y: "height",
fill: "sex",
opacity: 0.5
}),
Plot.ruleX([30]),
Plot.ruleY([1.2])
]
})
Plot.plot({
width: 800,
height: 500,
marks: [
Plot.dot(olympians, {
x: "weight",
y: "height",
fill: "sex",
opacity: 0.5
}),
Plot.ruleX([30]),
Plot.ruleY([1.2]),
() =>
svg`<g transform="translate(400,270)">${Plot.rectY(
olympians,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
).plot({
axis: null,
x: { domain: [180, 20] },
height: 200,
width: 400
})}`
]
})
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.
