force-simulation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
    <link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">

<title>National Contiguity</title>

width: 100%;
            height: 100%;
        }
        .d3-tip {
            max-width: 300px;
        }
        .links line {
            stroke: #000;
            stroke-opacity: 0.6;
        }
        .nodes circle {
            stroke: #fff;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
    <svg width="1200px" height="600px"></svg>

const svg = d3.select('svg');
                const nationSimulation = d3.forceSimulation(data.nodes)
                    .force('link', d3.forceLink(data.links).id(d => d.index))
                    .force('charge', d3.forceManyBody())
                    .force('center', d3.forceCenter(width/2, height/2));

const link = svg.append('g')
                    .selectAll('line')
                    .data(data.links)
                    .enter().append('line')
                    .attr('class', 'links')
                    .attr('stroke-width', 2)
                    .attr('stroke', 'black');

const node = svg.append('g')
                    .selectAll('circle')
                    .data(data.nodes)
                    .enter().append('circle')
                    .attr('class', 'nodes')
                    .attr('r', 5)
                    .attr('fill', 'blue');

function tickActions() {
                    node
                        .attr('cx', d => d.x)
                        .attr('cy', d => d.y);

link
                        .attr('x1', d => d.source.x)
                        .attr('y1', d => d.source.y)
                        .attr('x2', d => d.target.x)
                        .attr('y2', d => d.target.y);
                }

nationSimulation.on('tick', tickActions);

console.log(data);
            });
    </script>
</body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js