cnev177 · November 14, 2015 22:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>Module3: The Home Nations</title>
 <style>

 body{
 	
 font-family: 'Open Sans', sans-serif;
 background:white;
 color:#333;
 } 

 /* CSS goes here. */
 .subunit.SCT { fill: #80C3A7; }
 .subunit.WLS { fill: #D2D5D8; }
 .subunit.NIR { fill: #546F75; }
 .subunit.ENG { fill: #A1D087; }
 .subunit.IRL { fill: white; }

 .subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 3,3;
  stroke-linejoin: round;
 }

 .subunit-boundary.IRL {
  stroke: none;
 }

 .place-label{
 	
 	font-size:12px;
 }

 .subunit-label {
  fill: #777;
  fill-opacity: .7;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  text-anchor: middle;
 }

 h1 {
 				font-weight: 300;
 				font-size: 40px;
 				margin: 0;
 			}

 			h2{
 				margin: 0;
 				color:grey;
 				font-weight: 400;
 				font-size: 16px;
 				padding-bottom: 30px
 			}

 			p {
 				font-size: 14px;
 				margin: 0px 0 10px 0;
 			}

 			a {
 				text-decoration: none;
 			}

 			#container{
 				margin:10px 0 0 30px;

 			}

 			span{
 				color:#333;

 			}






 </style>

 <div id="container">

 			<h1>The Home Nations</h1>
 			<h2>A map of the Home Nations of the UK. <span><strong>Source: </strong><a href="http://www.naturalearthdata.com/" target="new">Natural Earth</a></span></h2>
 		
 		</div>
 <body>
 <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
 <script>

 var width = 960,
    height = 800;

    var projection = d3.geo.albers()
    .center([0, 55.4])
    .rotate([2, 2])
    .parallels([50, 60])
    .scale(4000)
    .translate([width / 2, height / 2]);

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

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

 /* JavaScript goes here. */
 d3.json("uk.json", function(error, uk) {
  if (error) return console.error(error);

  var subunits = topojson.feature(uk, uk.objects.subunits);



 	svg.append("path")
      .datum(subunits)
      .attr("d", path);

      svg.selectAll(".subunit")
    .data(topojson.feature(uk, uk.objects.subunits).features)
  .enter().append("path")
    .attr("class", function(d) { return "subunit " + d.id; })
    .attr("d", path);



  svg.append("path")
      .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; }))
      .attr("d", path)
      .attr("class", "subunit-boundary");


      svg.append("path")
      .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; }))
      .attr("d", path)
      .attr("class", "subunit-boundary IRL");

     svg.append("path")
    .datum(topojson.feature(uk, uk.objects.places))
   
    .attr("d", path)
    .attr("class", "place")
     .attr('opacity', 0)
     .transition().delay(400).duration(700).attr('opacity', 1);

    svg.selectAll(".place-label")
    .data(topojson.feature(uk, uk.objects.places).features)
  .enter().append("text")
    .attr("class", "place-label")
    .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
    .attr('opacity', 0)
    .attr("dy", ".35em")
    .transition().delay(600).duration(1000).attr('opacity', 1)
    .text(function(d) { return d.properties.name; });

    svg.selectAll(".place-label")
    .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
    .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; });

    svg.selectAll(".subunit-label")
    .data(topojson.feature(uk, uk.objects.subunits).features)
  .enter().append("text")
    .attr("class", function(d) { return "subunit-label " + d.id; })
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.properties.name; });

  


    
   

  
 });


 </script>

 </body>





diff --git a/uk.json b/uk.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Module3: The Home Nations</title>
	<style>

	body{

	font-family: 'Open Sans', sans-serif;
	background:white;
	color:#333;
	}

	/* CSS goes here. */
	.subunit.SCT { fill: #80C3A7; }
	.subunit.WLS { fill: #D2D5D8; }
	.subunit.NIR { fill: #546F75; }
	.subunit.ENG { fill: #A1D087; }
	.subunit.IRL { fill: white; }

	.subunit-boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 3,3;
	stroke-linejoin: round;
	}

	.subunit-boundary.IRL {
	stroke: none;
	}

	.place-label{

	font-size:12px;
	}

	.subunit-label {
	fill: #777;
	fill-opacity: .7;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 400;
	text-anchor: middle;
	}

	h1 {
	font-weight: 300;
	font-size: 40px;
	margin: 0;
	}

	h2{
	margin: 0;
	color:grey;
	font-weight: 400;
	font-size: 16px;
	padding-bottom: 30px
	}

	p {
	font-size: 14px;
	margin: 0px 0 10px 0;
	}

	a {
	text-decoration: none;
	}

	#container{
	margin:10px 0 0 30px;

	}

	span{
	color:#333;

	}






	</style>

	<div id="container">

	<h1>The Home Nations</h1>
	<h2>A map of the Home Nations of the UK. <span><strong>Source: </strong><a href="http://www.naturalearthdata.com/" target="new">Natural Earth</a></span></h2>

	</div>
	<body>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<script>

	var width = 960,
	height = 800;

	var projection = d3.geo.albers()
	.center([0, 55.4])
	.rotate([2, 2])
	.parallels([50, 60])
	.scale(4000)
	.translate([width / 2, height / 2]);

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

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

	/* JavaScript goes here. */
	d3.json("uk.json", function(error, uk) {
	if (error) return console.error(error);

	var subunits = topojson.feature(uk, uk.objects.subunits);



	svg.append("path")
	.datum(subunits)
	.attr("d", path);

	svg.selectAll(".subunit")
	.data(topojson.feature(uk, uk.objects.subunits).features)
	.enter().append("path")
	.attr("class", function(d) { return "subunit " + d.id; })
	.attr("d", path);



	svg.append("path")
	.datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL"; }))
	.attr("d", path)
	.attr("class", "subunit-boundary");


	svg.append("path")
	.datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) { return a === b && a.id === "IRL"; }))
	.attr("d", path)
	.attr("class", "subunit-boundary IRL");

	svg.append("path")
	.datum(topojson.feature(uk, uk.objects.places))

	.attr("d", path)
	.attr("class", "place")
	.attr('opacity', 0)
	.transition().delay(400).duration(700).attr('opacity', 1);

	svg.selectAll(".place-label")
	.data(topojson.feature(uk, uk.objects.places).features)
	.enter().append("text")
	.attr("class", "place-label")
	.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
	.attr('opacity', 0)
	.attr("dy", ".35em")
	.transition().delay(600).duration(1000).attr('opacity', 1)
	.text(function(d) { return d.properties.name; });

	svg.selectAll(".place-label")
	.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
	.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; });

	svg.selectAll(".subunit-label")
	.data(topojson.feature(uk, uk.objects.subunits).features)
	.enter().append("text")
	.attr("class", function(d) { return "subunit-label " + d.id; })
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.text(function(d) { return d.properties.name; });








	});


	</script>

	</body>