TDD Bushing Demo

Gist to serve as template for future TDD D3 blocks

forked from Golodhros's block: TDD D3 Template

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
    <h2 class="block-title">TDD Brushing Demo</h2>

<div class="graph"></div>
    <p class="js-date-range date-range is-hidden">Selected from <span class="js-start-date"></span> to <span class="js-end-date"></span></p>

<p>Forked from:</p>
    <ul>
        <li><a href="https://bl.ocks.org/micahstubbs/3cda05ca68cba260cb81">Micah Stubbs block programmatic control of a d3 brush</a></li>
        <li><a href="https://bl.ocks.org/Golodhros/dfe7c0c8be07a461e6ba">My own TDD Template</a></li>
    </ul>

dataManager: null,

config: {
                    margin : {
                        top   : 20,
                        bottom: 40,
                        right : 20,
                        left  : 20
                    },
                    aspectRatio: 0.18,
                    dataURL: 'mock_data.csv'
                },

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

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

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

return Math.ceil(width * config.aspectRatio);
                },

dataCleaningFunction: function(d){
                    d.date = d.date;
                    d.value = +d.value;
                },

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

this.resetGraph();
                    this.chart = graphs.chart()
                        .width(width)
                        .height(height)
                        .margin(config.margin)
                        .onBrush(function(brushExtent) {
                            var format = d3.time.format('%m/%d/%Y');

$('.js-start-date').text(format(brushExtent[0]));
                            $('.js-end-date').text(format(brushExtent[1]));

$('.js-date-range').removeClass('is-hidden');
                        });

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

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

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

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

$(function(){
            app.graph.init($('.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