itsallearth/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    h1 {
        position: absolute;
        top: 500px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 18px;
        text-align: center;
        width: 960px;
    }

    .graticule {
        fill: none;
        stroke-width: 10px;
        stroke: purple;
    }

    .circleThing {
        fill: none;
        stroke-width: 0;
    }
</style>
<h1></h1>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
    var width = 960;
    var height = 960;

    var projection = d3.geo.orthographic()
        .translate([width / 2, height / 2])
        .scale(width / 2 - 20)
        .clipAngle(90)
        .precision(0.6);

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

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

    var path = d3.geo.path()
        .projection(projection)
        .context(c);

    var title = d3.select("h1");
    var ppp = d3.select("p");
    var h2 = d3.select("h2");

    queue()
        .defer(d3.json, "world-110m.json")
        .defer(d3.json, "mig.json")
        .await(ready);

    function ready(error, world, routes) {
        if (error) throw error;
        var globe = { type: "Sphere" };
        var land = topojson.feature(world, world.objects.land);
        var borders = topojson.mesh(world, world.objects.countries, function (a, b) { return a !== b; });
        var i = -1;
        var rt = "";
        var rl = routes.length;
        var mp = "";

        (function transition() {
            d3.transition()
                .duration(1250)
                .each("start", function () {
                    title.text(i + ", " + [i = (i + 1) % rl]);
                    title.text(i);
                    title.text(routes[i].bplace);
                })
                .tween("rotate", function () {

                    var x1 = parseFloat(routes[i].Blon);
                    var y1 = parseFloat(routes[i].Blat);
                    var x2 = parseFloat(routes[i].Dlon);
                    var y2 = parseFloat(routes[i].Dlat);

                    var xx = (x1 + x2) / 2;
                    var yy = (y1 + y2) / 2;

                    var p = [xx, yy];

                    var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
                    return function (t) {
                        projection.rotate(r(t));
                        c.clearRect(0, 0, width, height);
                        c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill(); //gray countries
                        c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
                        c.strokeStyle = "#000", c.lineWidth = 3, c.beginPath(), path(globe), c.stroke();

                        c.beginPath(),
                        c.arc(routes[i].Blon, routes[i].Blat, 10, 0 * Math.PI, 2 * Math.PI),
                        c.stroke(),
                        c.fill();

                        c.strokeStyle = "#0000FB",
                        c.fillStyle = "white",
                        c.lineWidth = 4,
                        path({ type: "LineString", coordinates: [[routes[i].Blon, routes[i].Blat], [routes[i].Dlon, routes[i].Dlat]] }),
                        c.fill();

                        ppp.text = c.strokeStyle;
                        c.stroke();
                        c.beginPath();
                    };
                })
              .transition()
              .each("end", transition);
        })();
    }
</script>

## mig.json
[
  {
    "id": 6,
    "bplace": "London to Boston.",
    "Blon": -0.2416809,
    "Blat": 51.5287718,
    "Dlon": -71.197240,
    "Dlat": 42.3135421
  },
  {
    "id": 7,
    "bplace": "Paris to Brownfield, Maine",
    "Blon": 2.2775175,
    "Blat": 48.8588377,
    "Dlon": -70.9783286,
    "Dlat": 43.9456516
  },
  {
    "id": 8,
    "bplace": "Bahia to Brea",
    "Blon": -46.4785939,
    "Blat": -13.3838236,
    "Dlon": -117.9231249,
    "Dlat": 33.926679
  },
  {
    "id": 9,
    "bplace": "Amazonas to South Africa",
    "Blon": -69.4446007,
    "Blat": 3.7740998,
    "Dlon": 20.1812937,
    "Dlat": -28.4055426
  }
]

## world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	h1 {
	position: absolute;
	top: 500px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	text-align: center;
	width: 960px;
	}

	.graticule {
	fill: none;
	stroke-width: 10px;
	stroke: purple;
	}

	.circleThing {
	fill: none;
	stroke-width: 0;
	}
	</style>
	<h1></h1>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>
	var width = 960;
	var height = 960;

	var projection = d3.geo.orthographic()
	.translate([width / 2, height / 2])
	.scale(width / 2 - 20)
	.clipAngle(90)
	.precision(0.6);

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

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

	var path = d3.geo.path()
	.projection(projection)
	.context(c);

	var title = d3.select("h1");
	var ppp = d3.select("p");
	var h2 = d3.select("h2");

	queue()
	.defer(d3.json, "world-110m.json")
	.defer(d3.json, "mig.json")
	.await(ready);

	function ready(error, world, routes) {
	if (error) throw error;
	var globe = { type: "Sphere" };
	var land = topojson.feature(world, world.objects.land);
	var borders = topojson.mesh(world, world.objects.countries, function (a, b) { return a !== b; });
	var i = -1;
	var rt = "";
	var rl = routes.length;
	var mp = "";

	(function transition() {
	d3.transition()
	.duration(1250)
	.each("start", function () {
	title.text(i + ", " + [i = (i + 1) % rl]);
	title.text(i);
	title.text(routes[i].bplace);
	})
	.tween("rotate", function () {

	var x1 = parseFloat(routes[i].Blon);
	var y1 = parseFloat(routes[i].Blat);
	var x2 = parseFloat(routes[i].Dlon);
	var y2 = parseFloat(routes[i].Dlat);

	var xx = (x1 + x2) / 2;
	var yy = (y1 + y2) / 2;

	var p = [xx, yy];

	var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
	return function (t) {
	projection.rotate(r(t));
	c.clearRect(0, 0, width, height);
	c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill(); //gray countries
	c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
	c.strokeStyle = "#000", c.lineWidth = 3, c.beginPath(), path(globe), c.stroke();

	c.beginPath(),
	c.arc(routes[i].Blon, routes[i].Blat, 10, 0 * Math.PI, 2 * Math.PI),
	c.stroke(),
	c.fill();

	c.strokeStyle = "#0000FB",
	c.fillStyle = "white",
	c.lineWidth = 4,
	path({ type: "LineString", coordinates: [[routes[i].Blon, routes[i].Blat], [routes[i].Dlon, routes[i].Dlat]] }),
	c.fill();

	ppp.text = c.strokeStyle;
	c.stroke();
	c.beginPath();
	};
	})
	.transition()
	.each("end", transition);
	})();
	}
	</script>
	[
	{
	"id": 6,
	"bplace": "London to Boston.",
	"Blon": -0.2416809,
	"Blat": 51.5287718,
	"Dlon": -71.197240,
	"Dlat": 42.3135421
	},
	{
	"id": 7,
	"bplace": "Paris to Brownfield, Maine",
	"Blon": 2.2775175,
	"Blat": 48.8588377,
	"Dlon": -70.9783286,
	"Dlat": 43.9456516
	},
	{
	"id": 8,
	"bplace": "Bahia to Brea",
	"Blon": -46.4785939,
	"Blat": -13.3838236,
	"Dlon": -117.9231249,
	"Dlat": 33.926679
	},
	{
	"id": 9,
	"bplace": "Amazonas to South Africa",
	"Blon": -69.4446007,
	"Blat": 3.7740998,
	"Dlon": 20.1812937,
	"Dlat": -28.4055426
	}
	]