Skip to content

Instantly share code, notes, and snippets.

@adlukasiak
Last active September 7, 2015 03:42
Show Gist options
  • Save adlukasiak/734f6bf1076958531097 to your computer and use it in GitHub Desktop.
Save adlukasiak/734f6bf1076958531097 to your computer and use it in GitHub Desktop.
Jersey City . Public Housing

The Montgomery Gardens public housing project has over 80% vacancy rate. It was vacated and imploaded on August 29, 2015. You can watch this exciting event here.

This static visualization compares vacancies between different public housing properties and between different program types. The entire data set contains granular information including monthly data, total number of units, move-in and move-out numbers, etc.

Data Source: http://jerseycitynj.gov/data

propertyCategory vacant
Conventional Public Housing 0.1988
Elderly/Disabled Developments 0.0698
Homeownership Project 0.2350
Non-Federal Affordable 0.0845
<!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;
padding: 50px;
}
svg text {
font: Arial;
font-weight:bold;
font-size:24px;
}
.Barchart rect:hover {
fill: #4D5085 !important;
fill-opacity: 1;
}
</style>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("h1").text("Average Monthly Vacancies: Jan'14 to May'15");
d3.select("body").append("h6").text("Hover over for details").style("font-style","italic");
// To scale the length of the bars on the bar chart
var factor = 700;
// 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"]);
d3.select("body").append("h3").text("By Property");
var svg2 = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 110) // height is 10 * number of rows
.attr("class","Barchart");
d3.csv("PAvg.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(a.vacant, b.vacant);
});
var rects = svg2.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 0)
.attr("y", function(d, i) {
return i * 10;
})
.attr("width", function(d) {
return d.vacant * factor;
})
.attr("height", 8)
.attr("fill",function(d){return color(d.propertyCategory)})
.append("title")
.text(function(d) {
return d.propertyName + "'s vacancy rate is " + d.vacant * 100 + "%";
});
});
d3.select("body").append("h3").text("By Project Type");
var svg1 = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 40) // height is 10 * number of rows
.attr("class","Barchart");
d3.csv("CAvg.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(a.vacant, b.vacant);
});
var rects = svg1.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 0)
.attr("y", function(d, i) {
return i * 10;
})
.attr("width", function(d) {
return d.vacant * factor;
})
.attr("height", 8)
.attr("fill",function(d){return color(d.propertyCategory)})
.append("title")
.text(function(d) {
return d.propertyCategory + "'s vacancy rate is " + d.vacant * 100 + "%";
});
});
</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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment