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>
    //Firstly, you need to hold off assigning the y scales' range and domains until you have the data loaded, as the bandwidth won't be correct.  Secondly, the keys for the vehicles and fuel types were mixed up. and then, once that was sorted - the y positions for the groups and rects needed tweaking to account for the bandwidth, and the d[0] and d[1].  You will need to update the part which assigns the max value to y linear scale, as it should be max value for a particular vehicle+fuel type, not d.total, as this scale needs to span the y0.bandwidth, not the whole height of the chart.  hope this makes sense//
    
    
    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; }))
      
      y.range([y0.bandwidth(), 0])
      .domain([0, 1800]).nice();
//       .domain([0, d3.max(data, function(d) { return d.total; })]).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(69," + height + ")")
     
 //labels
        group.append("text")
        .attr("class", "group-label")
        .attr("x", -8)
        .attr("y", function(d) {return y(d[0][0]) - y0.bandwidth() - (y(d[0][0]) - y(d[0][1]))/2;  }) 
        .attr("dy", ".35em")
        .text(function(d) {return d.key})
   
        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(69," + 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) { return "translate(69," + 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) { console.log(d[1][1]); return y(d[1][1]) / 1000; })
    }
  
    function transitionStacked() {
        var t = svg.transition()
        .duration(750),
        g=t.selectAll(".group")
          .attr("transform", "translate(69," + height + ")");
        g.selectAll("rect")
          .attr("y", function(d) { return y(d[1]) - y0.bandwidth(); });
      g.select(".group-label")
        .attr("y", function(d) { return y(d[0][0]) - y0.bandwidth() - (y(d[0][0]) - y(d[0][1]))/2;  }) 
    }
      
});    
  
  </script>
</body>
​
    