Chicago Gun Origins - Choropleth

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

body {
    font-family: arial, sans;
    font-size: 11px;
    margin: 10px auto;
    width:1220px;
  }
  
  svg {
    border: 1px solid #f0f;
  }

.g-county{
    fill: #dedede;
    stroke-width: 0.3px;
    stroke: #fff;
  }

.g-state{
    fill: none;
    stroke-width: 0.6px;
    stroke:black;
  }

.g-county:hover{
    stroke:blue;
  }

/*  .g-hovering{
    stroke:red;
  }*/

</style>

<body>
<h1>Origin of Guns Found In Chicago Crimes</h1>

</body>

var width = 900,
      height = 600;
  
  var svg = d3.select("body").append("svg")
      .attr("width", width )
      .attr("height", height );

//init the D3 path for geography
  //by default is albers equal area projection, but it can take an argument for other projections
  var path = d3.geo.path();

//replaces the d3.json load
  queue()
    .defer(d3.json,"us.json")
    .defer(d3.csv,"guns-history.csv")
    .await(ready);

//us.json is of type topojson, must convert it to geojson
  //this data is already projected for us, which is nice...
  // d3.json("us.json",ready);

function ready(err, us, guns){
    if(err){console.warn(error);}

//converting topojson to geojson unpacking)
    //getting the counties, not the states or the land outline
    var countyFeatures = topojson.feature(us, us.objects.counties).features;
    var stateFeatures = topojson.feature(us, us.objects.states).features;

//Binned threshold scale https://bl.ocks.org/mbostock/3306362
    var color = d3.scale.threshold()
    .domain([1,10,50,100,300,500,800,1200])
    //https://bl.ocks.org/mbostock/5577023
    //keep the range +1 longer than the domain
    .range(["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]);

console.log("US TopoJSON: ",us,"Guns History: ",guns,"US GeoJSON County Features: ",countyFeatures,"US GeoJSON State Features: ",stateFeatures);

//Javascript dictionary example O(1) lookup
    var gunsByFips = {};
    var areaNameByFips = {};

guns.forEach(function(d){
      d.count3 = +d.count3;
      d.FIPS = +d.FIPS;
      //construsting the dictionary here
      gunsByFips[d.FIPS] =d.count3;
      areaNameByFips[d.FIPS] = d.county+", "+d.STATE;
    });

svg.append("g")
        .attr("class","county-feature-container")
        .selectAll("path")
        .data(countyFeatures)
        .enter()
        .append("path")
        //pass the data to the path init from avobe
        .attr("class","g-county")
        .attr("d",path)
        .style("fill",function(d){
          //coloring strategy here is to showcase extent of data - where are all the places these guns came from
          //return (gunsByFips[d.id] >0)?"red":"#dedede";
          return (gunsByFips[d.id] >0)?color(gunsByFips[d.id]):"#dedede";

})
        .on("mouseover",function(d){
          console.log(d,"Name: ",areaNameByFips[d.id],"Num Guns: ",gunsByFips[d.id]);
          //d.id === FIPS code, nice feature of geojson

//must bring the shape to the front of the map on hover - there is a overlapping issue with the strokes here
         // d3.select(this).classed("g-hovering",true);
        });

svg.append("g")
        .attr("class","state-feature-container")
        .selectAll("path")
        .data(stateFeatures)
        .enter()
        .append("path")
        //pass the data to the path init from avobe
        .attr("class","g-state")
        .attr("d",path);
    
  }

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

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

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js