kent37 · April 12, 2015 01:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Cambridge Development since 2010</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: white;
 				font-family: Helvetica, Arial, sans-serif;
 			}

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

 			p {
 				font-size: 14px;
 				margin: 10px 0 0 0;
 			}

 			svg {
 				background-color: white;
 			}

 			rect.future {
 				fill: blue;
 			}

 			rect.future:hover {
 				fill: #08f;
 			}

 			rect.complete {
 				fill: #00a;
 			}

 			rect.complete:hover {
 				fill: #08f;
 			}

 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 			.y.axis path,
 			.y.axis line {
 				opacity: 0;
 			}

 		</style>
 	</head>
 	<body>
 	<h2>Gross floor area of Cambridge development projects since 2010</h2>
 	<p>This chart shows the gross floor area, in square feet, of development projects in Cambridge, Mass since 2010.
 	It includes projects which are not yet completed. Mouse over a bar to see the project address and type.</p>
 	<p>Sources: <a href="https://data.cambridgema.gov/Planning/Development-Log-Current-Edition/wjwg-93qh">Current</a>
 	and <a href="https://data.cambridgema.gov/Planning/Development-Log-Historical-Projects/a5ud-8kjv">historical</a> data
 	from <a href="http://data.cambridgema.gov">Cambridge Open Data Portal</a>.

 		<script type="text/javascript">		
 			var padding = [5, 100, 30, 40];	// t r b l
 			var rowHeight = 12;
 			var height = 96 * rowHeight + padding[0] + padding[2];
 			var width = 900;

 			var widthScale = d3.scale.linear()
 								.range([ 0, width - padding[1] - padding[3] ]);
 			
 			var heightScale = d3.scale.ordinal()
 								.rangeRoundBands([ padding[0], height - padding[2] ], 0.1);

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

 			var yAxis = d3.svg.axis()
 							.scale(heightScale)
 							.orient("left");

 			// Formatter for numbers with commas
 			format = d3.format('0,000');

 			// Make project ID string
 			var projID = function(d) { return '#' + d.ProjectID + ' - ' + d.Address; }

 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", width)
 						.attr("height", height);

 			d3.csv("https://gist.githubusercontent.com/kent37/313c30a0fda288f994a2/raw/0e489d6d0cbd877d4fec6d54b6ec9bc60839d4b4/CambridgeDevelopment.csv", function(data) {

 				data.sort(function(a, b) {
 					return d3.descending(+a['Total.GFA'], +b['Total.GFA']);
 				});

 				widthScale.domain([ 0, d3.max(data, function(d) {
 					return +d['Total.GFA'];
 				}) ]);

 				heightScale.domain(data.map(function(d) { return d.ProjectID; }));

 				var rects = svg.selectAll("rect")
 								.data(data)
 								.enter()
 								.append("rect");

 				rects.attr({
 						x: padding[3],
 						y: function(d) {
 							return heightScale(d.ProjectID);
 						},
 						width: function(d) {
 							return widthScale(d['Total.GFA']);
 						},
 						height: heightScale.rangeBand(),
 						class: function(d) {
 							return d['Year.Complete'] == 'Future' ? 'future' : 'complete'
 						}
 					})
 					.append("title")
 					.text(function(d) {
 						return d['Address'] + " - " + d['Primary.Use'];
 					});

 				svg.selectAll("text")
 				   .data(data)
 				   .enter()
 				   .append("text")
 				   .text(function(d) {
 				   		return d['Year.Complete'] + " - " + format(+d['Total.GFA']) + ' sq ft';
 				   })
 				   .attr({
 				   		x: function(d) { return padding[3] + widthScale(d['Total.GFA']) + 5; },
 					    y: function(d) {
 					   		return heightScale(d.ProjectID) + heightScale.rangeBand()/2 + 3;
 						},
 						'font-family': "sans-serif",
 						'font-size': "9px",
 						fill: "black",
 						'text-anchor' : 'start'
 					})
 				;

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

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + padding[3] + ",0)")
 					.call(yAxis);
 			});


 		</script>

 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Cambridge Development since 2010</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

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

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

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	rect.future {
	fill: blue;
	}

	rect.future:hover {
	fill: #08f;
	}

	rect.complete {
	fill: #00a;
	}

	rect.complete:hover {
	fill: #08f;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	</style>
	</head>
	<body>
	<h2>Gross floor area of Cambridge development projects since 2010</h2>
	<p>This chart shows the gross floor area, in square feet, of development projects in Cambridge, Mass since 2010.
	It includes projects which are not yet completed. Mouse over a bar to see the project address and type.</p>
	<p>Sources: <a href="https://data.cambridgema.gov/Planning/Development-Log-Current-Edition/wjwg-93qh">Current</a>
	and <a href="https://data.cambridgema.gov/Planning/Development-Log-Historical-Projects/a5ud-8kjv">historical</a> data
	from <a href="http://data.cambridgema.gov">Cambridge Open Data Portal</a>.

	<script type="text/javascript">
	var padding = [5, 100, 30, 40]; // t r b l
	var rowHeight = 12;
	var height = 96 * rowHeight + padding[0] + padding[2];
	var width = 900;

	var widthScale = d3.scale.linear()
	.range([ 0, width - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], height - padding[2] ], 0.1);

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

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

	// Formatter for numbers with commas
	format = d3.format('0,000');

	// Make project ID string
	var projID = function(d) { return '#' + d.ProjectID + ' - ' + d.Address; }

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.csv("https://gist.githubusercontent.com/kent37/313c30a0fda288f994a2/raw/0e489d6d0cbd877d4fec6d54b6ec9bc60839d4b4/CambridgeDevelopment.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a['Total.GFA'], +b['Total.GFA']);
	});

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d['Total.GFA'];
	}) ]);

	heightScale.domain(data.map(function(d) { return d.ProjectID; }));

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr({
	x: padding[3],
	y: function(d) {
	return heightScale(d.ProjectID);
	},
	width: function(d) {
	return widthScale(d['Total.GFA']);
	},
	height: heightScale.rangeBand(),
	class: function(d) {
	return d['Year.Complete'] == 'Future' ? 'future' : 'complete'
	}
	})
	.append("title")
	.text(function(d) {
	return d['Address'] + " - " + d['Primary.Use'];
	});

	svg.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.text(function(d) {
	return d['Year.Complete'] + " - " + format(+d['Total.GFA']) + ' sq ft';
	})
	.attr({
	x: function(d) { return padding[3] + widthScale(d['Total.GFA']) + 5; },
	y: function(d) {
	return heightScale(d.ProjectID) + heightScale.rangeBand()/2 + 3;
	},
	'font-family': "sans-serif",
	'font-size': "9px",
	fill: "black",
	'text-anchor' : 'start'
	})
	;

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

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);
	});


	</script>

	</body>
	</html>
No results found