anaeliaovalle · February 23, 2017 23:28
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <head>
 	<meta charset="utf-8">
 	<link href="style.css" rel="stylesheet" type="text/css">
 	<script src="https://d3js.org/d3.v4.min.js"></script>
 	<script src="heatmap.js"></script>
 </head>

 <body>
 	<script>
 		/* helper method to make translating easier */
 		var translate = function(x, y) {
 			return "translate(" + x + "," + y + ")";
 		};

 		// container for configuration parameters
 		var config = {};

 		config.svg = {
 			width: 960,
 			height: 500
 		};

 		config.margin = {
 			top: 50,
 			right: 10,
 			bottom: 20,
 			left: 40
 		};

 		config.plot = {
 			width: config.svg.width - config.margin.right - config.margin.left,
 			height: config.svg.height - config.margin.top - config.margin.bottom
 		};

 		config.legend = {
 			width: 200,
 			height: 15
 		};

 		// create svg based on config
 		var svg = d3.select("body").append("svg")
 			.attr("width", config.svg.width)
 			.attr("height", config.svg.height);

 		// create plot area based on config
 		var plot = svg.append("g")
 			.attr("id", "plot")
 			.attr("transform", translate(config.margin.left, config.margin.top));

 		// create the scales and set ranges
 		// https:github.com/d3/d3-scale/blob/master/README.md#scaleBand

 		// we only need the plot dimensions for the range!
 		// we will set the domain later when we load the data

 		var xScale = d3.scaleBand()
 			.range([0, config.plot.width]);

 		var yScale = d3.scaleBand()
 			.range([config.plot.height, 0], 0, 0);

 		// create color scale for each cell
 		// https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential
 		var colorScale = d3.scaleSequential(d3.interpolateViridis);

 		// formatter to parse dates
 		// https://github.com/mbostock/d3/wiki/Time-Formatting

 		// must match format used by csv
 		// converts string to date
 		var dateParse = d3.timeParse("%x %I:%M:%S %p");

 		// used to nest data and output values nicely
 		// converts date to string
 		var yearFormat = d3.timeFormat("%Y");
 		var monthFormat = d3.timeFormat("%b");

 		// placeholder for data
 		var data = [];

 		var file = "Monthly_Property_Crime_2005_to_2015.csv";
 		d3.csv(file, rowAccessor, dataCallback);

 		function rowAccessor(d) {
 			var row = {};

 // 			row.date = dateParse(d["Date"]);
 // 			row.year = yearFormat(row.date);
 // 			row.month = monthFormat(row.date);
 // 			row.type = d["Category"];
 // 			row.count = +d["IncidntNum"];
      row.category = d["category"];
      row.school = d["school"];
      row.value = +d["value"];

 			return row;
 		}

 		function dataCallback(error, rows) { // callback
 			if (error) {
 				console.warn(error);
 			}

 			// we can use fancy d3 operations to group our data by year and month
 			// https://github.com/d3/d3-collection/blob/master/README.md#nest
 			data = d3.nest()
 				.key(function(d) {
 					return d.year;
 				})
 				// group by year first
 				.key(function(d) {
 					return d.month;
 				})
 				// group by month second
 				.rollup(function(values) {
 					// sum together all of the categories
 					return d3.sum(values, function(d) {
 						return d.count;
 					})
 				})
 				.map(rows, d3.map); // return as nested d3.maps

 			console.log("rows", rows);
 			console.log("nest", data);

 			// pull out years and months
 			// use to set domain of x and y scales

 			var years = data.keys();
 			var months = data.get(years[0]).keys();

 			xScale.domain(months);
 			yScale.domain(years);

 			/*
 			 * how will we map our values to those colors?
 			 * our first step is to calculate the min and max
 			 * the issue now is our sums are nested
 			 */

 			// un-nesting these values is a little strange looking
 			// debug each step in the console so you know what is going on

 			// this returns all the values in our map
 			// in this case, our values are themselves maps
 			var values = data.values();

 			// now we have an array of maps
 			// grab the map values for each inner map
 			values = values.map(function(d) {
 				return d.values();
 			});

 			// now we have an array of arrays
 			// merge arrays into a single array
 			values = d3.merge(values);

 			// now we can calculate the extent our counts
 			var extent = d3.extent(values);

 			/*
 			 * is this efficient?
 			 * goodness no! but if you cared, why are you doing
 			 * data processing in javascript!
 			 */

 			// use these values as domain for our color scale
 			colorScale.domain(extent);

 			// finally, draw stuff
 			drawBackground();
 			drawAxes();
 			drawHeatmap();
 			drawTitle();
 			drawLegend();
 		}

 	</script>
 </body>
diff --git a/Monthly_Property_Crime_2005_to_2015.csv b/Monthly_Property_Crime_2005_to_2015.csv
diff --git a/style.css b/style.css
 body {
 	margin: 0;
 	padding: 0;
 	text-align: center;
 	font-family: sans-serif;
 }

 svg {
 	background-color: whitesmoke;
 }

 .cell {
 	stroke: white;
 	stroke-width: 1px;
 }

 .axis path, .axis line {
 	stroke: none;
 	fill: none;
 }

 .axis text {
 	fill: dimgrey;
 	font-size: 12px;
 }

 .legend line, .legend path {
 	stroke: dimgrey;
 	fill: none;
 }

 .legend text {
 	font-size: 10px;
 	fill: dimgrey;
 }
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	<link href="style.css" rel="stylesheet" type="text/css">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="heatmap.js"></script>
	</head>

	<body>
	<script>
	/* helper method to make translating easier */
	var translate = function(x, y) {
	return "translate(" + x + "," + y + ")";
	};

	// container for configuration parameters
	var config = {};

	config.svg = {
	width: 960,
	height: 500
	};

	config.margin = {
	top: 50,
	right: 10,
	bottom: 20,
	left: 40
	};

	config.plot = {
	width: config.svg.width - config.margin.right - config.margin.left,
	height: config.svg.height - config.margin.top - config.margin.bottom
	};

	config.legend = {
	width: 200,
	height: 15
	};

	// create svg based on config
	var svg = d3.select("body").append("svg")
	.attr("width", config.svg.width)
	.attr("height", config.svg.height);

	// create plot area based on config
	var plot = svg.append("g")
	.attr("id", "plot")
	.attr("transform", translate(config.margin.left, config.margin.top));

	// create the scales and set ranges
	// https:github.com/d3/d3-scale/blob/master/README.md#scaleBand

	// we only need the plot dimensions for the range!
	// we will set the domain later when we load the data

	var xScale = d3.scaleBand()
	.range([0, config.plot.width]);

	var yScale = d3.scaleBand()
	.range([config.plot.height, 0], 0, 0);

	// create color scale for each cell
	// https://github.com/d3/d3-scale/blob/master/README.md#scaleSequential
	var colorScale = d3.scaleSequential(d3.interpolateViridis);

	// formatter to parse dates
	// https://github.com/mbostock/d3/wiki/Time-Formatting

	// must match format used by csv
	// converts string to date
	var dateParse = d3.timeParse("%x %I:%M:%S %p");

	// used to nest data and output values nicely
	// converts date to string
	var yearFormat = d3.timeFormat("%Y");
	var monthFormat = d3.timeFormat("%b");

	// placeholder for data
	var data = [];

	var file = "Monthly_Property_Crime_2005_to_2015.csv";
	d3.csv(file, rowAccessor, dataCallback);

	function rowAccessor(d) {
	var row = {};

	// row.date = dateParse(d["Date"]);
	// row.year = yearFormat(row.date);
	// row.month = monthFormat(row.date);
	// row.type = d["Category"];
	// row.count = +d["IncidntNum"];
	row.category = d["category"];
	row.school = d["school"];
	row.value = +d["value"];

	return row;
	}

	function dataCallback(error, rows) { // callback
	if (error) {
	console.warn(error);
	}

	// we can use fancy d3 operations to group our data by year and month
	// https://github.com/d3/d3-collection/blob/master/README.md#nest
	data = d3.nest()
	.key(function(d) {
	return d.year;
	})
	// group by year first
	.key(function(d) {
	return d.month;
	})
	// group by month second
	.rollup(function(values) {
	// sum together all of the categories
	return d3.sum(values, function(d) {
	return d.count;
	})
	})
	.map(rows, d3.map); // return as nested d3.maps

	console.log("rows", rows);
	console.log("nest", data);

	// pull out years and months
	// use to set domain of x and y scales

	var years = data.keys();
	var months = data.get(years[0]).keys();

	xScale.domain(months);
	yScale.domain(years);

	/*
	* how will we map our values to those colors?
	* our first step is to calculate the min and max
	* the issue now is our sums are nested
	*/

	// un-nesting these values is a little strange looking
	// debug each step in the console so you know what is going on

	// this returns all the values in our map
	// in this case, our values are themselves maps
	var values = data.values();

	// now we have an array of maps
	// grab the map values for each inner map
	values = values.map(function(d) {
	return d.values();
	});

	// now we have an array of arrays
	// merge arrays into a single array
	values = d3.merge(values);

	// now we can calculate the extent our counts
	var extent = d3.extent(values);

	/*
	* is this efficient?
	* goodness no! but if you cared, why are you doing
	* data processing in javascript!
	*/

	// use these values as domain for our color scale
	colorScale.domain(extent);

	// finally, draw stuff
	drawBackground();
	drawAxes();
	drawHeatmap();
	drawTitle();
	drawLegend();
	}

	</script>
	</body>
	body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: sans-serif;
	}

	svg {
	background-color: whitesmoke;
	}

	.cell {
	stroke: white;
	stroke-width: 1px;
	}

	.axis path, .axis line {
	stroke: none;
	fill: none;
	}

	.axis text {
	fill: dimgrey;
	font-size: 12px;
	}

	.legend line, .legend path {
	stroke: dimgrey;
	fill: none;
	}

	.legend text {
	font-size: 10px;
	fill: dimgrey;
	}