Fil/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Simulation of human movement from their places of birth
Built with blockbuilder.org

  
## index.html
<!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; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var canvas = d3.select("body").append("canvas")
      .attr("width", 960)
      .attr("height", 500);

    var c = canvas.node().getContext("2d"),
        r = 1.5;

    var s = d3.scaleLinear()
    .domain([0,1])
    .range([300,400])

    var nodes = d3.range(8000).map(d => ({}));

    d3.forceSimulation(nodes)
    .force('saute', function(alpha){
      nodes.forEach(d => {
        if (Math.random() < 1e-2) {
          var k = d3.randomLogNormal()();
          var alpha = k * 100000;
          k = Math.sqrt(k);
            d[0] = k * Math.cos(alpha);
            d[1] = k * Math.sin(alpha);
          d.c = true;
        }
      });
    })
    .alphaTarget(1e-12)
    .on('tick', draw);


    function draw() {
      c.clearRect(0, 0, 960, 500);
      var th = 0;
      var sums = [];

      nodes.forEach(function(d){
        d[2] = Math.sqrt(d[0]*d[0] + d[1]*d[1]);
        var u = Math.floor(s(d[2]));
        if (sums[u]) d[3] = (sums[u] = sums[u] - 0.01);
        else d[3] = sums[u] = -0.001;
      });

    c.fillStyle = 'black'; // d.c ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.1)';
    c.beginPath();
      nodes.forEach(function(d) {
        if (d.c) {
          d.x = s(d[0]);
          d.y = s(d[1]);
        } else {
          var k = 0.2 * Math.sqrt(th / nodes.length), alpha = th;
            d.x = s(k * Math.cos(alpha));
            d.y = s(k * Math.sin(alpha));
          th++;
        }
    c.moveTo(d.x + r, d.y);
    c.arc(d.x, d.y, r, 0, 2 * Math.PI);
      });
    c.fill();

      c.beginPath();
    c.moveTo(s(0.2), s(0));
    c.arc(s(0), s(0), s(0.2)-s(0), 0, 2 * Math.PI);
    c.stroke();

      c.beginPath();
    c.fillStyle = 'grey'; // d.c ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.1)';

      nodes.forEach(function(d) {
        if (d.c) {
          d.x = s(d[2]);
          d.y = 180+s(d[3]);
    c.moveTo(d.x + r, d.y);
    c.arc(d.x, d.y, r, 0, 2 * Math.PI);
        }
  });
    c.fill();

    }

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var canvas = d3.select("body").append("canvas")
	.attr("width", 960)
	.attr("height", 500);

	var c = canvas.node().getContext("2d"),
	r = 1.5;

	var s = d3.scaleLinear()
	.domain([0,1])
	.range([300,400])

	var nodes = d3.range(8000).map(d => ({}));

	d3.forceSimulation(nodes)
	.force('saute', function(alpha){
	nodes.forEach(d => {
	if (Math.random() < 1e-2) {
	var k = d3.randomLogNormal()();
	var alpha = k * 100000;
	k = Math.sqrt(k);
	d[0] = k * Math.cos(alpha);
	d[1] = k * Math.sin(alpha);
	d.c = true;
	}
	});
	})
	.alphaTarget(1e-12)
	.on('tick', draw);


	function draw() {
	c.clearRect(0, 0, 960, 500);
	var th = 0;
	var sums = [];

	nodes.forEach(function(d){
	d[2] = Math.sqrt(d[0]d[0] + d[1]d[1]);
	var u = Math.floor(s(d[2]));
	if (sums[u]) d[3] = (sums[u] = sums[u] - 0.01);
	else d[3] = sums[u] = -0.001;
	});

	c.fillStyle = 'black'; // d.c ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.1)';
	c.beginPath();
	nodes.forEach(function(d) {
	if (d.c) {
	d.x = s(d[0]);
	d.y = s(d[1]);
	} else {
	var k = 0.2 * Math.sqrt(th / nodes.length), alpha = th;
	d.x = s(k * Math.cos(alpha));
	d.y = s(k * Math.sin(alpha));
	th++;
	}
	c.moveTo(d.x + r, d.y);
	c.arc(d.x, d.y, r, 0, 2 * Math.PI);
	});
	c.fill();

	c.beginPath();
	c.moveTo(s(0.2), s(0));
	c.arc(s(0), s(0), s(0.2)-s(0), 0, 2 * Math.PI);
	c.stroke();

	c.beginPath();
	c.fillStyle = 'grey'; // d.c ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.1)';

	nodes.forEach(function(d) {
	if (d.c) {
	d.x = s(d[2]);
	d.y = 180+s(d[3]);
	c.moveTo(d.x + r, d.y);
	c.arc(d.x, d.y, r, 0, 2 * Math.PI);
	}
	});
	c.fill();

	}

	</script>
	</body>