kylejshaffer · August 29, 2015 14:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>Dashboard</title>

    <meta charset="UTF-8">

    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js"></script>
    <script type="text/javascript" src="js/colorbrewer.js"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/dc-js/dc.js/master/web/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/dc-js/dc.js/master/web/css/dc.css"/>

    <style>
        #monthly-volume-chart g.y {
            display: none;
        }
        iframe {
        	width: 100%;
        	height: 550px;
        	scrolling: "no";
        	align: center;
        	border: 0px;
        }
        div {
        	padding-bottom: 15px;
        	padding-left: 10px;
        	padding-right: 10px;
        }
    </style>
 </head>
 <body>

 <div class="container">
 <h2>Dashboard</h2>
 <div class="row">
    <div id="time-chart">
        <strong>Longitudinal Cycling Data</strong>
        <span class="reset" style="display: none;">range: <span class="filter"></span></span>

        <div class="clearfix"></div>
    </div>
 </div>
 <div class="row">
 	<div id="volume-chart">
 		<p>select time range to zoom in</p>
 	</div>
 </div>
 <div class="row">
 	<div id="purpose-ring-chart">
 		<strong>Riders by Purpose</strong>
 		<div class="clearfix"></div>
 	</div>
 	<div id="day-of-week-chart">
 		<strong>Weekly Volume</strong>
 		<div class="clearfix"></div>
 	</div>
 	<div id="year-ring-chart">
 		<strong>Total by Year</strong>
 		<div class="clearfix"></div>
 	</div>
 </div>

 </div>

 <script type="text/javascript">
 	var timeChart = dc.lineChart("#time-chart");
 	var purposeRingChart = dc.pieChart("#purpose-ring-chart");
 	var yearRingChart = dc.pieChart("#year-ring-chart")
 	var dayOfWeekChart = dc.rowChart("#day-of-week-chart");
 	var volumeChart = dc.barChart("#volume-chart");

 	d3.csv("trips.csv", function(data) {
 		var dateFormat = d3.time.format("%m/%d/%Y");
 		var numberFormat = d3.format(".2f");

 		data.forEach(function(d) {
 			d.dd = dateFormat.parse(d.dates);
 			d.month = d3.time.month(d.dd);
 			d.day = d3.time.day(d.dd);
 			d.year = d.dd.getFullYear();
 			d.num = d.num;
 		});

 	var facts = crossfilter(data);
 	var all = facts.groupAll();
 	var dateDimension = facts.dimension(function(d) {
 		return d.dd;
 	});

 	var yearDim = facts.dimension(function(d) {
 		return d.year;
 	});
 	var yearTotal = yearDim.group()

 	minDate = dateDimension.bottom(1)[0];
 	maxDate = dateDimension.top(1)[0];

 	var months = facts.dimension(function (d) {
 		return d.month;
 	});
 	var monthlyMoveGroup = months.group().reduceSum(function(d) {
 		return d.num;
 	});

 	// Purpose attribute variables
 	var purposeDimension = facts.dimension(function(d) {
 		return d.purpose;
 	});
 	var purposeGroup = purposeDimension.group();
 	var purposeByDate = dateDimension.group().reduceSum(function(d) { return d.num; });

 	var dayOfWeek = facts.dimension(function(d) {
 		var day = d.dd.getDay();
 		var name = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 		return day + "." + name[day];
 	});
 	var dayOfWeekGroup = dayOfWeek.group();

 	// Testing variables for time series charts
 	// Variable for 2012 series
 	var hits_commute = dateDimension.group().reduceSum(function(d) {
 		if (d.purpose == "Commute") {
 			return d.num;
 		}
 	});
 	// Variable for 2013 series
 	var hits_exercise = dateDimension.group().reduceSum(function(d) {
 		if (d.purpose == "Exercise") {
 			return d.num;
 		}
 	});
 	var hits_school = dateDimension.group().reduceSum(function(d) {
 		if (d.purpose == "School") {
 			return d.num;
 		}
 	});

 	// Charts
 	purposeRingChart
 		.width(200)
 		.height(200)
 		.dimension(purposeDimension)
 		.group(purposeGroup)
 		.renderLabel(true)
 		.innerRadius(30);

 	yearRingChart
 		.width(200)
 		.height(200)
 		.dimension(yearDim)
 		.group(yearTotal)
 		.renderLabel(true)
 		.innerRadius(30);

 	dayOfWeekChart
 		.width(400)
 		.height(300)
 		.dimension(dayOfWeek)
 		.group(dayOfWeekGroup)
 		.renderLabel(true)
 		.elasticX(true);

 	timeChart
 		.renderArea(true)
 		.width(900)
 		.height(300)
 		.brushOn(false)
 		.dimension(dateDimension)
 		.group(hits_school)
 		.stack(hits_exercise)
 		.stack(hits_commute)
 		.x(d3.time.scale().domain([minDate, maxDate]))
 		.renderHorizontalGridLines(true)
 		.elasticX(true)
 		.elasticY(true)
 		.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
 		.yAxisLabel("Number of Cyclists");

 	volumeChart
 		.width(900)
 		.height(60)
 		.margins({top: 0, right: 50, bottom: 20, left: 40})
 		.dimension(months)
 		.group(monthlyMoveGroup)
 		.centerBar(true)
 		.gap(1)
 		.x(d3.time.scale().domain([minDate, maxDate]))
 		.round(d3.time.month.round)
 		.alwaysUseRounding(true)
 		.xUnits(d3.time.months)

 	dc.renderAll();

 	}); 

 </script>
 </br>
 </br>
 </br>
 </body>
 </html>
diff --git a/trips.csv b/trips.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Dashboard</title>

	<meta charset="UTF-8">

	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.min.js"></script>
	<script type="text/javascript" src="js/colorbrewer.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/dc-js/dc.js/master/web/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/dc-js/dc.js/master/web/css/dc.css"/>

	<style>
	#monthly-volume-chart g.y {
	display: none;
	}
	iframe {
	width: 100%;
	height: 550px;
	scrolling: "no";
	align: center;
	border: 0px;
	}
	div {
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h2>Dashboard</h2>
	<div class="row">
	<div id="time-chart">
	<strong>Longitudinal Cycling Data</strong>
	<span class="reset" style="display: none;">range: <span class="filter"></span></span>

	<div class="clearfix"></div>
	</div>
	</div>
	<div class="row">
	<div id="volume-chart">
	<p>select time range to zoom in</p>
	</div>
	</div>
	<div class="row">
	<div id="purpose-ring-chart">
	<strong>Riders by Purpose</strong>
	<div class="clearfix"></div>
	</div>
	<div id="day-of-week-chart">
	<strong>Weekly Volume</strong>
	<div class="clearfix"></div>
	</div>
	<div id="year-ring-chart">
	<strong>Total by Year</strong>
	<div class="clearfix"></div>
	</div>
	</div>

	</div>

	<script type="text/javascript">
	var timeChart = dc.lineChart("#time-chart");
	var purposeRingChart = dc.pieChart("#purpose-ring-chart");
	var yearRingChart = dc.pieChart("#year-ring-chart")
	var dayOfWeekChart = dc.rowChart("#day-of-week-chart");
	var volumeChart = dc.barChart("#volume-chart");

	d3.csv("trips.csv", function(data) {
	var dateFormat = d3.time.format("%m/%d/%Y");
	var numberFormat = d3.format(".2f");

	data.forEach(function(d) {
	d.dd = dateFormat.parse(d.dates);
	d.month = d3.time.month(d.dd);
	d.day = d3.time.day(d.dd);
	d.year = d.dd.getFullYear();
	d.num = d.num;
	});

	var facts = crossfilter(data);
	var all = facts.groupAll();
	var dateDimension = facts.dimension(function(d) {
	return d.dd;
	});

	var yearDim = facts.dimension(function(d) {
	return d.year;
	});
	var yearTotal = yearDim.group()

	minDate = dateDimension.bottom(1)[0];
	maxDate = dateDimension.top(1)[0];

	var months = facts.dimension(function (d) {
	return d.month;
	});
	var monthlyMoveGroup = months.group().reduceSum(function(d) {
	return d.num;
	});

	// Purpose attribute variables
	var purposeDimension = facts.dimension(function(d) {
	return d.purpose;
	});
	var purposeGroup = purposeDimension.group();
	var purposeByDate = dateDimension.group().reduceSum(function(d) { return d.num; });

	var dayOfWeek = facts.dimension(function(d) {
	var day = d.dd.getDay();
	var name = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
	return day + "." + name[day];
	});
	var dayOfWeekGroup = dayOfWeek.group();

	// Testing variables for time series charts
	// Variable for 2012 series
	var hits_commute = dateDimension.group().reduceSum(function(d) {
	if (d.purpose == "Commute") {
	return d.num;
	}
	});
	// Variable for 2013 series
	var hits_exercise = dateDimension.group().reduceSum(function(d) {
	if (d.purpose == "Exercise") {
	return d.num;
	}
	});
	var hits_school = dateDimension.group().reduceSum(function(d) {
	if (d.purpose == "School") {
	return d.num;
	}
	});

	// Charts
	purposeRingChart
	.width(200)
	.height(200)
	.dimension(purposeDimension)
	.group(purposeGroup)
	.renderLabel(true)
	.innerRadius(30);

	yearRingChart
	.width(200)
	.height(200)
	.dimension(yearDim)
	.group(yearTotal)
	.renderLabel(true)
	.innerRadius(30);

	dayOfWeekChart
	.width(400)
	.height(300)
	.dimension(dayOfWeek)
	.group(dayOfWeekGroup)
	.renderLabel(true)
	.elasticX(true);

	timeChart
	.renderArea(true)
	.width(900)
	.height(300)
	.brushOn(false)
	.dimension(dateDimension)
	.group(hits_school)
	.stack(hits_exercise)
	.stack(hits_commute)
	.x(d3.time.scale().domain([minDate, maxDate]))
	.renderHorizontalGridLines(true)
	.elasticX(true)
	.elasticY(true)
	.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
	.yAxisLabel("Number of Cyclists");

	volumeChart
	.width(900)
	.height(60)
	.margins({top: 0, right: 50, bottom: 20, left: 40})
	.dimension(months)
	.group(monthlyMoveGroup)
	.centerBar(true)
	.gap(1)
	.x(d3.time.scale().domain([minDate, maxDate]))
	.round(d3.time.month.round)
	.alwaysUseRounding(true)
	.xUnits(d3.time.months)

	dc.renderAll();

	});

	</script>
	</br>
	</br>
	</br>
	</body>
	</html>