A’s color themed with some comments to explain a little bit of what’s going on.
Warning this links to an older version of topojson that does things a little different and makes it hard to color by scale depending on neighbors in my next example.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
.casubun { fill: #003831; }
.bords{
fill:none;
stroke-width:2px;
stroke:white;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v0.min.js">
//this is an old topojson version so its a little differently used
</script>
<script>
/* JavaScript goes here. */
//choose dimensions of my svg thing
var width = 960,
height = 600;
//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);
d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) {
svg.selectAll(".casubun")
.data(topojson.object(cali, cali.objects.assemD2011).geometries)
.enter().append("path")
.attr("class", function(d) { return "casubun"; })
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){
return a;
}))
.attr("d",path)
.attr("class", "bords");
});
d3.select("body")
.transition()
.style("background-color", "#FFD800");
</script>
</body>