Andrew-Reid/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <style>
	svg {
	    background: #9ecae1;
	}

	.mesh {
	    fill:none;
	    stroke: white;
	    stroke-width: 0.5px;
        }

	.land {
	    fill: #41ab5d;
	}


    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
</head>
<body>


<script type="text/javascript">

    var width = 400;
    var height = 400;

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

    var projection = d3.geoMercator()
                         .center([-1.6,52.6])
                         .scale(2000)
                         .translate([width/2,height/2]);
    var path = d3.geoPath().projection(projection);

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

     d3.json("map.json", function(error, england) {

	g.insert("path", ".land")
	    .datum(topojson.feature(england, england.objects.Clinical_Commissioning_Groups_April_2016_Super_Generalised_Clipped_Boundaries_in_England))
	    .attr("class", "land")
	    .attr("d", path);

	g.append("path")
           .datum(topojson.mesh(england, england.objects.Clinical_Commissioning_Groups_April_2016_Super_Generalised_Clipped_Boundaries_in_England, function(a, b) { return a !== b; }))
           .attr("class", "mesh")
           .attr("d", path);
});


</script>
</body>

## map.json

      
      Raw
    
  
              map.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.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<style>
	svg {
	background: #9ecae1;
	}

	.mesh {
	fill:none;
	stroke: white;
	stroke-width: 0.5px;
	}

	.land {
	fill: #41ab5d;
	}




	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	</head>
	<body>


	<script type="text/javascript">

	var width = 400;
	var height = 400;

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

	var projection = d3.geoMercator()
	.center([-1.6,52.6])
	.scale(2000)
	.translate([width/2,height/2]);
	var path = d3.geoPath().projection(projection);

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

	d3.json("map.json", function(error, england) {

	g.insert("path", ".land")
	.datum(topojson.feature(england, england.objects.Clinical_Commissioning_Groups_April_2016_Super_Generalised_Clipped_Boundaries_in_England))
	.attr("class", "land")
	.attr("d", path);

	g.append("path")
	.datum(topojson.mesh(england, england.objects.Clinical_Commissioning_Groups_April_2016_Super_Generalised_Clipped_Boundaries_in_England, function(a, b) { return a !== b; }))
	.attr("class", "mesh")
	.attr("d", path);
	});


	</script>
	</body>