SF BOS d3.js geojon data fixed

Very simple start to map using data from the SF Planning commission to make a map with d3. One problem was there was a little of Alameda in the Data so I cleaned that out and made it a little more web mapping friendly.

Use this or make your own maps from the source data http://www.sfgov2.org/index.aspx?page=2618 to help people better contextualize SF Politics.

<!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">
			/* No style rules here yet */
		</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([78900])
									 .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 GeoJSON data
			d3.json("sfBOScle.geojson", function(json) {

//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
				   .style("fill", "purple");

console.dir(json.features)

});

</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