scotthmurray/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</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 color = d3.scale.ordinal()

			var w = 700;
			var h = 220;

			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.vacant, +b.vacant);
				});

				dataset = data;

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

				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.vacant);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill","steelblue")
					.append("title")
					.text(function(d) {
						return d.propertyName + "'s vacancy rate is " + d.vacant * 100.00 + "%";
					});

				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);
						});

					//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.vacant;
					}) ]);

					//Update rect widths
					rects.transition()
						.duration(1000)
						.attr("width", function(d) {
							return widthScale(d.vacant);
						});

					//Update axis
					d3.select(".x.axis")
						.transition()
						.duration(1000)
						.call(xAxis);

				});


		</script>

	</body>
</html>

## PAvg.csv

          
            propertyName
            propertyCategory
            vacant
            totalUnits

            
              254 Bergen Avenue
              Non-Federal Affordable
              0.0931
              612

            
              Arlington Gardens
              Non-Federal Affordable
              0.0758
              1530

            
              Berry Gardens
              Elderly/Disabled Developments
              0.1091
              6052

            
              Booker T. Washington
              Conventional Public Housing
              0.1111
              5185

            
              Curries Woods
              Conventional Public Housing
              0.0686
              5015

            
              Dwight St. Homes
              Homeownership Project
              0.2350
              326

            
              Holland Gardens
              Conventional Public Housing
              0.0476
              3213

            
              Hudson Gardens
              Conventional Public Housing
              0.0141
              3757

            
              Marion Gardens
              Conventional Public Housing
              0.1086
              3876

            
              Montgomery Gardens
              Conventional Public Housing
              0.8426
              7378

            
              Thomas J. Stewart
              Elderly/Disabled Developments
              0.0306
              816
	<!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</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 color = d3.scale.ordinal()

	var w = 700;
	var h = 220;

	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.vacant, +b.vacant);
	});

	dataset = data;

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

	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.vacant);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill","steelblue")
	.append("title")
	.text(function(d) {
	return d.propertyName + "'s vacancy rate is " + d.vacant * 100.00 + "%";
	});

	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);
	});

	//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.vacant;
	}) ]);

	//Update rect widths
	rects.transition()
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.vacant);
	});

	//Update axis
	d3.select(".x.axis")
	.transition()
	.duration(1000)
	.call(xAxis);

	});








	</script>

	</body>
	</html>
propertyName	propertyCategory	vacant	totalUnits
254 Bergen Avenue	Non-Federal Affordable	0.0931	612
Arlington Gardens	Non-Federal Affordable	0.0758	1530
Berry Gardens	Elderly/Disabled Developments	0.1091	6052
Booker T. Washington	Conventional Public Housing	0.1111	5185
Curries Woods	Conventional Public Housing	0.0686	5015
Dwight St. Homes	Homeownership Project	0.2350	326
Holland Gardens	Conventional Public Housing	0.0476	3213
Hudson Gardens	Conventional Public Housing	0.0141	3757
Marion Gardens	Conventional Public Housing	0.1086	3876
Montgomery Gardens	Conventional Public Housing	0.8426	7378
Thomas J. Stewart	Elderly/Disabled Developments	0.0306	816