Last active
August 29, 2015 14:10
-
-
Save bowmanmc/18ec39ee6f005afb27ac to your computer and use it in GitHub Desktop.
Animated Outline of Ohio Map
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
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> | |
| <title>Animated Ohio Map</title> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width"> | |
| <!-- Vendor css --> | |
| <!-- App css --> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="map" class="fullscreen-map"></div> | |
| <a id="redraw">Re-Draw</a> | |
| <!-- Vendor Scripts --> | |
| <script src="https://code.jquery.com/jquery-1.11.1.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://momentjs.com/downloads/moment.min.js"></script> | |
| <!-- Page Scripts --> | |
| <script src="map.js"></script> | |
| <script> | |
| var map = new OhioMap('#map'); | |
| map.drawMap(); | |
| </script> | |
| </body> | |
| </html> |
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
| function OhioMap(elementIdSelector) { | |
| this.mapSelector = elementIdSelector; | |
| this.drawMap = function() { | |
| var map = this; | |
| var el = $(map.mapSelector)[0]; | |
| //var width = 960, | |
| // height = 1200; | |
| map.height = el.clientHeight; | |
| map.width = (960 / 1200) * map.height; | |
| console.log('Making map size: ' + map.width + 'x' + map.height); | |
| //map.projection = d3.geo.mercator().translate([map.width / 2, map.height / 2]); | |
| map.projection = d3.geo.conicConformal() | |
| .rotate([82 + 30 / 60, -39 - 40 / 60]) | |
| .translate([map.width / 2, map.height / 2]); | |
| map.path = d3.geo.path().projection(map.projection); | |
| map.svg = d3.select(map.mapSelector).append('svg') | |
| .attr('width', map.width) | |
| .attr('height', map.height); | |
| this.loadState(); | |
| $('#redraw').click(function() { | |
| map.drawState(); | |
| }); | |
| }; | |
| this.loadState = function() { | |
| var map = this; | |
| d3.json('state.oh.json', function(error, response) { | |
| map.projection.scale(1).translate([0, 0]); | |
| var b = map.path.bounds(response), | |
| s = 0.95 / Math.max((b[1][0] - b[0][0]) / map.width, (b[1][1] - b[0][1]) / map.height), | |
| t = [(map.width - s * (b[1][0] + b[0][0])) / 2, (map.height - s * (b[1][1] + b[0][1])) / 2]; | |
| map.projection.scale(s).translate(t); | |
| map.svg.selectAll('path') | |
| .data(response.features) | |
| .enter().append('path') | |
| .attr('id', 'pathOhio') | |
| .attr('class', 'state') | |
| .attr('stroke', '#fff') | |
| .attr('stroke-width', 3) | |
| .attr('d', map.path) | |
| map.drawState(); | |
| }); | |
| }; | |
| this.drawState = function() { | |
| var path = document.querySelector('#pathOhio'); | |
| var length = path.getTotalLength(); | |
| // Set up the starting positions | |
| path.style.strokeDasharray = length + ' ' + length; | |
| path.style.strokeDashoffset = length; | |
| // Clear any previous transition | |
| path.style.transition = path.style.WebkitTransition = | |
| 'none'; | |
| // Set up the starting positions | |
| path.style.strokeDasharray = length + ' ' + length; | |
| path.style.strokeDashoffset = length; | |
| // Trigger a layout so styles are calculated & the browser | |
| // picks up the starting position before animating | |
| path.getBoundingClientRect(); | |
| // Define our transition | |
| path.style.transition = path.style.WebkitTransition = | |
| 'stroke-dashoffset 5s ease'; | |
| // Go! | |
| path.style.strokeDashoffset = '0'; | |
| }; | |
| }; // OhioMap |
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
| body, html { | |
| /*background: #101316;*/ | |
| background: #000306; | |
| color: #f3f6f9; | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| height: 100%; | |
| } | |
| a { | |
| color: #06c; | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #09f; | |
| text-decoration: underline; | |
| } | |
| .fullscreen-map { | |
| height: 90%; | |
| width: 90%; | |
| text-align: center; | |
| } | |
| .state { | |
| fill: #333639; | |
| /* Set the fill-opacity to 0 so we get click events */ | |
| fill-opacity: 0; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment