D3 Examples - William Merrow - Data Visualization

xxxxxxxxxx
 
<!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>
​
        <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>
​
    