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="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 = 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> |
