D3 Examples - Liberia Map with Hover

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    .states {
        stroke: #000;
        fill-opacity: .7;
    }
​
    .symbol {
        fill: steelblue;
        fill-opacity: .8;
        stroke: #fff;
    }
    .labs {
      fill: #444;
      pointer-events: none;
      font-family: "Helvetica","Arial";
      font-weight: bold;
      paint-order:"stroke";     
      stroke: #cfe0e7;      
      stroke-width: .18;        
      stroke-opacity": .9;      
      stroke-linecap": butt;        
      stroke-linejoin: miter;
    }
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
        <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.7/d3-queue.js"></script>
  <script>
    
    function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", -18).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}
​
    var width = 635,
            height = 600;
​
    var radius = d3.scaleSqrt()
            .domain([0, 1e6])
            .range([0, 10]);
    var projection = d3.geoMercator()
      .scale(width / 0.027 / Math.PI)
      //.scale(100)
      .translate([width / 0.36, height / 2.68855296])
                .rotate([0, 0, 35])
​
    
//     var projection = d3.geoMercator()
//       .scale(width / 0.45 / Math.PI)
//       .scale(500)
//       .translate([width / 500, height / 840])
//          .rotate([74 + 30 / 60, -38 - 50 / 60])
​
    var path = d3.geoPath()
      .projection(projection)
    
  var color = d3.scaleOrdinal(d3.schemeCategory10); 
​
    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
​
    d3.queue()
            .defer(d3.json, "latestverion.json")
            .defer(d3.json, "county-labels-2.json")
                    .defer(d3.json, "https://www.staging2.liberianobserver.com/wp-json/wp/v2/county?per_page=100")
            .await(ready);
​
    function ready(error, us, labels,wordpress) {
     
        var countries = topojson.feature(us, us.objects.latestverion).features,
                neighbors = topojson.neighbors(us.objects.latestverion.geometries);
      
                  // Compute the feature bounds and centroid
//             var bounds = d3.geoBounds(countries),
//                 center = d3.geoCentroid(countries);
 
//             // Compute the angular distance between bound corners
//             var distance = d3.geoDistance(bounds[0], bounds[1]),
//                 scale = height / distance / Math.sqrt(2);
​
            // Update the projection scale and centroid
//             projection.scale(scale).center(center);
      
        svg.selectAll("states")
                .data(countries)
                .enter().insert("path", ".graticule")
                .attr("class", "states")
                .attr("d", path)
                .style("fill", function(d, i) {
          return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); 
        })
                .on('mouseover', function(d, i) {
                                console.log(wordpress)
                var currentState = this;
                d3.select(this).
                style('fill-opacity', 1);
​
                })
                .on('mouseout', function(d, i) {
​
                    d3.selectAll('path')
                            .style(
                                'fill-opacity',0.7
                            );
                            
                })
                        .on('click', function(d, i) {
                            console.log('yo', this);
                        });
​
      
      /* Calculated using https://github.com/andrewharvey/geojson-polygon-labels and tweaked*/
            svg.selectAll(".labs")
                  .data(labels.features)
                  .enter().append("text")
                    .attr("class", "labs")
                    .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
                    .attr("dy", "-0.15em")
          .attr("dx", "-0.85em")
                    .text(function(d,i) { return (d.properties.CCNAME).toString(); })
           .call(wrap, 60);
      
​
    
    }
​
​
</script>
    