Percentage of Men per Capita, U.S.

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
  fill: none;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

</style>

var width = 960;
var height = 600;
var margin = {top: 30, bottom: 0, left: 0, right: 0}

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.bottom + margin.top)

var unemployment = d3.map(); // Create an empty map. Alternative method to processing our data in a callback funciton and passing that as an argument to our await function.

var portion = d3.map(); // Create an empty map. Alternative method to processing our data in a callback funciton and passing that as an argument to our await function.

var path = d3.geoPath(); // Geopath generator

var color = d3.scaleSequential() // Threshold Scale. Continuous numeric input to discrete values defined by the range, split points are n-1.
    .domain([0.40,0.7])
    .interpolator(d3.interpolateInferno);

d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json") // Defer accepts two arguments, the function to be called, and any arguments to be passed. The URL of the data is the argument to be passed, aka: d3.json("https://d3js.org/us-10m.v1.json")
    .defer(d3.csv, "percentMale.csv", function(d) { 
      // here: d3.tsv("unemployment.tsv", function(d){ add the key value pairs to the map, which is what the .set method does when called on a d3.map})
        portion.set(d.county, +d.portion); 
        // If we wanted to pass the data as an argument
         return [d.county, +d.portion, d.name] //We could return this and pass it as "optionalData" if we wanted in our ready function. Instead we're simply adding the data (with the set method) to our map.
        })
    // .defer(d3.tsv, "unemployment.tsv", function(d){  unemployment.set(d.id, +d.rate)   })
    .await(ready); // Call await when done. It's passed the data ()

function ready(error, us, male) {

console.log(portion)
  console.log(male)
  // console.log(optionalData)
  // Error first argument, since JSON data was processed 2nd it's second arg. No need to pass third, which could have been unemployment data, if we'd wanted to process it here.
  if (error) throw error;

console.log(us)
  //  console.log(numItemized)

svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features) // Use topojson.feature to convert GEOJSON to TOPOJSON. First argument is geojson file, second is teh 
    .enter().append("path")
      .attr("fill", function(d) { return color(d.portion = portion.get(d.id)); })
     // .attr("fill", function(d) { return color(d.unemployment = unemployment.get(d.id)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return (d.portion).toFixed(3) + "%" ; });

/* svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
*/

d3.select("g.counties").attr("transform",`translate(0,${margin.top})`)
  .selectAll("path")
  .on("mouseover",function(d){
    d3.select(this)
    .transition()
    .style("fill","lightblue")
  })
  .on("mouseleave",function(d){
    d3.select(this)
    .transition()
    .style("fill", function(d){return color(d.portion = portion.get(d.id)); })
  })

}

d3.select("svg").append("g")
  .attr("transform",`translate(${width/2},${margin.top + 20})`)
  .append("text")
  .text("Percentage of Men per Capita")
  .attr("text-anchor","middle")
  .style("font-family","Raleway")
  .style("font-size","20px")

</script>

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

https://d3js.org/d3-scale-chromatic.v1.min.js

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