Label topojson data D3

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="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js