Consultant Designer & Developer
{
clear();
// drawLine(0, 0, width, height);
// drawLine(0, height, width, 0, 4);
// drawLine(0, height / 2, width, height / 2, 8);
// drawLine(width / 2, 0, width / 2, height, 16);
const us = math.linspace(75, true);
const xs = us.map((u) => math.lerp(margins.left, size + margins.left, u));
xs.forEach((x) => {
drawLine(margins.left + size / 2, margins.top + size, x, margins.top);
});
}
style2 = (x1, y1, x2, y2, lineWidth, value) => {
const theta = angleOfInclination(x1, y1, x2, y2);
const length = distance(x1, y1, x2, y2);
const baseLineWidth = lineWidth * 0.666;
const dotRadius = 0.5;
// Rotate the line parallel to x-axis
// The resultant line is (x1, y1), (x2a, y2a)
const [x2a, y2a] = rotatePoint(x2, y2, -theta, x1, y1);
// Generate points along the line
let pts = partitionLine(x1, y1, x2a, y2a, length * 2).map((l) => l[0]);
// Remove some points at random
pts = pts.filter(() => random.value() > 0.125);
// Shift some points at random
const dotShift = baseLineWidth / 2 - dotRadius;
pts = pts.map(([x, y]) => {
let dy = (random.value() * 2 - 1) * dotRadius;
dy = dy < 0 ? dy - dotShift : dy + dotShift;
return [x, y + dy];
});
// Rotate points back to original angle
pts = pts.map(([x, y]) => rotatePoint(x, y, theta, x1, y1));
// Draw the line
ctx.beginPath();
ctx.strokeStyle = palette.fg;
ctx.lineCap = "round";
ctx.lineWidth = baseLineWidth;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
// Draw the noise
ctx.beginPath();
ctx.fillStyle = palette.fg;
pts.forEach(([cx, cy]) => {
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2);
});
ctx.fill();
}
maxSize = Math.min(height, width)
margin = maxSize / 10
size = maxSize - 2 * margin
margins = ({
left: (width - size) / 2,
top: (height - size) / 2,
bottom: (height - size) / 2,
right: (width - size) / 2
})
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.
