Andrew-Reid/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## index.html
<!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.

function ticked() {
   i++;
  if (i>800) {
	j *= 1.08
  }

  data = d3.contourDensity()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .size([width, height])
		.thresholds([j,j*2,j*3,j*4,j*5,j*6,j*7])
        .bandwidth(10)
      (nodes)

		var c = interpolate(++i%1000);

	context.fillStyle = c;
	context.strokeStyle = 'black';

    context.beginPath();
    path(data[0]);
    context.fill();
    context.stroke()

}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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.

	function ticked() {
	i++;
	if (i>800) {
	j *= 1.08
	}

	data = d3.contourDensity()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.size([width, height])
	.thresholds([j,j2,j3,j4,j5,j6,j7])
	.bandwidth(10)
	(nodes)

	var c = interpolate(++i%1000);

	context.fillStyle = c;
	context.strokeStyle = 'black';

	context.beginPath();
	path(data[0]);
	context.fill();
	context.stroke()

	}

	</script>