D3 Examples - Will's module 4 exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<html lang="en">        
    <meta charset="utf-8">
        <title>Will's module 4 exercise</title>
         <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        
        <style type="text/css">
                
        p1 {color: darkslategray; font-family: sans-serif; font-size: 35px; font-weight: bold;}
        p2 {color: black; font-size: 18px;}
        p3 {color: black; font-size: 12px;}
            
        body {
            background-color: whitesmoke; font-family: sans-serif;
        }
        svg {
            background-color: lightgray;
        }
            
        rect:hover {fill: orange;}
        .axis path,
        .axis line {
            fill: none; stroke: black; shape-rendering: crispEdges; }
            .y.axis path,
            .y.axis text {font-size: 14px;}
            .x.axis path,
            .x.axis line {opacity: 0;}
            .x.axis text {font-size: 12px;}
        
        </style>
    </head>
​
<body>
​
    <p1>The Rise of PACs</p1>
    <br>
    <p2>Total contributions by political action committees to Congressional candidates (millions of 2014 dollars)</p2>
    <br>
    <br>
    
<script type="text/javascript">
​
//these vars are the dimensions of the svg canvas (in pixels)
    var w = 900;
    var h = 400;
    
//PADDING:
//padding will leave blank space between the chart area and the svg edges 
    var padding = [35, 25, 50, 70];
    
//SCALES:
//creates an ordinal scale for the x axis (years), sets range bands (in pixels)
    var widthScale = d3.scale.ordinal().rangeRoundBands([padding[3], w-padding[1]], .2);
//creates a linear scale for the y axis (# PACs), sets range (in pixels)
    var heightScale = d3.scale.linear().range([h-padding[2]-padding[0],0]);
​
//AXES:
//creates a var for an x axis at the bottom of the chart
    var xAxis = d3.svg.axis().scale(widthScale).orient("bottom").tickSize(3);
//creates a var for a y axis at the left of the chart
    var yAxis = d3.svg.axis().scale(heightScale).orient("left").ticks(6,"$").tickSize(-w+padding[1]+padding[3]);
    
//creates a var for an SVG
    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    
    
    d3.csv("PACdata.csv", function(data) {
   
    //sets x axis domain (ordinal scale)
        widthScale.domain(data.map( function(d){return d.ElectionYear; }));
        
    //sets y axis domain from 0 to max number of super pacs (linear scale) - expressed as an array of two numbers, 0 to max.
        heightScale.domain([0, d3.max(data, function(d){return +d.TotalContributionsAdj + 44.2; })    ]);
    
    //DRAW AXES:
                svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (h - padding[2]) + ")")
            .call(xAxis);
​
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
            .call(yAxis); 
       
    //DRAW BARS: 
        var bars = 
            svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect");
        
        bars
        //sets top left corner of each bar using x and y
            .attr("x",function(d){return widthScale(d.ElectionYear);})
            .attr("y",function(d){return padding[0]+heightScale(d.TotalContributionsAdj);})
        //sets height and width of each bar
            .attr("width", widthScale.rangeBand())
            .attr("height", function(d) {return heightScale(0)-heightScale(d.TotalContributionsAdj);})
            .attr("fill","slategray")
            ;
​
       
        
        
    } );
    
</script>
    <br> 
    <p3>Source: Campaign Finance Institute, 2015</p3>
</body>
</html>
​
    