colingourlay/.block

## .block

      
    Raw
  

              .block
            
          
## README.md

      
    Raw
  

              README.md
            
          
    This map shows the Natural Earth Admin 0 - Countries shapefile at 110m resolution. Converted to TopoJSON. Each country is identified by its ISO 3166-1 numeric code.

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

body {
  background-color: #f9f9f9;
}

.country {
  fill: #D5D5D5;
  filter: url(#inset-shadow);
}
.country--10 {
  display: none;
}

.countryStroke {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 940,
    height = 380;

var color = d3.scale.category10();

var projection = d3.geo.equirectangular()
    .scale(149)
    .translate([width / 2, (height / 2) + 40])
    .precision(.1);

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

var pathExtraStroke = d3.geo.path()
    .projection(projection);

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

var defs = svg.append("defs");

var filter = defs.append('filter')
  .attr('id', 'inset-shadow')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', '100%')
  .attr('height', '100%');

var feComponentTransfer = filter.append('feComponentTransfer')
  .attr('in', 'SourceAlpha');

feComponentTransfer.append('feFuncA')
  .attr('type', 'table')
  .attr('tableValues', '1 0');

filter.append('feGaussianBlur')
  .attr('stdDeviation', 2);

filter.append('feOffset')
  .attr('dx', 0)
  .attr('dy', 0)
  .attr('result', 'offsetblur');

filter.append('feFlood')
  .attr('flood-color', '#666')
  .attr('result', 'color');

filter.append('feComposite')
  .attr('in2', 'offsetblur')
  .attr('operator', 'in');

filter.append('feComposite')
  .attr('in2', 'SourceAlpha')
  .attr('operator', 'in');

var feMerge = filter.append('feMerge');

feMerge.append('feMergeNode')
  .attr('in', 'SourceGraphic');

feMerge.append('feMergeNode');

d3.json('/mbostock/raw/4090846/world-110m.json', function (error, world) {
  if (error) throw error;

  var countries = topojson.feature(world, world.objects.countries).features,
      neighbors = topojson.neighbors(world.objects.countries.geometries);

  svg.selectAll(".country")
      .data(countries)
    .enter().insert("path")
      .attr("class", function(d, i) { return 'country country--' + d.id; })
      .attr("d", path)/*
      .style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); })*/;

  svg.selectAll(".countryStroke")
      .data(countries)
    .enter().insert("path")
      .attr("class", function(d, i) { return 'countryStroke'; })
      .attr("d", path);

});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background-color: #f9f9f9;
	}

	.country {
	fill: #D5D5D5;
	filter: url(#inset-shadow);
	}
	.country--10 {
	display: none;
	}

	.countryStroke {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 1.5;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 940,
	height = 380;

	var color = d3.scale.category10();

	var projection = d3.geo.equirectangular()
	.scale(149)
	.translate([width / 2, (height / 2) + 40])
	.precision(.1);

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

	var pathExtraStroke = d3.geo.path()
	.projection(projection);

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

	var defs = svg.append("defs");

	var filter = defs.append('filter')
	.attr('id', 'inset-shadow')
	.attr('x', 0)
	.attr('y', 0)
	.attr('width', '100%')
	.attr('height', '100%');

	var feComponentTransfer = filter.append('feComponentTransfer')
	.attr('in', 'SourceAlpha');

	feComponentTransfer.append('feFuncA')
	.attr('type', 'table')
	.attr('tableValues', '1 0');

	filter.append('feGaussianBlur')
	.attr('stdDeviation', 2);

	filter.append('feOffset')
	.attr('dx', 0)
	.attr('dy', 0)
	.attr('result', 'offsetblur');

	filter.append('feFlood')
	.attr('flood-color', '#666')
	.attr('result', 'color');

	filter.append('feComposite')
	.attr('in2', 'offsetblur')
	.attr('operator', 'in');

	filter.append('feComposite')
	.attr('in2', 'SourceAlpha')
	.attr('operator', 'in');

	var feMerge = filter.append('feMerge');

	feMerge.append('feMergeNode')
	.attr('in', 'SourceGraphic');

	feMerge.append('feMergeNode');

	d3.json('/mbostock/raw/4090846/world-110m.json', function (error, world) {
	if (error) throw error;

	var countries = topojson.feature(world, world.objects.countries).features,
	neighbors = topojson.neighbors(world.objects.countries.geometries);

	svg.selectAll(".country")
	.data(countries)
	.enter().insert("path")
	.attr("class", function(d, i) { return 'country country--' + d.id; })
	.attr("d", path)/*
	.style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 \| 0); })*/;

	svg.selectAll(".countryStroke")
	.data(countries)
	.enter().insert("path")
	.attr("class", function(d, i) { return 'countryStroke'; })
	.attr("d", path);

	});

	</script>