SF Monthly Property Crime 2005 to 2015

.block

license: mit

README.md

SF Monthly Property Crimes 2005 to 2015

This example demonstrates how to use a heatmap to show time series data. The actual heatmap visualization is not difficult to generate---more time in this example is spent on preparing the data using d3.nest() and on creating the color legend.

Warning

This data is not adjusted for changes in population, and this spans enough time that what we could really be seeing is a change in population and not a change in crime.

We might be able to fix that using these numbers:

• Google Public Data: San Francisco County Population

But, this is not yet fixed in this example.

Data Source

You can access the dataset for this example directly at:

https://data.sfgov.org/Public-Safety/Monthly-Property-Crime-2005-to-2015/k5vw-3yuz

The dataset is derived from the SFPD Incidents - from 1 January 2003 dataset available at data.sfgov.org.

heatmap.js

/*
 * we assume the following global variables are defined:
 * - svg, plot
 * - xScale, yScale
 * - config
 */

/*
 * draw white plot background
 * useful for debugging before we draw the heatmap
 */
var drawBackground = function() {
	plot.append("rect")
		.attr("x", 0)
		.attr("y", 0)
		.attr("width", config.plot.width)
		.attr("height", config.plot.height)
		.style("fill", "white");
};

/*
 * draws the x and y axis
 * https://github.com/mbostock/d3/wiki/SVG-Axes#axis
 */
var drawAxes = function() {
	var xAxis = d3.axisBottom(xScale)
		.tickPadding(0);

	var yAxis = d3.axisLeft(yScale)
		.tickPadding(0);

	plot.append("g")
		.attr("id", "x-axis")
		.attr("class", "axis")
		.attr("transform", translate(0, config.plot.height))
		.call(xAxis);

	plot.append("g")
		.attr("id", "y-axis")
		.attr("class", "axis")
		.call(yAxis);
};

/*
 * draws the heatmap
 * not too complicated due to how we nested the data
 * but, it can be tricky to figure out which scale to use where
 */
var drawHeatmap = function() {
	// create a group per row
	var rows = plot.append("g")
		.attr("id", "heatmap")
		.attr("class", "cell")
		.selectAll("g")
		.data(data.entries())
		.enter()
		.append("g")
		.attr("id", function(d) {
			return d.key;
		})
		.attr("transform", function(d) {
			return translate(0, yScale(d.key));
		});

	// create rect per column
	var cells = rows.selectAll("rect")
		.data(function(d) {
			return d.value.entries();
		})
		.enter()
		.append("rect")
		.attr("x", function(d) {
			return xScale(d.key);
		})
		.attr("y", 0)
		.attr("width", xScale.bandwidth())
		.attr("height", yScale.bandwidth())
		.style("fill", function(d) {
			return colorScale(d.value);
		});
};

/*
 * draw plot title in upper left margin
 * will center the text in the margin
 */
var drawTitle = function() {
	var title = svg.append("text")
		.text("SF Monthly Property Crime")
		.attr("id", "title")
		.attr("x", config.margin.left)
		.attr("y", 0)
		.attr("dx", 0)
		.attr("dy", "18px")
		.attr("text-anchor", "left")
		.attr("font-size", "18px");

	// shift text so it is centered in plot area
	var bounds = title.node().getBBox();
	var yshift = (config.margin.top - bounds.height) / 2;
	title.attr("transform", translate(0, yshift));
};

/*
 * draw a color legend at top of plot
 * this is ridiculously hard for the amount of pixels we
 * are drawing, but it is also ridiculously important
 *
 * another approach is to threshold our values
 * we will leave that for another time
 *
 * for a great explaination of how this works, see:
 * http://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html
 */
var drawLegend = function() {
	// our color scale doesn't have an invert() function
	// and we need some way of mapping 0% and 100% to our domain
	// so we'll create a scale to reverse that mapping
	var percentScale = d3.scaleLinear()
		.domain([0, 100])
		.range(colorScale.domain());

	// setup gradient for legend
	// http://bl.ocks.org/mbostock/1086421
	svg.append("defs")
		.append("linearGradient")
		.attr("id", "gradient")
		.selectAll("stop")
		.data(d3.ticks(0, 100, 5))
		.enter()
		.append("stop")
		.attr("offset", function(d) {
			return d + "%";
		})
		.attr("stop-color", function(d) {
			return colorScale(percentScale(d));
		});

	// create group for legend elements
	// will translate it to the appropriate location later
	var legend = svg.append("g")
		.attr("id", "legend")
		.attr("transform", translate(
			config.svg.width - config.margin.right - config.legend.width,
			(config.margin.top - config.legend.height) / 2));

	// draw the color rectangle with gradient
	legend.append("rect")
		.attr("x", 0)
		.attr("y", 0)
		.attr("width", config.legend.width)
		.attr("height", config.legend.height)
		.attr("fill", "url(#gradient)");

	// create another scale so we can easily draw an axis on the color box
	var legendScale = d3.scaleLinear()
		.domain(colorScale.domain())
		.range([0, config.legend.width]);

	// use an axis generator to draw axis under color box
	var legendAxis = d3.axisBottom(legendScale)
		// https://github.com/d3/d3-format
		.tickFormat(d3.format(",.0s"))
		.tickValues(colorScale.domain())
		.tickSize(4);

	// draw it!
	legend.append("g")
		.attr("id", "color-axis")
		.attr("class", "legend")
		.attr("transform", translate(0, config.legend.height))
		.call(legendAxis)

	// calculate how much to shift legend group to fit in our plot area nicely
	var bounds = legend.node().getBBox();
	var xshift = config.svg.width - bounds.width;
	var yshift = (config.margin.top - bounds.height) / 2;
	legend.attr("transform", translate(xshift, yshift));
};

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"];

			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>

Monthly_Property_Crime_2005_to_2015.csv

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;
}

thumbnail.png