Hello ObservableHello PolygonsHello TransformsHello AnimationHello Plot layout with HTML and CSSHello modern colour spacesHello Colour MixingHello custom marks with PlotHello Polygon MorphingHello Zoom-PanHello VegaLite and VegaHello Zoomable Vega-Lite MapHello SketchyHello ClipperLibHello NetworkHello Linear ProgrammingHello Census 2021Hello function expressions
Hello Labella
labella = require("labella@1.1")
data = [
{ l: "Apples", x: 0 },
{ l: "Bananas", x: 100 },
{ l: "Grapefruit", x: 200 },
{ l: "Oranges", x: 300 },
{ l: "Pomegranates", x: 400 }
]
{
const r = new Renderer(400, 150, "canvas")
.textSize(textSize)
.textAlign("middle")
.textBaseline("top")
.stroke();
// Use an ascender and descender to measure text height.
const tHeight = r.textMetrics("pf").height;
// Get labella to calculate non-overlapping positions.
const nodes = data.map(
(d) => new labella.Node(d.x, r.textMetrics(d.l).width, d.l)
);
const force = new labella.Force({ maxPos: 400, nodeSpacing: 10 })
.nodes(nodes)
.compute();
// Draw each label at the newly calculated position.
force.nodes().forEach((n) => {
r.text(n.data, n.currentPos, n.layerIndex * tHeight);
});
return r.render();
}
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.
