Last active
October 3, 2016 14:09
-
-
Save dwillis/cbb3dc0b24ba6ee13956c5ef6f210108 to your computer and use it in GitHub Desktop.
Poll workers
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
| <html> | |
| <head> | |
| <style> | |
| #landline_container { | |
| width:95%; | |
| max-width:600px; | |
| } | |
| #landline_tooltip { | |
| position:absolute; | |
| background:rgba(222, 222, 222, 0.95); | |
| z-index:999999; | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-weight:bold; | |
| font-size:12px; | |
| padding:5px; | |
| border-radius:2px; | |
| box-shadow:0 0 5px #444; | |
| display:none; | |
| } | |
| #landline_tooltip h2 { | |
| margin:0; | |
| padding:0; | |
| font-size:14px; | |
| } | |
| .tooltip_sub { | |
| font-size:12px; | |
| font-weight:normal; | |
| display:inline-block; | |
| line-height:14px; | |
| } | |
| </style> | |
| <!-- Bring your own copy of jQuery/Underscore/Raphael here --> | |
| <!-- To support IE < 9, include jQuery 1.x --> | |
| <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script> | |
| <script src="//propublica.s3.amazonaws.com/assets/voter-id-litigation/landline.js"></script> | |
| <script src="//propublica.s3.amazonaws.com/assets/voter-id-litigation/landline.stateline.js"></script> | |
| <script src="//propublica.s3.amazonaws.com/assets/voter-id-litigation/states_packaged.js"></script> | |
| <script src="//propublica.s3.amazonaws.com/assets/voter-id-litigation/states_options.js"></script> | |
| <!-- Create a tooltip container --> | |
| <script type="text/jst" id="landline_tooltip_tmpl"> | |
| <h2><%= n %></h2> | |
| <span class="tooltip_sub"> | |
| <% if (num == "No Data") { %>No Data Available<% } else { %> | |
| <%= num %> poll workers per polling place | |
| <% } %> | |
| </span> | |
| </script> | |
| <script> | |
| var poll_workers = {"04":["Arizona",8],"05":["Arkansas",6],"06":["California",6],"08":["Colorado",9],"09":["Connecticut",6],"11":["District of Columbia",11],"12":["Florida",11],"13":["Georgia","No Data"],"15":["Hawaii",11],"16":["Idaho",7],"17":["Illinois",8],"19":["Iowa",5],"20":["Kansas",6],"21":["Kentucky",6],"22":["Louisiana",8],"23":["Maine",11],"24":["Maryland",14],"26":["Michigan",10],"27":["Minnesota",9],"28":["Mississippi",5],"29":["Missouri",7],"30":["Montana",10],"31":["Nebraska",7],"33":["New Hampshire",8],"34":["New Jersey","No Data"],"35":["New Mexico",9],"37":["North Carolina",7],"38":["North Dakota",4],"40":["Oklahoma",4],"41":["Oregon",39],"42":["Pennsylvania","No Data"],"44":["Rhode Island",7],"45":["South Carolina",6],"46":["South Dakota",5],"48":["Texas",6],"49":["Utah","No Data"],"50":["Vermont",7],"51":["Virginia",36],"53":["Washington",13],"54":["West Virginia",4],"56":["Wyoming",8],"01":["Alabama","No Data"],"02":["Alaska",5],"10":["Delaware",14],"18":["Indiana",6],"25":["Massachusetts",14],"32":["Nevada",9],"36":["New York",16],"39":["Ohio",10],"47":["Tennessee",7],"55":["Wisconsin",10]} | |
| </script> | |
| </head> | |
| <body> | |
| <div id="landline_container"></div> | |
| <script> | |
| $(function() { | |
| // Initialize the map | |
| var map = new Landline.Stateline("#landline_container", "states", options); | |
| // Set up the tooltip template | |
| var tmpl = _.template($("#landline_tooltip_tmpl").html()); | |
| // Add tooltips, and cache the existing style | |
| // to put it back in place on mouseout | |
| map.on('mouseover', function(e, path, data) { | |
| data.existingStyle = (data.existingStyle || {}); | |
| data.existingStyle["fill"] = path.attr("fill"); | |
| data.existingStyle["strokeWidth"] = path.attr("stroke-width"); | |
| path.attr("fill", "#999").attr("stroke-width", 1); | |
| }); | |
| map.on('mousemove', function(e, path, data) { | |
| $("#landline_tooltip").html(tmpl({ | |
| n : data.get('n'), | |
| num : poll_workers[data.fips][1] | |
| })).css("left", e.pageX + 20).css("top", e.pageY + 20).show(); | |
| }); | |
| map.on('mouseout', function(e, path, data) { | |
| $("#landline_tooltip").hide(); | |
| _(data.existingStyle).each(function(v, k) { | |
| path.attr(k, v); | |
| }); | |
| }); | |
| // Census data convenience functions | |
| var pwColor = function(pw) { | |
| if (pw == "No Data") return "rgb(255,255,255)"; | |
| if (pw < 6) return "rgb(186,228,179)"; | |
| if (pw < 11) return "rgb(116,196,118)"; | |
| if (pw < 16) return "rgb(49,163,84)"; | |
| return "rgb(0,109,44)"; | |
| }; | |
| // Color states by income level | |
| _(poll_workers).each(function(ary, fips) { | |
| map.style(fips, "fill", pwColor(ary[1])); | |
| }) | |
| // Draw the map | |
| map.createMap(); | |
| }); | |
| </script> | |
| <p>Average number of poll workers per polling location in 2012, by state. Source: U.S. Election Assistance Commission 2012 Election Administration & Voting Survey.</p> | |
| <div id="landline_tooltip"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment