Last active
August 29, 2015 14:10
-
-
Save bowmanmc/a59fbd47574e22651804 to your computer and use it in GitHub Desktop.
Ohio Map with Clipped Label
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>Ohio Map with Dynamically Sized Label</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> | |
| <!-- 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]; | |
| if (typeof el === 'undefined') { | |
| console.log('ERROR - No element matching: ' + this.mapSelector); | |
| return; | |
| } | |
| //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.drawState(); | |
| }; | |
| this.drawState = 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('d', map.path); | |
| map.svg.selectAll('g') | |
| .data(response.features) | |
| .enter().append('g') | |
| .attr('clip-path', 'url(#clipohio)') | |
| .append('text') | |
| .text('OHIO') | |
| .attr('id', 'txtOhio') | |
| .attr('text-anchor', 'middle') | |
| .attr('alignment-baseline', 'middle') | |
| .attr('class', 'label') | |
| .attr('transform', function(d, i) { | |
| var centroid = d3.geo.centroid(d); | |
| return 'translate(' + map.projection(centroid) + ')'; | |
| }); | |
| map.svg.selectAll('clipPath') | |
| .data(response.features) | |
| .enter().append('clipPath') | |
| .attr('id', function(d, i) { | |
| return 'clipohio'; | |
| }) | |
| .append('path') | |
| .attr('d', map.path); | |
| // scale the text | |
| map.scaleTextToPath('#pathOhio', '#txtOhio'); | |
| }); | |
| }; | |
| this.scaleTextToPath = function(pathSelector, textSelector) { | |
| var pathNode = d3.select(pathSelector).node(); | |
| var pathBox = pathNode.getBBox(); | |
| var txt = d3.select(textSelector); | |
| var textNode = txt.node(); | |
| var textBox = textNode.getBBox(); | |
| var widthTransform = pathBox.width / textBox.width; | |
| var heightTransform = pathBox.height / textBox.height; | |
| var value = Math.min(widthTransform, heightTransform); | |
| var transform = txt.attr('transform'); | |
| console.log('Transform: ' + JSON.stringify(txt.attr('transform'))); | |
| transform = transform + ' scale(' + (value + 1) + ')'; | |
| txt.attr('transform', transform); | |
| console.log('Transform: ' + JSON.stringify(txt.attr('transform'))); | |
| } | |
| }; // 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%; | |
| } | |
| .fullscreen-map { | |
| height: 90%; | |
| width: 90%; | |
| margin: auto; | |
| } | |
| .state { | |
| fill: #333639; | |
| stroke: #999; | |
| stroke-width: 2px; | |
| } | |
| .label { | |
| fill: #999; | |
| font-weight: bold; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment