-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
154 lines (143 loc) · 5.71 KB
/
index.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Crosslet test</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<div id="content" class="container">
<div id="map"></div>
<div id="help" style="background-color:#EEEEEE;height:100%; margin-left: 670px;padding: 10px; overflow: scroll">
<h2>Map Help</h2>
<p>This map displays census tracts in Cook County, Illinois. The default map shows population by tract (green is lower population, red is higher), but you can do a couple of things to manipulate the data being visualized.</p>
<p>There are several dimensions you can visualize:</p>
<ol>
<li>Total Population</li>
<li>Population of one race: Black or African American</li>
<li>Population of one race: White</li>
<li>Population: Hispanic or Latino</li>
<li>Workers 16 years or older working from home</li>
<li>Total Households</li>
</ol>
<p>You can activate each of the above dimensions by clicking its tab to the left. Once the tab is clicked, two things will happen: the map will change to reflect the new dimension and a bar chart within the tab will become active. </p>
<p>Within an active tab, you can click and drag across the bar chart to select a range of values. You'll notice that the census tracts displayed on the map will change to reflect your selection. For greater precision, you can also type a range of values into the dimension's tab.
</p>
<p>To filter by multiple dimensions, just click into another tab and select an additional range of values. Now the map only shows census tracts that fall within the ranges you've selected.
</p>
<p>To zoom in or out, scroll with your mouse or touch pad. </p>
<p><em>This visualization was created using <a href="http://sztanko.github.io/crosslet/">Crosslet</a> and <a href="https://www.census.gov/geo/maps-data/data/tiger.html">US Census Data</a>.</em></p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="crosslet.js"></script>
<script type="text/javascript">
var f = function() { return function(d){
return d3.format(",.2f")(d)+"%"
};};
var inp = function() { return d3.format(",.2f") };
var config = {
map: {
leaflet: {
key: "c6025c28b5184b5e95e75121252ab018",
styleId: 116196,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
},
view: {
center: [41.89, -87.92],
zoom:10
},
geo: {
url: "data/tracts_cook.json",
name_field: "NAME",
id_field: "GEOID_Data"
}
},
data: {
version: "1.1",
id_field: "GEOID_Data"
},
dimensions: {
totpop: {
title: "Total Population",
data: {
dataSet: "data/x01_age_and_sex.csv",
field: "TotalPop",
method: d3.csv,
},
},
whitepop: {
title: "Population of one race: White",
data: {
dataSet: "data/x02_race.csv",
field: "PopWhite",
method: d3.csv,
},
},
blackpop: {
title: "Population of one race: Black or African American",
data: {
dataSet: "data/x02_race.csv",
field: "PopBlack",
method: d3.csv,
},
},
hispanic: {
title: "Population: Hispanic or Latino",
data: {
dataSet: "data/x03_hispanic_or_latino_origin.csv",
field: "PopHispanicLatino",
method: d3.csv,
},
},
workhome: {
title: "Workers 16 years or older working from home",
data: {
dataSet: "data/x08_commuting.csv",
field: "WorkAtHome",
method: d3.csv,
},
},
hhlds: {
title: "Total Households",
data: {
dataSet: "data/x11_household_family_subfamilies.csv",
field: "TotHhlds",
method: d3.csv,
},
},
},
defaults: {
colorscale: d3.scale.linear().domain([1,10,20]).range(["green","yellow", "red"]).interpolate(d3.cie.interpolateLab),
opacity: 0.7,
order: ["totpop","whitepop","blackpop","hispanic","workhome","hhlds"],
active: "totpop"
},
};
console.log(config);
a=new crosslet.MapView($("#map"),config);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37321587-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</body>
</html>