D3 Examples - TDD D3 Template

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
    <h2 class="block-title">TDD Template</h2>
    <div class="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
            graph: {
​
                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.chart = graphs.chart()
                        .width(width).height(height).margin(config.margin);
​
                    this.container = d3.select(this.$el[0])
                        .datum(this.data)
                        .call(this.chart);
                },
​
                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.graph.init($('.graph'));
        });
    </script>
</body>
​
    