wmerrow/OutsideSpending.csv

## index.html
<!DOCTYPE html>
<head>
<html lang="en">
    <meta charset="utf-8">
		<title>William Merrow - Data Visualization</title>
         <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
        <script src="http://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
	<!DOCTYPE html>
	<head>
	<html lang="en">
	<meta charset="utf-8">
	<title>William Merrow - Data Visualization</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<script src="http://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>
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