duhaime/british-isles.geojson

## british-isles.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              british-isles.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
 <!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <style>
    svg {
      background: #e7efef;
    }
    path {
      stroke: #4a4a4a;
      stroke-width: 0.01em;
      fill: #1d920c;
    }
    path:hover {
      fill: #166b38;
    }
    </style>
  </head>
  <body>
  <script src='//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'></script>
  <script>

    var projection = d3
      .geoMercator()
      .scale(1400)
      .center([0.0, 55.6]);

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

    var map = d3.select('body')
      .append('svg')
      .attr('width', 700)
      .attr('height', 500);

    d3.json('british-isles.geojson', function(data) {
      window.geojson = data;
      map.selectAll('path')
        .data(data.features)
        .enter()
        .append('path')
        .attr('d', path)
        .attr('fill', 'green')
        .attr('fill-opacity', 0.5)
        .attr('stroke', '#222');
    });

  </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='UTF-8'>
	<style>
	svg {
	background: #e7efef;
	}
	path {
	stroke: #4a4a4a;
	stroke-width: 0.01em;
	fill: #1d920c;
	}
	path:hover {
	fill: #166b38;
	}
	</style>
	</head>
	<body>
	<script src='//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'></script>
	<script>

	var projection = d3
	.geoMercator()
	.scale(1400)
	.center([0.0, 55.6]);

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

	var map = d3.select('body')
	.append('svg')
	.attr('width', 700)
	.attr('height', 500);

	d3.json('british-isles.geojson', function(data) {
	window.geojson = data;
	map.selectAll('path')
	.data(data.features)
	.enter()
	.append('path')
	.attr('d', path)
	.attr('fill', 'green')
	.attr('fill-opacity', 0.5)
	.attr('stroke', '#222');
	});

	</script>
	</body>
	</html>