SF Board of Sups Stuff

This will have some stuff converted from files downloaded of the SF City Gov website.

http://www.sfgov2.org/index.aspx?page=2618

Now that I figured out the projection (thanks for including the .proj file this time SF Gov!) I will hopfully start webmapping with it a little bit....

Now there's a geojson file w/ a bit of detail but a little bit of alameda for some reason and a simplified topojson just because it might be fun to try to use.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	<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 = 600;
			var h = 400;

//Define map projection
			var projection = d3.geo.mercator()
								   .translate([w/2, h/2])
								   .scale([99900])
									 .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("sfbos4326.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