Donors Choose Using Python and DC.js

<!DOCTYPE html>
<html>

<title>Donors Choose Dashboard</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.css" />

.tooltip {
		    top: 100px;
		    left: 100px;
		    -moz-border-radius: 5px;
		    border-radius: 5px;
		    border: 2px solid #000;
		    background: #fff;
		    opacity: .9;
		    color: black;
		    padding: 10px;
		    width: 375px;
		    font-size: 1.6em;
		    line-height: 28pt;
		    /*font-weight: lighter;*/
		    /*visibility: visible;*/
		}
		
		table.table {
			display: table;
			width: 100%;
		}
		
		table.table thead,
		table.table tbody {
			float: left;
			width: 100%;
		}
		
		table.table tbody {
			overflow: auto;
			height: 350px;
		}
		
		table.table tr {
			width: 100%;
			display: table;
			text-align: left;
		}
		
		table.table th,
		table.table td {
			width: 20%;
		}
		
		.filter-count,
		.total-count,
		.number-display,
		#dateHeader {
			color: #3182bd;
			font-weight: bold;
			font-size: 24px;
		}
		
		/*
		 * Full-page application style
		 */
		
		body.application,
		.keen-dashboard {
		  background: #f2f2f2;
		  padding: 20px 20px 0px;
		}
		
		body.application > .container-fluid,
		.keen-dashboard > .container-fluid {
		  margin: 0px 0px 32px;
		  margin: 0px 0px 2rem;
		  padding-left: 0px;
		  padding-right: 0px;
		}
		
		body.application div[class^="col-"],
		.keen-dashboard div[class^="col-"] {
		  padding-left: 5px;
		  padding-right: 5px;
		}
		
		body.application div[class^="col-"] div[class^="col-"],
		.keen-dashboard div[class^="col-"] div[class^="col-"] {
		  padding-left: 15px;
		  padding-right: 15px;
		}
		
		body.application hr,
		.keen-dashboard hr {
		  border-color: #d7d7d7;
		  margin: 10px 0px;
		}
		
		body.application .navbar-inverse,
		.keen-dashboard .navbar-inverse {
		  /*background-color: #3d4a57;*/
		  border-color: #333;
		}
		
		body.application .navbar-inverse .navbar-nav > li > a,
		body.application .navbar .navbar-brand,
		.keen-dashboard .navbar-inverse .navbar-nav > li > a,
		.keen-dashboard .navbar .navbar-brand {
		  color: #fbfbfb;
		  text-decoration: none;
		}
		
		body.application .main-nav > li > a:hover,
		.keen-dashboard .main-nav > li > a:hover {
		  border-bottom: 2px solid transparent;
		  -webkit-transition: border 300ms ease;
		  -o-transition: border 300ms ease;
		  transition: border 300ms ease;
		  border-bottom-color: white;
		}
		
		body.application .return-link,
		body.application .return-link:focus,
		body.application .return-link:hover,
		.keen-dashboard .return-link,
		.keen-dashboard .return-link:focus,
		.keen-dashboard .return-link:hover {
		  text-decoration: none;
		}
		
		
		.chart-wrapper {
		  background: #fff;
		  border: 1px solid #e2e2e2;
		  border-radius: 3px;
		  margin-bottom: 10px;
		}
		.chart-wrapper .chart-title {
		  border-bottom: 1px solid #d7d7d7;
		  color: #666;
		  font-size: 14px;
		  font-weight: 200;
		  padding: 7px 10px 4px;
		}
		
		.chart-wrapper .chart-stage {
		  overflow: hidden;
		  padding: 5px 10px;
		  position: relative;
		}
		
		.chart-wrapper .chart-notes {
		  background: #fbfbfb;
		  border-top: 1px solid #e2e2e2;
		  color: #808080;
		  font-size: 12px;
		  padding: 8px 10px 5px;
		}
		.navbar-inverse {
			background-color: #3182bd;
		}
		
		.dc-chart .selected path {
			stroke-width: 1;
		}
		
		.col-sm-2,
		.col-sm-3,
		.col-sm-4,
		.col-sm-6,
		.col-sm-8,
		.col-sm-9,
		.col-sm-12 {
			/*border: solid;*/
		}
	</style>
</head>

<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="../">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				<a class="navbar-brand" href="./">Donors Choose Dashboard</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-left">
					<li><a href="https://www.donorschoose.org/">Home</a></li>
					<li><a href="https://data.donorschoose.org/open-data/overview/">Source</a></li>
				</ul>
			</div>
		</div>
	</div>

<div class="container-fluid">
		
		<div class="row" style="padding-top:50px;padding-bottom:10px">
			<div class="col-sm-1">
				<div class="tool radius">
					<h5 class="text-uppercase">Fiscal Year</h5>
					<select class="form-control" id="fiscalYears"></select>
				</div>
			</div>
			<div class="col-sm-1"></div>
			<div class="col-sm-4">
				<div class="tool radius">
					<h5 class="text-uppercase">Data as of</h5>
					<div class="dc-chart">
						<span id="dateHeader"></span>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="tool radius">
					<h5 class="text-uppercase">Total Donations ($)</h5>
					<div class="dc-chart" id="net-donations"></div>
					
				</div>
			</div>
			<div class="col-sm-3">
				<div class="tool radius">
					<h5 class="text-uppercase">Selected Records</h5>
					<div class="dc-chart" id="data-count">
						<span class="filter-count"></span> selected out of
						<span class="total-count"></span> records
						<span>
							<a href='javascript:dc.filterAll();dc.redrawAll();'><font class="text-uppercase" color="#3182bd">Reset All</font></a>
						</span>
					</div>
					
				</div>
			</div>
		</div>

<div class="row">
			
			<div class="col-sm-9">
				
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>By Program</span>
					</div>
					
					<div class="chart-stage">
						<div id="chart-bubble-amount" class="dc-chart">
							<div>selected: <span class="filter"></span>
								<a class="reset" href="javascript:programBubble.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					
					<div class="chart-notes"></div>
					
				</div>
				
			</div>

<div class="col-sm-3">
				
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>By Status</span>
					</div>
					
					<div class="chart-stage">
						<div id="chart-ring-status" class="dc-chart">
							<div>selected: <span class="filter"></span>
								<a class="reset" href="javascript:statusRingChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					
					<div class="chart-notes"></div>
					
				</div>
				
			</div>
			
		</div>

<div class="row">
			
			<div class="col-sm-6">
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>By Resources Needed</span>
					</div>
					<div class="chart-stage">
						<div id="chart-bar-resources" class="dc-chart">
							<div>selected: <span class="filter"></span>
								<a class="reset" href="javascript:resourcesBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
			
			
			<div class="col-sm-6">
				<div class="chart-wrapper">
					<div class="chart-title">
						<span>By Poverty Level</span>
					</div>
					<div class="chart-stage">
						<div id="chart-bar-poverty" class="dc-chart">
							<div>selected: <span class="filter"></span>
								<a class="reset" href="javascript:povBarChart.filterAll();dc.redrawAll();" style="display:none;">reset</a>
							</div>
						</div>
						
					</div>
					<div class="chart-notes"></div>
				
				</div>
			</div>
		</div>

<div class="row">
			<div class="col-sm-12">
				<div class="chart-wrapper">
					<div class="chart-title">Source Data</div>
					<div class="chart-stage">
						<table class="table table-striped table-hover" id="data-table"></table>
					</div>
					<div class="chart-notes"></div>
				</div>
			</div>
		</div>

</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="https://d3js.org/d3-queue.v3.min.js" charset="utf-8"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js"></script>
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
	
	<script type="text/javascript">
		"use strict";
		    
		var fiscalYear = 2016; // default fiscal year in the selection drop down
		
		// dc.js chart types
		var netCommitments = dc.numberDisplay("#net-donations"),
		    resourcesBarChart = dc.barChart("#chart-bar-resources"),
		    programBubble = dc.bubbleChart("#chart-bubble-amount"),    
		    statusRingChart = dc.pieChart('#chart-ring-status'),
		    povBarChart = dc.barChart("#chart-bar-poverty"),
		    dataCount = dc.dataCount('#data-count'),
		    dataTable = dc.dataTable('#data-table');
		
		// dimensions for the charts
		var height = 250,
		    width = height * 7/4;
		
		// tick label and tooltip formats
		var sFormat = d3.format("s"),
		    dFormat = d3.format("d"),
		    currFormat = d3.format("$,.0f");
		    
		// drop down selection
		var selector = d3.select("#fiscalYears");
		
		// tooptip
		var tooltip = d3.select("body")
		    .append("div")
		    .style({
		        "position": "absolute",
		        "z-index": "10",
		        "visibility": "hidden"
		    })
		    .attr({
		        "class": "tooltip introCopy"
		    });
		
		// if this JavaScript source file resides on a SharePoint server
		// the function will return an endpoint Url pointing to a specified SharePoint list
		// if not, the endpoint will point to a json file
		function getData() {
		
		    var url = "https://gist.githubusercontent.com/tonmcg/a7f77ff663c9f77a4cda149f2b06ad9f/raw/11c78b4d6894c6d9d1f3f29552197c372780211d/donorsChoose.csv";
		    var endpoint = d3.csv(url);
		
		    // Get the data
		    d3.queue()
		        .defer(endpoint.get)
		        .await(createViz);
		        
		}
		
		function createViz(error, data) {
		    
		    var dataSet = data;
		    
		    // set crossfilter
		    var ndx = crossfilter(dataSet);
		    
		    // define dimensions
		    var fiscalYearDim = ndx.dimension(function(d) { return +d.FiscalYear; }),
		        programDim = ndx.dimension(function(d) { return d.Program; }),
		        povDim = ndx.dimension(function(d) { return d.poverty_level; }),
		        resourceDim = ndx.dimension(function(d) { return d.resource_type; }),
		        statusDim = ndx.dimension(function(d) { return d.FundingStatus; }),
		        idDim = ndx.dimension(function(d) { return d.ID; });
		        
		    // group dimensions
		    var all = ndx.groupAll(),
		        povApplied = povDim.group().reduceSum(function(d) { if (d.Program == 'Applied Learning') { return d.TotalCommitment; } else { return 0; }}),
		        povHealth = povDim.group().reduceSum(function(d) { if (d.Program == 'Health & Sports') { return d.TotalCommitment; } else { return 0; }}),
		        povMath = povDim.group().reduceSum(function(d) { if (d.Program == 'Math & Science') { return d.TotalCommitment; } else { return 0; }}),
		        povMusic = povDim.group().reduceSum(function(d) { if (d.Program == 'Music & The Arts') { return d.TotalCommitment; } else { return 0; }}),
		        povLiteracy = povDim.group().reduceSum(function(d) { if (d.Program == 'Literacy & Language') { return d.TotalCommitment; } else { return 0; }}),
		        povCivics = povDim.group().reduceSum(function(d) { if (d.Program == 'History & Civics') { return d.TotalCommitment; } else { return 0; }}),
		        povSpecial = povDim.group().reduceSum(function(d) { if (d.Program == 'Special Needs') { return d.TotalCommitment; } else { return 0; }}),
		        amountByProgram = programDim.group().reduce(
		                function (p, v) {
		                    p.amount += +v.TotalCommitment;
		                    p.count += 1;
		                    return p;
		                },
		                function (p, v) {
		                    p.amount -= +v.TotalCommitment;
		                    p.count -= 1;
		                    return p;
		                },
		                function () {
		                    return {amount: 0, count: 0};
		                }),
		        resourceApplied = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Applied Learning') { return d.TotalCommitment; } else { return 0; }}),
		        resourceHealth = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Health & Sports') { return d.TotalCommitment; } else { return 0; }}),
		        resourceMath = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Math & Science') { return d.TotalCommitment; } else { return 0; }}),
		        resourceMusic = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Music & The Arts') { return d.TotalCommitment; } else { return 0; }}),
		        resourceLiteracy = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Literacy & Language') { return d.TotalCommitment; } else { return 0; }}),
		        resourceCivics = resourceDim.group().reduceSum(function(d) { if (d.Program == 'History & Civics') { return d.TotalCommitment; } else { return 0; }}),
		        resourceSpecial = resourceDim.group().reduceSum(function(d) { if (d.Program == 'Special Needs') { return d.TotalCommitment; } else { return 0; }}),
		        amountByStatus = statusDim.group().reduceSum(function(d) { return d.TotalCommitment; }),
		        totalAmount = ndx.groupAll().reduceSum(function(d) { return d.TotalCommitment; });
		
		    var fiscalYears = fiscalYearDim.group().top(Infinity).map(function(d) { return d.key; }).sort(function(a, b) { return a - b; });
		    var programs = programDim.group().top(Infinity).map(function(d) { return d.key; });
		    var povLevels = povDim.group().top(Infinity).map(function(d) { return d.key; });
		    var resources = resourceDim.group().top(Infinity).map(function(d) { return d.key; });
		    
		    var r_domain = d3.extent(programDim.group().top(Infinity).map(function(d) { return d.value; }));
		        // max = d3.max(programDim.group().top(Infinity).map(function(d) { return d.value; }));
		
		    var resources_domain = d3.extent(resourceDim.group().top(Infinity).map(function(d) { return d.value; }));
		
		    // append option values to fiscal year select input
		    selector.selectAll("option")
		        .data(fiscalYears)
		        .enter()
		        .append("option")
		        .attr("value", function(d) {
		            return d;
		        })
		        .text(function(d) {
		            return d;
		        });
		
		    // set default fiscal year
		    // define on change event
		    selector.property("value", fiscalYear).on("change", function() { fiscalYearDim.filter(this.value); dc.redrawAll(); });
		        
		    // charts
		    netCommitments
				.formatNumber(dFormat)
				.valueAccessor(function(d){ return d; })
				.group(totalAmount)
				.formatNumber(d3.format(".3s"));
		
		    programBubble
		        .width(width * 2.75)
		        .height(height * 1.25)
		        .dimension(programDim)
		        .group(amountByProgram)
		        .keyAccessor(function(p) {
		            return p.value.amount;
		        })
		        .valueAccessor(function(p) {
		            return p.value.count;
		        })
		        .radiusValueAccessor(function(p) {
		            return p.value.count;
		        })
		        .x(d3.scale.linear().domain([0, 10000]))
		        .r(d3.scale.linear().domain(r_domain))
		        .minRadiusWithLabel(15)
		        .elasticY(true)
		        .yAxisPadding(400)
		        .elasticX(true)
		        .xAxisPadding(400)
		        .margins({
		            top: 10,
		            right: 50,
		            bottom: 50,
		            left: 50
		        })
		        .maxBubbleRelativeSize(0.04)
		        .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		        .renderHorizontalGridLines(true)
		        .renderVerticalGridLines(true)
		        .renderLabel(true)
		        .renderTitle(false)
		        .xAxisLabel("Amount ($)")
		        .yAxisLabel("# of Donations")
		        .transitionDuration(1000)
		        .xAxis().tickFormat(sFormat)
		        ;
		
		    statusRingChart
		        .width(width)
		        .height(height * 1.25)
		        .radius(height/2)
		        .dimension(statusDim)
		        .group(amountByStatus)
		        .legend(dc.legend().x(width/2.5).y(height/2).itemHeight(18).gap(6))
		        .renderLabel(false)
		        .innerRadius(85)
		        .transitionDuration(500)
		        ;
		        
		        console.log(resources_domain)
		
		    resourcesBarChart
		        .width(width * 1.80)
		        .height(height)
		        .dimension(resourceDim)
		        .group(resourceApplied, "Applied Learning")
		        .stack(resourceHealth, "Health & Sports")
		        .stack(resourceCivics, "History & Civics")
		        .stack(resourceLiteracy, "Literacy & Language")
		        .stack(resourceMath, "Math & Science")
		        .stack(resourceMusic, "Music & The Arts")
		        .stack(resourceSpecial, "Special Needs")
		        .x(d3.scale.ordinal().domain(resources))
		        .y(d3.scale.linear().domain(resources_domain))
		        .elasticX(false)
		        .xUnits(dc.units.ordinal)
		        .barPadding(0.15)
		        .legend(dc.legend().x(width * 1.8 - 130).y(25).itemHeight(18).gap(6))
		        .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		        .margins({
		            top: 25,
		            right: 135,
		            bottom: 35,
		            left: 50
		        })
		        .renderLabel(false)
		        .renderTitle(false)
		        .renderHorizontalGridLines(true)
		        .elasticY(true)
		        .yAxisLabel("Amount ($)")
		        .yAxis().tickFormat(sFormat)
		        ;
		        
		        resourcesBarChart
		            .on("preRedraw", function(chart){
		                
		                //Remove old values (if found)
		                // chart.selectAll('.barLabel').remove();
		                
		                })
		            .on('renderlet', function(chart) {
		                chart.selectAll('.barLabel').text(function(d) {
		                    console.log(currFormat(d.y0));
		                    return currFormat(d.y0); 
		                });
		            })
		        ;
		        
		    povBarChart
		        .width(width * 1.8)
		        .height(height)
		        .dimension(povDim)
		        .group(povApplied, "Applied Learning")
		        .stack(povHealth, "Health & Sports")
		        .stack(povCivics, "History & Civics")
		        .stack(povLiteracy, "Literacy & Language")
		        .stack(povMath, "Math & Science")
		        .stack(povMusic, "Music & The Arts")
		        .stack(povSpecial, "Special Needs")
		        .x(d3.scale.ordinal().domain(povLevels))
		        .elasticX(false)
		        .xUnits(dc.units.ordinal)
		        .barPadding(0.15)
		        .legend(dc.legend().x(width * 1.8 - 130).y(25).itemHeight(18).gap(6))
		        .ordinalColors(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b"])
		        .margins({
		            top: 25,
		            right: 135,
		            bottom: 35,
		            left: 50
		        })
		        .renderLabel(false)
		        .renderTitle(false)
		        .renderHorizontalGridLines(true)
		        .elasticY(true)
		        .yAxisLabel("Amount ($)")
		        .yAxis().tickFormat(sFormat)
		        ;
		
		    dataCount
		        .dimension(ndx)
		        .group(all);
		
		    dataTable
		        .dimension(idDim)
		        .group(function(d) {
		            return d;
		        })
		        .columns([{
		                label: 'Program',
		                format: function(d) {
		                    return d.Program;
		                }
		            }, {
		                label: 'Funding Status',
		                format: function(d) {
		                    return d.FundingStatus;
		                }
		            }, {
		                label: 'Poverty Level',
		                format: function(d) {
		                    return d.poverty_level;
		                }
		            }, {
		                label: 'Resources Needed',
		                format: function(d) {
		                    return d.resource_type;
		                }
		            }, {
		                label: 'Total Amount',
		                format: function(d) {
		                    return currFormat(d.TotalCommitment);
		                }
		            },
		        ])
		        .size(1500)
		        .on('renderlet', function() {
		            dataTable.select('tr.dc-table-group').remove(); // remove unneccesary row dc.js adds beneath the header)
		        });
		
		    fiscalYearDim.filter(fiscalYear);
		    dc.renderAll();
		    
		    // Change the date header to reflect the date and time of the data
		    d3.select('#dateHeader').text(moment().format('LLLL'));
		        
		    // format bar charts' x-axis and rotate labels 45 degrees
		    // d3.selectAll('#chart-bar-resources g.x.axis text').attr({"transform":"rotate(45)","y":9,"x":0,"dy":".35em"}).style({"text-anchor":"start","cursor":"pointer"});
		    // d3.selectAll('#chart-bar-poverty g.x.axis text').attr({"transform":"rotate(45)","y":9,"x":0,"dy":".35em"}).style({"text-anchor":"start","cursor":"pointer"});
		
		    // // define mouseover and mouseout events
		    d3.selectAll("#chart-bar-resources g rect").on("mouseover", showResourceDetail).on("mouseout", hideDetail);
		    d3.selectAll("#chart-bar-poverty g rect").on("mouseover", showPovertyDetail).on("mouseout", hideDetail);
		    d3.selectAll('#chart-bubble-amount g circle').on("mouseover", showProgramDetail).on("mouseout", hideDetail); // using jQuery Starts With Selector [name^=”value”] also works with D3; https://api.jquery.com/attribute-starts-with-selector/
		    d3.selectAll("#chart-ring-status g path").on("mouseover", showRingDetail).on("mouseout", hideDetail);
		
		    // // Show tooltip on hover
		    function showRingDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var status = d.data.key;
		        var amount = d.data.value;
		        
		        var content = "<b>Status: </b>" + status + "<br/>" +
		            "<b>Amount: </b>" + currFormat(amount) + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX - 385) + "px"
		            })
		            .html(content);
		    }
		
		    // // Show tooltip on hover
		    function showResourceDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var program = d.layer;
		        var amount = d.data.value;
		        var resource = d.data.key;
		        
		        var content = "<b>Program: </b>" + program + "<br/>" +
		            "<b>Resource Needed: </b>" + resource + "<br/>" +
		            "<b>Amount: </b>" + currFormat(amount) + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX + 10) + "px"
		            })
		            .html(content);
		    }
		
		    // // Show tooltip on hover
		    function showPovertyDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var program = d.layer;
		        var amount = d.data.value;
		        var poverty = d.data.key;
		
		        var content = "<b>Program: </b>" + program + "<br/>" +
		            "<b>Poverty Level: </b>" + poverty + "<br/>" +
		            "<b>Amount: </b>" + currFormat(amount) + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX - 385) + "px"
		            })
		            .html(content);
		    }
		
		    // // Show tooltip on hover
		    function showProgramDetail() {
		
		        // show tooltip with information from the __data__ property of the element
		        var d = this.__data__;
		        var program = d.key;
		        var count = d.value.count;
		        var amount = d.value.amount;
		        
		        var content = "<b>Program: </b>" + program + "<br/>" +
		            "<b>Amount: </b>" + currFormat(amount) + "<br/>" +
		            "<b>Count: </b>" + count + "<br/>";
		
		        return tooltip.style({
		                "visibility": "visible",
		                "top": (event.pageY - 10) + "px",
		                "left": (event.pageX + 10) + "px"
		            })
		            .html(content);
		    }
		
		    // // Hide tooltip on hover
		    function hideDetail() {
		
		        // hide tooltip
		        return tooltip.style("visibility", "hidden");
		    }
		
		}
		
		$(document).ready(function() {
		    getData();
		});		
	</script>

</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/d3-queue.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js

https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.32/dc.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js