Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Aug 30, 2018
11 forks
Importers
20 stars
{
const graph = new graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(() => ({}));
graph.setNode(0, {label: "TOP", class: "type-TOP"});
graph.setNode(1, {label: "S", class: "type-S"});
graph.setNode(2, {label: "NP", class: "type-NP"});
graph.setNode(3, {label: "DT", class: "type-DT"});
graph.setNode(4, {label: "This", class: "type-TK"});
graph.setNode(5, {label: "VP", class: "type-VP"});
graph.setNode(6, {label: "VBZ", class: "type-VBZ"});
graph.setNode(7, {label: "is", class: "type-TK"});
graph.setNode(8, {label: "NP", class: "type-NP"});
graph.setNode(9, {label: "DT", class: "type-DT"});
graph.setNode(10, {label: "an", class: "type-TK"});
graph.setNode(11, {label: "NN", class: "type-NN"});
graph.setNode(12, {label: "example", class: "type-TK"});
graph.setNode(13, {label: ".", class: "type-."});
graph.setNode(14, {label: "sentence", class: "type-TK"});
graph.nodes().forEach(v => {
const node = graph.node(v);
node.rx = node.ry = 5;
});
graph.setEdge(3, 4);
graph.setEdge(2, 3);
graph.setEdge(1, 2);
graph.setEdge(6, 7);
graph.setEdge(5, 6);
graph.setEdge(9, 10);
graph.setEdge(8, 9);
graph.setEdge(11,12);
graph.setEdge(8, 11);
graph.setEdge(5, 8);
graph.setEdge(1, 5);
graph.setEdge(13,14);
graph.setEdge(1, 13);
graph.setEdge(0, 1);
const svg = d3.select(html`<svg width=${width} height=600>`);
yield svg.node();
svg.append("g")
.call(new dagred3.render(), graph)
.attr("transform", `translate(${(width - graph.graph().width) / 2},20)`);
svg.attr("height", graph.graph().height + 40);
yield svg.node();
}
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.
