So I got some labels on this bad boy. Now I could either work on making em more readable but I think I'm going to make some popups or tooltips or whatever.. Anyways time to add some interactivty to this little map so people can find and communicate with the Supervisor they're interested in in SF.
Last active
August 29, 2015 13:59
-
-
Save mpmckenna8/10733649 to your computer and use it in GitHub Desktop.
Label topojson data D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>SFBOS districts w/ labels</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 */ | |
| .labs { | |
| fill: #444; | |
| } | |
| text { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 10px; | |
| pointer-events: none; | |
| } | |
| .label { | |
| fill: white; | |
| fill-opacity: 1; | |
| font-size: 20px; | |
| font-weight: 300; | |
| text-anchor: middle; | |
| background:yellow; } | |
| .dist01{ | |
| fill:green; | |
| } | |
| .dist02{ | |
| fill:blue; | |
| opacity:.7; | |
| } | |
| .dist03{ | |
| fill:purple; | |
| opacity:.6; | |
| } | |
| .dist04{ | |
| fill:#cab2d6; | |
| } | |
| .dist05{ | |
| fill:#ff7f00; | |
| } | |
| .dist06{ | |
| fill:#e31a1c; | |
| } | |
| .dist07{ | |
| fill:#fdbf6f; | |
| Opacity:.3; | |
| } | |
| .dist08{ | |
| fill:pink; | |
| } | |
| .dist09{ | |
| fill:#a6cee3; | |
| } | |
| .dist10{ | |
| fill:#ffff99; | |
| } | |
| .dist11{ | |
| fill:#b2df8a; | |
| } | |
| </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([98900]) | |
| .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 the data data | |
| d3.json('/mpmckenna8/raw/10608840/sfbosArc.json',function(err, sf){ | |
| svg.selectAll(".dist") | |
| .data(topojson.feature(sf, sf.objects.sfBOScle).features) | |
| .enter().append("path") | |
| .attr("class",function(d,i){ | |
| console.log(d.properties.DISTRICT) | |
| return "dist" +d.properties.DISTRICT | |
| }) | |
| .attr("d",path) | |
| svg.selectAll(".labs") | |
| .data(topojson.feature(sf, sf.objects.labelSFbosD3).features) | |
| .enter().append("text") | |
| .attr("class", "labs") | |
| .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) | |
| .attr("dy", ".35em") | |
| .text(function(d,i) { return (d.properties.district).toString(); }); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment