D3 Examples - Module 5

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 5 Assignment</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: lightblue;
                font-family: georgia, Helvetica;
            }
​
            svg {
                background-color: steelblue;
            }
​
            circle {
            fill: white;
            }
​
            circle:hover {
                fill: yellow;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: white;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: georgia;
                font-size: 12px;
                font-color: white;
            }
​
​
            h1{
                color:black;
            }
            h3{
                color:black;
            }
            
​
        </style>
    </head>
    <body>
            <h1>Average Daily Inmate Population</h1>
            <h3>Source: <a href="https://www.vera.org/sites/default/files/resources/downloads/price-of-prisons-updated-version-021914.pdf">VERA Institute of Justice: The Price of Prisons</a>, 2012</h3>
​
    
        <script type="text/javascript">     
​
            var w = 830;
            var h = 650;
            var padding = [ 5, 5, 50, 100 ]; //Top, right, bottom, left
​
            var xScale = d3.scale.linear()
                                //.range([ 0, w ]);
                                .range([ padding[3], w - padding[1] - padding[3] ]);
​
            var yScale = d3.scale.linear()
                                //.rangeRoundBands([ 0, h ], 0.1);
                                .range([ padding[0], h - padding[2] ]);
​
            var xAxis = d3.svg.axis()
                                .scale(xScale)
                                .orient("bottom")
                                .ticks(10);
​
            var yAxis = d3.svg.axis()
                                .scale(yScale)
                                .orient("left")
                                .tickFormat(function(d) {
                                    return d;
                                });
​
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
​
​
            d3.csv("priceofprisonsperinmate.csv", function(data) {
​
​
                xScale.domain([ 
                    d3.min(data, function(d) { 
                    return +d.bbAverageDailyInmatePopulation; 
                    }),
​
                    d3.max(data, function(d) { 
                    return +d.bbAverageDailyInmatePopulation; 
                    })
                ]);
                
                yScale.domain([ 
                    d3.max(data, function(d) { 
                    return +d.bTaxpayerCostofPrisons; 
                    }),
 
                    d3.min(data, function(d) { 
                    return +d.bTaxpayerCostofPrisons; 
                    }) 
                ]);
​
                var circles = svg.selectAll("circle")
                                .data(data)
                                .enter()
                                .append("circle");
​
                circles.attr("cx", function(d) {
                        return xScale(d.bbAverageDailyInmatePopulation);
                    })
                    .attr("cy", function(d) {
                        return yScale(d.bTaxpayerCostofPrisons);
                    })
                    .attr("r", 0.1)
                    .attr("fill", "steelblue")
                    .append("title")
                    .text(function(d) {
                            return d.state + "'s average daily inmate population is " + d.bbAverageDailyInmatePopulation + " (in thousands)" + "and cost of prisons is " + d.bTaxpayerCostofPrisons + " (in millions)";
                        });
​
                circles.sort(function(a, b) {
                        return d3.ascending(+a.bbAverageDailyInmatePopulation, + b.bbAverageDailyInmatePopulation);
                    })
                    .transition()
                    .delay(function(d, i) {
                        return i * 50;
                    })
                    .duration(2000)
                    .attr("r", 3);
​
            // Adding axis to "x"
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h - padding [2] + 10) + ")")
                    .call(xAxis);
​
            // Adding axis to "y" 
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
                    .call(yAxis);
                        // padding[3] - 10 opens more space for the center axis
​
            });
​
​
        </script>
​
    </body>
</html>
    