-
Notifications
You must be signed in to change notification settings - Fork 1
/
index - energyarchive.html
119 lines (107 loc) · 3.56 KB
/
index - energyarchive.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
<!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>
<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: 64657,
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.925, -87.69],
zoom:13
},
geo: {
url: "data/blocks_sub.json",
name_field: "NAME",
id_field: "GEOID"
}
},
data: {
version: "1.1",
id_field: "GEOID"
},
dimensions: {
bldgage: {
title: "Building Age",
data: {
dataSet: "data/blocks_energy.csv",
field: "AVGBLDGAGE",
method: d3.csv,
},
},
pop: {
title: "Total Population",
data: {
dataSet: "data/blocks_energy.csv",
field: "TOT_POP",
method: d3.csv,
},
},
thrms: {
title: "Therms per Square Foot",
data: {
dataSet: "data/blocks_energy.csv",
field: "THRMS_TOT_",
method: d3.csv,
},
},
kwh: {
title: "KWH's per Square Foot",
data: {
dataSet: "data/blocks_energy.csv",
field: "KWH_TOT_SQ",
method: d3.csv,
},
},
},
defaults: {
colorscale: d3.scale.linear().domain([1,10,20]).range(["green","yellow", "red"]).interpolate(d3.cie.interpolateLab),
opacity: 0.7,
order: ["bldgage","pop","thrms","kwh"],
active: "bldgage"
},
};
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>