yScale = Plot.scale({ y: { domain: [-1, 1], label: "↑ y" } })
{
const yAxis = Plot.plot({
width: 40,
height,
marginTop,
marginBottom,
y: yScale
});
const chart = Plot.plot({
width: width * 2,
height,
marginTop,
marginBottom,
marginLeft: 10,
x: { nice: true },
y: yScale,
marks: [
Plot.ruleY([0], { stroke: "#888" }),
Plot.lineY(sweep, { x: "t", y: "y", stroke: "#338" })
]
});
chart.classList.add("chart");
const scrollbar = html`<div class="scrollbar">`;
scrollbar.append(chart);
const div = html`<div class="container">`;
div.append(yAxis, scrollbar);
return div;
}
<style>
.container {
display: flex;
align-items: flex-start;
padding-bottom: 30px;
}
.container .scrollbar {
overflow-x: scroll;
flex: 1;
}
.container .chart {
max-width: none;
}
</style>
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.
