D3 Examples - // source http://jsbin.com/bobulik

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
/* CSS goes here. */
  
 .subunit.SCT { fill: #ddc; }
.subunit.WLS { fill: #cdd; }
.subunit.NIR { fill: #cdc; }
.subunit.ENG { fill: #dcd; }
.subunit.IRL { display: none; }
  
​
</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(3000)
    .translate([width / 4, height / 8]);
  
  
  var path = d3.geoPath().projection( projection );
  
  console.log(projection.translate() )
  
 var url = "https://bost.ocks.org/mike/map/uk.json"
  
 d3.json(url, function(error, uk) {
  if (error) return console.error(error);
   
  console.log( Object.keys( uk.objects ) )
  
 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', '3em')
   .text ('hello')
 })
  </script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<meta charset="utf-8">
<style>
​
/* CSS goes here. */
  
 .subunit.SCT { fill: #ddc; }
.subunit.WLS { fill: #cdd; }
.subunit.NIR { fill: #cdc; }
.subunit.ENG { fill: #dcd; }
.subunit.IRL { display: none; }
  
​
</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(3000)
    .translate([width / 4, height / 8]);
  
  
  var path = d3.geoPath().projection( projection );
  
  console.log(projection.translate() )
  
 var url = "https://bost.ocks.org/mike/map/uk.json"
  
 d3.json(url, function(error, uk) {
  if (error) return console.error(error);
   
  console.log( Object.keys( uk.objects ) )
  
 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', '3em')
   .text ('hello')
 })
  <\/script>
  </script>
​
​
    