Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var width = 960,
height = 500;
// Feel free to change or delete any of the code you see!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
.style("background", 'red');
//Choosing mercator because that's what I did
var projection = d3.geo.conicConformal()
.rotate([120, 0])
.center([0, 38])
.parallels([29.5, 45.5])
.scale(2000)
.translate([width / 2, height / 2])
.precision(.1)
// .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);
var features = svg.append('g')//.call(zoom)
d3.json('calower.json', function(cali){
var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
var districts = topojson.feature(cali, cali.objects.assemD2011).features;
features.selectAll(".casubun")
.data(districts)
.enter().append("path")
.attr("class", function(d) { return "casubun"; })
.attr("d", path)
.style("fill",function(d,i){
//console.log(d)
return "green";
});
features.append("path")
.datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){
return a;
}))
.attr("d",path)
.attr("class", "bords")
.attr('fill', 'none');
// probably not the best use of rotating since it rotates from [0,0] in the svg which is the top left.
features.attr('transform', "translate(209,-290) ,rotate(45)");
console.log(cali)
})
</script>
</body>