forked from datamade/look-at-cook
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
176 lines (146 loc) · 8.13 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<title>Look @ Asheville</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link href="styles/master.css" rel="stylesheet" type="text/css" />
<link href="styles/openAsheville.css" rel="stylesheet" type="text/css" />
<link href="styles/print.css" media="print" rel="stylesheet" type="text/css" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href='http://fonts.googleapis.com/css?family=Cabin:600' rel='stylesheet' type='text/css'>
<!-- javascript libraries -->
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/highcharts.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="scripts/dataTables.sorting.js" type="text/javascript"></script>
<script src="scripts/jquery.formatCurrency-1.4.0.min.js" type="text/javascript"></script>
<script src="scripts/jquery.address-1.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cookie.js" type="text/javascript"></script>
<!-- custom javascript -->
<script src="scripts/budget_helpers.js?2" type="text/javascript"></script>
<script src="scripts/budget_queries.js?2" type="text/javascript"></script>
<script src="scripts/budget_highcharts.js?2" type="text/javascript"></script>
<script src="scripts/budget_lib.js?4" type="text/javascript"></script>
<script src="scripts/analytics_lib.js" type="text/javascript"></script>
<script type="text/javascript">
$.address.crawlable(true);
//every action is handled by jQuery Address, which detects when the URL has changed
$.address.externalChange(function(event) {
BudgetLib.updateDisplay($.address.parameter('viewMode'), $.address.parameter('year'), $.address.parameter('fund'), $.address.parameter('controlOfficer'), true);
});
$.address.internalChange(function(event) {
BudgetLib.updateDisplay($.address.parameter('viewMode'), $.address.parameter('year'), $.address.parameter('fund'), $.address.parameter('controlOfficer'), false);
});
//cookies for first time visitors
$(function() {
$("body").bind("click", function(e){
$.cookie("budgetbreakdownreadme", "read", { expires: 7 });
$("#readme").fadeOut("fast");
});
if ($.cookie("budgetbreakdownreadme") != "read") {
$("#readme").fadeIn("fast");
}
});
</script>
<!--facebook junk-->
<meta property="og:title" content="Look at Asheville" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://codeforasheville.github.com/look-at-asheville/" />
<meta property="og:image" content="http://codeforeasheville.github.com/look-at-asheville/images/logo.png" />
<meta property="og:site_name" content="Look at Asheville" />
<meta property="fb:admins" content="1004801504" />
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- end facebook junk-->
</head>
<body>
<div id="page">
<div id="header">
<h2>Look @ Asheville</h2>
<div id="header-secondary">
<p><img src="./images/logo.png" alt="code for asheville logo" /></p>
<p id="credit">A project by <a href="http://codeforasheville.github.com">Code for Asheville</a></p>
</div>
<div class="clear"></div>
</div>
<div id="content">
<div id="content-primary">
<span id="breadcrumbs"></span>
<h1>Where's the money going?</h1>
<p>Explore Asheville's budget data from 2007 to 2012 and learn how the money is being spent. The 'spent' portion of the graph drops off for 2012 because that budget data has not yet been published. <a onclick="window.scrollTo(0, document.body.scrollHeight);">Read more</a></p>
<div id="timeline">
<h2></h2>
<div id="timeline-chart"></div>
<div id="readme"><img alt="Click points to see annual budgets below" src="images/readme.png" /></div>
</div>
<div id="breakdown-nav">
<ul></ul>
<div class="clear"></div>
</div>
<table id="scorecard">
<tbody>
<tr>
<td id="scorecard-desc">
<h2 id="secondary-title"></h2>
<p></p>
</td>
<td>
<h2 class="budgeted"></h2>
<p id='budgeted-percent'></p>
</td>
<td>
<h2 class="spent"></h2>
<p id='spent-percent'></p>
</td>
</tr>
</table>
<table id="breakdown">
<thead>
<tr>
<th id='breakdown-item-title'><span id="secondary-title">Fund</span></th>
<th class="num"><span>Budgeted</span></th>
<th class="num"><span>Spent</span></th>
<th class="charts">Budgeted vs. spent</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="footnotes">
<ul>
<li id="f-officers">* These budgets are controlled by the officers and offices listed even though not all expenses are incurred by the respective control officer.</li>
<li id="f-zero2011"><sup class="ref">†</sup> At the end of the current fiscal year, an audit will be conducted and a report issued with the final expenditures for each department. <a href="faq.html#q3">Learn more</a></li>
</ul>
</div>
</div>
<div id="content-secondary">
<h2>Where's the money going?</h2>
<p>Every year Asheville City government budgets and spends more than $130 million. The City's budget impacts our lives every day. All of its funding comes from you—your sales and property taxes, and other goods. All of its spending exists to support you too. City funding drives the dozens of other civic institutions and services designed to make our region prosperous, efficient, and fair. Yet, too many residents don't understand what Asheville City government is or what it does. They keep asking, "Where exactly does our money go?"</p>
<p>This budget transparency tool was created to answer that question, but it's only the first step. We need your help. What questions do you have about City spending? What do you want to know about the City budget that this visualization isn't explaining? What do you think of city spending? What can we do as citizens to make Asheville City government better? Check out the <a href="faq.html">FAQ</a> for more information.</p>
</div>
<div id="content-tertiary">
<a id="download-button" class="action" href="https://www.google.com/fusiontables/DataSource?docid=1UdOEze52V-skslSrkvUoJqYK9DIZNWcHUZiIdHA">View & download data</a>
All the data for this project is freely available to download or explore on Google Fusion Tables.
</div>
</div>
<div id="footer">
<ul class="share">
<div class="fb-like" data-href="http://codeforasheville.github.com/look-at-asheville/" data-send="false" data-width="450" data-show-faces="true" data-font="arial" data-colorscheme="dark"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-text="A simple and clear visualization of the City of Asheville's budget. #code4avl #avlgov">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</ul>
<p class="mute attribution"><span>Based on <a href="http://lookatcook.com/" target="_blank">Look at Cook</a> by
<a href="http://derekeder.com/" target="_blank">Derek Eder</a> or
<a href="http://c82.net/" target="_blank">Nick Rougeux</a> at
<a href="http://opencityapps.org/" target="_blank">Open City</a>. </span></p>
</div>
</div>
</body>
</html>