Software developer and power user
d3 = require("d3-selection@2", "d3-shape@2")
createContainer = (width, height) =>
d3.create("svg")
.attr("width", width)
.attr("height", height);
appendPoint = (container, point) =>
container.append("circle")
.attr("class", "point")
.attr("cx", point.x)
.attr("cy", point.y)
.attr("transform", point.transform ?? "none");
appendLabel = (container, point, label) =>
container.append("text")
.attr("class", "label")
.attr("x", point.x)
.attr("y", point.y)
.attr("dx", label.dx ?? 0)
.attr("dy", label.dy ?? 0)
.attr("text-anchor", label.textAnchor ?? "start")
.attr("transform", label.transform ?? "none")
.text(label.text);
appendNode = (container, node) => {
appendPoint(container, node.point);
appendLabel(container, node.point, node.label);
};
appendLink = (container, link, sourcePoint, targetPoint) =>
container.append("path")
.attr("class", "link")
.attr("d", link({
source: [sourcePoint.x, sourcePoint.y],
target: [targetPoint.x, targetPoint.y]
}));
toRadian = (degree) => degree * Math.PI / 180
html`<style>
.link,
.guideline {
fill: none;
stroke: #555;
stroke-width: 1.5;
}
.link {
stroke-opacity: 0.4;
}
.guideline {
stroke-dasharray: 2px, 2px;
stroke-opacity: 0.3;
}
.point {
fill: #555;
r: 2.5;
}
text {
font-family: sans-serif;
font-size: 10px;
}
</style>`
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.
