William Merrow - Data Visualization

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

<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>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v3.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js