D3 Examples - Homework 4

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Cambridge Development since 2010</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
            }
​
            h1 {
                font-size: 24px;
                margin: 0;
            }
​
            p {
                font-size: 14px;
                margin: 10px 0 0 0;
            }
​
            svg {
                background-color: white;
            }
​
            rect.future {
                fill: blue;
            }
​
            rect.future:hover {
                fill: #08f;
            }
​
            rect.complete {
                fill: #00a;
            }
​
            rect.complete:hover {
                fill: #08f;
            }
​
            .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>
    <h2>Gross floor area of Cambridge development projects since 2010</h2>
    <p>This chart shows the gross floor area, in square feet, of development projects in Cambridge, Mass since 2010.
    It includes projects which are not yet completed. Mouse over a bar to see the project address and type.</p>
    <p>Sources: <a href="https://data.cambridgema.gov/Planning/Development-Log-Current-Edition/wjwg-93qh">Current</a>
    and <a href="https://data.cambridgema.gov/Planning/Development-Log-Historical-Projects/a5ud-8kjv">historical</a> data
    from <a href="https://data.cambridgema.gov">Cambridge Open Data Portal</a>.
​
        <script type="text/javascript">     
            var padding = [5, 100, 30, 40]; // t r b l
            var rowHeight = 12;
            var height = 96 * rowHeight + padding[0] + padding[2];
            var width = 900;
​
            var widthScale = d3.scale.linear()
                                .range([ 0, width - padding[1] - padding[3] ]);
            
            var heightScale = d3.scale.ordinal()
                                .rangeRoundBands([ padding[0], height - padding[2] ], 0.1);
​
            var xAxis = d3.svg.axis()
                            .scale(widthScale)
                            .orient("bottom");
​
            var yAxis = d3.svg.axis()
                            .scale(heightScale)
                            .orient("left");
​
            // Formatter for numbers with commas
            format = d3.format('0,000');
​
            // Make project ID string
            var projID = function(d) { return '#' + d.ProjectID + ' - ' + d.Address; }
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);
​
            d3.csv("https://gist.githubusercontent.com/kent37/313c30a0fda288f994a2/raw/0e489d6d0cbd877d4fec6d54b6ec9bc60839d4b4/CambridgeDevelopment.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a['Total.GFA'], +b['Total.GFA']);
                });
​
                widthScale.domain([ 0, d3.max(data, function(d) {
                    return +d['Total.GFA'];
                }) ]);
​
                heightScale.domain(data.map(function(d) { return d.ProjectID; }));
​
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect");
​
                rects.attr({
                        x: padding[3],
                        y: function(d) {
                            return heightScale(d.ProjectID);
                        },
                        width: function(d) {
                            return widthScale(d['Total.GFA']);
                        },
                        height: heightScale.rangeBand(),
                        class: function(d) {
                            return d['Year.Complete'] == 'Future' ? 'future' : 'complete'
                        }
                    })
                    .append("title")
                    .text(function(d) {
                        return d['Address'] + " - " + d['Primary.Use'];
                    });
​
                svg.selectAll("text")
                   .data(data)
                   .enter()
                   .append("text")
                   .text(function(d) {
                        return d['Year.Complete'] + " - " + format(+d['Total.GFA']) + ' sq ft';
                   })
                   .attr({
                        x: function(d) { return padding[3] + widthScale(d['Total.GFA']) + 5; },
                        y: function(d) {
                            return heightScale(d.ProjectID) + heightScale.rangeBand()/2 + 3;
                        },
                        'font-family': "sans-serif",
                        'font-size': "9px",
                        fill: "black",
                        'text-anchor' : 'start'
                    })
                ;
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + padding[3] + "," + (height - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",0)")
                    .call(yAxis);
            });
​
​
        </script>
​
    </body>
</html>
    