D3 Examples - contiguous states graph

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .node {
      stroke: #000;
      stroke-width: 1.5px;
    }
​
    .link {
      stroke: #999;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  <svg width="600" height="600"></svg>
  <script>
    var svg = d3.select('svg'),
            width = +svg.attr('width'),
                height = +svg.attr('height');
    
    var simulation = d3.forceSimulation()
      .force('charge', d3.forceManyBody().strength(-10))
        .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(40))
      .force('center', d3.forceCenter(width / 2, height / 2))
      .on('tick', ticked);
    
    var link = svg.selectAll(".link"),
            node = svg.selectAll(".node");
​
    d3.csv('contiguous-states.csv', function(err, data) {
      if (err) throw err;
      
      var nodes = data.reduce((acc, cur) => {
                if (acc.indexOf(cur.state1) === -1) {
          acc.push(cur.state1);
        }
        return acc;
      }, [])
        .map(state => ({ id: state }));
            
      var links = data.map(function(d) {
        return {
          source: d.state1,
          target: d.state2
        }
      });
​
      
      simulation.nodes(nodes);
      simulation.force("link").links(links);
​
      link = link
        .data(links)
        .enter().append("line")
          .attr("class", "link");
​
      node = node
        .data(nodes)
        .enter().append('g')
            .attr('class', 'node')
        .append("circle")
          .attr("r", 6)
          .style("fill", 'blue');
            
​
    });
    
    function ticked() {
      link.attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });
​
      node.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    }
​
  </script>
</body>
​
    