D3 Examples - d3fc-label-layout map example

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.

xxxxxxxxxx
 
<!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>
  <!-- include polyfills for custom event, Symbol and Custom Elements -->
  <script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
  <script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
​
  <script src="//unpkg.com/d3@5.5.0"></script>
  <script src="//unpkg.com/d3fc@14.0.1"></script>
  
  <script src="https://npmcdn.com/topojson@1.6.24/build/topojson.min.js"></script>
  <script src="map.js"></script>
</body>
</html>
​
    