md`# Dagre visualization for text compression`
{
const graph = new graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(() => ({}));
graph.setNode(0, {label: "The", class: "type-TOP"});
graph.setNode(1, {label: "U.S."});
graph.setNode(2, {label: "government"});
graph.setNode(3, {label: "Treasury Department"});
graph.setNode(4, {label: "at the behest of President"});
graph.setNode(5, {label: "Trump"});
graph.setNode(6, {label: "administration"});
graph.setNode(7, {label: "has"});
graph.setNode(8, {label: "labeled"});
graph.setNode(9, {label: "China"});
graph.setNode(10, {label: "determined that"});
graph.setNode(11, {label: "officially designated"});
graph.setNode(12, {label: "as"});
graph.setNode(13, {label: "is"});
graph.setNode(14, {label: "a currency manipulator"});
graph.nodes().forEach(v => {
const node = graph.node(v);
node.rx = node.ry = 5;
});
graph.setEdge(0, 1, { label: "2" });
graph.setEdge(0, 3);
graph.setEdge(1, 2);
graph.setEdge(1, 3);
graph.setEdge(0, 5);
graph.setEdge(5, 6);
graph.setEdge(3, 4);
graph.setEdge(4, 5);
graph.setEdge(2, 7);
graph.setEdge(7, 10);
graph.setEdge(10,9);
graph.setEdge(3, 8);
graph.setEdge(8, 9);
graph.setEdge(6, 8);
graph.setEdge(5, 7);
graph.setEdge(7, 11);
graph.setEdge(11,9);
graph.setEdge(9, 12);
graph.setEdge(9, 13);
graph.setEdge(9, 14);
graph.setEdge(12, 14);
graph.setEdge(13, 14);
// example of changing color and style of edge
// graph.setEdge(1, 3, {
// style: "fill: none; stroke: #f66; stroke-width: 3px",
// arrowheadStyle: "fill: #f66; stroke: none"
// });
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();
}
d3 = window.d3 = await require("d3@3")
lodash = window.lodash = await require("lodash@4/lodash.min.js")
graphlib = lodash, window.graphlib = await require("graphlib@2/dist/graphlib.core.min.js")
dagre = graphlib, lodash, window.dagre = await require("dagre@0.8/dist/dagre.core.min.js")
dagred3 = lodash, graphlib, d3, dagre, await require("dagre-d3@0.6/dist/dagre-d3.core.min.js")
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.
