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.
| <!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 |