The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Sep 14, 2023
Plot1722 = import("https://esm.sh/gh/observablehq/plot@94dc0df54bf64df5f89ca8bdf0f9e8ae114c11ae")
Plotmain = import("https://esm.sh/gh/observablehq/plot@main")
testplot = (options) => {
const chart = Plot.plot({
height: 150,
style: "border: solid 1px brown; margin-bottom: 2px",
...options,
marks: [Plot.frame({ stroke: "brown" }), ...options.marks]
});
const frame = chart.querySelector("rect[aria-label=frame],g[aria-label=frame] rect");
return html`<div style="display: flex">
${chart}
<div style="padding-left: 2em; font-family: sans-serif; font-size: 12px">marginLeft: ${frame.getAttribute(
"x"
)}<br>marginRight: ${
640 - frame.getAttribute("width") - frame.getAttribute("x")
}`;
}
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.
