So I got some labels on this bad boy. Now I could either work on making em more readable but I think I’m going to make some popups or tooltips or whatever.. Anyways time to add some interactivty to this little map so people can find and communicate with the Supervisor they’re interested in in SF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SFBOS districts w/ labels</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
/* No style rules here yet */
.labs {
fill: #444;
}
text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
pointer-events: none;
}
.label {
fill: white;
fill-opacity: 1;
font-size: 20px;
font-weight: 300;
text-anchor: middle;
background:yellow; }
.dist01{
fill:green;
}
.dist02{
fill:blue;
opacity:.7;
}
.dist03{
fill:purple;
opacity:.6;
}
.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">
//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('/mpmckenna8/raw/10608840/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)
svg.selectAll(".labs")
.data(topojson.feature(sf, sf.objects.labelSFbosD3).features)
.enter().append("text")
.attr("class", "labs")
.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
.attr("dy", ".35em")
.text(function(d,i) { return (d.properties.district).toString(); });
})
</script>
</body>
</html>