skater force-directed network diagram

forked from jwilber's block: force-directed network diagram

<!doctype html>
<html> 
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
    <style>
    .node {
      fill: #4F442B;
    }
    .link {
      stroke: #93C464;
    }
    </style>
  </head>
  <body>
    <div id="viz">
      <svg style="width:1000px;height:700px;" ></svg>
    </div>
    <script>
      const roleScale = d3.scaleOrdinal()
        .domain(["contractor", "employee", "manager"])
        .range(["#75739F", "#41A368", "#FE9922"]);
      
      const PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));
      
      Promise
        .all([
          PromiseWrapper("nodes3.csv"),
          PromiseWrapper("edges3.csv")
        ])
        .then(resolve => {
        console.log('hey')
        console.log(resolve[0])
          createForceLayout(resolve[0], resolve[1]);
        });
      
      function createForceLayout(nodes,edges) {
        let nodeHash = {};
        
        nodes.forEach(node => {
          nodeHash[node.id] = node;
        });        
        
        edges.forEach(edge => {
          edge.weight = parseInt(edge.weight);
          edge.source = nodeHash[edge.source];
          edge.target = nodeHash[edge.target];
        });
        console.log(nodeHash)
        console.log('edges', edges) 
        
        let linkForce = d3.forceLink();
        
        let simulation = d3.forceSimulation()
          .force("charge", d3.forceManyBody().strength(-2.5))
          .force("center", d3.forceCenter().x(500).y(350))
          .force("link", linkForce)
          .nodes(nodes)
          .on("tick", forceTick);
        
        simulation.force("link").links(edges);
        
        d3.select("svg").selectAll("line.link")
          .data(edges, d => `${d.source.id}-${d.target.id}`)
          .enter()
          .append("line")
            .attr("class", "link")
            .style("opacity", .3)
            .style("stroke-width", d => d.weight/2);
        
        let nodeEnter = d3.select("svg").selectAll("g.node")
          .data(nodes, d => d.id)
          .enter()
          .append("g")
            .attr("class", "node");
        nodeEnter.append("circle")
          .attr("r", 2)
          .style("fill", d => roleScale(d.role));
        nodeEnter.append("text")
          .style("text-anchor", "middle")
        	.style("font-size", 9)
          .attr("y", 15)
          .text(d => d.id);
        
        function forceTick() {
          d3.selectAll("line.link")
            .attr("x1", d => d.source.x)
            .attr("x2", d => d.target.x)
            .attr("y1", d => d.source.y)
            .attr("y2", d => d.target.y);
          d3.selectAll("g.node")
            .attr("transform", d => `translate(${d.x},${d.y})`);
        }
        
//         let marker = d3.select('svg').append('defs')
//         	.append('marker')
//         	.attr('id', 'tri')
//         	.attr('refX', 12)
//         	.attr('refY', 6)
//         	.attr('markerUnits', 'userSpaceOnUse')
//         	.attr('markerWidth', 12)
//           .attr('markerHeight', 18)
//         	.attr('orient', 'auto')
//         	.append('path')
//         	.attr('d', 'M 0 0 12 6 0 12 3 6');
//         d3.selectAll('line').attr('marker-end', "url(#tri)");
      }
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js