es6 class

<!-- load in D3 and Chart constructor scripts -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

<script src="chart.js"></script>

​

<style>

/* a little bit of CSS to make the chart readable */

.line {

    fill: none;

    stroke-width: 4px;

}

.axis path, .tick line {

    fill: none;

    stroke: #333;

}

</style>

​

<!-- here's the div our chart will be injected into -->

<div class="chart-container" style="max-width: 1000px;"></div>

​

<script>

// create new chart using Chart constructor

const chart = new Chart({

    element: document.querySelector('.chart-container'),

    data: [

        [new Date(2016,0,1), 10],

        [new Date(2016,1,1), 70],

        [new Date(2016,2,1), 30],

        [new Date(2016,3,1), 10],

        [new Date(2016,4,1), 40]

    ]

});

// redraw chart on each resize

// in a real-world example, it might be worth ‘throttling’ this

// more info: https://sampsonblog.com/749/simple-throttle-function

d3.select(window).on('resize', () => chart.draw() );

</script>

​