CSS styling some topojson data D3

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

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