Old school D3 from simpler times

All examples By author By category About

jwilber

Full window Github gist

arc diagram

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .arc {
      stroke: #543f51;
      fill: none;
    }
    .node {
      fill: olive;
      stroke: #9A8B7A;
      stroke-width: 1px;
    }
    circle.active {
      fill: #FE9922;
    }
    path.active {
      stroke: #FE9922;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 1200)
      .attr("height", 500)

var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));
      
      Promise
        .all([
          PromiseWrapper("nodelist.csv"),
          PromiseWrapper("edgelist.csv")
        ])
        .then(resolve => {
          createArcDiagram(resolve[0], resolve[1]);
        });
    
    function createArcDiagram(nodes, edges) {
      
      var nodeHash = {};
      nodes.forEach((node, x) => {
        nodeHash[node.id] = node;
        node.x = parseInt(x) * 50;
      })
      
      edges.forEach( edge => {
        edge.weight = parseInt(edge.weight);
        edge.source = nodeHash[edge.source];
        edge.target = nodeHash[edge.target];
      })
      
      var arcG = d3.select('svg').append('g')
      	.attr('id', 'arcG')
      	.attr('transform', 'translate(50, 250)');
      
      arcG.selectAll('path')
      	.data(edges)
      	.enter()
      	.append('path')
      	.attr('class', 'arc')
      	.style('stroke-width', d => d.weight * 2)
      	.style('opacity', .25)
      	.attr('d', arc)
      arcG.selectAll('circle')
      	.data(nodes)
      	.enter()
      	.append('circle')
      	.attr('class', 'node')
      	.attr('r', 15)
      	.attr('cx', d => d.x)
      
      function arc(d,i) {
        var draw = d3.line().curve(d3.curveBasis)
        var midX = (d.source.x + d.target.x) / 2;
        console.log(midX)
        var midY = (d.source.x - d.target.x) / 2;
        console.log("midY", midY)
        return draw([[d.source.x, 0], [midX, midY], [d.target.x, 0]])
      }
      
      d3.selectAll('.node').on('mouseover', nodeOver);
      function nodeOver(d) {
        console.log(d)
        d3.selectAll('.node').classed('active', p => p == d)
        d3.selectAll('.arc').classed('active', p => 
                                     d.id == p.source.id || d.id == p.target.id)
      }
      d3.selectAll('.node').on('mouseout', nodeOut);
      function nodeOut() {
        d3.selectAll('.node').classed('active', false)
        d3.selectAll('.arc').classed('active', false)
      }
      
    }

</script>
</body>

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