Old school D3 from simpler times

All examples By author By category About

biovisualize

Full window Github gist

DAG arc diagram

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
    <script type="text/javascript">

var w = 900,
            h = 500;
        var matrixSize = 8;

function generateDagAdjacencyList(_size){
            // Random lower diagonal matrix
            var dagMatrix = d3.range(_size).map(function(d, i){
                return d3.range(_size).map(function(d2, i2){return (i-i2 > 0) ? +(Math.random() > 0.5): 0;});
            });
            // adjacencyList = {..., "7":[0,2,5],"8":[0,3,4,7],"9":[2,4,6]}
            var adjacencyList = {};
            dagMatrix.forEach(function(d, i){
                return d.forEach(function(d2, i2){
                    if(!adjacencyList[i]) adjacencyList[i] = [];
                    if(!!d2) adjacencyList[i].push(i2);
                });
            });
            // dagObjectList = [{"node":8,"nodeName":"node8","link":[0,3,4,7],"idx":8}, ...]
            var dagObjectList = d3.entries(adjacencyList).map(function(d, i){
                return {node: parseInt(d.key), nodeName: 'node'+ d.key, link: d.value, idx: i};
            });
            var sortedList = dagObjectList.sort(function(a, b){return b.link.length - a.link.length;});
            return sortedList;
        }

var randomDag = generateDagAdjacencyList(matrixSize);

var svg = d3.select('body')
            .append('svg')
            .attr({width: w, height: h, xmlns: 'https://www.w3.org/2000/svg'});
        var rootGroup = svg.append('g')
                .classed('root', true)
                .attr({transform: 'translate(0,'+h/2+')'});

var markerW = 8;
        var marker = svg.append('defs')
            .append('marker')
            .attr({
                id: 'Triangle',
                refX: markerW*2,
                refY: markerW,
                markerUnits: 'strokeWidth',
                markerWidth: markerW + markerW,
                markerHeight: markerW * 2 + markerW,
                orient: 'auto'
            })
            .append('path')
            .attr({d: 'M 0 0 '+markerW*2+' '+markerW+' 0 '+markerW*2+' '+markerW/2+' '+markerW});

var labelW = 60;
        var labelH = 20;
        var gap = 20;

var linkGenerator = d3.svg.line()
            .x(function(d, i){return d[0];})
            .y(function(d, i){return d[1];})
            .interpolate('cardinal')
            .tension(0);

var linkPath = function(d, i, pI){
                var neighbourIdx = randomDag.map(function(d, i){return d.node;}).indexOf(d);
                var anchor1 = pI*(labelW+gap)+labelW/2;
                var anchor2 = neighbourIdx*(labelW+gap)+labelW/2;
                var isBackLink = (anchor2-anchor1) < 0;
                var deltaAnchors = (anchor2-anchor1)/2;
                var path = linkGenerator([[anchor1, (isBackLink) ? 0 : labelH],
                    [anchor1+deltaAnchors, deltaAnchors*0.8],
                    [anchor2, (isBackLink) ? 0 : labelH]]);
                return path;
            };
        var links = rootGroup.selectAll('g.links')
            .data(randomDag, function(d, i){return d.idx;})
            .enter().append('g')
            .classed('links', true);
        links.selectAll('path.arrow')
            .data(function(d, i){return d.link;})
            .enter().append('path')
            .classed('arrow', true)
            .attr({
                d: linkPath,
                'marker-end': 'url(#Triangle)'
            })
            .style({fill: 'none', stroke: 'black', opacity: 1, 'stroke-width': 1});

links.selectAll('path.broad')
                .data(function(d, i){return d.link;})
                .enter().append('path')
                .classed('broad', true)
                .attr({d: linkPath})
                .style({fill: 'none', stroke: 'orangered', opacity: 0.3, 'stroke-width': 20, 'stroke-linecap': 'round'});

var labels = rootGroup.selectAll('g.labels')
                .data(randomDag, function(d, i){return d.node;})
                .enter().append('g')
                .classed('labels', true)
                .attr({transform: function(d, i){return 'translate('+(i*(labelW+gap))+',0)';}});
        labels.append('rect')
                .classed('label-frame', true)
                .attr({
                    x: 0,
                    y: 0,
                    width: labelW,
                    height: labelH,
                })
                .style({fill: 'skyblue', stroke: 'grey'});
        labels.append('text')
                .classed('label-text', true)
                .attr({
                    x: 4,
                    y: 0,
                    dy: '1em'
                })
                .style({})
                .text(function(d, i){return d.nodeName;});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js