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 interactive visualization looks at public housing projects' vacancy rates in comparison to total number of units, move ins and move outs.
The color indicates type of housing:  Conventional Public Housing, Elderly/Disabled Developments, Homeownership Project, HOPE6 Developments, Non-Federal Affordable.

  
## 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;
			}
			 .ScatterPlot circle: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;
			}
		</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="totalUnits">vs Total Units</button>
			<button id="moveIns">vs Move Ins</button>
			<button id="moveOuts">vs Move Outs</button>
		</p>

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

			// Adding colors based on public housing project type using https://github.com/mbostock/d3/wiki/Ordinal-Scales
			var color = d3.scale.ordinal()
    			.domain(["Conventional Public Housing",
    				"Elderly/Disabled Developments",
    				"Homeownership Project",
    				"Non-Federal Affordable"])
    			.range(["#ca0020","#f4a582","#92c5de","#0571b0"])


			var w = 700;
			var h = 400;

			var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] - padding[3] ]);

			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
						 	.tickFormat(function(d) {
								return percent(d);
							});

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

			var svg = d3.select("body")
				.append("svg")
				.attr("width", w )
				.attr("height", h )
				.attr("class","ScatterPlot");
			d3.csv("PAvg.csv", function(data) {

				data.sort(function(a, b) {
					return d3.descending(+a.vacancyRate, +b.vacancyRate);
				});

				dataset = data;

				xScale.domain([
					d3.min(data, function(d) {
						return +d.vacancyRate;
					}),
					d3.max(data, function(d) {
						return +d.vacancyRate;
					})
				]);

				yScale.domain([
					d3.max(data, function(d) {
						return +d.totalUnits;
					}),
					d3.min(data, function(d) {
						return +d.totalUnits;
					})
				]);

				circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

				circles.attr("cx", function(d) {
						return xScale(d.vacancyRate);
					})
					.attr("cy", function(d) {
						return yScale(d.totalUnits);
					})
					.attr("r", 0.1 )
					.attr("fill",function(d){return color(d.propertyCategory)})
					.append("title")
					.text(function(d) {
						return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.totalUnits + " total units";
					});

				circles.sort(function(a, b) {
						return d3.ascending(+a.vacancyRate, +b.vacancyRate);
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(2000)
					.attr("r", 4);


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

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

			});


			d3.select("#totalUnits")
				.on("click", function() {
					console.log("in on totalUnits");
					data = dataset;

					yScale.domain([
						d3.max(data, function(d) {
							return +d.totalUnits;
						}),
						d3.min(data, function(d) {
							return +d.totalUnits;
						})
					]);

					circles.sort(function(a, b) {
							return d3.ascending(+a.vacancyRate, +b.vacancyRate);
						})
						.transition()
						.delay(function(d, i) {
							return i * 50;
						})
						.duration(2000)
						.attr("cy", function(d) {
							return yScale(d.totalUnits);
						})
						.select("title")
						.text(function(d) {
							return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.totalUnits + " total units";;
						});

					d3.select(".y.axis")
						.transition()
						.duration(1000)
						.call(yAxis);
				});


			d3.select("#moveIns")
				.on("click", function() {
					console.log("in on moveIns");
					data = dataset;

					yScale.domain([
						d3.max(data, function(d) {
							return +d.moveIns;
						}),
						d3.min(data, function(d) {
							return +d.moveIns;
						})
					]);

					circles.sort(function(a, b) {
							return d3.ascending(+a.vacancyRate, +b.vacancyRate);
						})
						.transition()
						.delay(function(d, i) {
							return i * 50;
						})
						.duration(2000)
						.attr("cy", function(d) {
							return yScale(d.moveIns);
						})
						.select("title")
						.text(function(d) {
							return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.moveIns + " move ins";;
						});

					d3.select(".y.axis")
						.transition()
						.duration(1000)
						.call(yAxis);
				});

			d3.select("#moveOuts")
				.on("click", function() {
					console.log("in on moveOuts");
					data = dataset;

					yScale.domain([
						d3.max(data, function(d) {
							return +d.moveOuts;
						}),
						d3.min(data, function(d) {
							return +d.moveOuts;
						})
					]);

					circles.sort(function(a, b) {
							return d3.ascending(+a.vacancyRate, +b.vacancyRate);
						})
						.transition()
						.delay(function(d, i) {
							return i * 50;
						})
						.duration(2000)
						.attr("cy", function(d) {
							return yScale(d.moveOuts);
						})
						.select("title")
						.text(function(d) {
							return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.moveOuts + " move out";;
						});

					d3.select(".y.axis")
						.transition()
						.duration(1000)
						.call(yAxis);
				});

		</script>

	</body>
</html>

## PAvg.csv

          
            propertyName
            propertyCategory
            totalUnits
            vacantUnits
            vacancyRate
            moveIns
            moveOuts
            vacancyDaysAllUnits

            
              254 Bergen Avenue
              Non-Federal Affordable 
              36
              3
              0.09
              0.41
              0.24
              28.94

            
              Arlington Gardens
              Non-Federal Affordable 
              90
              7
              0.08
              0.82
              0.53
              78.12

            
              Barbara Place Terrace
              HOPE6 Developments
              40
              0
              0.01
              0.06
              0.12
              0.00

            
              Berry Gardens 
              Elderly/Disabled Developments
              356
              39
              0.11
              2.12
              2.94
              875.76

            
              Booker T. Washington 
              Conventional Public Housing
              305
              34
              0.11
              1.71
              2.35
              661.53

            
              Curries Woods 
              Conventional Public Housing
              295
              20
              0.07
              1.53
              1.88
              429.24

            
              Dwight St. Homes
              Homeownership Project
              19
              5
              0.24
              0.24
              0.06
              30.24

            
              Glenview I
              HOPE6 Developments
              38
              0
              0.00
              0.06
              0.00
              0.93

            
              Gloria Robinson I
              HOPE6 Developments
              58
              1
              0.02
              0.18
              0.29
              7.94

            
              Gloria Robinson II
              HOPE6 Developments
              71
              1
              0.01
              0.24
              0.35
              3.24

            
              Gloria Robinson III
              HOPE6 Developments
              24
              0
              0.00
              0.00
              0.00
              0.00

            
              Holland Gardens
              Conventional Public Housing
              189
              9
              0.05
              0.41
              0.94
              158.94

            
              Hudson Gardens 
              Conventional Public Housing
              221
              3
              0.01
              0.29
              0.24
              68.24

            
              Lafayette Senior Living
              HOPE6 Developments
              82
              3
              0.04
              0.24
              0.35
              26.44

            
              Lafayette Village 
              HOPE6 Developments
              77
              0
              0.00
              0.18
              0.18
              3.13

            
              Marion Gardens 
              Conventional Public Housing
              228
              25
              0.11
              0.94
              2.00
              345.71

            
              Montgomery Gardens 
              Conventional Public Housing
              434
              366
              0.84
              0.00
              1.00
              0.00

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

            
              Pacific Court 
              HOPE6 Developments
              41
              0
              0.00
              0.00
              0.00
              0.00

            
              Thomas J. Stewart
              Elderly/Disabled Developments
              48
              1
              0.03
              0.41
              0.65
              38.18

            
              Woodward Terrace
              HOPE6 Developments
              45
              0
              0.01
              0.06
              0.00
              0.69
	<!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;
	}
	.ScatterPlot circle: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;
	}
	</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="totalUnits">vs Total Units</button>
	<button id="moveIns">vs Move Ins</button>
	<button id="moveOuts">vs Move Outs</button>
	</p>

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

	// Adding colors based on public housing project type using https://github.com/mbostock/d3/wiki/Ordinal-Scales
	var color = d3.scale.ordinal()
	.domain(["Conventional Public Housing",
	"Elderly/Disabled Developments",
	"Homeownership Project",
	"Non-Federal Affordable"])
	.range(["#ca0020","#f4a582","#92c5de","#0571b0"])


	var w = 700;
	var h = 400;

	var xScale = d3.scale.linear()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickFormat(function(d) {
	return percent(d);
	});

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

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w )
	.attr("height", h )
	.attr("class","ScatterPlot");
	d3.csv("PAvg.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.vacancyRate, +b.vacancyRate);
	});

	dataset = data;

	xScale.domain([
	d3.min(data, function(d) {
	return +d.vacancyRate;
	}),
	d3.max(data, function(d) {
	return +d.vacancyRate;
	})
	]);

	yScale.domain([
	d3.max(data, function(d) {
	return +d.totalUnits;
	}),
	d3.min(data, function(d) {
	return +d.totalUnits;
	})
	]);

	circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(d.vacancyRate);
	})
	.attr("cy", function(d) {
	return yScale(d.totalUnits);
	})
	.attr("r", 0.1 )
	.attr("fill",function(d){return color(d.propertyCategory)})
	.append("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.totalUnits + " total units";
	});

	circles.sort(function(a, b) {
	return d3.ascending(+a.vacancyRate, +b.vacancyRate);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("r", 4);


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

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

	});


	d3.select("#totalUnits")
	.on("click", function() {
	console.log("in on totalUnits");
	data = dataset;

	yScale.domain([
	d3.max(data, function(d) {
	return +d.totalUnits;
	}),
	d3.min(data, function(d) {
	return +d.totalUnits;
	})
	]);

	circles.sort(function(a, b) {
	return d3.ascending(+a.vacancyRate, +b.vacancyRate);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("cy", function(d) {
	return yScale(d.totalUnits);
	})
	.select("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.totalUnits + " total units";;
	});

	d3.select(".y.axis")
	.transition()
	.duration(1000)
	.call(yAxis);
	});



	d3.select("#moveIns")
	.on("click", function() {
	console.log("in on moveIns");
	data = dataset;

	yScale.domain([
	d3.max(data, function(d) {
	return +d.moveIns;
	}),
	d3.min(data, function(d) {
	return +d.moveIns;
	})
	]);

	circles.sort(function(a, b) {
	return d3.ascending(+a.vacancyRate, +b.vacancyRate);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("cy", function(d) {
	return yScale(d.moveIns);
	})
	.select("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.moveIns + " move ins";;
	});

	d3.select(".y.axis")
	.transition()
	.duration(1000)
	.call(yAxis);
	});

	d3.select("#moveOuts")
	.on("click", function() {
	console.log("in on moveOuts");
	data = dataset;

	yScale.domain([
	d3.max(data, function(d) {
	return +d.moveOuts;
	}),
	d3.min(data, function(d) {
	return +d.moveOuts;
	})
	]);

	circles.sort(function(a, b) {
	return d3.ascending(+a.vacancyRate, +b.vacancyRate);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("cy", function(d) {
	return yScale(d.moveOuts);
	})
	.select("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + percent(+d.vacancyRate) + ", and " + d.moveOuts + " move out";;
	});

	d3.select(".y.axis")
	.transition()
	.duration(1000)
	.call(yAxis);
	});

	</script>

	</body>
	</html>
propertyName	propertyCategory	totalUnits	vacantUnits	vacancyRate	moveIns	moveOuts	vacancyDaysAllUnits
254 Bergen Avenue	Non-Federal Affordable	36	3	0.09	0.41	0.24	28.94
Arlington Gardens	Non-Federal Affordable	90	7	0.08	0.82	0.53	78.12
Barbara Place Terrace	HOPE6 Developments	40	0	0.01	0.06	0.12	0.00
Berry Gardens	Elderly/Disabled Developments	356	39	0.11	2.12	2.94	875.76
Booker T. Washington	Conventional Public Housing	305	34	0.11	1.71	2.35	661.53
Curries Woods	Conventional Public Housing	295	20	0.07	1.53	1.88	429.24
Dwight St. Homes	Homeownership Project	19	5	0.24	0.24	0.06	30.24
Glenview I	HOPE6 Developments	38	0	0.00	0.06	0.00	0.93
Gloria Robinson I	HOPE6 Developments	58	1	0.02	0.18	0.29	7.94
Gloria Robinson II	HOPE6 Developments	71	1	0.01	0.24	0.35	3.24
Gloria Robinson III	HOPE6 Developments	24	0	0.00	0.00	0.00	0.00
Holland Gardens	Conventional Public Housing	189	9	0.05	0.41	0.94	158.94
Hudson Gardens	Conventional Public Housing	221	3	0.01	0.29	0.24	68.24
Lafayette Senior Living	HOPE6 Developments	82	3	0.04	0.24	0.35	26.44
Lafayette Village	HOPE6 Developments	77	0	0.00	0.18	0.18	3.13
Marion Gardens	Conventional Public Housing	228	25	0.11	0.94	2.00	345.71
Montgomery Gardens	Conventional Public Housing	434	366	0.84	0.00	1.00	0.00
Ocean Pointe (East and West)	HOPE6 Developments	45	2	0.04	0.29	0.24	1.41
Pacific Court	HOPE6 Developments	41	0	0.00	0.00	0.00	0.00
Thomas J. Stewart	Elderly/Disabled Developments	48	1	0.03	0.41	0.65	38.18
Woodward Terrace	HOPE6 Developments	45	0	0.01	0.06	0.00	0.69