I can't get the flags to be centered inside their states...
Forked from:
-
-
Save ddnn55/4197097 to your computer and use it in GitHub Desktop.
state flags
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
| // extract U.S. state flag URLS from Wikipedia | |
| // - outputs JSON object | |
| // - scraping depends on Wikipeda HTML, so this might stop working. | |
| // | |
| // requires phantomjs | |
| var page = require('webpage').create(); | |
| page.onConsoleMessage = function(msg) { | |
| console.log(msg); | |
| }; | |
| page.open("http://en.wikipedia.org/wiki/Flags_of_the_U.S._states", function(status) { | |
| if ( status === "success" ) { | |
| page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() { | |
| page.evaluate(function() { | |
| function noSpaces(str) | |
| { | |
| return str.split('').map(function(chr){ return chr == ' ' ? '_' : chr; }).join(''); | |
| } | |
| var flags = {}; | |
| $('#Current_state_flags').parent().next().next().find("img").each(function(){ | |
| var stateKey = noSpaces(this.alt.split('(')[0].split('[')[0].split(' of ')[1]); | |
| if(stateKey[stateKey.length-1] == '_') | |
| stateKey = stateKey.substring(0, stateKey.length-1); | |
| flags[stateKey] = this.src; | |
| }); | |
| console.log(JSON.stringify(flags, null, " ")); | |
| }); | |
| phantom.exit(); | |
| }); | |
| } | |
| }); |
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> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v2.min.js?2.9.6"></script> | |
| <style> | |
| .background { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| </style> | |
| <body> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| centered; | |
| var projection = d3.geo.albersUsa() | |
| .scale(width) | |
| .translate([0, 0]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("rect") | |
| .attr("class", "background") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .on("click", click); | |
| var defs = svg.append("defs"); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
| .append("g") | |
| .attr("id", "states"); | |
| d3.json("state_flags.json", function(flags) { | |
| d3.json("readme.json", function(json) { | |
| defs.selectAll("clipPath") | |
| .data(json.features) | |
| .enter().append("clipPath") | |
| .attr("id", function(state){ return noSpaces(state.properties.name)+"-clip"; }) | |
| .append("path") | |
| .attr("d", path) | |
| g.selectAll("image") | |
| .data(json.features) | |
| .enter().append("image") | |
| .attr("xlink:href", function(state){ return flags[stateKey(state)]; }) | |
| //.attr("preserveAspectRatio", "xMinYMin slice") | |
| .attr("preserveAspectRatio", "none slice") | |
| .attr("x", function(state){ return bbox(state).x; }) | |
| .attr("y", function(state){ return bbox(state).y; }) | |
| .attr("width", function(state){ return bbox(state).width; }) | |
| .attr("height", function(state){ return bbox(state).height; }) | |
| .attr("clip-path", function(state){ | |
| return "url(#"+noSpaces(state.properties.name)+"-clip)"; | |
| }) | |
| .on("click", click); | |
| }); | |
| }); | |
| function click(d) { | |
| var x = 0, | |
| y = 0, | |
| k = 1; | |
| if (d && centered !== d) { | |
| var centroid = path.centroid(d); | |
| x = -centroid[0]; | |
| y = -centroid[1]; | |
| k = 4; | |
| centered = d; | |
| } else { | |
| centered = null; | |
| } | |
| g.selectAll("path") | |
| .classed("active", centered && function(d) { return d === centered; }); | |
| g.transition() | |
| .duration(1000) | |
| .attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")") | |
| .style("stroke-width", 1.5 / k + "px"); | |
| } | |
| function stateKey(state) | |
| { | |
| return noSpaces(state.properties.name); | |
| } | |
| function bbox(state) | |
| { | |
| return d3.select("#"+stateKey(state)+"-clip")[0][0].firstChild.getBBox(); | |
| } | |
| function noSpaces(str) | |
| { | |
| return str.split('').map(function(chr){ return chr == ' ' ? '_' : chr; }).join(''); | |
| } | |
| </script> |
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
| { | |
| "Alabama": "http://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Alabama.svg/150px-Flag_of_Alabama.svg.png", | |
| "Alaska": "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Flag_of_Alaska.svg/143px-Flag_of_Alaska.svg.png", | |
| "Arizona": "http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Flag_of_Arizona.svg/150px-Flag_of_Arizona.svg.png", | |
| "Arkansas": "http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Flag_of_Arkansas.svg/150px-Flag_of_Arkansas.svg.png", | |
| "California": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/150px-Flag_of_California.svg.png", | |
| "Colorado": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/150px-Flag_of_Colorado.svg.png", | |
| "Connecticut": "http://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Flag_of_Connecticut.svg/130px-Flag_of_Connecticut.svg.png", | |
| "Delaware": "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/150px-Flag_of_Delaware.svg.png", | |
| "Florida": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/150px-Flag_of_Florida.svg.png", | |
| "Georgia": "http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Flag_of_Georgia_%28U.S._state%29.svg/160px-Flag_of_Georgia_%28U.S._state%29.svg.png", | |
| "Hawaii": "http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Flag_of_Hawaii.svg/200px-Flag_of_Hawaii.svg.png", | |
| "Idaho": "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_Idaho.svg/127px-Flag_of_Idaho.svg.png", | |
| "Illinois": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/169px-Flag_of_Illinois.svg.png", | |
| "Indiana": "http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Flag_of_Indiana.svg/150px-Flag_of_Indiana.svg.png", | |
| "Iowa": "http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Flag_of_Iowa.svg/146px-Flag_of_Iowa.svg.png", | |
| "Kansas": "http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Flag_of_Kansas.svg/167px-Flag_of_Kansas.svg.png", | |
| "Kentucky": "http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Flag_of_Kentucky.svg/190px-Flag_of_Kentucky.svg.png", | |
| "Louisiana": "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Flag_of_Louisiana.svg/155px-Flag_of_Louisiana.svg.png", | |
| "Maine": "http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Flag_of_Maine.svg/150px-Flag_of_Maine.svg.png", | |
| "Maryland": "http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Flag_of_Maryland.svg/150px-Flag_of_Maryland.svg.png", | |
| "Massachusetts": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Flag_of_Massachusetts.svg/167px-Flag_of_Massachusetts.svg.png", | |
| "Michigan": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Flag_of_Michigan.svg/150px-Flag_of_Michigan.svg.png", | |
| "Minnesota": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Flag_of_Minnesota.svg/158px-Flag_of_Minnesota.svg.png", | |
| "Mississippi": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Flag_of_Mississippi.svg/167px-Flag_of_Mississippi.svg.png", | |
| "Missouri": "http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Flag_of_Missouri.svg/172px-Flag_of_Missouri.svg.png", | |
| "Montana": "http://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_Montana.svg/150px-Flag_of_Montana.svg.png", | |
| "Nebraska": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Flag_of_Nebraska.svg/167px-Flag_of_Nebraska.svg.png", | |
| "Nevada": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Flag_of_Nevada.svg/150px-Flag_of_Nevada.svg.png", | |
| "New_Hampshire": "http://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Flag_of_New_Hampshire.svg/150px-Flag_of_New_Hampshire.svg.png", | |
| "New_Jersey": "http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_New_Jersey.svg/150px-Flag_of_New_Jersey.svg.png", | |
| "New_Mexico": "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_New_Mexico.svg/150px-Flag_of_New_Mexico.svg.png", | |
| "New_York": "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/200px-Flag_of_New_York.svg.png", | |
| "North_Carolina": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_North_Carolina.svg/150px-Flag_of_North_Carolina.svg.png", | |
| "North_Dakota": "http://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Flag_of_North_Dakota.svg/128px-Flag_of_North_Dakota.svg.png", | |
| "Ohio": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Flag_of_Ohio.svg/160px-Flag_of_Ohio.svg.png", | |
| "Oklahoma": "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Flag_of_Oklahoma.svg/150px-Flag_of_Oklahoma.svg.png", | |
| "Oregon": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Flag_of_Oregon_%28reverse%29.svg/167px-Flag_of_Oregon_%28reverse%29.svg.png", | |
| "Pennsylvania": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Pennsylvania.svg/150px-Flag_of_Pennsylvania.svg.png", | |
| "Rhode_Island": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Flag_of_Rhode_Island.svg/107px-Flag_of_Rhode_Island.svg.png", | |
| "South_Carolina": "http://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Flag_of_South_Carolina.svg/150px-Flag_of_South_Carolina.svg.png", | |
| "South_Dakota": "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_South_Dakota.svg/160px-Flag_of_South_Dakota.svg.png", | |
| "Tennessee": "http://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Tennessee.svg/167px-Flag_of_Tennessee.svg.png", | |
| "Texas": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Texas.svg/150px-Flag_of_Texas.svg.png", | |
| "Utah": "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Flag_of_Utah.svg/150px-Flag_of_Utah.svg.png", | |
| "Vermont": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Flag_of_Vermont.svg/167px-Flag_of_Vermont.svg.png", | |
| "Virginia": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Flag_of_Virginia.svg/146px-Flag_of_Virginia.svg.png", | |
| "Washington": "http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Flag_of_Washington.svg/168px-Flag_of_Washington.svg.png", | |
| "West_Virginia": "http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Flag_of_West_Virginia.svg/190px-Flag_of_West_Virginia.svg.png", | |
| "Wisconsin": "http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Flag_of_Wisconsin.svg/150px-Flag_of_Wisconsin.svg.png", | |
| "Wyoming": "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_Wyoming.svg/143px-Flag_of_Wyoming.svg.png" | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment