D3 Examples - TDD Bushing Demo

xxxxxxxxxx
 
<!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>
​
    <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
            graph: {
​
                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>
​
    