Old school D3 from simpler times

All examples By author By category About

jwilber

Full window Github gist

es6 class

Built with blockbuilder.org

<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>

<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>

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