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.

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

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

<button class="data">change data</button>
<button class="Bins_15">Change to 15 rows</button>
<button class="Bins_35">Change to 35 rows</button>

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>

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