TDD Bar Chart

This chart takes as a base the simple bar chart by Mike Bostock and refactors that example using the reusable API, making it responsive and configurable.

It also uses the Data Manager API from the Developing a D3.js Edge Book.

It includes tests and was conceived on a TDD basis for the talk Better D3 Charts with the Reusable API.

From the original Block:

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.format - format percentages
d3.scale.ordinal - x-position encoding
d3.scale.linear - y-position encoding
d3.max - compute domains
d3.svg.axis - display axes

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
    <h2 class="block-title">TDD BarChart</h2>
    <div class="bar-graph"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="dataManager.js"></script>
    <script src="src.js"></script>
    <script type="text/javascript">
        // Code that instantiates the graph and uses the data manager to load the data
        var app = {
            // D3 Reusable API Chart
            barGraph: {

dataManager: null,

config: {
                    margin : {
                        top   : 20,
                        bottom: 30,
                        right : 20,
                        left  : 40
                    },
                    aspectWidth: 13,
                    aspectHeight: 4,
                    animation: 'linear',
                    dataURL: 'data.tsv'
                },

init: function(ele){
                    this.$el = ele;
                    this.requestNewData();
                    this.addEvents();
                },

addEvents: function(){
                    //Callback triggered by browser
                    window.onresize = $.proxy(this.drawGraph, this);
                },

calculateRatioHeight: function(width) {
                    var config = this.config;

return Math.ceil((width * config.aspectHeight) / config.aspectWidth);
                },

dataCleaningFunction: function(d){
                    d.frequency = +d.frequency;
                    d.letter = d.letter;
                },

drawGraph: function(){
                    var config = this.config,
                        width  = this.$el.width(),
                        height = this.calculateRatioHeight(width);

this.resetGraph();
                    this.barChart = graphs.barChart()
                        .width(width).height(height).margin(config.margin);

this.container = d3.select(this.$el[0])
                        .datum(this.data)
                        .call(this.barChart);
                },

handleReceivedData: function(result){
                    this.data = result;
                    this.drawGraph();
                },

requestNewData: function(el){
                    this.dataManager = graphs.dataManager();
                    this.dataManager.on('dataError', function(errorMsg){
                        console.log('error:', errorMsg);
                    });
                    this.dataManager.on('dataReady', $.proxy(this.handleReceivedData, this));
                    this.dataManager.loadTsvData(this.config.dataURL, this.dataCleaningFunction);
                },

resetGraph: function(){
                    this.$el.find('svg').remove();
                }
            }
        };

$(function(){
            app.barGraph.init($('.bar-graph'));
        });
    </script>
</body>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

https://d3js.org/d3.v3.min.js