Housing New York Units by Building
The Department of Housing Preservation and Development (HPD) reports on buildings, units, and projects that began after January 1, 2014 and are counted towards the Housing New York plan. The Housing New York Units by Building file presents this data by building, and includes building-level data, such as house number, street name, BBL, and BIN for each building in a project. The unit counts are provided by building. URL / Download Data (CSV)
This donut chart shows the total numbers of projects in each neighborhood.
Origional code from shimizu.
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
<title>D3 v4 - piechart</title>
<style>
#graph {
width: 900px;
height: 500px;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
!(function () {
"use strict"
var width, height
var chartWidth, chartHeight
var margin
var svg = d3.select("#graph").append("svg")
var chartLayer = svg.append("g").classed("chartLayer", true)
d3.csv("borough.csv", cast, main)
function cast(d) {
d.number = +d.number
return d
}
function main(data) {
setSize(data)
drawChart(data)
}
function setSize(data) {
width = document.querySelector("#graph").clientWidth
height = document.querySelector("#graph").clientHeight
margin = {top: 40, left: 0, bottom: 40, right: 0}
chartWidth = width - (margin.left + margin.right)
chartHeight = height - (margin.top + margin.bottom)
svg.attr("width", width).attr("height", height)
chartLayer
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr("transform", "translate(" + [margin.left, margin.top] + ")")
}
var colorScale = d3.scaleOrdinal(d3.schemeSet3)
function drawChart(data) {
var arcs = d3.pie()
.sort(null)
.value(function (d) {
return d.number;
})
(data)
var arc = d3.arc()
.outerRadius(chartHeight / 2)
.innerRadius(chartHeight / 4)
.padAngle(0.03)
var pieG = chartLayer.selectAll("g")
.data([data])
.enter()
.append("g")
.attr("transform", "translate(" + [chartWidth / 2, chartHeight / 2] + ")")
var block = pieG.selectAll(".arc")
.data(arcs)
var newBlock = block.enter().append("g").classed("arc", true)
newBlock.append("path")
.attr("d", arc)
.attr("id", function (d, i) {
return "arc-" + i
})
.attr("stroke", "gray")
.attr("fill", function (d, i) {
return colorScale(i);
})
newBlock.append("text")
.attr("dx", 55)
.attr("dy", -5)
.append("textPath")
.attr("xlink:href", function (d, i) {
return "#arc-" + i;
})
.text(function (d) {
console.log(d);
return d.data.borough
})
}
}());
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v0.3.min.js