Last active
June 23, 2021 08:47
-
-
Save dwillis/dc9ab23da53bf2d172ab24033bbf9c8d to your computer and use it in GitHub Desktop.
Wait times
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 (wait_time == "No Data") { %>No Data Available<% } else { %>Average wait: | |
| <%= wait_time %> minutes | |
| <span class='tooltip_moe'><br>± <%= moe %> minutes</span><% } %> | |
| </span> | |
| </script> | |
| <script> | |
| var waittimes = {"01":["Alabama",10,2.4],"02":["Alaska",3,1.2],"04":["Arizona",8,2.9],"05":["Arkansas",13,2.4],"06":["California",7,0.8],"08":["Colorado",8,2.7],"09":["Connecticut",7,1.6],"10":["Delaware",4,1.0],"11":["District of Columbia",37,7.5],"12":["Florida",39,4.0],"13":["Georgia",16,2.0],"15":["Hawaii",7,2.0],"16":["Idaho",8,1.9],"17":["Illinois",12,2.2],"18":["Indiana",13,2.3],"19":["Iowa",6,1.8],"20":["Kansas",11,2.0],"21":["Kentucky",8,1.5],"22":["Louisiana",16,3.0],"23":["Maine",4,1.1],"24":["Maryland",36,4.0],"25":["Massachusetts",7,1.2],"26":["Michigan",19,2.3],"27":["Minnesota",6,1.0],"28":["Mississippi",7,1.4],"29":["Missouri",11,1.8],"30":["Montana",12,5.2],"31":["Nebraska",4,1.1],"32":["Nevada",8,1.3],"33":["New Hampshire",11,2.2],"34":["New Jersey",5,0.7],"35":["New Mexico",6,1.4],"36":["New York",12,1.5],"37":["North Carolina",13,1.4],"38":["North Dakota",10,7.5],"39":["Ohio",10,1.3],"40":["Oklahoma",17,2.7],"41":["Oregon","No Data",null],"42":["Pennsylvania",8,1.0],"44":["Rhode Island",11,2.2],"45":["South Carolina",25,3.8],"46":["South Dakota",3,1.2],"47":["Tennessee",13,1.7],"48":["Texas",11,1.1],"49":["Utah",10,2.0],"50":["Vermont",2,0.7],"51":["Virginia",25,2.5],"53":["Washington","No Data",null],"54":["West Virginia",11,2.0],"55":["Wisconsin",8,1.4],"56":["Wyoming",4,1.2]} | |
| </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'), | |
| wait_time : waittimes[data.fips][1], | |
| moe : waittimes[data.fips][2] | |
| })).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 waitColor = function(wait_time) { | |
| if (wait_time == "No Data") return "rgb(255,255,255)"; | |
| if (wait_time < 10) return "rgb(186,228,179)"; | |
| if (wait_time < 15) return "rgb(116,196,118)"; | |
| if (wait_time < 30) return "rgb(49,163,84)"; | |
| return "rgb(0,109,44)"; | |
| }; | |
| // Color states by income level | |
| _(waittimes).each(function(ary, fips) { | |
| map.style(fips, "fill", waitColor(ary[1])); | |
| }) | |
| // Draw the map | |
| map.createMap(); | |
| }); | |
| </script> | |
| <p>Average wait time by state for election day voters in the 2012 general election. Source: "Waiting in Line to Vote", Charles Stewart III and Stephen Ansolabehere.</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