D3 Examples - // source https://jsbin.com/qehiroziri

xxxxxxxxxx
 
<!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; 
  
    .subunit-label {
  fill: #777;
  fill-opacity: .5;
  font-size: 15px;
  font-weight: 300;
  text-anchor: middle;
      
     
    
}
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
  
 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(6500)
    .translate([width / 5, height / 1000]);
  
var path = d3.geoPath().projection(projection );  
  
var url = "https://bost.ocks.org/mike/map/uk.json"
​
d3.json(url, function(error, uk) {
  if (error) return console.error(error);
  
console.log( projection.translate([253, 390]) )
var subunits = topojson.feature(uk, uk.objects.subunits).features;
  
svg.selectAll('path')
      //.datum( subunits)
      .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) {console.log(path(d)); return path (d) });
  
 svg.append("path")
    .datum(topojson.feature(uk, uk.objects.places))
    .attr("d", path)
    .attr("class", "place");
  
 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; });
});
  
​
​
</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; 
  
    .subunit-label {
  fill: #777;
  fill-opacity: .5;
  font-size: 15px;
  font-weight: 300;
  text-anchor: middle;
      
     
    
}
​
</style>
<body>
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"><\/script>
<script src="//d3js.org/topojson.v2.min.js"><\/script>
<script>
  
 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(6500)
    .translate([width / 5, height / 1000]);
  
var path = d3.geoPath().projection(projection );  
  
var url = "https://bost.ocks.org/mike/map/uk.json"
​
d3.json(url, function(error, uk) {
  if (error) return console.error(error);
  
console.log( projection.translate([253, 390]) )
var subunits = topojson.feature(uk, uk.objects.subunits).features;
  
svg.selectAll('path')
      //.datum( subunits)
      .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) {console.log(path(d)); return path (d) });
  
 svg.append("path")
    .datum(topojson.feature(uk, uk.objects.places))
    .attr("d", path)
    .attr("class", "place");
  
 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; });
});
  
​
​
<\/script>
  </script>
​
​
    