d3fc-label-layout map example

This is a demonstration of the d3fc-label-layout component based on Mike Bostock's Let's Make a Map example. The label layout component provides an easy mechanism for labeling charts and maps in such a way that labels are positioned to avoid collisions, and (optionally) overlapping labels are removed.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <style>
    .subunit.SCT { fill: #ddc; }
    .subunit.WLS { fill: #cdd; }
    .subunit.NIR { fill: #cdc; }
    .subunit.ENG { fill: #dcd; }

.subunit.IRL,
    .subunit-label.IRL {
      display: none;
    }

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

.subunit-boundary.IRL {
      stroke: #aaa;
    }

.subunit-label {
      fill: #777;
      fill-opacity: .5;
      font-size: 20px;
      font-weight: 300;
      text-anchor: middle;
    }

.place,
    .place-label {
      fill: #444;
    }

text {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      pointer-events: none;
    }

.label rect {
        fill: transparent;
    }

</style>
</head>
<body>
  <script src="https://npmcdn.com/topojson@1.6.24/build/topojson.min.js"></script>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://unpkg.com/d3fc/build/d3fc.min.js"></script>
  
  <div id="chart" style="width: 100%; height: 1160px"></div>
  <script src="map.js"></script>
</body>
</html>

https://npmcdn.com/topojson@1.6.24/build/topojson.min.js

https://d3js.org/d3.v4.js

https://unpkg.com/d3fc/build/d3fc.min.js