/
demo-state.html
122 lines (108 loc) · 5.36 KB
/
demo-state.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<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="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<!-- Load the states package and options -->
<script src="public/javascripts/states/states_packaged.js"></script>
<script src="public/javascripts/states/states_options.js"></script>
<!-- Load Landline and Stateline -->
<script src="public/javascripts/landline.js"></script>
<script src="public/javascripts/landline.stateline.js"></script>
<!-- Create a tooltip container -->
<script type="text/jst" id="landline_tooltip_tmpl">
<h2><%= n %></h2>
<span class="tooltip_sub">
Median income<br>
$<%= med_income %>
<span class='tooltip_moe'><br>± $<%= moe %></span>
</span>
</script>
<!-- Census median income data, via http://censusreporter.org/data/map/?table=B06011&geo_ids=040|01000US -->
<script>
var census = {"01":["Alabama",21830,266],"02":["Alaska",29932,1140],"04":["Arizona",25307,247],"05":["Arkansas",21529,201],"06":["California",25971,104],"08":["Colorado",29237,430],"09":["Connecticut",31920,247],"10":["Delaware",28405,921],"11":["District of Columbia",38014,1708],"12":["Florida",23387,172],"13":["Georgia",24682,253],"15":["Hawaii",29786,621],"16":["Idaho",22166,317],"17":["Illinois",27301,120],"18":["Indiana",24801,269],"19":["Iowa",26717,254],"20":["Kansas",26299,284],"21":["Kentucky",21871,186],"22":["Louisiana",22416,215],"23":["Maine",24367,496],"24":["Maryland",34564,457],"25":["Massachusetts",31016,231],"26":["Michigan",23938,206],"27":["Minnesota",30094,193],"28":["Mississippi",20206,292],"29":["Missouri",23933,251],"30":["Montana",23536,553],"31":["Nebraska",26450,308],"32":["Nevada",26328,314],"33":["New Hampshire",30651,420],"34":["New Jersey",32158,208],"35":["New Mexico",22775,364],"36":["New York",28449,247],"37":["North Carolina",23946,258],"38":["North Dakota",29326,721],"39":["Ohio",24778,170],"40":["Oklahoma",23460,298],"41":["Oregon",24445,303],"42":["Pennsylvania",25874,144],"44":["Rhode Island",26840,524],"45":["South Carolina",22451,260],"46":["South Dakota",25866,439],"47":["Tennessee",22570,265],"48":["Texas",25227,122],"49":["Utah",25043,402],"50":["Vermont",26323,492],"51":["Virginia",30322,193],"53":["Washington",29109,337],"54":["West Virginia",21494,268],"55":["Wisconsin",26668,179],"56":["Wyoming",26778,725]};
</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'),
med_income : commaDelimit(census[data.fips][1]),
moe : census[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 incomeColor = function(income) {
if (income < 23768) return "rgb(237,248,233)";
if (income < 27329) return "rgb(186,228,179)";
if (income < 30891) return "rgb(116,196,118)";
if (income < 34452) return "rgb(49,163,84)";
return "rgb(0,109,44)";
};
var commaDelimit = function(a){
return _.isNumber(a) ? a.toString().replace(/(d)(?=(ddd)+(?!d))/g,"$1,") : "";
};
// Color states by income level
_(census).each(function(ary, fips) {
map.style(fips, "fill", incomeColor(ary[1]));
})
// Draw the map
map.createMap();
});
</script>
<div id="landline_tooltip"></div>
</body>
</html>