-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
176 lines (134 loc) · 8.18 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>
<head>
<meta charset="utf-8">
<!-- Enhanced Display on Mobile Devices -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Font Icons via http://fortawesome.github.io/Font-Awesome/ -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/ico" href="/favicon.ico"/>
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="stylesheets/sitestyles.css">
<link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>
<div class="wrapper">
</div>
<header class="site-width">
<nav>
<div id="banner">
<a href="/" class="logo" title="Home">
<img src="code-island-no-logo.svg" class="svg" width="77.5" height="58.0">
<!-- SVG Fallback to PNG -->
<!--[if lt IE 9]>
<img src="/images/logos/code-island-no-logo@2x.png" class="png" />
<style> .svg { display: none } </style>
<![endif]-->
</a>
<a href="#" id="links-trigger" class="text-right"><i class="fa fa-2x fa-bars"></i></a>
</div>
<div id="links">
<a href="/about/" title="About">About</a>
<a href="/projects/" title="Projects">Projects</a>
<a href="http://code-island.org/members/" title="Join">Join</a>
<a href="/blog/" title="Blog">Blog</a>
<a href="/resources/" title="Resources">Resources</a>
<div id="social">
<a href="https://github.com/codeisland/" target="_blank" title="Code Island on Github"><i class="fa fa-lg fa-github"></i></a>
<a href="http://www.twitter.com/code_island" target="_blank" title="Code Island on Twitter"><i class="fa fa-lg fa-twitter"></i></a>
<a href="https://www.facebook.com/codeislandbrigade" target="_blank" title="Code Island on Facebook"><i class="fa fa-lg fa-facebook"></i></a>
<a href="https://plus.google.com/u/0/communities/112228497378493874687" target="_blank" title="Code Island on Google+"><i class="fa fa-lg fa-google-plus"></i></a>
<a href="mailto:info@code-island.org" title="Email Code Island"><i class="fa fa-lg fa-envelope"></i></a>
</div>
</div>
</nav>
</header>
<div class="row">
<!--[if IE 6]>
<p>This interactive graphic requires a browser with SVG support, such as <a href="http://www.google.com/chrome">Chrome</a>, <a href="http://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="http://www.apple.com/safari/download/">Safari</a> or the latest <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9 or higher</a>. </p>
<![endif]-->
<!--[if IE 7]>
<p>This interactive graphic requires a browser with SVG support, such as <a href="http://www.google.com/chrome">Chrome</a>, <a href="http://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="http://www.apple.com/safari/download/">Safari</a> or the latest <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9 or higher</a>. </p>
<![endif]-->
<!--[if IE 8]>
<p>This interactive graphic requires a browser with SVG support, such as <a href="http://www.google.com/chrome">Chrome</a>, <a href="http://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="http://www.apple.com/safari/download/">Safari</a> or the latest <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9 or higher</a>. </p>
<![endif]-->
<div class="graph-content"><h3 class="subheader">Rhode Island State Budget- <br class="rwd-break"/>2015 Adopted Revenues & Spending</h4>
<p>
We created this visualization to make transparent and give shape to Rhode Island's 2015 budget. Hover over to see where Rhode Island tax revenue originated and how it gets spent. Each column represents one stage of lawmakers' process for allocating the $9,894,362,162 budget.
</p>
<p>
Note: Column height is determined by the number of categories, not by dollar amount. While each block size represents its respective value, space is added in between all the blocks to make even the smallest funds visible.
</p>
<p class="directions">Scroll right to see more → <p>
</div>
<div id="sankey">
<p id="chart"></p>
</div>
<div class="graph-content">
<p>
Have an opinion? Share it on Twitter<br/>
#ribudget
</p>
</div>
<div class="graph-content">
<a class="twitter-timeline" href="https://twitter.com/hashtag/ribudget"
data-widget-id="568808920857444352"
>
#ribudget Tweets
</a>
</div>
<h5 class="graph-info">Sources:
<p>
A budget visualization project by <a href="http://code-island.org">Code Island</a><br>
Rhode Island’s <a href="http://www.codeforamerica.org/brigade/about">Code for America Brigade</a>
</p>
<p>
Sankey Diagram created by <a href="http://jamesrhaley.github.io/me/">James Haley</a>.
<br>Data prepared By <a href="https://plus.google.com/+NelsonRocha72/posts">Nelson Rocha</a>.
<br>Contribute to the project on <a href="https://github.com/codeisland/RI-Budget-Sankey"><i class="fa fa-lg fa-github"></i> GitHub</a>.
</p>
<p>
Data supplied by Office of Management and Budget.
<br/>More information can be found on the States
<br/> <a href="http://www.ri.gov/opengovernment/">Open Government Portal</a> and <a href="http://www.transparency.ri.gov/">Transparency Portal</a>
</p>
</h5>
<footer class="footer">
<div>
<img src="/images/flag-white-red.png" alt="Code for America Flag">
</div>
</footer>
</div>
<script src="./js/d3modifiedmin.js" charset="utf-8"></script>
<script src="./js/theTip.js"></script>
<script src="./js/new_sankey.js"></script>
<!-- MUST PLACE THESE SCRIPTS JUST BEFORE THE CLOSING TAG </body> OF YOUR DOCUMENT ! -->
<!-- JS Polyfill for classList (to help responsive menu trigger) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<!-- Responsive Menu Trigger -->
<script type="text/javascript">
document.getElementById('links-trigger').onclick = function() { // Find element with id 'links-trigger', and perform function on click...
var links = document.querySelector('#links'); // Find element with id 'links'
links.classList.toggle('show'); // Toggle 'show' class
}
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<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-29478118-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>