Published
Edited
Aug 20, 2022
7 stars
Insert cell
Insert cell
{
let w = width < 800 ? width : 800;
let h = 0.625 * w;
let div = d3
.create("div")
.style("width", `${w}px`)
.style("height", `${h}px`)
.style("position", "relative");
let samples = build_samples((x) => x ** 2, -1, 1);
let plot = Plot.plot({
width: w,
height: h,
marks: [
Plot.line(samples, {
strokeWidth: 1,
stroke: "steelblue"
}),
Plot.ruleX([-1]),
Plot.ruleY([0])
]
});
div.append(() => plot);
let tex_div = div
.append("div")
.style("position", "absolute")
.style("left", `${w / 2}px`)
.style("top", `${h / 5}px`);
tex_div.append(() => tex.block`y=x^2`);
return div.node();
}
Insert cell
import { build_samples } from "@mcmcclur/adaptive-plotter"
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