Trapezoid Charts

forked from SpaceActuary's block: Bar Chart Transitions - Positive to Negative

<!DOCTYPE html>
<meta charset="utf-8">
  <style>
  	body { 
      margin: 0;
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0; 
      font-family: Arial, Helvetica, sans-serif
    }
    
    svg { 
      width: 100%; 
      height: 100%; 
    }
    
    .axis { 
      /*stroke: lightgrey;*/
      shape-rendering: crispEdges; 
    }
    
    .axis path {
      fill: none;
      stroke: lightgrey;
      
    }
    .x.axis line {
    	display: none;
    }
    
    .y.axis line {
      fill: none;
      stroke: lightgrey;
      
    }
  </style>
 
  <body>
    <button onClick="randomize();">Randomize</button>
        
    <script src="https://d3js.org/d3.v3.min.js"></script>
 
    <script>
      var years =  d3.range(2007, 2016, 1).map(function(d){ return {year: d};});
      
      var randomizeData = function(d){ 
          return {
            year: d.year,
            prior: (Math.random() * 6) + 3,
            actual: (Math.random() * 5) + 4,
            expected: (Math.random() * 5) + 4,
          }; 
      };
      
      data = years.map(randomizeData);
      
      var margin = {top: 30, right: 20, bottom: 50, left: 40},
    			width = 960 - margin.left - margin.right;
    			height = 500 - margin.top - margin.bottom;
          t = 1000, // transition time
          b = width / data.length  // block width
      
      var x = d3.scale.ordinal()
    		.rangeRoundBands([0, width], .1)
      	.domain(data.map(function(d) { return d.year; }));
      
      var y = d3.scale.linear()
        .range([height, 0])
        .domain([0, d3.max(data, function(d){ 
          return d3.max([d.prior, d.actual, d.expected])
        })])
        .nice();
 
      var xAxis = d3.svg.axis().scale(x).orient("bottom");
      var yAxis = d3.svg.axis().scale(y).orient("left");
    	
      
      var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
      		.attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    
      
      svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(0,0)")
        .call(yAxis);
       
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

//This is the accessor function we talked about above
      var lineFunction = d3.svg.line()
                               .x(function(d) { return d.x; })
                               .y(function(d) { return d.y; })
                               .interpolate("linear");
      
      var drawTrapezoid = function(d, i){
        var data = [
          {x: x(d.year), y: y(0) },
          {x: x(d.year), y: y(d.expected) },
          {x: x(d.year) + x.rangeBand(), y: y(d.actual) },
          {x: x(d.year) + x.rangeBand(), y: y(0) }
        ]
        return lineFunction(data);
      }
                
      var redraw = function(data, easeType){
          var trapezoids = svg.selectAll("path.bars")
                          .data(data)
          
          trapezoids.enter().append("path")
          		.attr("class","bars");
              
          trapezoids
          		.transition()
          		.duration(1000)
              .attr("d", drawTrapezoid)
          		.attr("fill", function(d){
            		return d.actual > d.expected ? "crimson" : "seagreen";
          		});
      }
      
      redraw(data);
      
      var randomize = function(){
        data = data.map(randomizeData)
        redraw(data);
      }
     
    </script>
  </body>
</html>

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

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