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>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<div class="infor"></div>
<script>
/* 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>