-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
101 lines (80 loc) · 3.33 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
<!DOCTYPE html>
<html>
<head>
<title>Demo: Mother Jones Bubble Mapper</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="bubble-mapper">
<section id="hed">
<h3>Renewable Energy Consumption by State</h3>
<p>Consumption in billions of BTUs, in 2011.<br/> (One BTU raises the temperature of one pound of water by 1°F).</p>
</section>
<div id="sorts"></div>
<div class="clear" style="clear:both"></div>
<div id="container"></div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/d3.v2.min.js"></script>
<script type="text/javascript" src="js/tabletop.js"></script>
<script type="text/javascript" src="js/premade_visualizations.js"></script>
<script type="text/javascript" src="js/spreadsheet_to_d3.js"></script>
<script type="text/javascript" src="js/center_of_path_element.js"></script>
<script type="text/javascript" src="js/dust-full-1.2.3.min.js"></script>
<script type="text/javascript">
//URL to public google spreadsheet
var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?key=0AswaDV9q95oZdHBBN0dvbkY5b2JPbzF0eG1XamIxTVE&output=html';
var options = {
//width of visualization
w : 632,
//height of visualization
h : 400,
//padding within visualization
padding : 20,
// for list view. how many items you want to show at once
max_list_items : 20,
// you probably don't want to use this, it tells everything to scale against the same column
scale_against : 'sizetotal',
// if your column doesn't start with this, it won't get a size button for it
// this is a regular expression, ask for help if you don't know what that means
size_type_signifier : /^size/,
// this array says which visualizations we want
//right now we only have map, force, and list
desired_visualizations : [
'map',
// 'force',
'list',
],
tooltip_template: '<h3>{state}</h3> \
<span>(In billions of BTUs)</span> \
<p>Solar: {commassolar}</p> \
<p>Wind: {commaswind}</p> \
<p>Hydroelectric: {commashydro}</p> \
<p>Geothermal: {commasgeo}</p> \
<p>Total: {commastotal}</p> \
',
// don't fuck with me unless you want a map that isn't the contental US
map_projection : d3.geo.albersUsa(),
// this is the html element we put the buttons
action_container_id : 'sorts',
// this is the id of the html element we put the visualization
vis_container_id : 'container',
};
//loading in the data using tabletop.js
window.onload = function() {
Tabletop.init( {
key: public_spreadsheet_url,
proxy : 'https://s3.amazonaws.com/mj-tabletop-proxy',
callback: function(dataset) {
new SpreadsheetToD3(dataset, options);
},
simpleSheet: true
} )
};
</script>
<p id="source">By Ben Breedlove and Tasneem Raja, Mother Jones. Source: Energy Information Administration.</p>
</div>
</body>
</html>