leenoah1/index.html

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

  .subunit.SCT { fill: #ddc; }
.subunit.WLS { fill: #cdd; }
.subunit.NIR { fill: #cdc; }
.subunit.ENG { fill: #dcd; }
.subunit.IRL { display: none; }


/* CSS goes here. */

  //.subunit.ENG {
     fill: red;
  }

</style>
<body>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<script>

/* JavaScript goes here. */

var width = 960,
    height = 1160;

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

//var projection = d3.geoMercator();

var projection = d3.geoAlbers()
    .center([0, 55.4])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(10000)
    .translate([width / 4, height / 8]);

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


//console.log( projection.translate([350,400])  )


var url = "https://bost.ocks.org/mike/map/uk.json";


d3.json(url, function(error, uk) {
  if (error) return console.error(error);


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

    svg.selectAll("path")
      .data(subunits)
    .enter().append('path')
      .each(function(d, i) { console.log(i, d.id ) })
      .attr("class", function(d) { return ' subunit ' + d.id; })
      .attr("d", function(d) { return path(d) });

  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("dy", ".35em")
    .text(function(d) { return d.properties.name; });

  svg.append('text')
    .attr('y', 100)
    .style('font-size', '5em')
    .text('Hello')

});

</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<meta charset="utf-8">
<style>

  .subunit.SCT { fill: #ddc; }
.subunit.WLS { fill: #cdd; }
.subunit.NIR { fill: #cdc; }
.subunit.ENG { fill: #dcd; }
.subunit.IRL { display: none; }


/* CSS goes here. */

  //.subunit.ENG {
     fill: red;
  }

</style>
<body>
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"><\/script>
<script src="//d3js.org/topojson.v2.min.js"><\/script>
<script>

/* JavaScript goes here. */

var width = 960,
    height = 1160;

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

//var projection = d3.geoMercator();

var projection = d3.geoAlbers()
    .center([0, 55.4])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(10000)
    .translate([width / 4, height / 8]);

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


//console.log( projection.translate([350,400])  )


var url = "https://bost.ocks.org/mike/map/uk.json";


d3.json(url, function(error, uk) {
  if (error) return console.error(error);


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

    svg.selectAll("path")
      .data(subunits)
    .enter().append('path')
      .each(function(d, i) { console.log(i, d.id ) })
      .attr("class", function(d) { return ' subunit ' + d.id; })
      .attr("d", function(d) { return path(d) });

  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("dy", ".35em")
    .text(function(d) { return d.properties.name; });

  svg.append('text')
    .attr('y', 100)
    .style('font-size', '5em')
    .text('Hello')

});

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

	.subunit.SCT { fill: #ddc; }
	.subunit.WLS { fill: #cdd; }
	.subunit.NIR { fill: #cdc; }
	.subunit.ENG { fill: #dcd; }
	.subunit.IRL { display: none; }


	/* CSS goes here. */

	//.subunit.ENG {
	fill: red;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v2.min.js"></script>
	<script>

	/* JavaScript goes here. */

	var width = 960,
	height = 1160;

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

	//var projection = d3.geoMercator();

	var projection = d3.geoAlbers()
	.center([0, 55.4])
	.rotate([4.4, 0])
	.parallels([50, 60])
	.scale(10000)
	.translate([width / 4, height / 8]);

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


	//console.log( projection.translate([350,400]) )


	var url = "https://bost.ocks.org/mike/map/uk.json";


	d3.json(url, function(error, uk) {
	if (error) return console.error(error);


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

	svg.selectAll("path")
	.data(subunits)
	.enter().append('path')
	.each(function(d, i) { console.log(i, d.id ) })
	.attr("class", function(d) { return ' subunit ' + d.id; })
	.attr("d", function(d) { return path(d) });

	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("dy", ".35em")
	.text(function(d) { return d.properties.name; });

	svg.append('text')
	.attr('y', 100)
	.style('font-size', '5em')
	.text('Hello')

	});

	</script>
	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.subunit.SCT { fill: #ddc; }
	.subunit.WLS { fill: #cdd; }
	.subunit.NIR { fill: #cdc; }
	.subunit.ENG { fill: #dcd; }
	.subunit.IRL { display: none; }


	/* CSS goes here. */

	//.subunit.ENG {
	fill: red;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js" charset="utf-8"><\/script>
	<script src="//d3js.org/topojson.v2.min.js"><\/script>
	<script>

	/* JavaScript goes here. */

	var width = 960,
	height = 1160;

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

	//var projection = d3.geoMercator();

	var projection = d3.geoAlbers()
	.center([0, 55.4])
	.rotate([4.4, 0])
	.parallels([50, 60])
	.scale(10000)
	.translate([width / 4, height / 8]);

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


	//console.log( projection.translate([350,400]) )


	var url = "https://bost.ocks.org/mike/map/uk.json";


	d3.json(url, function(error, uk) {
	if (error) return console.error(error);


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

	svg.selectAll("path")
	.data(subunits)
	.enter().append('path')
	.each(function(d, i) { console.log(i, d.id ) })
	.attr("class", function(d) { return ' subunit ' + d.id; })
	.attr("d", function(d) { return path(d) });

	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("dy", ".35em")
	.text(function(d) { return d.properties.name; });

	svg.append('text')
	.attr('y', 100)
	.style('font-size', '5em')
	.text('Hello')

	});

	<\/script></script>