{
const { w, h } = {
w: width - 64,
h: 400
};
const plane = cartesianPlane(w, h);
points(plane, [
{ x: -4, y: -8, color: 'red' },
{ x: 3, y: 4, color: 'blue' },
{ x: 4, y: 3, color: 'red' },
{ x: 4, y: 2, color: 'yellow' }
]);
lines(plane, [
{ gradient: 5, offset: 2, color: 'red', type: 'd' },
{ gradient: 0, offset: 2, color: 'blue' },
{ gradient: Infinity, offset: 2 }
]);
segment(plane, {
points: [[-1, -9], [2, -9]],
type: 'd'
});
triangle(plane, {
name: 'Sample Triangle',
points: [[-4.0, -6.4], [2.0, 6.0], [4.0, -5.3]]
});
curves(
plane,
{
func: x => x * x,
domain: x => x >= 0
},
{
color: 'blue',
step: 0.01,
type: 'line',
inverse: true
}
);
curves(
plane,
{
func: x => 0.5 * x * x * x + 1.5 * x * x,
domain: x => true
},
{
color: 'purple',
step: 0.01,
type: 'point',
inverse: false
}
);
parallelogram(plane, {
name: 'sample parallelogram',
point: [-1, 4],
width: 2,
height: 2,
angle: 45
});
rectangle(plane, {
name: 'sample rectangle',
point: [-1, 0],
width: 2,
height: 2
});
square(plane, {
name: 'sample square',
point: [2, 0],
length: 2
});
circle(plane, {
center: [0, 0],
radius: 2,
startAngle: 0,
endAngle: Math.PI * 90
});
return plane.svg.node();
}
{
const { w, h } = {
w: 480,
h: 480
};
const plane = cartesianPlane(w, h, {
axes: {
y: { domain: [-domainX, 5] }
}
});
const vectors = [
{
point: [0.0, 0],
length: 4,
angle: 0,
type: "d",
stroke: "red"
},
{
point: [0.0, 0],
length: 3 * Math.sqrt(2),
angle: Math.PI / 4,
marker: "dash-arrow"
},
{
point: [0.0, 0],
length: 4,
angle: Math.PI / 2,
type: "d"
},
{
point: [0.0, 0],
length: 3 * Math.sqrt(2),
angle: (Math.PI * 3) / 4,
// marker: "dash-arrow"
},
{
point: [0.0, 0],
length: 4,
angle: Math.PI,
type: "d"
},
{
point: [0.0, 0],
length: 3 * Math.sqrt(2),
angle: (Math.PI * 5) / 4,
marker: "dash-arrow"
},
{
point: [0.0, 0],
length: 4,
angle: (Math.PI * 3) / 2,
type: "d"
},
{
point: [0.0, 0],
length: 3 * Math.sqrt(2),
angle: (Math.PI * 7) / 4,
marker: "dash-arrow"
}
];
vector(plane, vectors);
measure(
plane,
vectors.map((vector, i) => (
{
text: `v${i} = ${Math.round(vector.length * 100) / 100}`,
dominantBaseline:'text-before-edge',
stretch: "green",
type: "d",
points: [
[0, 0],
[Math.cos(vector.angle) * vector.length, Math.sin(vector.angle) * vector.length]
]
}
))
);
return plane.svg.node();
}
{
const { w, h } = { w: width - 80, h: 300 };
const plane = cartesianPlane(w, h);
rectangle(plane, {
name: "sample rectangle",
point: [-1, 0],
width: 2,
height: 2
});
return plane.svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3.range(1,6,0.1)
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.
