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