William Merrow - Data Visualization by wmerrow

index.html

<!DOCTYPE html>
<head>
<html lang="en">		
    <meta charset="utf-8">
		<title>William Merrow - Data Visualization</title>
         <script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
        <script src="//labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

        <style type="text/css">
                
        p0 {color: black; font-size: 12px;}
            p1 {color: black; font-family: sans-serif; font-size: 40px; font-weight: bold;}
        p2 {color: black; font-size: 22px;}
        p3 {color: black; font-size: 18px; font-weight: bold; text-indent: 250px;}
        p4 {color: black; font-size: 12px;}
            
        body {
            background-color: whitesmoke; font-family: sans-serif;
        }
        svg {
            background-color: whitesmoke;
        }
            
        rect:hover {fill: black;}
        .axis path,
        .axis line {
            fill: none; stroke: black; shape-rendering: crispEdges; }
            .y.axis path,
            .y.axis line {stroke: gray;}
            .y.axis text {font-size: 14px;}
            .x.axis path,
            .x.axis line {opacity: 0;}
            .x.axis text {font-size: 16spx;}
        
            /*TOOLTIP:*/
            .d3-tip {
            line-height: 1;
            font-size: 14px;
            font-weight: bold;
            padding: 5px;
            background: rgba(225, 225, 225, 0.8);
            color: black;
            border-radius: 2px;
            }
            
            
        </style>
    </head>

<body>

    <p0><i>Mouse over bars for tooltip<br>Refresh for animation</i></p0><br><br>
    <p1>The Disastrous Effect of <i>Citizens United</i></p1>
    <br>
    <p2>Since the misguided 2010 ruling, the state of our campaign finance system has gone from bad to worse</p2>
    <br>
    <br>
    <br>
    <p3>Outside spending in presidential elections, 1992-2012:</p3>
    <br>
    
    
<script type="text/javascript">

    var w = 550;
    var h = 400;
    
//PADDING: 
    var padding = [40, 25, 20, 80];
    
//SCALES:
//creates an ordinal scale for the x axis (election cycles), 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 (outside spending), 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").tickValues([0,.25,.5,.75,1]).tickFormat(function(d){return "$"+d+"b";}).tickSize(-w+padding[1]+padding[3]).outerTickSize(0);
    

    //TOOLTIP:
    var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-5, 0])
  .html(function(d) {
    return d.cycle + ": <span style='color: darkred'>" + "$" + d3.round(d.totalexpB,2) + " billion</span>";
  })
    
    //creates a var for an SVG
    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    
    //TOOLTIP:
    svg.call(tip);
    
    d3.csv("OutsideSpending.csv", function(data) {
   
    //sets x axis domain (ordinal scale)
        widthScale.domain(data.map( function(d){return d.cycle; }));
        
    //sets y axis domain from 0 to 1.03
        heightScale.domain([0, 1.03 ]);
    
    //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
            .attr("x",function(d){return widthScale(d.cycle);})
            .attr("y", h-padding[2])
            .attr("width", widthScale.rangeBand())
            .attr("height", 0)
            .attr("fill","darkslategray")
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide)
        ;
        
        bars
            .transition().attr("y", function(d){return padding[0]+heightScale(d.totalexpB);})
            .attr("height", function(d) {return heightScale(0)-heightScale(d.totalexpB);}).duration(1800)
        ;

       
        
    } );
    
</script>
    <br>
    <br>
    <p4>Source: Center for Responsive Politics, 2015</p4>
</body>
</html>

OutsideSpending.csv

cycle,totalexp,totalexpB,totalexporig,indexp,eleccomm,commcost,demfor,demagnst,repubfor,repubagnst
1992,19.635123,0.019635123000,19635123,10947342,0,8687781,8785053,1456731,8372777,927304
1996,17.884043,0.017884043000,17884043,10167742,0,7716301,6669119,1210676,6238743,3643821
2000,51.638411,0.051638411000,51638411,33778636,0,17859775,25015992,1492988,18001514,6558918
2004,193.129472,0.193129472000,193129472,63885795,98898197,30345480,60063207,4155900,22545608,7401923
2008,338.399923,0.338399923000,338399923,143618022,131137181,63644720,120809305,33570233,20382064,32428627
2012,1038.736997,1.038736997000,1038736997,1002135419,15437830,21230660,73333480,454601541,175122392,294832515