shawnmusgrave/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Violent crimes in Massachusetts municipalities</title>
		<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">


			body {
				background-color: gray;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 32px;
				margin: 0;
			}

			svg {
				background-color: white;
			}

			.attrib {
				text-anchor: end;
				font-size: 12px;
				font-style: italic;
			}


			.axis path,
			.axis line {
				fill: none;
				stroke: white;
				shape-rendering: crispEdges;
			}

			#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 15px;
				background-color: white;
				box-shadow: 2px 2px 2px 6px #ccc;
			}

		</style>
	</head>
	<body>

		<div id="container">
			<h2>Violent crime rates in Massachusetts</h2>
		</div>

		<script type="text/javascript">


			// set width, height and padding
			var w = 700;
			var h = 400;
			var padding = [10, 50, 50, 20] // top, right, bottom, left

			// set range for x and y scales — domain will be set once we've got the data stacked
			var xScale = d3.scale.ordinal()
									.rangeRoundBands([0, w], 0.05);
			var yScale = d3.scale.linear()
									.range([padding[2],h - padding[0] - padding[2]]);

			var colorScale = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue", "orange"])

			// create an svg container
			var svg = d3.select("#container").append("svg")
						.attr("width", w)
						.attr("height", h);


			// Load data, then stack it
			d3.csv("mass_violent_crime.csv", function(crime){

					// Transpose the data into layers by operating system
					var categories = d3.layout.stack()(["murderManslaughterRate", "rapeRate", "robberyRate", "assaultRate"]
												.map(function(category) {
												  return crime.map(function(d) {
													return {x: d.city, y: +d[category]};
												  });
												}));

					// compute the x-domain (by # of cities) and y-domain (by max height for a given city)
					xScale.domain(d3.range(categories[0].length));
					yScale.domain([0,
									d3.max(categories, function(d) {
										return d3.max(d, function(d) {
											return d.y0 + d.y;
										});
									})
								]);

					var category = svg.selectAll("g")
										.data(categories)
										.enter()
										.append("g")
										.style("fill", function(d, i) { return colorScale(i); })
										.style("stroke", function(d, i) { return d3.rgb(colorScale(i)).darker(); });

					// Add a rect for each data value
					var rects = category.selectAll("rect")
						.data(function(d) { return d; })
						.enter()
						.append("rect")
						.attr("x", function(d, i) {
							return xScale(i);
						})
						.attr("width", xScale.rangeBand())
						.attr("y", function(d) {
							return h - yScale(d.y0) - yScale(d.y);  //Flip the math!
						})
						.attr("height", function(d) {
							return yScale(d.y);
						})
						.on("mouseover", function() { tooltip.style("display", null); })
						  .on("mouseout", function() { tooltip.style("display", "none"); })
						  .on("mousemove", function(d) {
							var xPosition = d3.mouse(this)[0] - 15;
							var yPosition = d3.mouse(this)[1] - 25;
							tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
							tooltip.select("text").text(d.x + ":" + d.y);
						  });


					// Create tooltip, initial display is hidden
				  var tooltip = svg.append("g")
					.attr("class", "tooltip")
					.style("display", "none");

/*
				  tooltip.append("rect")
					.attr("width", 100)
					.attr("height", 20)
					.attr("fill", "white")
					.style("opacity", 0.5);*/

				  tooltip.append("text")
					.attr("x", 20)
					.attr("dy", "1.2em")
					.style("text-anchor", "middle")
					.attr("font-size", "12px")
					.attr("font-weight", "bold");

				var xAxis = d3.svg.axis()
								  .scale(xScale)
								  .orient("bottom");

					svg.append("g")
					  .attr("class", "x axis")
					  .attr("transform", "translate(0," + (h -padding[2] + 3) + ")")
					  .call(xAxis)

				svg.append("text")
				.attr("class", "attrib")
				.text("Data: Federal Bureau of Investigation.")
				.attr("x", w)
				.attr("y", h)


			});

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

## mass_violent_crime.csv

          
            city
            population
            violentCrimeRate
            murderManslaughterRate
            rapeRate
            robberyRate
            assaultRate

            
              Boston
              630648
              835
              9
              39.5
              302.9
              483.6

            
              Brookline
              59658
              137.5
              0
              6.7
              52
              78.8

            
              Cambridge
              106981
              402.9
              0.9
              18.7
              126.2
              257.1

            
              Lynn
              91846
              820.9
              2.2
              52.3
              185.1
              581.4

            
              Malden
              60605
              462
              1.7
              31.4
              123.8
              305.3

            
              Newton
              86710
              87.6
              0
              5.8
              19.6
              62.3

            
              Quincy
              93736
              427.8
              0
              33.1
              89.6
              305.1

            
              Somerville
              77200
              348.4
              0
              29.8
              106.2
              212.4

            
              Worcester
              183247
              959.4
              4.4
              18
              228.7
              708.3
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Violent crimes in Massachusetts municipalities</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">



	body {
	background-color: gray;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 32px;
	margin: 0;
	}

	svg {
	background-color: white;
	}

	.attrib {
	text-anchor: end;
	font-size: 12px;
	font-style: italic;
	}


	.axis path,
	.axis line {
	fill: none;
	stroke: white;
	shape-rendering: crispEdges;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 15px;
	background-color: white;
	box-shadow: 2px 2px 2px 6px #ccc;
	}

	</style>
	</head>
	<body>

	<div id="container">
	<h2>Violent crime rates in Massachusetts</h2>
	</div>

	<script type="text/javascript">



	// set width, height and padding
	var w = 700;
	var h = 400;
	var padding = [10, 50, 50, 20] // top, right, bottom, left

	// set range for x and y scales — domain will be set once we've got the data stacked
	var xScale = d3.scale.ordinal()
	.rangeRoundBands([0, w], 0.05);
	var yScale = d3.scale.linear()
	.range([padding[2],h - padding[0] - padding[2]]);

	var colorScale = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue", "orange"])

	// create an svg container
	var svg = d3.select("#container").append("svg")
	.attr("width", w)
	.attr("height", h);


	// Load data, then stack it
	d3.csv("mass_violent_crime.csv", function(crime){

	// Transpose the data into layers by operating system
	var categories = d3.layout.stack()(["murderManslaughterRate", "rapeRate", "robberyRate", "assaultRate"]
	.map(function(category) {
	return crime.map(function(d) {
	return {x: d.city, y: +d[category]};
	});
	}));

	// compute the x-domain (by # of cities) and y-domain (by max height for a given city)
	xScale.domain(d3.range(categories[0].length));
	yScale.domain([0,
	d3.max(categories, function(d) {
	return d3.max(d, function(d) {
	return d.y0 + d.y;
	});
	})
	]);

	var category = svg.selectAll("g")
	.data(categories)
	.enter()
	.append("g")
	.style("fill", function(d, i) { return colorScale(i); })
	.style("stroke", function(d, i) { return d3.rgb(colorScale(i)).darker(); });

	// Add a rect for each data value
	var rects = category.selectAll("rect")
	.data(function(d) { return d; })
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return xScale(i);
	})
	.attr("width", xScale.rangeBand())
	.attr("y", function(d) {
	return h - yScale(d.y0) - yScale(d.y); //Flip the math!
	})
	.attr("height", function(d) {
	return yScale(d.y);
	})
	.on("mouseover", function() { tooltip.style("display", null); })
	.on("mouseout", function() { tooltip.style("display", "none"); })
	.on("mousemove", function(d) {
	var xPosition = d3.mouse(this)[0] - 15;
	var yPosition = d3.mouse(this)[1] - 25;
	tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
	tooltip.select("text").text(d.x + ":" + d.y);
	});


	// Create tooltip, initial display is hidden
	var tooltip = svg.append("g")
	.attr("class", "tooltip")
	.style("display", "none");

	/*
	tooltip.append("rect")
	.attr("width", 100)
	.attr("height", 20)
	.attr("fill", "white")
	.style("opacity", 0.5);*/

	tooltip.append("text")
	.attr("x", 20)
	.attr("dy", "1.2em")
	.style("text-anchor", "middle")
	.attr("font-size", "12px")
	.attr("font-weight", "bold");

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h -padding[2] + 3) + ")")
	.call(xAxis)

	svg.append("text")
	.attr("class", "attrib")
	.text("Data: Federal Bureau of Investigation.")
	.attr("x", w)
	.attr("y", h)


	});

	</script>
	</body>
	</html>
city	population	violentCrimeRate	murderManslaughterRate	rapeRate	robberyRate	assaultRate
Boston	630648	835	9	39.5	302.9	483.6
Brookline	59658	137.5	0	6.7	52	78.8
Cambridge	106981	402.9	0.9	18.7	126.2	257.1
Lynn	91846	820.9	2.2	52.3	185.1	581.4
Malden	60605	462	1.7	31.4	123.8	305.3
Newton	86710	87.6	0	5.8	19.6	62.3
Quincy	93736	427.8	0	33.1	89.6	305.1
Somerville	77200	348.4	0	29.8	106.2	212.4
Worcester	183247	959.4	4.4	18	228.7	708.3