-
-
Save bobbydavid/f6aff406e3a45b0917fe to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| // | |
| // SETUP + GLOBALS | |
| // | |
| //Data | |
| var geojson; | |
| //SVG | |
| var svg; | |
| var w = 900; | |
| var h = 500; | |
| var states; | |
| //Methods | |
| var projection = d3.geo.albersUsa() | |
| .scale(w) | |
| .translate([w / 2, h / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var zoom = d3.behavior.zoom() | |
| .translate(projection.translate()) | |
| .scale(projection.scale()) | |
| .scaleExtent([h, 8 * h]) | |
| .on("zoom", move); | |
| function move() { | |
| //zoom.translate(d3.event.translate); | |
| projection.translate(d3.event.translate).scale(d3.event.scale); | |
| states.selectAll("path").attr("d", path); | |
| } | |
| function moveToState(center, bounds) { | |
| //zoom.translate(bounds); | |
| //center[0] -= w/2; | |
| //center[1] -= h/2; | |
| console.log(center); | |
| projection.translate(center); //.scale(bounds); | |
| //Smooth transition to new translation + scale | |
| states.selectAll("path") | |
| .transition() | |
| .duration(1000) | |
| .attr("d", path); | |
| } | |
| $(document).ready(function() { | |
| /* jQuery actions after this point */ | |
| // | |
| // GENERATE MAP | |
| // | |
| //Create SVG object | |
| svg = d3.select("#map").append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| states = svg.append("g") | |
| .attr("id", "states") | |
| .attr("transform", "translate(0, 0)") | |
| .call(zoom); | |
| //Background rect (so that the 'states' g can trigger pan/zoom | |
| // even when not mousing over a state directly) | |
| states.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("width", w) | |
| .attr("height", h) | |
| .attr("fill", "#fff") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1"); | |
| //Load GeoJSON data | |
| d3.json("us-states.json", function(json) { | |
| geojson = json; | |
| generateMap(); | |
| }); | |
| //Generate map | |
| var generateMap = function() { | |
| //Gen states | |
| states.selectAll("path") | |
| .data(geojson.features) //Bind data | |
| .enter() | |
| .append("path") | |
| .attr("d", path) //Gen path from geojson data | |
| .attr("fill", "#559") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "0.2") | |
| .attr("opacity", 1.0); | |
| //Zoom behavior | |
| states.selectAll("path") | |
| .on("click", function(d) { | |
| var state = d.properties.name; | |
| var centroid = path.centroid(d); | |
| console.log(centroid); | |
| var bounds = d3.geo.bounds(d); | |
| console.log(bounds); | |
| moveToState(centroid, bounds); | |
| }); | |
| } | |
| /* End jQuery actions */ | |
| }); |
This file contains hidden or 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>Map Zoom Test</title> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
| <script src="custom.js"></script> | |
| <style type="text/css"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| margin: 10px; | |
| padding: 0; | |
| background-color: white; | |
| } | |
| path:hover { | |
| stroke: white; | |
| stroke-width: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment