Public
Edited
Feb 4
Insert cell
Insert cell
Insert cell
Plot.plot({
grid: true,
marks: [
Plot.dot(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"}),
//Plot.line(build_samples((x) => (2.5 * x), 10, 25)) // uncomment for line to show on plot
]
})
Insert cell
Insert cell
Insert cell
viewof f = {
let f = Text({ submit: true, label: tex`f(x):`, value: '2*x' });
f.getElementsByTagName('label')[0].style.width = '40px';
return f;
}
Insert cell
plot = {
let f_compiled = math.compile(f);
return funplot(x => f_compiled.evaluate({ x: x }));
}
Insert cell
Insert cell
Insert cell
Insert cell
viewof f2 = {
let f2 = Text({ submit: true, label: tex`f(x):`, value: '0.15 * x^2' });
f2.getElementsByTagName('label')[0].style.width = '40px';
return f2;
}
Insert cell
ff2 = {
let ff2 = math.compile(f2);
return (x) => ff2.evaluate({ x: x });
}
Insert cell
Insert cell
plot2 = Plot.plot({
grid: true,
marks: [
Plot.dot(penguins, {x: "culmen_depth_mm", y: "culmen_length_mm"}),
Plot.line(build_samples((x) => ff2(x), -10, 20, {N: 100}), {stroke: 'tomato'}), // uncomment for line to show on plot
curvedText("Some long text I need along this path.", {
path: build_samples((x) => ff2(x), -10, 20, {N: 100}),
fontSize: 16
}
)
]
})
Insert cell
Insert cell
import { build_samples } from '@mcmcclur/adaptive-plotter'
Insert cell
import { Text } from '@observablehq/inputs'
Insert cell
import { funplot } from '@mbostock/funplot'
Insert cell
import { curvedText } from "@jwolondon/curved-text-mark"
Insert cell
math = require('mathjs@9')
Insert cell
import { plotter } from '@kjerandp/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