D3 + dc + Crossfilter Multi Intarctive Charts

D3 + dc + Crossfilter Intarctive Charts

by Khadeer Mohammed

HTML

<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<script src="https://dc-js.github.io/dc.js/js/colorbrewer.js"></script>
<div class="container-fluid">
	<h2>D3 + dc + Crossfilter Intarctive Charts</h2>

	<div class="row">
		<div class="col-lg-12">
			<div id="yearly-bubble-chart" class="box">
		    	<div class="chartTitle">
			        <strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
			        <a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();"
			           style="display: none;">reset</a>
	           </div>
		    </div>
		</div>
	    
	</div>

	<div class="row">
	    <div class="col-lg-4">
	    	<div id="day-of-week-chart" class="box">
		    	<div class="chartTitle">	
		        <strong>Day of Week</strong>
		        <a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
		        </div>
		    </div>
	    </div>
	    <!-- <div class="col-lg-4">
	    	<div id="quarter-chart" class="box">
	    		    	<div class="chartTitle">
	    		        <strong>Quarters</strong>
	    		        <a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
	    		        </div>
	    		    </div>
	    </div> -->
		
		<div class="col-lg-4">
		    <div id="gain-loss-chart" class="box">
		    	<div class="chartTitle">
		        <strong>Days by Gain/Loss</strong>
		        <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
		        </div>
		    </div>
	    </div>
		
		<div class="col-lg-4">
		    <div id="fluctuation-chart" class="box">
		    	<div...

CSS

body {
			background: rgba(0,0,0,.05);
			font-family: arial;
			font-size: 14px;
		}
		.box {
			padding: 10px;
			background: #fff;
			box-shadow: 0 2px 3px 1px #ccc;
			border-radius: 3px;
			margin: 1em 0;
			min-height: 150px;
		}
		.chartTitle {
			background: rgba(0,0,0,.1);
			padding: 5px 10px;
			margin: -10px -10px 0 -10px;
		}
		div.dc-chart {
			float: none;
		}
		.dc-data-count {
			margin: 0;
		}
		#monthly-volume-chart g.y {
		    display: none;
		}

JavaScript

var data = [{"date":"11/01/1985","open":115.48,"high":116.78,"low":115.48,"close":116.28,"volume":900900,"oi":0},{"date":"11/04/1985","open":116.28,"high":117.07,"low":115.82,"close":116.04,"volume":753400,"oi":0},{"date":"06/04/1993","open":372.06,"high":372.06,"low":367.99,"close":368.63,"volume":2518800,"oi":0},{"date":"06/07/1993","open":368.63,"high":371.77,"low":364.32,"close":364.36,"volume":2478600,"oi":0},{"date":"10/19/1998","open":1293.91,"high":1310.86,"low":1283.54,"close":1310.17,"volume":8409200,"oi":0},{"date":"10/20/1998","open":1310.17,"high":1334.55,"low":1282.83,"close":1283.23,"volume":10873400,"oi":0},{"date":"08/05/2004","open":1380.93,"high":1383.38,"low":1352.27,"close":1353.44,"volume":15746600,"oi":0},{"date":"08/06/2004","open":1341.08,"high":1342.87,"low":1314.97,"close":1315.3,"volume":16922600,"oi":0},{"date":"06/12/2006","open":1554.22,"high":1555.09,"low":1520.29,"close":1520.31,"volume":18877200,"oi":0},{"date":"06/13/2006","open":1521.86,"high":1536.5,"low":1511.53,"close":1516.85,"volume":25945000,"oi":0},{"date":"12/17/2010","open":2222.01,"high":2227.04,"low":2217.11,"close":2218.29,"volume":24218300,"oi":0},{"date":"12/20/2010","open":2225.41,"high":2230.55,"low":2206.3,"close":2223.04,"volume":17079500,"oi":0},{"date":"06/27/2012","open":2558.67,"high":2576.09,"low":2557.09,"close":2565.53,"volume":15713580,"oi":0},{"date":"06/28/2012","open":2565.53,"high":2565.53,"low":2510.37,"close":2536.65,"volume":16722440,"oi":0},{"date":"06/29/2012","open":2566.84,"high":2615.82,"low":2566.84,"close":2615.72,"volume":18325310,"oi":0}];
 
 var gData;
		var gainOrLossChart = dc.pieChart('#gain-loss-chart');
		var fluctuationChart = dc.barChart('#fluctuation-chart');
		//var quarterChart = dc.pieChart('#quarter-chart');
		var dayOfWeekChart = dc.rowChart('#day-of-week-chart');
		var moveChart = dc.lineChart('#monthly-move-chart');
		var volumeChart = dc.barChart('#monthly-volume-chart');
		var yearlyBubbleChart =...