web/examples/box-plot-time.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Box-Plot 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"/>
</head>
<body>

<div class="container">
<script type="text/javascript" src="header.js"></script>
<div id="box-test"></div>
<div id="pie-chart"></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.boxPlot("#box-test"),
    pie = dc.pieChart("#pie-chart");

d3.csv("monthly-move.csv", function(error, data) {

  data.forEach(function(x) {
    x.date = new Date(x.date);
    x.close = +x.close;
  });

  data = data.slice(0, 200);

  var ndx             = crossfilter(data),
      openDimension   = ndx.dimension(function(d) {return parseInt(d.open/10)*10;}),
      openGroup       = openDimension.group(),
      monthDimension  = ndx.dimension(function(d) {return d3.time.month(d.date); }),
      closeGroup      = monthDimension.group().reduce(
        function(p,v) {
          p.push(v.close);
          return p;
        },
        function(p,v) {
          p.splice(p.indexOf(v.close), 1);
          return p;
        },
        function() {
          return [];
        }
      );

  chart
    .width(768)
    .height(480)
    .margins({top: 10, right: 50, bottom: 30, left: 50})
    .dimension(monthDimension)
    .group(closeGroup)
    .x(d3.time.scale())
    .round(d3.time.month.round)
    .xUnits(d3.time.months)
    .elasticY(true);

  // this demonstrates solving elasticX manually, avoiding the
  // bug where the rightmost bar/box is not displayed, #792
  function calc_domain(chart) {
      var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
          max = d3.max(chart.group().all(), function(kv) { return kv.key; });
      max = d3.time.month.offset(max, 1);
      chart.x().domain([min, max]);
  }
  chart.on('preRender', calc_domain);
  chart.on('preRedraw', calc_domain);

  pie
    .width(140)
    .height(140)
    .radius(70)
    .dimension(openDimension)
    .group(openGroup);

  dc.renderAll();
});

</script>

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