d3 basic map events + stylings CA Congressional Districts

A map of California State Congressional Districts w/ a little less messy javascript and css than the last ones I attempted.

Plus in this one if you hover over a district a thing should pop up which shows the district number and population.

Now to think of other things to make it do hopefully something new!

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

/* CSS goes here. */
  .casubun {
      stroke-width:.3px;
      stroke:black;

}

.bords{
    fill:none;
    stroke-width:5px;
    stroke:white;
    shape-rendering:crispEdges;
  }

.infor {
	position:absolute;
	background:white;
  text:black;
  margin-top:10px;
}
svg{
  z-index:0;
}
        </style>
    <body>

/* JavaScript goes here. */
  //choose dimensions of my svg thing
      var width = 960,
      height = 600;
      // so category20 will make an array of 20 colors
var color = d3.scale.category20();
    color.range(color.range().slice(0,120));

//Choosing mercator because that's what I made the data in and also scale and center setting
      var projection = d3.geo.mercator()
        .scale(2000)
        .translate([width / 2, height / 2])
        .center([-120,36])
      ;

// So now when I call path on jam it will use this projection and stuff
      var path = d3.geo.path()
        .projection(projection);

// Appending the actual SVG to the body of the page w/ height width
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var infor = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden");

d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) {
        var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
        var districts = topojson.feature(cali, cali.objects.assemD2011).features;

svg.append("path")
  .datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){

return a === b;

}))
  .attr("d",path)
  .attr("class", "bords");

svg.selectAll(".casubun")
.data(districts)
.enter().append("path")
.attr("d", path)
.style("fill",function(d,i){
  return color(d.color=d3.max(neighbors[i],function(n){
    return districts[n].color;
  })
+ 1 | 0
);
})
.attr("class", function(d) { return "casubun"; })
.on('click',function(d){
  console.log(d.properties)
})
.on('mouseover',function(d,i){
  d3.select('.infor')
    .style({
          height:'50',
          left:'65%',
          top:'15%',
          color:"purple"
        })
        .classed("hidden",false)
        .text('District ' + d.properties.DISTRICT + ' has ' +'a population of' + d.properties.POP)

})
.on('mouseout',function(){
  d3.select(".infor").classed("hidden",true);
})

});

// selecting the whole body to change the background color
  d3.select("body")
   .transition()
   .style("background-color", "black");

</script>
    </body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

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