D3 Examples - Testing map labels with background

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="utf-8">
  <title>Testing map labels</title>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <style>
    body {
      font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
      font-size: 62.5%;
    }
​
    path {
      stroke-linejoin: round;
    }
​
    .land-glow {
      fill-opacity: .2;
      filter: url(#blur);
      fill: #1e1e1e;
    }
​
    .land-fill {
      fill-opacity: 0;
      stroke: rgb(70, 70, 70);
      stroke-width: .35px;
    }
​
    .region {
      stroke: rgb(70, 70, 70);
      stroke-width: 0.01rem;
    }
​
    .label-bg {
      pointer-events: none;
      text-anchor: middle;
      fill: none;
      stroke: white;
      font-size: 0.9rem;
      stroke-width: 0.2rem;
      opacity: 0.9;
    }
​
    .label {
      z-index: 10;
      pointer-events: none;
      text-anchor: middle;
      font-size: 0.9rem;
      text-shadow: 0 0 3px #fff;
      fill: rgb(70, 70, 70);
    }
  </style>
</head>
​
<body>
  <script type="text/javascript">
    var width = 960,
      height = 600;
​
    var path = d3.geo.path()
      .projection(d3.geo.robinson()
        .scale(2700)
        .center([3.582022, 40.9582426])
        .translate([width / 7, height / 1.8]));
​
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append('g');
​
    var defs = svg.append("defs");
​
    defs.append("filter")
      .attr("id", "blur")
      .append("feGaussianBlur")
      .attr("stdDeviation", 5);
​
    d3.json("italy.json", function(error, italy) {
      var map = topojson.feature(italy, italy.objects.reg2011);
​
      defs.append("path")
        .datum(map)
        .attr("id", "land")
        .attr("d", path);
​
      svg.append("use")
        .attr("class", "land-glow")
        .attr("xlink:href", "#land");
​
      svg.append("use")
        .attr("class", "land-fill")
        .attr("xlink:href", "#land");
​
      var color = d3.scale.quantize()
        .domain(d3.extent(map.features, function(d) {
          return d.properties.SHAPE_Leng;
        }))
        .range(["#fff7fb", "#ece7f2", "#d0d1e6", "#a6bddb", "#74a9cf"]);
​
      var region = svg.append("g").attr("class", "polygons");
​
      region.selectAll(".region").data(map.features)
        .enter().insert("path")
        .attr("class", "region")
        .attr("d", path)
        .style("fill", function(d, i) {
          return color(d.properties.SHAPE_Leng);
        });
​
      var labelsBg = svg.append("g").attr("class", "label-group-bg");
      labelsBg.selectAll(".label-bg")
        .data(map.features)
        .enter()
        .append("text")
        .attr("class", "label-bg")
        .attr("x", function(d) {
          return path.centroid(d)[0];
        })
        .attr("y", function(d) {
          return path.centroid(d)[1];
        })
        .text(function(d) {
          return d.properties.NOME_REG;
        });
​
      var labels = svg.append("g").attr("class", "label-group");
      labels.selectAll(".label")
        .data(map.features)
        .enter()
        .append("text")
        .attr("class", "label")
        .attr("x", function(d) {
          return path.centroid(d)[0];
        })
        .attr("y", function(d) {
          return path.centroid(d)[1];
        })
        .text(function(d) {
          return d.properties.NOME_REG;
        });
    })
  </script>
</body>
​
</html>
​
    