Homework 4

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Cambridge Development since 2010</title>
		<script type="text/javascript" src="https://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="https://data.cambridgema.gov">Cambridge Open Data Portal</a>.

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js