Reusable D3 Histograms

A fork of the code from @ejb 's block for his blog post “A better way to structure D3 code”.

Code for the histogram itself was heavily borrowed from this bl.ock by Mike Bostock.

Takes data in the form of a vector of numerical values.

Also see my second visualization using @ejb's style: the dotplot.

This is part of my larger project of making a d3/r library for dynamic and interactive basic statistical plots.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="chart.js"></script>

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

<button class="color" data-color="red">red bars</button>
<button class="color" data-color="green">green bars</button>
<button class="color" data-color="blue">blue bars</button>
<button class="data">change data</button>

// change line colour on click
d3.selectAll('button.color').on('click', function(){
    var color = d3.select(this).text().split(' ')[0];
    chart.setColor( color );
});

// change data on click to something randomly-generated
d3.selectAll('button.data').on('click', function(){
    chart.setData(d3.range(1000).map(function(){return Math.random() * 50}));
});

// 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', function(){
    chart.draw();
});

</script>

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