Force Simulation with Voronoi Diagram

This block uses D3 version 4's d3-force and d3-voronoi to compute the Voronoi diagram for a set of nodes in a force layout as they are dragged around.

For a simple demonstration of the Voronoi diagram, see this block.

For a version of this block without the Voronoi diagram, see this other block.

For more information on the various forces available in D3 v4, see Steve Haroz's d3-force testing ground.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .node circle {
        stroke: #3a403d;
        stroke-width: .5px;
        opacity: .9;
      }
      .voronoi path {
        stroke: #fff;
        stroke-width: 2px;
        fill: #333;
      }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
      var width = window.innerWidth, height = window.innerHeight, sizeDivisor = 100, nodePadding = 2.5;

var svg = d3.select("body")
          .append("svg")
          .attr("width", width)
          .attr("height", height);

var color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f", "#e5c494", "#b3b3b3"]);

var simulation = d3.forceSimulation()
          .force("forceX", d3.forceX().strength(.1).x(width * .5))
          .force("forceY", d3.forceY().strength(.1).y(height * .5))
          .force("center", d3.forceCenter().x(width * .5).y(height * .5));

var voronoi = d3.voronoi()
  				.extent([[0, 0], [width, height]])
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; });

var voronoiGroup = svg.append("g")
  				.attr("class", "voronoi");

d3.csv("data.csv", types, function(error,graph){
        if (error) throw error;

// sort the nodes so that the bigger ones are at the back
        graph = graph.sort(function(a,b){ return b.size - a.size; });

//update the simulation based on the data
        simulation
            .nodes(graph)
            .force("charge", d3.forceManyBody().strength(-15))
            .force("collide", d3.forceCollide().strength(.5).radius(function(d){ return d.radius + nodePadding; }).iterations(1))
            .on("tick", function(d){

node
                  .attr("cx", function(d){ return d.x; })
                  .attr("cy", function(d){ return d.y; });

voronoi
                  .x(function(d) { return d.x; })
                  .y(function(d) { return d.y; });

voronoiGroup.selectAll("path")
                  .data(voronoi(graph).polygons())
                .enter().append("path");

voronoiGroup.selectAll("path")
                  .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });

});

});

function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(.03).restart();
        d.fx = d.x;
        d.fy = d.y;
      }

function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
      }

function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(.03);
        d.fx = null;
        d.fy = null;
      }

function types(d){
        d.gdp = +d.gdp;
        d.size = +d.gdp / sizeDivisor;
        d.size < 3 ? d.radius = 3 : d.radius = d.size;
        return d;
      }
    </script>
  </body>
</html>

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