Liberia Map with Hover

D3 US Map with Hover

Basic US map using D3 and topojson. Each state gets colored and neighbors should never be the same color. Also has some mousein/mouseout functions for highlighting the state your cursor is over

forked from ericcoopey's block: D3 US Map with Hover

<!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>

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>

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

https://d3js.org/topojson.v3.min.js

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js

https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.7/d3-queue.js