New York Housing

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.

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

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