KotoJS BarChart (ES2015)

This is an super basic example of using KotoJS to make reusable components.

IMPORTANT NOTE

Please note that this example will only work on a very modern browser because the javascript is writting using ES2015 syntax.

For production applications where ES2015 is limitied, I recommend using a transpiler like babeljs to transpile the code to valid ES5 syntax.

See the starter template for more info.

Click here for ES5 version of this chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://npmcdn.com/koto@0.1.6/dist/koto.js"></script>
<svg width="100%" height="100%" viewBox="0 0 800 500">
  <g id="chart"></g>
</svg>
<script>
'use strict';
class KotoBarChart extends Koto {
  constructor(selection) {
    super(selection);

// Setup
    var chart = this;

// define configs
    this.configs = {
      height: {
        name: 'height',
        description: 'The height of the chart.',
        value: 500,
        type: 'number',
        units: 'px',
        category: 'Size',
        getter: function (){
          // get value
          return this.value;
        },
        setter: function (newValue){
          // Set value
          return newValue;
        }
      },
      width: {
        name: 'width',
        description: 'The widthj of the chart.',
        value: 800,
        units: 'px',
        type: 'number',
        category: 'Size'
      }
    };

// Scales
    this.x = d3.scale.linear()
      .range([0, this.config('width')]);

this.y = d3.scale.linear()
      .domain([0, 100])
      .rangeRound([0, this.config('height')]);

// add a layer
    this.layer('bars', this.base.append('g'), {
      // destructuring ftw
      dataBind(data) {
        return this.selectAll('rect')
          .data(data, d => d.time);
      },
      insert() {
        return this.append('rect');
      }
    })
    // lifecycle events (Arrow function syntax)
    .on('enter', selection => {
      var length = this._length = selection.data().length;
      selection.attr('x', (d, i) => this.x(i + 1) - 0.5 )
        .attr('y', (d) => this.config('height') - this.y(d.value) - 0.5)
        .attr('width', this.config('width') / length)
        .style('fill', 'steelBlue')
        .attr('height', d => this.y(d.value));
    })
    .on('merge:transition', selection => {
      selection.duration(1000)
        .attr('x', (d, i) => this.x(i) - 0.5);
    })
    .on('exit:transition', selection => {
      selection.duration(1000)
        .attr('x', (d, i) => this.x(i - 1) - 0.5)
        .remove();
    });

// add another layer 
    this.layer('labels', this.base.append('g'), {
      dataBind(data) {
        return this.selectAll('text')
          .data(data, d => d.time);
      },
      insert() {
        return this.append('text');
      }
    })
    // non arrow function syntax
    .on('enter', function() {
      var length = this.data().length;
      this
        .attr('x', (d, i) => chart.x(i + 1) + ((chart.config('width') / length) / 2))
        .attr('y', d => chart.config('height') - chart.y(d.value) - 15)
        .style('fill', 'steelBlue')
        .style('text-anchor', 'middle')
        .text(d => d.value);
    })
    .on('merge:transition', function() {
      this.duration(1000)
        .attr('x', (d, i) => chart.x(i) + ((chart.config('width') / chart._length) / 2));
    })
    .on('exit:transition', function() {
      this.duration(1000)
        .attr('x', (d, i) => chart.x(i - 1) - 0.5)
        .remove();
    });
  }

//override methods
  preDraw(data) {
    this.x.domain([0, data.length]);
  }
}
</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://npmcdn.com/koto@0.1.6/dist/koto.js