web/examples/stacked-bar.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>dc.js - Stacked Bar Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
    <style>
      .dc-chart g.chart-body {
          clip-path: none;
      }
    </style>
  </head>
<body>

<div class="container">
<script type="text/javascript" src="header.js"></script>
    <div id="test"></div>

    <script type="text/javascript" src="../js/d3.js"></script>
    <script type="text/javascript" src="../js/crossfilter.js"></script>
    <script type="text/javascript" src="../js/dc.js"></script>
    <script type="text/javascript">

      var chart = dc.barChart("#test");
      d3.csv("morley.csv", function(error, experiments) {

          experiments.forEach(function(x) {
              x.Speed = +x.Speed;
          });

          var ndx                 = crossfilter(experiments),
              runDimension        = ndx.dimension(function(d) {return +d.Run;}),
              speedSumGroup       = runDimension.group().reduce(function(p, v) {
                  p[v.Expt] = (p[v.Expt] || 0) + v.Speed;
                  return p;
              }, function(p, v) {
                  p[v.Expt] = (p[v.Expt] || 0) - v.Speed;
                  return p;
              }, function() {
                  return {};
              });

          function sel_stack(i) {
              return function(d) {
                  return d.value[i];
              };
          }

          chart
              .width(768)
              .height(480)
              .x(d3.scale.linear().domain([1,21]))
              .margins({left: 80, top: 20, right: 10, bottom: 20})
              .brushOn(false)
              .clipPadding(10)
              .title(function(d) {
                  return d.key + '[' + this.layer + ']: ' + d.value[this.layer];
              })
              .dimension(runDimension)
              .group(speedSumGroup, "1", sel_stack('1'))
              .renderLabel(true);

          chart.legend(dc.legend());

          dc.override(chart, 'legendables', function() {
              var items = chart._legendables();
              return items.reverse();
          });

          for(var i = 2; i<6; ++i)
              chart.stack(speedSumGroup, ''+i, sel_stack(i));
          chart.render();

      });

    </script>

</div>
  </body>
</html>