integration/charts/bars.html from CSNW/d3.compose

integration/charts/bars.html
Summary

Maintainability

Test Coverage

Issues
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>d3.compose - bars</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="../../build/d3.compose.css">
  <style>
    .chart {
      float: left;
      width: 400px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    svg {
      border: solid 1px #ccc;
    }

    .test {
      fill: red;
    }
  </style>
</head>
<body>
  <div id="charts"></div>

  <script src="../../node_modules/d3/d3.js"></script>
  <script src="../../build/d3.compose.js"></script>
  <script type="text/javascript">
    var charts = d3.select('#charts');
    var id = 1;
    function draw(props) {
      var selection = charts.append('div')
        .attr('id', 'chart-' + (id++))
        .attr('class', 'chart');
      var container = new d3c.Compose(selection);
      container.draw(d3c.bars(props));
    }

    draw({data: [1, 2, 3]});

    draw({
      xScale: d3c.scaleBandSeries()
        .domain([0, 1, 2])
        .series(2)
        .paddingSeries(0.05),
      yScale: d3.scale.linear().domain([0, 5]),
      data: [
        {values: [1, 2, 3]},
        {values: [3, 2, 1]}
      ]
    });

    draw({
      data: [
        {values: [1, 2, 3]},
        {values: [-3, -2, -1]}
      ]
    });

    draw({
      data: [
        {values: [{x: 0, y: 1, 'class': 'test'}, 2, 3]},
        {values: [-3, -2, -1]}
      ],
      className: (d) => d['class']
    });

    draw({
      data: [
        {values: [1, 2, 3]},
        {values: [-3, -2, -1]}
      ],
      style: {fill: 'green'}
    });

    draw({
      data: [
        {values: [1, 2, 3]},
        {values: [-3, -2, -1]}
      ],
      horizontal: true
    });

    draw({
      yScale: d3.scale.linear().domain([-2, 6]),
      data: [
        {values: [1, 2, 3]},
        {values: [1, -2, 3]}
      ],
      stacked: true
    });

    draw({
      yScale: d3.scale.linear().domain([-2, 6]),
      data: [
        {values: [1, 2, 3]},
        {values: [1, -2, 3]}
      ],
      horizontal: true,
      stacked: true
    });

    // Histogram
    var values = d3.range(1000).map(d3.random.bates(10));
    var x = d3.scale.linear().domain([0, 1]);
    var domain = x.ticks(20);

    draw({
      xScale: d3c.scaleBandSeries().domain(domain),
      data: d3.layout.histogram().bins(domain)(values),
    });

    // Time
    var dates = d3.range(12).map(function(i) {
      return new Date((i + 1) + '/1/2015');
    });

    draw({
      xScale: d3c.scaleBandSeries().domain(dates),
      data: dates.map(function(x) {
        return {x: x, y: Math.random()};
      })
    });

    // Example
    draw({
      // Series values
      data: [
        {values: [{a: 'a', b: 10}, {a: 'b', b: 30}, {a: 'c', b: 20}]},
        {values: [{a: 'a', b: 30}, {a: 'b', b: 20}, {a: 'c', b: 10}]}
      ],

      xValue: d => d.a,
      yValue: d => d.b,
      xScale: d3c.scaleBandSeries()
        .domain(['a', 'b', 'c']).series(2).adjacent(false),
      yScale: d3.scale.linear().domain([0, 50]),

      horizontal: true,
      stacked: true
    });
  </script>
</body>
</html>