doevisualizations/doeVisualization/app.js

Data Visualization Library based on RequireJS and D3.js (v4+)

/*All 3rd party libraries are dropped in js/vendor folder and configured here for shorthand require callsreviews*/

requirejs.config({
    baseUrl: './',
    paths: {
        'text': 'js/vendor/text',
        'modernizer': 'js/vendor/modernizr',
        'fastclick': 'node_modules/fastclick/lib/fastclick',
        'jquery': 'node_modules/jquery/dist/jquery.min',
        'jqueryuiwidget': 'node_modules/components-jqueryui/jquery-ui',
        'hammerjs': 'node_modules/hammerjs/hammer.min',
        'underscore': 'node_modules/underscore/underscore-min',
        'handlebars': 'node_modules/handlebars/dist/handlebars.amd.min',
        'd3': 'node_modules/d3/build/d3.min',
        'doebartemplate': 'js/vendor/text!js/doebar/doebar.html'
    },
    shim: {
        'jquery': {
            exports: ['$']
        },
        'jqueryuiwidget': {
            deps: ['jquery']
        }
    },
    map: {
        '*': {
            'css': 'node_modules/require-css/css' // or whatever the path to require-css is
        }
    }
});

/*This is the starting point of the app , The main.js is being called from here*/
require(['jquery',
    'underscore',
    'fastclick',
    'jqueryuiwidget',
    'modernizer',
    'js/service/sampleDataService',
    'js/vendor/text',
    'hammerjs',
    'js/doebar/doebar',
    'js/doestackedbar/doestackedbar',
    'js/doedonut/doedonut',
    'js/doepie/doepie',
    'js/doetext/doetext',
    'js/doedonut2/doedonut2',
    'js/doedivergedbar/doedivergedbar',
    'js/doefootballfield/doefootballfield',
    'js/doeboxplot/doeboxplot'
], function($,
    _,
    FastClick,
    jqueryuiwidget,
    modernizer,
    sampleDataService) {

    // Attach Fastclick to drop the 300 ms
    FastClick.attach(document.body);

    $.get('color9.json').done($.proxy(function(data) {

        var colors = data;

        // donutTest1
        // donutdatacolor7
        $.get('donutdatacolor7.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.one').doedonut(data);
        }, this));

        // piedatacolor7
        $.get('piedatacolor7.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.pie').doepie(data);
        }, this));

        //  groupedBar
        // suppression   
        $.get('stackedBar2.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.stackedBar').doestackedbar(data);
        }, this));

        // 4-yearGradRate2
        // test 
        $.get('test.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.bar').doebar(data);
        }, this));

        $.get('groupedBar3.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.groupedbar').doebar(data);
        }, this));

        // text
        // suppression
        // fooAP
        $.get('suppression.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.three').doetext(data);
        }, this));

        // footballdatacolor7
        // fooNAEP1
        // fooAP
        // fooELAGrade
        // fooOverlap
        // fooSuppressed
        $.get('fooSuppressed.json').done($.proxy(function(data) {
            data.ColorPalette = colors;
            $('div.footballfield').doedivergedbar(data);
        }, this));

        // $.get('boxplotdatacolor7.json').done($.proxy(function(data) {
        //     data.ColorPalette = colors;
        //     $('div.boxplot').doeboxplot(data);
        // }, this));


        // $.get('Essadata2screenshot.json').done($.proxy(function(data) {

        //     var options = data;

        //     options.colorData = colors;

        //     $.get('ESSAdatabyyear.json').done($.proxy(function(data) {

        //         var groupeddata = _.groupBy(data, $.proxy(function(item) {
        //             return item.Year;
        //         }, this));
        //         for (var k in groupeddata) {
        //             options.Data = groupeddata[k];
        //             options.ChartTitle = k;
        //             $('body').append('<div class="donut' + k + ' container container2" style="width: 300px; height: 300px"></div>');
        //             var selector = 'div.donut' + k;
        //             console.log(options);
        //             $(selector).doedonut2(options);
        //         }
        //     }, this));
        // }, this));

    }, this));
});