Unlisted
Edited
Feb 3, 2023
Insert cell
Insert cell
Insert cell
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 20px;">
${carScatter}
${topLetterBar}
${aaplArea}
</div>
Insert cell
carScatter = Plot.plot({
width: width / 3,
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Insert cell
topLetterBar = Plot.plot({
width: width / 3,
marks: [
Plot.barX(alphabet, {x: "frequency", y: "letter", sort: {y: "x", reverse: true, limit: 10}}),
Plot.ruleX([0])
]
})
Insert cell
aaplArea = Plot.plot({
width: width / 3,
marks: [
Plot.areaY(aapl, Plot.windowY({x: "Date", y: "Close", k: 50})),
Plot.ruleY([0])
]
})
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