{
// plot functions of x
const p = plotter();
p.func(x => 0.1 * (x ** 3), { stroke: 'green', width: 3 });
p.func(x => (x ** 2) - 6, { stroke: 'orange', width: 3 });
p.func(x => Math.sqrt(x), { stroke: 'purple', width: 3, defined: x => x >= 0 });
p.func(x => -Math.abs(x) - 2, { stroke: 'gray', width: 3, dash: '8,2' });
return p.node;
}
{
// plot trig functions
const p = plotter({xLabel:'t', yLabel:'f(t)'});
p.func(t => amp * Math.tan(freq * t - phase), { stroke: 'blue', width: 0.5 });
p.func(t => amp * Math.sin(freq * t - phase), { stroke: 'red', width: 0.5 });
p.func(t => amp * Math.cos(freq * t - phase), { stroke: 'green', width: 0.5 });
return p.node;
}
{
const p = plotter();
p.line(2, 2, { stroke: 'blue', width: 3 });
p.line(-1, 1.5, { stroke: 'orange', width: 3 });
p.rectangle(-4, 3, 4, -3, { fill: 'red', rx: 1, ry: 2, dash: '6,3' });
p.circle(5, 7, 2, { stroke: 'gray', fill: 'white', opacity: 0.7, dash: '2,2' });
p.ellipse(-8, -6, 2, 3, { stroke: 'purple', fill: 'purple' });
p.square(-8, 4, 2, { stroke: 'green', rx: 0.25, ry: 0.25 });
return p.node;
}
{
const p = plotter({ width: 400, height: 600, yDomain: [-15, 15], grid: false });
p.line_segment(-2, 5, 7, 4, { stroke: 'magenta', width: 5, interactive: true });
p.line(2, 8, { interactive: true });
p.polyline([
{ x: 2, y: 18 },
{ x: 0, y: 12 },
{ x: 3, y: 8 },
{ x: 1, y: 4 },
{ x: 5, y: -6 },
{ x: 2, y: -16 },
], { stroke: 'red', width: 3, interactive: true, curve: true });
p.polygon([
{ x: -2, y: 2 },
{ x: 4, y: 2 },
{ x: -1, y: -2 },
], { fill: 'yellow', interactive: true });
p.polygon([
{ x: -8, y: -2 },
{ x: -4, y: -1 },
{ x: -2, y: -2 },
{ x: -2, y: -4 },
{ x: -5, y: -6 },
], { fill: 'green', stroke: '#789', width: 4, interactive: true });
p.circle(5, 7, 2, { stroke: 'gray', fill: 'blue', opacity: 0.1, interactive: true });
p.point(-8, 4, { interactive: true });
p.text('P (-8, 4)', -7.5, 4, { size: 12, anchor: 'start', baseline: 'middle', interactive: true});
return p.node;
}
{
const p = plotter({ width: 300, height: 300, axises: false });
p.polygon([
{ x: 0, y: 8 },
{ x: 7, y: -4 },
{ x: -7, y: -4 },
]);
p.polygon([
{ x: 0, y: -8 },
{ x: 7, y: 4 },
{ x: -7, y: 4 },
]);
p.circle(0, 0, 8);
p.circle(0, 0, 4);
p.arrow(-5, -8, 0, 0, { stroke: 'purple'});
p.text('The center', -5, -9, { stroke: 'purple', weight: 600 });
return p.node;
}
{
// curve and arcs
const p = plotter();
p.arc(4, 7, null, null, { startDeg: 45, endDeg: 135, r1: 2, r2: 3, fill: 'yellow', stroke: 'green' });
p.arc(5, -4.5, null, null, { startDeg: 0, endDeg: 180, r1: 0, r2: 4, fill: 'white', stroke: 'red', width: 5 });
p.circle(3, -3, 1);
p.circle(7, -3, 1);
p.circle(3, -3.5, 0.5, { fill: 'black', opacity: 1 });
p.circle(7, -3.5, 0.5, { fill: 'black', opacity: 1 });
p.polyline([
{ x: -3, y: 8 },
{ x: -1, y: 4 },
{ x: -8, y: -6 },
], { width: 0.5 });
p.polyline([
{ x: -3, y: 8 },
{ x: -1, y: 4 },
{ x: -8, y: -6 },
], { stroke: 'green', width: 3, curve: true });
return p.node;
}
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.
