canvas = {
const width = 300;
const height = width;
const ctx = DOM.context2d(width, height);
ctx.canvas.style.width = `${width}px`;
ctx.canvas.style.height = `${height}px`;
// Equilateral Triangle Configuration
const triangleBase = width;
const triangleHeight = Math.round((triangleBase * Math.sqrt(3)) / 2);
const triangleHalf = triangleBase / 2;
const trianglesVertices = [
{
v0: [triangleHalf, 0],
v1: [0, triangleHeight],
v2: [triangleBase, triangleHeight]
},
{
v0: [0, triangleHeight],
v1: [triangleHalf, 0],
v2: [triangleBase, triangleHeight]
},
{
v0: [0, triangleHeight],
v1: [triangleBase, triangleHeight],
v2: [triangleHalf, 0]
}
];
// Drawing the parabolas
const steps = 25;
const parabolaColor = "rgb(239 68 68 / 50%)";
trianglesVertices.forEach((vertex) =>
drawParabola(ctx, steps, parabolaColor, vertex)
);
return ctx.canvas;
}
drawParabola = (ctx, steps, color, { v0, v1, v2 }) => {
ctx.strokeStyle = color;
// draw lines between intersection points
for (let i = 0; i <= steps; i++) {
const t = (1 / steps) * i;
const interpolatedPoints = interpolatePoints([v0, v1, v2], t);
const startPoint = {x: interpolatedPoints[0][0], y: interpolatedPoints[0][1]}
const endPoint = {x: interpolatedPoints[1][0], y: interpolatedPoints[1][1]}
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
ctx.lineTo(endPoint.x, endPoint.y);
ctx.stroke();
}
}
interpolateBetweenPoints = (point1, point2, t) => [
point1[0] * (1 - t) + point2[0] * t,
point1[1] * (1 - t) + point2[1] * t
];
// Function to interpolate points array using a parameter t
interpolatePoints = (points, t) =>
// We don't include the last point
// it can't be interpolated (there's no nextPoint after the last)
points.slice(0, -1).map((currentPoint, i) => {
const nextPoint = points[i + 1];
return interpolateBetweenPoints(currentPoint, nextPoint, t);
})
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.
