{
const index = new Map(nodes.map(d => [d.id, d]));
const links = data.links.map(d => Object.assign(Object.create(d), {
source: index.get(d.source),
target: index.get(d.target)
}));
const svg = d3.select(DOM.svg(width, height));
const layout = cola.d3adaptor(d3)
.size([width, height])
.nodes(nodes)
.links(links)
// here's where we tell WebCoLa about the constraint (created in cells below...).
.constraints([alignment])
.jaccardLinkLengths(40, 0.7)
.start(30);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.enter().append("line")
.attr("stroke-width", d => Math.sqrt(d.value));
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", d => d.group === faucheleventsGroup ? 7 : 5)
.attr("fill", d => d.group === faucheleventsGroup ? "black" : color(d.group))
.call(layout.drag);
node.append("title")
.text(d => d.id);
layout.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
invalidation.then(() => layout.stop());
return svg.node();
}
faucheleventsGroup = (nodes.find(v=>v.id == "Fauchelevent")).group;
theGroupMembers = nodes.reduce((a,v,i) => v.group === faucheleventsGroup ? a.concat([i]) : a,[]);
alignment = ({
"type": "alignment",
"axis": "x",
"offsets": theGroupMembers.map(m=>({node:m, offset:0}))
});
color = d3.scaleOrdinal(d3.schemeCategory10)
height = 500
data = d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json")
nodes = data.nodes.map(d => Object.create(d));
cola = require("webcola@3/WebCola/cola.min.js")
d3 = require("d3@5")
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.
