D3 Examples - co2 in fuel

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
  <style>
​
    .tip {
      line-height: 1;
      padding: 6px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      font-family: Lato;
    }
 
    /* Creates a small triangle extender for the tooltip */
    .tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }
 
    /* Style northward tooltips specifically */
    .tip.n:after {
      margin: -2px 0 0 0;
      top: 100%;
      left: 0;
    }
    .xAxis{
      stroke-dasharray: ;
    }
    .group-label {
      font-weight: bold;
      text-anchor: end;
    }
​
 
  </style>
</head>
​
<body>
  <form>
  <label>
    <input type="radio" name="mode" value="stacked"> Stacked
  </label>
  <label>
    <input type="radio" name="mode" value="multiples" checked>Multiples
  </label>
</form>
  <script>
    var margin = { top: 40, right: 40, bottom: 40, left: 40};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    
    
    
    var svg = d3.select('body')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .attr('transform', 'translate(' + margin.left +', ' + margin.top + ')');
​
    var gSVG = svg.append('g')
      .attr('class', 'svg'); 
​
    var x = d3.scaleBand()
        .rangeRound([0, width])
        .paddingInner(0.3)
        .align(0.1);
​
    var y0 = d3.scaleBand()
        .rangeRound([height, 0]);
​
    var y = d3.scaleLinear(); 
       
    var zScale = d3.scaleOrdinal()
        .range(["DarkGoldenRod ", "GoldenRod", "OliveDrab", "YellowGreen", "LimeGreen"]);
​
    var data = data;
    var allVehicleTypeKeys = ["diesel", "B20", "gasoline", "B100", "CNG"];
    
    
    d3.csv("The Impact of Fuel.csv", function(d, i, columns) {
      for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
          d.total = t;
          return d;
      },  function(error, data) {
      if (error) throw error;
​
      var allFuelTypeKeys = data.columns.slice(1);
    
​
      data.sort(function(a, b) { return b.total - a.total; }); 
       
      x.domain(data.map(function(d) {return d.vehicleType; }));
​
      zScale.domain(allFuelTypeKeys);
      
      var stack = d3.stack()
      .keys(allFuelTypeKeys)
      (data);
​
      y0.domain(stack.map(function(d) { return d.key; }))
      
      console.log(y0.bandwidth());
      
      y.range([y0.bandwidth(), 0])
      .domain([0, 1800]).nice();
​
​
    
      var tip = d3.tip()
        .attr("class", "tip")
        .offset([-8, 0])       
        .html(function(d) { return d[1]-d[0];})
        svg.call( tip)
​
            
      var group = gSVG.selectAll('g')
        .data(stack)
        .enter().append('g')
        .attr('class', 'group')
        .attr("fill", function(d) {
          return zScale(d.key); })
       .attr("transform", "translate(0," + height + ")")
 
        /*group.append("text")
        .attr("class", "group-label")
        .attr("x", 106)
        .attr("y", function(d) { return y(d[1]); })
        .attr("dy", ".35em")*/
​
        group.selectAll('rect')
        .data(function(d) { return d;})
        .enter().append("rect")
        .attr("x", function(d) { return x(d.data.vehicleType)})
        .attr("y", function(d) { return y(d[1]) - y0.bandwidth(); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]) })
        .attr("width", x.bandwidth())
        .style("stroke", "white")
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
​
​
      //append x axis
      svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
​
      var title = svg.append("text")
          .text("POUNDS CO2")
          .attr("transform", "translate("+[margin.right *10, margin.top]+")")
          .attr("text-anchor","center")
          .style("font-size", 28)
          .style("font-family", "Lato")
          .style("fill", "black")
          .style("opacity", .6);
​
    d3.selectAll("input")
      .on("change", change);
    
    function change() {
      if (this.value === "stacked") transitionStacked();
      else transitionMultiples ();
    }
​
    d3.select("input[value=\"stacked\"]")
    .property("checked", true)
​
    function transitionMultiples() {
​
      var t = svg.transition()
          .duration(750);
        g = t.selectAll(".group")
          .attr("transform", function(d) { 
          console.log(y0(d.key));
          return "translate(0," + (y0(d.key)) + ")"; 
        });
        t.selectAll("rect")
          .attr("y", function(d) {
            return y0.bandwidth() + (y(d[1]) - y(d[0])); 
          });
​
        // g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
    }
  
    function transitionStacked() {
        var t = svg.transition()
        .duration(750),
        g=t.selectAll(".group")
          .attr("transform", "translate(0," + height + ")")
        g.selectAll("rect")
          .attr("y", function(d) { return y(d[1]) - y0.bandwidth(); });
    }
     
});    
 
  </script>
</body>
​
    