forked from datamade/look-at-cook
/
index.html
137 lines (122 loc) · 4.63 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
<!DOCTYPE html>
<html>
<head>
<title>Look at SF</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/print.css" media="print" rel="stylesheet" type="text/css">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 25px;
padding: 2px;
background: #e1e9f2;
border: 0px;
border-radius: 4px;
pointer-events: none;
}
.tooltip-circle {
background-color: #e1e9f2;
opacity: 0.0001;
}
</style>
<!-- javascript libraries -->
<script src="scripts/d3.v3.min.js" defer></script>
<script src="scripts/plot_with_d3.js" defer></script>
</head>
<body>
<div id="page">
<div id="content">
<div id="content-primary">
<span id="breadcrumbs"></span>
<h1>Where's the money going?</h1>
<p>Explore San Francisco's budget from 2004 to 2013 and learn how the money is being spent.</p>
<div id="timeline">
<h2></h2>
<input type="checkbox" checked id="percapita"><label for="percapita">Per-capita</label>
<input type="checkbox" checked id="inflationadjusted"><label for="inflationadjusted">Inflation Adjusted</label>
<div id="totals-chart"></div>
<div id="details-chart"></div>
<div id="population-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 the San Francisco government budgets and spends more than $4 billion and all of its funding comes from you — your sales and property taxes, your purchase fees on gas, and other goods. All of its spending exists to support you too. SF city funding drives the jail, public hospitals and clinics, the courts, and dozens of other civic institutions designed to make our region prosperous, efficient, and fair. Yet, too many residents don't understand what SF's government is or what it does. They keep asking, "Where exactly does our money go?"</p>
</div>
</div>
<!--
<div id="footer">
<ul class="share">
<li><a href="http://www.facebook.com/share.php?u=http%3a%2f%2flookatcook.com"><img alt="Facebook" src="images/facebook-lg.png" /> Share budget on <strong>Facebook</strong></a></li>
<li><a href="http://twitter.com/share?text=Where's%20the%20money%20going%3F%20Explore%20Cook%20County's%20budget&url=http%3a%2f%2flookatcook.com"><img alt="Twitter" src="images/twitter-lg.png" /> Share budget on <strong>Twitter</strong></a></li>
</ul>
</div>
-->
</div>
</body>
</html>