Using Observable for software engineering, programming language and user interface research.
graph = ({
id: "root",
layoutOptions: { 'elk.algorithm': 'layered' },
children: [
{ id: "n1", width: 30, height: 30, label:"Box A" },
{ id: "n2", width: 30, height: 30, label:"Hello World B" },
{ id: "n3", width: 30, height: 30, label:"Hello World C" }
],
edges: [
{ id: "e1", sources: [ "n1" ], targets: [ "n2" ] },
{ id: "e2", sources: [ "n1" ], targets: [ "n3" ] }
]
})
render(graph)
getTextWidth = text => style["font.char.width"] * len(text)
getTextSize = text => {
const lines = text ? text.split("\n") : [];
return [max(map(lines, getTextWidth)), style["font.line.height"]];
}
md`## Graph rendering`
render = (graph) => {
each(graph.children, prepareNode);
return Elk.layout(graph).then(_ => {
const layers = {};
const addToLayer = (v,k)=> {layers[k] = append(layers[k]||[], v)};
each(graph.children, _ => each(renderNode(_), addToLayer));
each(graph.edges, _ => each(renderEdge(_), addToLayer));
const svg_layers = reduce(layers, (r,v,k)=>{r.push(map(v, _ => S.g({"class":k}, v)))}, []);
return S.svg({width:_.width,height:_.height}, svg_layers);
});
}
prepareNode = (node) => {
if (node.label) {
const [w,h] = getTextSize(node.label);
node.width = w + (style["node.padding.left"]||0) + (style["node.padding.right"]||0);
node.height = h + (style["node.padding.top"]||0) + (style["node.padding.bottom"]||0);
}
return node;
}
renderEdge = edge => {
// Support: bendPoint
const path = reduce(edge.sections, (r,v,i)=>{
if (r.length === 0) {r.push("M");}
r.push(v.startPoint.x);
r.push(v.startPoint.y);
r.push("L");
r.push(v.endPoint.x);
r.push(v.endPoint.y);
return r;
}, []).join(" ");
return {
edges: S.path({"class":"edge", d:path, fill:"none", stroke:"black", "stroke-width":"1px"})
}
}
renderNode = node => {
const {x,y,width,height,label} = node;
const dx = style["node.padding.left"];
const dy = style["node.padding.top"] + style["font.char.height"];
return {
shapes : S.rect({"class":"shape", width, height, x, y}),
labels : S.text({"class":"label",x,y,dx,dy}, label),
};
}
stylesheet({
".shape":{
"fill": "#0082DC",
},
".label":{
"fill": "#FFFFFF",
},
})
import {svg as S, map, maplist, reduce, each, max, len, stylesheet, append, values} from "@sebastien/boilerplate"
ELK = require('elkjs/lib/elk.bundled.js')
Elk = new ELK()
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.
