D3 Examples - SF Board of Sups Stuff

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.

xxxxxxxxxx
 
<!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>
​
    