Fun with d3 contours and force layouts

A deviation of this. Visualization will end/dry up as the contour density threshold increases past the maximum density of the force nodes - leading to some neat final results.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script>

var canvas = d3.select("canvas");
var width = canvas.attr("width");
var height = canvas.attr("height");

var context = canvas.node().getContext('2d');

var n = 400,
    pi = Math.PI,
    tau = 2 * pi;

radius = 32;
	
	console.log(width);

var nodes = d3.range(2000).map(function() {
  return { x: Math.random() * width, y: Math.random() * height };
});
	
var interpolate = d3.scaleLinear().range(["steelblue","orange","steelblue"]).domain([0,500,1000]);
	
context.fillStyle = '#333333';
context.strokeStyle = '#000000';

var path = d3.geoPath().context(context);

var data = d3.contourDensity()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .size([width, height])
		.thresholds([0.02])
        .bandwidth(10)
      (nodes)
		
		
var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(0.02))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .alphaDecay(0.0001)
	.velocityDecay(0)
    .nodes(nodes)
    .on("tick", ticked);

var i = 0;  // tick number
var j = 0.02; // threshold - increase as simulation goes on.

}

</script>

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

https://d3js.org/d3-contour.v1.min.js