So I did a topojson dataset which also has the some points for labels so maybe one day I’ll append some text to this bad boy.
What I typed into the terminal to make the topojson:
sfBOS matthewmckenna$ topojson \
-o sfbosArc.json
-p
sfBOScle.geojson
labelSFbosD3.geojson bounds: -122.49272855226758 37.715893280886796 -122.37087002221702 37.82289853793412 (spherical) pre-quantization: 0.0136m (1.22e-7°) 0.0119m (1.07e-7°) topology: 0 arcs, 0 points post-quantization: 1.36m (0.0000122°) 1.19m (0.0000107°) prune: retained 0 / 0 arcs (NaN%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Mercator projection applied to stuff</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
.dist01{
fill:green;
}
.dist02{
fill:blue;
opacity:.7;
}
.dist03{
fill:purple;
}
.dist04{
fill:#cab2d6;
}
.dist05{
fill:#ff7f00;
}
.dist06{
fill:#e31a1c;
}
.dist07{
fill:#fdbf6f;
Opacity:.3;
}
.dist08{
fill:pink;
}
.dist09{
fill:#a6cee3;
}
.dist10{
fill:#ffff99;
}
.dist11{
fill:#b2df8a;
}
</style>
</head>
<body>
<script type="text/javascript">
// style this thing beter and add some interactivity and labels and stuff....
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.mercator()
.translate([w/2, h/2])
.scale([98900])
.center([ -122.43198394775389,37.76365837331252])
;
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in the data data
d3.json('sfbosArc.json',function(err, sf){
svg.selectAll(".dist")
.data(topojson.feature(sf, sf.objects.sfBOScle).features)
.enter().append("path")
.attr("class",function(d,i){
console.log(d.properties.DISTRICT)
return "dist" +d.properties.DISTRICT
})
.attr("d",path)
})
</script>
</body>
</html>