adlukasiak/PAvg.csv

## README.md

      
    Raw
  

              README.md
            
          
    The Montgomery Gardens public housing project has over 80% vacancy rate.  It was vacated and recently imploaded on August 29, 2015.  You can watch the exciting video here.
This static visualization compares public housing projects' vacancy rates.  The entire data set contains granular information including monthly data, total number of units, move-in and move-out numbers, etc.  Can't wait to learn how to utilize time sliders and other interactive controls!

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Jersey City . Public Housing</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				font-family: Helvetica, Arial, sans-serif;
				background-color: white;
			}
			svg {
				background-color: white;
			}
			h1 {
				font-size: 24px;
				margin: 0;
			}
			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}
			.Barchart rect:hover {
				fill: orange !important;
				fill-opacity: 1;
			}
			.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>

		<h1>Vacancy Rates by Property</h1>

		<p>Monthly average vacancy rates Jan 2014-May 2015. Source: <a href="http://www.jerseycitynj.gov/data.aspx?id=14832">Jersey City Housing Authority</a>.</p>

		<p>
			<button id="vacancy">Vacancy Rate</button>
			<button id="vacantUnits">Vacant Units</button>
			<button id="totalUnits">Total Units</button>
		</p>

		<script type="text/javascript">
			var rects;
			var dataset;
			var padding = [ 20, 10, 30, 170 ];  //Top, right, bottom, left
			var percent = d3.format(".0%");

			var color = d3.scale.ordinal()
			var w = 700;
			var h = 380;
			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");
			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");
			var svg = d3.select("body")
				.append("svg")
				.attr("width", w )
				.attr("height", h )
				.attr("class","Barchart");
			d3.csv("PAvg.csv", function(data) {
				data.sort(function(a, b) {
					return d3.descending(+a.vacancyRate, +b.vacancyRate);
				});
				dataset = data;
				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.vacancyRate;
				}) ]);
				heightScale.domain(data.map(function(d) { return d.propertyName; } ));
				rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");
				rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.propertyName);
					})
					.attr("width", function(d) {
						return widthScale(d.vacancyRate);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill","steelblue")
					.append("title")
					.text(function(d) {
						return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate);
					});
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);
			});
			d3.select("#totalUnits")
				.on("click", function() {
					//Update scale domain
					widthScale.domain([ 0, d3.max(dataset, function(d) {
						return +d.totalUnits;
					}) ]);
					//Update rect widths
					rects.transition()
						.duration(1000)
						.attr("width", function(d) {
							return widthScale(d.totalUnits);
						})
						.select("title")
						.text(function(d) {
							return d.propertyName + " has " + d.totalUnits + " units";
						});
					//Update axis
					d3.select(".x.axis")
						.transition()
						.duration(1000)
						.call(xAxis);
				});
			d3.select("#vacancy")
				.on("click", function() {
					//Update scale domain
					widthScale.domain([ 0, d3.max(dataset, function(d) {
						return +d.vacancyRate;
					}) ]);
					//Update rect widths
					rects.transition()
						.duration(1000)
						.attr("width", function(d) {
							return widthScale(d.vacancyRate);
						})
						.select("title")
						.text(function(d) {
							return d.propertyName + "'s vacancy rate is " + d.vacancyRate * 100.00 + "%";
						});
					//Update axis
					d3.select(".x.axis")
						.transition()
						.duration(1000)
						.call(xAxis);
				});
			d3.select("#vacantUnits")
				.on("click", function() {
					//Update scale domain
					widthScale.domain([ 0, d3.max(dataset, function(d) {
						return +d.vacantUnits;
					}) ]);
					//Update rect widths
					rects.transition()
						.duration(1000)
						.attr("width", function(d) {
							return widthScale( +d.vacantUnits );
						})
						.select("title")
						.text(function(d) {
							return d.propertyName + " has " + d.vacantUnits + " vacant units";
						});
					//Update axis
					d3.select(".x.axis")
						.transition()
						.duration(1000)
						.call(xAxis);
				});
		</script>

	</body>
</html>

## PAvg.csv

          
            propertyName
            propertyCategory
            totalUnits
            vacantUnits
            vacancyRate

            
              254 Bergen Avenue
              Non-Federal Affordable 
              36
              3
              0.09

            
              Arlington Gardens
              Non-Federal Affordable 
              90
              7
              0.08

            
              Barbara Place Terrace
              HOPE6 Developments
              40
              0
              0.01

            
              Berry Gardens 
              Elderly/Disabled Developments
              356
              39
              0.11

            
              Booker T. Washington 
              Conventional Public Housing
              305
              34
              0.11

            
              Curries Woods 
              Conventional Public Housing
              295
              20
              0.07

            
              Dwight St. Homes
              Homeownership Project
              19
              5
              0.24

            
              Glenview I
              HOPE6 Developments
              38
              0
              0.00

            
              Gloria Robinson I
              HOPE6 Developments
              58
              1
              0.02

            
              Gloria Robinson II
              HOPE6 Developments
              71
              1
              0.01

            
              Gloria Robinson III
              HOPE6 Developments
              24
              0
              0.00

            
              Holland Gardens
              Conventional Public Housing
              189
              9
              0.05

            
              Hudson Gardens 
              Conventional Public Housing
              221
              3
              0.01

            
              Lafayette Senior Living
              HOPE6 Developments
              82
              3
              0.04

            
              Lafayette Village 
              HOPE6 Developments
              77
              0
              0.00

            
              Marion Gardens 
              Conventional Public Housing
              228
              25
              0.11

            
              Montgomery Gardens 
              Conventional Public Housing
              434
              366
              0.84

            
              Ocean Pointe (East and West)
              HOPE6 Developments
              45
              2
              0.04

            
              Pacific Court 
              HOPE6 Developments
              41
              0
              0.00

            
              Thomas J. Stewart
              Elderly/Disabled Developments
              48
              1
              0.03

            
              Woodward Terrace
              HOPE6 Developments
              45
              0
              0.01
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Jersey City . Public Housing</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	font-family: Helvetica, Arial, sans-serif;
	background-color: white;
	}
	svg {
	background-color: white;
	}
	h1 {
	font-size: 24px;
	margin: 0;
	}
	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}
	.Barchart rect:hover {
	fill: orange !important;
	fill-opacity: 1;
	}
	.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>

	<h1>Vacancy Rates by Property</h1>

	<p>Monthly average vacancy rates Jan 2014-May 2015. Source: <a href="http://www.jerseycitynj.gov/data.aspx?id=14832">Jersey City Housing Authority</a>.</p>

	<p>
	<button id="vacancy">Vacancy Rate</button>
	<button id="vacantUnits">Vacant Units</button>
	<button id="totalUnits">Total Units</button>
	</p>

	<script type="text/javascript">
	var rects;
	var dataset;
	var padding = [ 20, 10, 30, 170 ]; //Top, right, bottom, left
	var percent = d3.format(".0%");

	var color = d3.scale.ordinal()
	var w = 700;
	var h = 380;
	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");
	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w )
	.attr("height", h )
	.attr("class","Barchart");
	d3.csv("PAvg.csv", function(data) {
	data.sort(function(a, b) {
	return d3.descending(+a.vacancyRate, +b.vacancyRate);
	});
	dataset = data;
	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.vacancyRate;
	}) ]);
	heightScale.domain(data.map(function(d) { return d.propertyName; } ));
	rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");
	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.propertyName);
	})
	.attr("width", function(d) {
	return widthScale(d.vacancyRate);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill","steelblue")
	.append("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate);
	});
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);
	});
	d3.select("#totalUnits")
	.on("click", function() {
	//Update scale domain
	widthScale.domain([ 0, d3.max(dataset, function(d) {
	return +d.totalUnits;
	}) ]);
	//Update rect widths
	rects.transition()
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.totalUnits);
	})
	.select("title")
	.text(function(d) {
	return d.propertyName + " has " + d.totalUnits + " units";
	});
	//Update axis
	d3.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);
	});
	d3.select("#vacancy")
	.on("click", function() {
	//Update scale domain
	widthScale.domain([ 0, d3.max(dataset, function(d) {
	return +d.vacancyRate;
	}) ]);
	//Update rect widths
	rects.transition()
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.vacancyRate);
	})
	.select("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + d.vacancyRate * 100.00 + "%";
	});
	//Update axis
	d3.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);
	});
	d3.select("#vacantUnits")
	.on("click", function() {
	//Update scale domain
	widthScale.domain([ 0, d3.max(dataset, function(d) {
	return +d.vacantUnits;
	}) ]);
	//Update rect widths
	rects.transition()
	.duration(1000)
	.attr("width", function(d) {
	return widthScale( +d.vacantUnits );
	})
	.select("title")
	.text(function(d) {
	return d.propertyName + " has " + d.vacantUnits + " vacant units";
	});
	//Update axis
	d3.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);
	});
	</script>

	</body>
	</html>
propertyName	propertyCategory	totalUnits	vacantUnits	vacancyRate
254 Bergen Avenue	Non-Federal Affordable	36	3	0.09
Arlington Gardens	Non-Federal Affordable	90	7	0.08
Barbara Place Terrace	HOPE6 Developments	40	0	0.01
Berry Gardens	Elderly/Disabled Developments	356	39	0.11
Booker T. Washington	Conventional Public Housing	305	34	0.11
Curries Woods	Conventional Public Housing	295	20	0.07
Dwight St. Homes	Homeownership Project	19	5	0.24
Glenview I	HOPE6 Developments	38	0	0.00
Gloria Robinson I	HOPE6 Developments	58	1	0.02
Gloria Robinson II	HOPE6 Developments	71	1	0.01
Gloria Robinson III	HOPE6 Developments	24	0	0.00
Holland Gardens	Conventional Public Housing	189	9	0.05
Hudson Gardens	Conventional Public Housing	221	3	0.01
Lafayette Senior Living	HOPE6 Developments	82	3	0.04
Lafayette Village	HOPE6 Developments	77	0	0.00
Marion Gardens	Conventional Public Housing	228	25	0.11
Montgomery Gardens	Conventional Public Housing	434	366	0.84
Ocean Pointe (East and West)	HOPE6 Developments	45	2	0.04
Pacific Court	HOPE6 Developments	41	0	0.00
Thomas J. Stewart	Elderly/Disabled Developments	48	1	0.03
Woodward Terrace	HOPE6 Developments	45	0	0.01