News and graphics at @ClimateLab, a project of @PostGraphics.
rounded = polylineRound(points, radius);
points = [[10, 190], [10, 150], [190, 150], [190, 10]];
polylineRound = function(points, radius = 2){
if (points.length < 3) return null;
let out = "M" + points[0],
prev = points[0];
for (let i = 1, l = points.length; i < l; i++){
const curr = points[i],
a = geometric.lineAngle([prev, curr]);
if (i > 1){
out += `Q${prev} ${geometric.pointTranslate(prev, a, radius)}`;
}
out += `L${i === points.length - 1 ? curr : geometric.pointTranslate(prev, a, geometric.lineLength([prev, curr]) - radius)}`;
prev = curr;
}
return out;
}
html`<style>
.viz rect {
fill: #f5f5f5;
}
.viz polyline, .viz path {
fill: none;
stroke: black;
stroke-width: 2px;
}
</style>`
geometric = require("geometric@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.
