D3 Examples - Will's module 5 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;
        }
            
        circle:hover {fill: orange;}
        .axis path,
        .axis line {
            fill: none; stroke: gray; shape-rendering: crispEdges; }
            .y.axis path,
            .y.axis text {font-size: 14px;}
            .x.axis path,
            .x.axis text {font-size: 14px;}
        
        </style>
    </head>
​
<body>
​
    <p1>The Rise of PACs</p1>
    <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, 75, 100];
    
//SCALES:
//creates an ordinal scale for the x axis (years), sets range bands (in pixels)
    var xScale = d3.scale.linear().range([padding[3], w-padding[1]]);
//creates a linear scale for the y axis (# PACs), sets range (in pixels)
    var yScale = 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(xScale).orient("bottom").ticks(4).tickSize(-h+padding[0]+padding[2]).tickPadding(8);
//creates a var for a y axis at the left of the chart
    var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(3,"$").tickSize(-w+padding[1]+padding[3]).tickPadding(6);
    
//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)
        xScale.domain([0, d3.max(data, function(d){return +d.TotalPACs + 336; })    ]);
        
    //sets y axis domain from 0 to max number of super pacs (linear scale) - expressed as an array of two numbers, 0 to max.
        yScale.domain([0, d3.max(data, function(d){return +d.TotalContributionsAdj + 144.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); 
        
        svg.append("text")
            .attr("x",w/2-15)
            .attr("y",h-padding[2]+50)
            .text("Number of PACs");
        
        svg.append("text")
          .attr("text-anchor", "middle")
            .attr("y", padding[3]/2-15)
            .attr("x",-h/2+20)
            .attr("transform", "rotate(-90)")
            .text("Total PAC contributions (2014 dollars)");
       
    //DRAW CIRCLES: 
        var circles = 
            svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle");
        
        circles
        //sets circle center using x and y
            .attr("cx",function(d){return xScale(d.TotalPACs);})
            .attr("cy",function(d){return padding[0]+yScale(d.TotalContributionsAdj);})
        //sets radius
            .attr("r", 4)
            .attr("fill","darkslategray")
            ;
​
       
        
        
    } );
    
</script>
    <br> 
    <p3>Source: Campaign Finance Institute, 2015</p3>
</body>
</html>
​
    