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