updated sunburst viz to load from static files

CodeForPhilly · Jun 22, 2014 · 3ce2445 · 3ce2445
1 parent f286aca
commit 3ce2445
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/data/budget-tree-normalized.json b/data/budget-tree-normalized.json
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <title>School District of Philadelphia: Budget Data Visualizer</title>
-        {cssmin "sunburst.css"}
+        <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"/>
@@ -20,7 +20,6 @@
         </script>
     </head>
     <body>
-        {literal}
         <!-- 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>
@@ -30,25 +29,25 @@
             '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
             })(window,document,'script','dataLayer','GTM-K4G748');</script>
         <!-- End Google Tag Manager -->
-        {/literal}
+
         <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>
@@ -60,8 +59,8 @@ <h1 id="headline"></h1>
                     <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>    
+                </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>
@@ -86,12 +85,11 @@ <h1 id="headline"></h1>
             </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="{Site::getVersionedRootUrl('js/d3.min.js')}"></script>
-        {jsmin "sunburst.js"}
-
+        <script src="js/d3.min.js"></script>
+        <script src="js/sunburst.js"></script>
     </body>
 </html>
diff --git a/js/sunburst.js b/js/sunburst.js
@@ -9,7 +9,7 @@ var colors = {
     'F21003': '#163033',    // School Budgets including Non-District Operated Schools
     'F31330': '#ADBF00',    // L_ District Operated Schools - Instructional
     'F41035': '#CFE600',    //    L_ Elementary K-8 Education
-    'F41063': '#DAEA46',    //    L_ Secondary Education    
+    'F41063': '#DAEA46',    //    L_ Secondary Education
     'F31350': '#BFD400',    // L_ District Operated Schools - Instructional Support
     'F31360': '#738000',    // L_ District Operated Schools - Pupil - Family Support
     'F31620': '#3A4000',    // L_ District Operated Schools - Operational Support
@@ -45,19 +45,19 @@ var arc = d3.svg.arc()
     .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
 
 // Main function to draw and set up the visualization, once we have the data.
-d3.json("/api/budget-tree.json?normalized=1", function(error, root) {
+d3.json("data/budget-tree-normalized.json", function(error, root) {
     yearCurrent = root.yearCurrent;
     yearNext = root.yearNext;
 
     d3.select('#headline')
         .text(root.name);
-        
+
     d3.select('#yearCurrent')
         .text(yearCurrent);
-        
+
     d3.select('#yearNext')
         .text(yearNext);
-        
+
     d3.select('#budget-header')
         .style('visibility', '');
 
@@ -190,13 +190,13 @@ function mouseleave(d) {
 // the entire budget
 function setRootExplanation() {
     var title;
-    
+
     if (selectedYear == 'current') {
         title = 'Estimated ' + yearCurrent;
     } else {
         title = 'Proposed ' + yearNext;
     }
-    
+
     title += ' budget &mdash; ' + selectedFund + ' funds.';
 
     d3.select("#percentage")
@@ -227,7 +227,7 @@ function updateBreadcrumbs(nodeArray, percentageString, totalString) {
         crumbs = crumbsList.selectAll('li'),
         crumbsLen = crumbs.size(),
         i = 0, nodesLen = nodeArray.length, node;
-    
+
     for (; i < nodesLen; i++) {
         node = nodeArray[i];
         if (i < crumbsLen) {
@@ -239,7 +239,7 @@ function updateBreadcrumbs(nodeArray, percentageString, totalString) {
             crumbsList.append('li').text(node.name);
         }
     }
-    
+
     while (i < crumbsLen) {
         d3.select(crumbs[0][i++]).style("display", "none");
     }
@@ -259,7 +259,7 @@ function drawLegend(path) {
             legendLabels[d.code] = d.name;
         }
     });
-    
+
     d3.select('#legend')
         .selectAll('li')
         .data(d3.entries(legendLabels))
@@ -298,7 +298,7 @@ function arcTween(a) {
     };
 }
 
-// Add thousands separators 
+// Add thousands separators
 function numberWithCommas(n) {
     var parts=n.toString().split(".");
     return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");