-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
162 lines (148 loc) · 6.79 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
<!DOCTYPE html>
<html lang="en-us">
<style>
svg text {
font-family: Times, Helvetica, sans-serif;
font-size: 14px;
font-weight: 800;
}
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
/*text-shadow: 0 1px 0 #fff;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 200;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .3;
}
.link.text {
visibility:hidden;
}
.link:hover {
stroke-opacity: .75;
}
#hover_description {
position:absolute;
opacity:0;
padding:8px;
background-color:#dfdfdf;
visibility:hidden;
/*-webkit-transition:visibility 0s 0.1s,opacity 0.1s;*/
transition:visibility 0s 0.1s,opacity 0.1s;
font-size:14px;
}
#hover_description.show {
visibility:visible;
opacity:0.85;
/*-webkit-transition-delay:0s;*/
transition-delay:0s;
}
.node.highlight text, .node.hover text {
font-size:15px;
}
.node.highlight rect, .node.hover rect {
stroke-width:2px;
}
.footer-text {
font-size: 14px;
}
a:link {
text-decoration: none;
background-color: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: blue;
}
a:active {
text-decoration: underline;
color: purple;
}
</style>
<head>
<meta charset="UTF-8">
<title>Berkeley budget vis by bgould132</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<section class="page-header">
<h1 class="project-name">Berkeley budget vis</h1>
<h2 class="project-tagline">Understand the City of Berkeley's budget. Created by <a href="https://bgould132.github.io" style="color:white">Ben Gould</a></h2>
<a href="https://github.com/bgould132/berkeley-budget-vis" class="btn">View on GitHub</a>
<a href="https://www.github.com/bgould132/berkeley-budget-vis/archive/gh-pages.zip" class="btn">Download .zip</a>
<!--<a href="https://github.com/bgould132/berkeley-budget-vis/tarball/master" class="btn">Download .tar.gz</a>-->
</section>
<section class="main-content">
<div id="chart">
<h2>City of Berkeley's Annual Budget</h2>
<p>This diagram depicts the flow of money through the City of Berkeley: from sources of revenue (left) through funds (General and Restricted) into departmental expenses (right).</p>
<p>You can select a fiscal year (2013 through 2017) using the drop-down menu below. (FY 2013 and 2014 are real revenues & expenditures, FY 2015 is approved budget, and FY 2016 and 2017 are proposed budgets).</p>
<p>Mouse over the chart to see specific dollar amounts!</p>
<p><select id="fy"></select></p>
<div id="hover_description"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="sankey.js"></script>
<script src="budgetvis.js"></script>
<script type="text/javascript">
var w = $("#chart").width();
d3.csv("https://bgould132.github.io/berkeley-budget-vis/Budget data/fy2013budget.csv", function(error, data) {
vis(data, w, 630);
});
for (var i = 2013; i < 2018; i++) {
d3.select("#fy").append("option").attr("value", function() {return ("fy" + i);}).text(function() {return ("FY " + i)});
}
$("#fy").change(function () {
d3.csv("https://bgould132.github.io/berkeley-budget-vis/Budget data/" + fy.value + "budget.csv", function(error, data) {
d3.select(".sankeyChart").remove();
vis(data, w, 630);
});
});
</script>
</div>
<section class="footer-text">
<br>
<p>For more information, visit the <a href="http://www.ci.berkeley.ca.us/budget/">City of Berkeley's Budget Office</a>, or <a href="https://www.github.com/bgould132/berkeley-budget-vis/archive/gh-pages.zip">download the budget data</a> for yourself.</p>
<p>Created by <a href="https://bgould132.github.io">Ben Gould</a>. Inspired by <a href="http://openbudgetoakland.org">Open Budget Oakland</a>.</p>
<br>
</section>
<!-- Disqus code -->
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = 'berkeleybudgetvis';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</section>
<!-- Google Analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68947815-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>