d3cola = cola.d3adaptor(d3)
.avoidOverlaps(true)
.size([width, height])
graph = d3.json("https://gist.githubusercontent.com/thadk/b2dcddf092caf8296b73958e7c8e4d6f/raw/5e1c56f9c01c066e466e0e0569334a0f4b75537e/chris.json")
svgs = d3.select(visual)
d3cola
.nodes(graph.nodes)
.links(graph.links)
.flowLayout("y", 30)
.symmetricDiffLinkLengths(6)
.start(20,20,20)
// define arrow markers for graph links
svgs.append('svg:defs').append('svg:marker')
.attr('id', 'end-arrow')
.attr('viewBox', '0 -5 10 10')
.attr('refX', 6)
.attr('markerWidth', 3)
.attr('markerHeight', 3)
.attr('orient', 'auto')
.append('svg:path')
.attr('d', 'M0,-5L10,0L0,5')
.attr('fill', '#000')
path = svgs.selectAll(".link")
.data(graph.links)
.enter().append('svg:path')
.attr('class', 'link')
node = svgs.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", nodeRadius)
.call(d3cola.drag)
node.append("title")
.text(function (d) { return d.name; })
d3cola.on("tick", function () {
path.each(function (d) {
if (isIE()) this.parentNode.insertBefore(this, this);
});
// draw directed edges with proper padding from node centers
path.attr('d', function (d) {
var deltaX = d.target.x - d.source.x,
deltaY = d.target.y - d.source.y,
dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY),
normX = deltaX / dist,
normY = deltaY / dist,
sourcePadding = nodeRadius,
targetPadding = nodeRadius + 2,
sourceX = d.source.x + (sourcePadding * normX),
sourceY = d.source.y + (sourcePadding * normY),
targetX = d.target.x - (targetPadding * normX),
targetY = d.target.y - (targetPadding * normY);
return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY;
})
node.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
})
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.
