tlfrd/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Experimenting with canvas (for the first time) to create small multiples of the Earth using an orthographic projection.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = 960,
        height = 500;

    var margin = {top: 100, left: 100, right: 100, bottom: 100};

    var globesHorizontal = 8;

    var diameter = (width - margin.left - margin.right) / globesHorizontal,
        radius = diameter / 2,
        velocity = 0.05;

    var globesVertical = Math.floor((height - margin.top - margin.bottom) / diameter);

    var data = d3.range(globesHorizontal * globesVertical);

    var colour = d3.scaleSequential(d3.interpolateRainbow)
    	.domain([0, data.length]);

    var canvas = d3.select("body").append("canvas")
    	.datum(function() { return this.getContext("2d"); })
    	.attr("width", width)
    	.attr("height", height)
    	.node().getContext("2d");

    d3.json("https://unpkg.com/world-atlas@1.1.4/world/110m.json", function(error, world) {
  		if (error) throw error;

      var land = topojson.feature(world, world.objects.land),
      	globe = {type: "Sphere"};

      var graticule = d3.geoGraticule();

      data.forEach(function(x) {
        var projection = d3.geoOrthographic()
        .scale(radius - 2)
        .translate([(diameter * (x % globesHorizontal)) + radius + margin.left,
                    (diameter * Math.floor(x / globesHorizontal)) + radius + margin.top])
        .clipAngle(90)
        .precision(0.1);

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

        var angle = 360 / data.length * x;
        var rotate = [0, 0, 0];
        rotate[0] = angle, projection.rotate(rotate);

        // Clear Canvas
        canvas.clearRect((diameter * (x % globesHorizontal)) + margin.left, (diameter * Math.floor(x / globesHorizontal)) + margin.top, diameter, diameter);

        // Draw Sphere
        canvas.beginPath(), path(globe), canvas.strokeStyle = colour(x), canvas.stroke(), canvas.stroke();

        // Draw graticule lines
        canvas.beginPath(), path(graticule()), canvas.strokeStyle = colour(x), canvas.stroke();

        // Draw land
        canvas.beginPath(), path(land), canvas.fillStyle = colour(x), canvas.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>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var width = 960,
	height = 500;

	var margin = {top: 100, left: 100, right: 100, bottom: 100};

	var globesHorizontal = 8;

	var diameter = (width - margin.left - margin.right) / globesHorizontal,
	radius = diameter / 2,
	velocity = 0.05;

	var globesVertical = Math.floor((height - margin.top - margin.bottom) / diameter);

	var data = d3.range(globesHorizontal * globesVertical);

	var colour = d3.scaleSequential(d3.interpolateRainbow)
	.domain([0, data.length]);

	var canvas = d3.select("body").append("canvas")
	.datum(function() { return this.getContext("2d"); })
	.attr("width", width)
	.attr("height", height)
	.node().getContext("2d");

	d3.json("https://unpkg.com/world-atlas@1.1.4/world/110m.json", function(error, world) {
	if (error) throw error;

	var land = topojson.feature(world, world.objects.land),
	globe = {type: "Sphere"};

	var graticule = d3.geoGraticule();

	data.forEach(function(x) {
	var projection = d3.geoOrthographic()
	.scale(radius - 2)
	.translate([(diameter * (x % globesHorizontal)) + radius + margin.left,
	(diameter * Math.floor(x / globesHorizontal)) + radius + margin.top])
	.clipAngle(90)
	.precision(0.1);

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

	var angle = 360 / data.length * x;
	var rotate = [0, 0, 0];
	rotate[0] = angle, projection.rotate(rotate);

	// Clear Canvas
	canvas.clearRect((diameter * (x % globesHorizontal)) + margin.left, (diameter * Math.floor(x / globesHorizontal)) + margin.top, diameter, diameter);

	// Draw Sphere
	canvas.beginPath(), path(globe), canvas.strokeStyle = colour(x), canvas.stroke(), canvas.stroke();

	// Draw graticule lines
	canvas.beginPath(), path(graticule()), canvas.strokeStyle = colour(x), canvas.stroke();

	// Draw land
	canvas.beginPath(), path(land), canvas.fillStyle = colour(x), canvas.fill();

	});

	});

	</script>
	</body>