esnextbin sketch by ramnathv

index.js

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import d3 from 'd3';
import c3 from 'c3';

c3.generate({
  bindto: "#app",
  data: { 
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 50, 20, 10, 40, 15, 25] 
    ],
    type: "spline"
  } 
});

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.6/paper/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" />
  <!-- put additional styles and scripts here -->
  <style>
    #main{margin-top: 20px;}
    .y-axis-layer path,
    .y-axis-layer line{
      fill: none;
    }
    .y-axis-layer line{
      stroke: lightgray;
    }
    .y-axis-layer text{
      font-size: 11px;
    }
  </style>
</head>
<body>
  <!-- put markup and other contents here -->
  <div class="container" id="main">
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <div id="app"></div>
      </div>
    </div>
  </div>
</body>
</html>

esnextbin.md

made with [esnextbin](http://esnextb.in)

package.json

{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "d3": "3.5.16",
    "c3": "0.4.11-rc4"
  }
}

transpiled.js

'use strict';

var _d = require('d3');

var _d2 = _interopRequireDefault(_d);

var _c = require('c3');

var _c2 = _interopRequireDefault(_c);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

_c2.default.generate({
  bindto: "#app",
  data: {
    columns: [['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25]],
    type: "spline"
  }
});