-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.html
95 lines (87 loc) · 5.93 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>School District of Philadelphia: Budget Data Visualizer</title>
<link rel="stylesheet" type="text/css" href="css/sunburst.css">
<meta property="og:title" content="School District of Philadelphia: Budget Data Visualizer"/>
<meta property="og:url" content="http://sdp-budget.poplar.phl.io/sunburst"/>
<meta property="og:site_name" content="Code for Philly"/>
<meta property="og:image" content="http://sdp-budget.poplar.phl.io/sdp_budget_visualizer.png" />
<link rel="image_src" href="http://sdp-budget.poplar.phl.io/sdp_budget_visualizer.png">
<meta property="og:description"content="A web-based visualization of the budget information released on the School District of Philadelphia's Open Data Initiative page." />
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Fjalla One', 'Merriweather']
}
});
</script>
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-K4G748"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K4G748');</script>
<!-- End Google Tag Manager -->
<header id="budget-header" style="visibility: hidden">
<h1 id="headline"></h1>
<div id="share-buttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://schoolbudget.phl.io/" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a>
<!-- Twitter -->
<a href="http://twitter.com/share?url=http://schoolbudget.phl.io/&text=School District of Philadelphia Budget Visualization" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://schoolbudget.phl.io/" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/google.png" alt="Google" /></a>
<!-- Reddit -->
<a href="http://reddit.com/submit?url=http://schoolbudget.phl.io/&title=School District of Philadelphia Budget Visualization" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /></a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://schoolbudget.phl.io/" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /></a>
<!-- Email -->
<a href="mailto:?Subject=School District Budget&Body=School%20District%20Budget%20Visualization%20 http://schoolbudget.phl.io/"><img src="http://www.simplesharebuttons.com/images/somacro/email.png" alt="Email" /></a>
</div>
<form>
<div>
<span class="year-label">Estimated <span id="yearCurrent"></span> budget:</span>
<label><input type="radio" name="fund" value="current.total" checked> Total </label>
<label><input type="radio" name="fund" value="current.operating"> Operating </label>
<label><input type="radio" name="fund" value="current.grant"> Grant </label>
<label><input type="radio" name="fund" value="current.capital"> Capital </label>
<label><input type="radio" name="fund" value="current.other"> Other</label>
</div>
<div>
<span class="year-label">Proposed <span id="yearNext"></span> budget:</span>
<label><input type="radio" name="fund" value="next.total"> Total </label>
<label><input type="radio" name="fund" value="next.operating"> Operating </label>
<label><input type="radio" name="fund" value="next.grant"> Grant </label>
<label><input type="radio" name="fund" value="next.capital"> Capital </label>
<label><input type="radio" name="fund" value="next.other"> Other</label>
</div>
</form>
</header>
<div id="main">
<div id="sequence"><ul class="crumbs"></ul><span class="total"></span></div>
<div id="chart">
<div id="explanation" style="visibility: hidden;">
<div id="percentage"></div>
<div id="total"></div>
<div id="category"></div>
</div>
</div>
<div id="credits">
<p>Created by <a href="https://twitter.com/themightychris" target="_blank">Chris Alfano</a> & <a href="https://twitter.com/laurenancona" target="_blank">Lauren Ancona</a> | a <a href="http://codeforphilly.org/projects/sdp_online_budget_visualization" target="_blank">Code for Philly</a> project</p>
</div>
</div>
<div id="sidebar">
<ul id="legend"></ul>
<p class="note">Note: Undistributed budgetary adjustments and gap closing reductions are distributed for the purposes of this chart. <br><br> Source: <a href="http://webgui.phila.k12.pa.us/offices/o/open-data-initiative">SDP Open Data Initiative</a></p>
</div>
<script src="js/d3.min.js"></script>
<script src="js/sunburst.js"></script>
</body>
</html>