Skip to content

Instantly share code, notes, and snippets.

@mattmawhinney

mattmawhinney/gist:2ecb5ae851ac9dbef5ce

Created September 2, 2014 00:07
Show Gist options
  • Save mattmawhinney/2ecb5ae851ac9dbef5ce to your computer and use it in GitHub Desktop.
Save mattmawhinney/2ecb5ae851ac9dbef5ce to your computer and use it in GitHub Desktop.
Download ZIP
Revenue Doughnuts
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Miami-Dade Budget Visualization</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
<!-- custom style for doughnuts -->
<style>
#canvas-holder{
width:30%;
}
#canvas-holder2{
width:30%;
position:relative;
}
#canvas-holder3{
width:30%;
position:relative;
}
canvas {
display: inline-block;
}
</style>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Miami-Dade Budget Visualizations</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">About</a></li>
<li><a href="http://www.miamidade.gov/budget/">Learn more</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="index.html">Overview</a></li>
<li ><a href="doughnuts.html">Spending - Doughnuts</a></li>
<li><a href="bars.html">Spending - Bars</a></li>
<li class="active"><a href="revenue-doughnuts.html">Revenue</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">All</a></li>
<li><a href="">Operating Expenses Only</a></li>
<li><a href="">Capital Expenses Only</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Visual Aids</h1>
<!-- put 'em here -->
<div class='row placeholders'>
<div id="canvas-holder" class='col-sm-3 col-md-2'>
<canvas id="operating-chart" width="500" height="500"></canvas>
<h4>Operating Revenue by Source</h4>
</div>
<br>
<p class="spacer"></p>
</div> <!--row placeholders -->
<div class="row">
<h2 class="sub-header">Broken Down</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Revenue Source</th>
<th>Percent of Total</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<td><em>Total</em></td>
<td></td>
<td><em>$4,545,140,000</em> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Proprietary</td>
<td>46%</td>
<td>$2,078,790,000</td>
</tr>
<tr>
<td>Federal and State Grants</td>
<td>7%</td>
<td>$335,772,000</td>
</tr>
<tr>
<td>Property Tax</td>
<td>30%</td>
<td>$1,363,193,000</td>
</tr>
<tr>
<td>Sales Tax </td>
<td> 8%</td>
<td>$363,330,000</td>
</tr>
<tr>
<td>Gas Tax</td>
<td>1%</td>
<td>$61,020,000</td>
</tr>
<tr>
<td>Misc. State Revenues</td>
<td>2%</td>
<td>$88,562,000</td>
</tr>
<tr>
<td>Other Misc.</td>
<td>6%</td>
<td>$254,473,000</td>
</tr>
</tbody>
</table>
</div>
</div><!--row -->
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<script src="../Chart.js"></script>
<script src='revenue-doughnut-data.js'></script>
<script>
window.onload = function(){
var ctx = document.getElementById("operating-chart").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(operatingData, {responsive : true});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment