slattery/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Forked fromthis gist that used this gist, the block of which now redirects to an Observable notebook.
The original README:

See discussion on Hacker News. Built with D3 and TopoJSON.


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

h1 {
  position: absolute;
  top: 134px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255,255,255,1), 1px 1px 2px rgba(255,255,255,.4), -0.5px -0.5px 1px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,.4);
  width: 240px;
}

</style>
<h1></h1>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 240,
    height = 240;

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");

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

function ready(error, world, names) {
  if (error) throw error;

  var globe = {type: "Sphere"},
      land = topojson.feature(world, world.objects.land),
      countries = topojson.feature(world, world.objects.countries).features,
      borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }),
      i = -1,
      n = countries.length;

  countries = countries.filter(function(d) {
    return names.some(function(n) {
      if (d.id == n.id) return d.name = n.name;
    });
  }).sort(function(a, b) {
    return a.name.localeCompare(b.name);
  });

  (function transition() {
    d3.transition()
        .duration(1250)
        .each("start", function() {
          title.text(countries[i = (i + 1) % n].name);
        })
        .tween("rotate", function() {
          var p = d3.geo.centroid(countries[i]),
              r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
          return function(t) {
            projection.rotate(r(t));
            c.clearRect(0, 0, width, height);
            c.fillStyle = "#ddd", c.beginPath(), path(land), c.fill();
            c.fillStyle = "#196ea4", c.beginPath(), path(countries[i]), c.fill();
            c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
            c.strokeStyle = "#ccc", c.lineWidth = 1, c.beginPath(), path(globe), c.stroke();
          };
        })
      .transition()
        .each("end", transition);
  })();
}

d3.select(self.frameElement).style("height", height + "px");

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## world-country-names.tsv

          
            id
            name

            
              12
              Algeria

            
              36
              Australia

            
              50
              Bangladesh

            
              76
              Brazil

            
              84
              Belize

            
              104
              Myanmar

            
              108
              Burundi

            
              112
              Belarus

            
              116
              Cambodia

            
              120
              Cameroon

            
              140
              Central African Republic

            
              170
              Colombia

            
              180
              Congo (DRC)

            
              188
              Costa Rica

            
              214
              Dominican Republic

            
              218
              Ecuador

            
              222
              El Salvador

            
              231
              Ethiopia

            
              232
              Eritrea

            
              266
              Gabon

            
              288
              Ghana

            
              320
              Guatemala

            
              324
              Guinea

            
              328
              Guyana

            
              332
              Haiti

            
              340
              Honduras

            
              356
              India

            
              360
              Indonesia

            
              388
              Jamaica

            
              418
              Lao PDR

            
              450
              Madagascar

            
              454
              Malawi

            
              458
              Malaysia

            
              484
              Mexico

            
              508
              Mozambique

            
              524
              Nepal

            
              558
              Nicaragua

            
              562
              Niger

            
              566
              Nigeria

            
              591
              Panama

            
              598
              Papua New Guinea

            
              604
              Peru

            
              608
              Philippines

            
              630
              Puerto Rico

            
              646
              Rwanda

            
              686
              Senegal

            
              702
              Singapore

            
              706
              Somalia

            
              710
              South Africa

            
              728
              South Sudan

            
              764
              Thailand

            
              768
              Togo

            
              834
              Tanzania UR

            
              840
              United States

            
              862
              Venezuela BR

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

	h1 {
	position: absolute;
	top: 134px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,1), 1px 1px 2px rgba(255,255,255,.4), -0.5px -0.5px 1px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,.4);
	width: 240px;
	}

	</style>
	<h1></h1>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 240,
	height = 240;

	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");

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

	function ready(error, world, names) {
	if (error) throw error;

	var globe = {type: "Sphere"},
	land = topojson.feature(world, world.objects.land),
	countries = topojson.feature(world, world.objects.countries).features,
	borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }),
	i = -1,
	n = countries.length;

	countries = countries.filter(function(d) {
	return names.some(function(n) {
	if (d.id == n.id) return d.name = n.name;
	});
	}).sort(function(a, b) {
	return a.name.localeCompare(b.name);
	});

	(function transition() {
	d3.transition()
	.duration(1250)
	.each("start", function() {
	title.text(countries[i = (i + 1) % n].name);
	})
	.tween("rotate", function() {
	var p = d3.geo.centroid(countries[i]),
	r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
	return function(t) {
	projection.rotate(r(t));
	c.clearRect(0, 0, width, height);
	c.fillStyle = "#ddd", c.beginPath(), path(land), c.fill();
	c.fillStyle = "#196ea4", c.beginPath(), path(countries[i]), c.fill();
	c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
	c.strokeStyle = "#ccc", c.lineWidth = 1, c.beginPath(), path(globe), c.stroke();
	};
	})
	.transition()
	.each("end", transition);
	})();
	}

	d3.select(self.frameElement).style("height", height + "px");

	</script>
	id	name
	12	Algeria
	36	Australia
	50	Bangladesh
	76	Brazil
	84	Belize
	104	Myanmar
	108	Burundi
	112	Belarus
	116	Cambodia
	120	Cameroon
	140	Central African Republic
	170	Colombia
	180	Congo (DRC)
	188	Costa Rica
	214	Dominican Republic
	218	Ecuador
	222	El Salvador
	231	Ethiopia
	232	Eritrea
	266	Gabon
	288	Ghana
	320	Guatemala
	324	Guinea
	328	Guyana
	332	Haiti
	340	Honduras
	356	India
	360	Indonesia
	388	Jamaica
	418	Lao PDR
	450	Madagascar
	454	Malawi
	458	Malaysia
	484	Mexico
	508	Mozambique
	524	Nepal
	558	Nicaragua
	562	Niger
	566	Nigeria
	591	Panama
	598	Papua New Guinea
	604	Peru
	608	Philippines
	630	Puerto Rico
	646	Rwanda
	686	Senegal
	702	Singapore
	706	Somalia
	710	South Africa
	728	South Sudan
	764	Thailand
	768	Togo
	834	Tanzania UR
	840	United States
	862	Venezuela BR
	894	Zambia