D3 Examples - Reusable dotplots.

Reusable dotplots.

My second visualization using the coding style from @ejb 's blog post “A better way to structure D3 code”.

This is a dotplot that can be updated and resized easily.

The data it takes is in the form of data = [{"val": 4, "group": "a"}, ...].

Also see my first visualization using @ejb's style: the histogram.

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

xxxxxxxxxx
 
<!-- load in D3 and Chart constructor scripts -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="colorbrewer.min.js"></script>
<script src="dotplots.js"></script>
​
<style>
.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>
​
<!-- these will be made useful in the script below -->
<button class="data">change data</button>
<button class="Bins_15">Change to 15 rows</button>
<button class="Bins_35">Change to 35 rows</button>
​
<script>
​
function generateData(groups){
    var data = []
    groups.forEach(function(group){
        var numberOfValues = 200;
        var randomNumbers = d3.range(numberOfValues).map(d3.random.normal())
        randomNumbers.forEach( function(num){
            data.push( {"group": group, "val": num} )
        } )
    })
    return data;
}
​
// var data_for_plotting = generateData(["a", "b", "c"])
var data_for_plotting = [generateData(["Birds", "Mammals"]),
                         generateData(["a"]),
                         generateData(["a","b", "c", "d", "e"]),
                         generateData(["a", "b", "c"])
                         ]
​
//send to plotting function.
var dot_plots = new Dot_Plots({
    data: data_for_plotting[0],
    element: document.querySelector('.chart-container'),
    bins: 35,
})
​
var updateIndex = 1
// change data on click to something randomly-generated
d3.selectAll('button.data').on('click', function(){
    console.log(updateIndex)
    dot_plots.setData(data_for_plotting[updateIndex%4]);
    updateIndex++
});
​
d3.select('.Bins_15').on('click', function(){
    dot_plots.updateBins(15);
});
​
d3.select('.Bins_35').on('click', function(){
    dot_plots.updateBins(35);
});
​
// redraw chart on each resize
d3.select(window).on('resize', function(){
    dot_plots.resize();
});
​
</script>
​
    