D3 Examples - Jersey City . Public Housing

Jersey City . Public Housing
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!
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Jersey City . Public Housing</title>
        <script type="text/javascript" src="https://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="https://www.jerseycitynj.gov/data.aspx?id=14832">Jersey City Housing Authority</a>.</p>
​
        <p>
            <button id="vacancy">Vacancy</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 color = d3.scale.ordinal()
​
            var w = 700;
            var h = 220;
​
            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.vacant, +b.vacant);
                });
​
                dataset = data;
​
                widthScale.domain([ 0, d3.max(data, function(d) {
                    return +d.vacant;
                }) ]);
​
                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.vacant);
                    })
                    .attr("height", heightScale.rangeBand())
                    .attr("fill","steelblue")
                    .append("title")
                    .text(function(d) {
                        return d.propertyName + "'s vacancy rate is " + d.vacant * 100.00 + "%";
                    });
​
                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);
                        });
​
                    //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.vacant;
                    }) ]);
​
                    //Update rect widths
                    rects.transition()
                        .duration(1000)
                        .attr("width", function(d) {
                            return widthScale(d.vacant);
                        });
​
                    //Update axis
                    d3.select(".x.axis")
                        .transition()
                        .duration(1000)
                        .call(xAxis);
​
                });
​
​
​
​
​
​
​
​
        </script>
​
    </body>
</html>
    