charts_pitcher_plot.js

var PITCH_APP = {

    url: 'pitchplot.json',

    eventsData: [],
    activeEvent: null,

    data: [],
    activeIndex: null,

    defaultVideoIndex: 0,
    activeVideoIndex: null,

    options: {
        selectModule: {
            appendToSelector: '#pitch-select-module',
        },
        chartModule: {
            appendToSelector: '#pitch-chart-module',
            width: 500,
            height: 281,
            margins: {
                top: 10,
                right: 10,
                bottom: 20,
                left: 10,
                xAxis: {
                    left: 116,
                    right: 104,
                }},
            pitchBg: 'pitch-bg.jpg',
            pitchBgAlpha: 0.3,
            color: null,
            defaultBallColor:'#b3b3b3',
            ballHoverClass:"hovered",
            ballActiveClass:"active",
            svg: null,
            mainGroup: null,
            tooltip: null,
            scaleX: null,
            scaleY: null,
            strikeZone:{
                color: '#2ad146',
                width: 1
            },
            heatmap: {
                show: false,
                instance: null,
            }
        },
        videoModule: {
            videoJs: null,
            ready: false,
            appendToSelector: '#pitch-video-module'
        },
        tableModule:{
            appendToSelector: '#pitch-table-module',
            rowActiveClass:"active",
            tbody: null,
            columns: [
                {
                    key: 'pitchSpeed',
                    label: 'Exit velocity',
                    fixed: 1,
                },
                {
                    key: 'pitchType',
                    label: 'Type',
                },
                {
                    key: 'pitchResult',
                    label: 'Result',
                },
                {
                    key: 'videos',
                    label: '',
                },
            ]
        },
    },

    start: function(){
        // Set-up the export button
        d3.select('#pitch-export').on('click', function(){
            PITCH_APP.export();
        });

        this.activeVideoIndex = this.defaultVideoIndex;

        this.loadData();
    },

    loadData: function(){
        var that = this;

        d3.json(this.url, function (error, rawData) {
            if (error) throw error;

            var data = rawData['RECORDS'].map(function (d) {

                var videos=[];
                var videoSrc;
                if(typeof d["angle1"] != 'undefined' && d["angle1"] !== null){
                    videoSrc = (''+d["angle1"]).trim();
                    if(videoSrc.length > 0 ){
                        videos.push({
                            src: videoSrc
                        });
                    }
                }

                if(typeof d["angle2"] != 'undefined' && d["angle2"] !== null){
                    videoSrc = (''+d["angle2"]).trim();
                    if(videoSrc.length > 0){
                        videos.push({
                            src: videoSrc
                        });
                    }
                }

                return {
                    pitchSpeed: +d["pitchvelo"],
                    pitchX: +d["pitchX"],
                    pitchY: +d["pitchY"],
                    pitchType: (''+d["ptype"]).trim().toLowerCase(),
                    pitchResult: (''+d["presult"]).trim().toLowerCase(),
                    eventID: +d["eventID"],
                    eventName: (''+d["eventName"]).trim(),
                    eventDate: moment(d["eventDate"], "YYYY-MM-DD HH:mm:ss"),
                    videos: videos
                }
            });

            that.eventsData = d3.nest()
                .key(function(d) {  return d.eventID; })
                .entries(data);

            that.updateData();
            that.initModules();
            that.updateModules();
        });
    },

    initModules: function(){
        this.initSelectModule();
        this.initTableModule();

        this.initChart();
    },
    updateModules: function(){
        this.updateTableModule();
        this.updateChart();
    },
    animateModules:function(){
        this.animateTableModule();
        this.updateVideoModule();
        this.animateChart();
    },

    updateData: function(){
        var that = this;
        that.data = d3.merge(
            this.eventsData.map(function(d){
                return d.values.filter(function(dd){
                    if(that.activeEvent === null)
                        return true;

                    return dd.eventID == that.activeEvent;
                })
            })
        );
    },

    ballManuallySelected: function(index){
        this.setIndexAndAnimate(index);
    },

    setIndexAndAnimate: function(index){
        this.setActiveIndex(index);
        this.animateModules();
    },

    setActiveIndex:function(index){
        this.activeIndex = index;
    },

    hasVideo: function(data){
        return data.videos.length;
    },

    // ============================== VIDEO MODULE ==============================
    initVideoPlayer: function(){
        var that = this;
        var options = this.options.videoModule;

        var outerBlock = d3.select(options.appendToSelector).html("");

        var innerBlock = outerBlock
            .append('div')
            .attr('class', 'embed-responsive embed-responsive-16by9');

        var videoTag = innerBlock.append('video')
            .attr('class', 'pitch-video-js video-js embed-responsive-item');

        var	videoUnsupportedWarn = videoTag.append('p')
            .attr('class', 'vjs-no-js')
            .html('To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>');

        options.videoJs = videojs(document.querySelector('.pitch-video-js'), {
            aspectRatio: '16:9',
            controls: true,
            autoplay: false,
            preload: 'auto',
        });

        options.videoJs.on('playing', function() {

        });

        options.videoJs.on('ended', function() {

        });

        options.videoJs.ready(function() {
            that.onVideoPlayerReady();
        });
    },

    onVideoPlayerReady: function(){
        this.options.videoModule.ready = true;
        this.options.videoModule.videoJs.play();
    },

    updateVideoModule: function(){
        var options = this.options.videoModule;

        if(options.videoJs !== null){
            this.disposeVideoPlayer();
        }

        if(this.activeIndex != null){
            var datum = this.data[this.activeIndex];

            if(this.hasVideo(datum)){
                this.initVideoPlayer();

                if(typeof datum['videos'][this.activeVideoIndex] == 'undefined')
                    this.setVideoActiveIndex(this.defaultVideoIndex);

                this.setVideoSrc(datum['videos'][this.activeVideoIndex]['src']);
            }

            this.highlightVideoIcon();
        }
    },

    setVideoSrc: function(videoSrc){
        this.options.videoModule.videoJs.src({
            src: videoSrc,
            type: 'video/mp4'
        });
    },

    disposeVideoPlayer: function(){
        this.options.videoModule.videoJs.dispose();
        this.options.videoModule.videoJs = null;
        this.options.videoModule.ready = false;
    },

    // ============================== TABLE MODULE ==============================

    initTableModule: function() {
        var options = this.options.tableModule;

        var table = d3.select(options.appendToSelector).append('table')
            .attr('class', 'table');
        var thead = table.append('thead');
        options.tbody = table.append('tbody');

        // append the header row
        thead.append('tr')
            .selectAll('th')
            .data(options.columns)
            .enter()
            .append('th')
            .text(function (column) { return column.label; });
    },

    updateTableModule:function(){
        var that = this;
        var options = this.options.tableModule;

        // create a row for each object in the data
        var rowsSelection = options.tbody.selectAll('tr')
            .data(this.data);

        rowsSelection.exit().remove();

        var rowsEnter = rowsSelection
            .enter()
            .append('tr')
            .on('click', function(d, i){
                PITCH_APP.ballManuallySelected(i);
            });

        var rows = rowsSelection.merge(rowsEnter);

        // create a cell in each row for each column
        var cellsSelection = rows.selectAll('td')
            .data(function (row, i) {
                return options.columns.map(function (column) {
                    var value, type;
                    switch(column.key){
                        case 'videos':
                            type = 'videos';
                            value = row.videos;
                            break;
                        case 'pitchType':
                        case 'pitchResult':
                            type = 'string';
                            value = row[column.key];
                            break;
                        default:
                            type = 'number';
                            value = parseFloat(row[column.key]).toFixed(column.fixed);
                            break;
                    }
                    return {
                        type: type,
                        value: value
                    };
                });
            });

        var cellsEnter = cellsSelection
            .enter()
            .append('td');

        var cells = cellsSelection.merge(cellsEnter);

        cells.each(function (d) {
            var el = d3.select(this);

            switch(d.type){
                case 'videos':
                    el.html('');

                    el.append('div')
                        .attr('class', 'text-nowrap')
                        .selectAll('i')
                        .data(d.value)
                        .enter()
                        .append('i')
                        .attr('class', function(d,i){
                            if(i > 0){
                                return 'fa fa-video-camera fa-rotate-315';
                            }else{
                                return 'fa fa-video-camera';
                            }
                        })
                        .style('margin-right', '6px')
                        .on('click', function(d, video_i){
                            that.onClickVideoIcon(video_i);
                        });
                    break;

                case 'string':
                case 'number':
                    el.html(function (d) { return d.value; });
                    break;
            }
        });
    },

    animateTableModule: function(){
        this.setRowActive(this.activeIndex);
    },

    onClickVideoIcon: function(video_index){
        this.setVideoActiveIndex(video_index);
    },

    setVideoActiveIndex: function(index){
        this.activeVideoIndex = index;
    },

    setRowActive: function(index){
        var options = this.options.tableModule;

        // only one active
        options.tbody.selectAll('tr')
            .classed(options.rowActiveClass, false);

        var tr = options.tbody.selectAll('tr').filter(function(d,i){return i === index});
        if(tr.size() > 0){
            var alreadyIsActive = tr.classed(options.rowActiveClass);

            if( ! alreadyIsActive){
                tr.classed(options.rowActiveClass, ! alreadyIsActive);
            }
        }
    },

    highlightVideoIcon: function(){
        var videoOptions = this.options.videoModule;

        this.extinguishAllVideoIcons();

        d3.select('#pitch-table-module tr.active .fa-video-camera:nth-child('+(1+this.activeVideoIndex)+')').classed('green', true);
    },

    extinguishAllVideoIcons: function(){
        d3.selectAll('#pitch-table-module .fa-video-camera').classed('green', false);
    },



    // ============================== CHART MODULE ==============================
    initChart: function(){
        var that = this;
        var options = this.options.chartModule;

        var chartWidth = options.width - options.margins.left - options.margins.right,
            chartHeight = options.height - options.margins.top - options.margins.bottom;

        options.svg = d3.select(options.appendToSelector)
            .append("svg")
            .attr("width", options.width)
            .attr("height", options.height);

        // background image
        options.svg.append("svg:defs")
            .append("svg:pattern")
            .attr("id", "pitch-bg")
            .attr('patternUnits', 'userSpaceOnUse')
            .attr("x", 0)
            .attr("y", 0)
            .attr('width', options.width)
            .attr('height', options.height)
            .append("svg:image")
            .attr("xlink:href", options.pitchBg)
            .attr("x", 0)
            .attr("y", 0)
            .attr('width', options.width)
            .attr('height', options.height);

        options.svg.append("rect")
            .attr('id', 'pitch-bg-rect')
            .attr('fill', 'url(#pitch-bg)')
            .attr('width', options.width)
            .attr('height', options.height);

        options.mainGroup = options.svg.append('g')
            .attr('transform', 'translate(' + options.margins.left + ',' + options.margins.top + ')')
            .attr('id', options.id);

        options.scaleX = d3.scaleLinear()
            .domain([-4, 4])
            .range([0, chartWidth - options.margins.xAxis.left - options.margins.xAxis.right]);

        options.scaleY = d3.scaleLinear()
            .domain([0, 6])
            .range([chartHeight, 0]);

        options.color = d3.scaleOrdinal()
            .domain(["fastball", "curveball", "changeup", "slider", "knuckleball", "splitter"])
            .range(["red", "blue", "yellow", "green", "purple", "orange", "#b3b3b3"]);


        this.initHeatmapCheckbox();

        // tooltip
        options.tooltip = d3.select("body")
            .append("div")
            .attr("class", "pitch-tooltip")
            .style("opacity", 0);

        // strikeZone
        var strikeZone = options.svg.append('g')
            .attr('transform', 'translate(' + (options.scaleX(-1.1) + options.margins.left + options.margins.xAxis.left) + ',' + (options.scaleY(3.5) + options.margins.top) + ')');

        strikeZone.append('rect')
            .attr('width', options.scaleX(1.1) - options.scaleX(-1.1))
            .attr('height', options.scaleY(1.0) - options.scaleY(3.5))
            .attr('fill', 'none')
            .attr('stroke', options.strikeZone.color)
            .attr('stroke-width', options.strikeZone.width);

        // axes
        var axisXGroup = options.svg.append('g')
            .attr('transform', 'translate(' + (options.margins.left + options.margins.xAxis.left) + ',' + (options.height - options.margins.bottom) + ')');

        var axisX = d3.axisBottom(options.scaleX);
        axisXGroup.call(axisX);

        var axisYGroup = options.svg.append('g')
            .attr('transform', 'translate(' + (options.margins.left + options.margins.xAxis.left + options.scaleX(0)) + ',' + options.margins.top + ')');

        var axisY = d3.axisLeft(options.scaleY).ticks(6);
        axisYGroup.call(axisY);

        this.styleAxis();

        // labels
        var labels = [
            {
                color: options.color('fastball'),
                label: 'Fastball'
            },
            {
                color: options.color('curveball'),
                label: 'Curveball'
            },
            {
                color: options.color('changeup'),
                label: 'Changeup'
            },
            {
                color: options.color('slider'),
                label: 'Slider'
            },
            {
                color: options.color('knuckleball'),
                label: 'Knuckleball'
            },
            {
                color: options.color('splitter'),
                label: 'Splitter'
            },
        ]

        var legends = options.mainGroup.selectAll('rect.legend')
            .data(labels);

        legends
            .enter()
            .append('rect')
            .attr('class', 'legend')
            .attr('width', 10)
            .attr('height', 10)
            .attr('fill', function(d){return d.color;})
            .attr('transform', function(d,i) {return 'translate(' + options.margins.left + ',' + (options.margins.top + i*15) + ')'})

        legends
            .enter()
            .append('text')
            .text(function(d){return d.label;})
            .attr('fill', 'white')
            .attr('font-size', '12px')
            .attr('x', 13 + options.margins.left)
            .attr('y', function(d,i){return options.margins.top + 9+i*15})
    },

    initHeatmap: function(){
        var that = this;
        var options = this.options.chartModule;

        var heatmapWidth = options.width,
            heatmapHeight = options.height;

        var heatmapWrapper = d3.select(options.appendToSelector)
            .append("div")
            .attr("class", 'pitch-heatmap-wrapper')
            .style("width", heatmapWidth+"px")
            .style("height", heatmapHeight+"px");

        var heatmap = heatmapWrapper
            .append('div')
            .attr("class", 'pitch-heatmap');


// minimal heatmap instance configuration
        options.heatmap.instance = h337.create({
            // only container is required, the rest will be defaults
            container: document.querySelector('.pitch-heatmap'),
        });
    },

    initHeatmapCheckbox: function(){
        var that = this;
        var heatmapCheckbox = d3.select("#pitch-heatmap-checkbox");

        heatmapCheckbox.on("change", function(){
            that.options.chartModule.heatmap.show = !!this.checked;
            that.onHeatmapCheckboxChange();
        });
    },

    onHeatmapCheckboxChange: function(){
        this.drawBackground();
    },

    drawBackground: function () {
        var that = this;
        var options = this.options.chartModule;

        if(true === options.heatmap.show){
            that.drawHeatmap();

            d3.select('#pitch-bg-rect').attr('opacity', options.pitchBgAlpha);
        }else{
            that.clearHeatmap();

            d3.select('#pitch-bg-rect').attr('opacity', 1.0);
        }
    },

    drawHeatmap: function(){
        var that = this;
        var options = this.options.chartModule;

        // now generate some random data
        var points = [];
        var max = 1;

        if(options.heatmap.instance === null){
            this.initHeatmap();
        }

        for(var i=0; i < that.data.length; i++){
            var coordinates = that.ballXY(that.data[i]);

            var point = {
                x: Math.round(coordinates.x + options.margins.left),
                y: Math.round(coordinates.y + options.margins.top),
                value: 0.7
            };
            points.push(point);
        }

// heatmap data format
        var data = {
            max: max,
            data: points
        };
// if you have a set of datapoints always use setData instead of addData
// for data initialization
        options.heatmap.instance.setData(data);
    },

    clearHeatmap: function(){
        var that = this;
        var options = this.options.chartModule;

        if(options.heatmap.instance === null)
            return;

        options.heatmap.instance.setData({
            max: 0,
            min: 0,
            data: [

            ]
        });
    },

    updateChart: function(){
        var that = this;
        var options = this.options.chartModule;

        var circlesSelection = options.mainGroup.selectAll('circle')
            .data(this.data);

        circlesSelection.exit().remove();

        var circlesEnter = circlesSelection
            .enter()
            .append('circle')
            .attr('class', 'pitch-ball')
            .attr('stroke', 'none')
            .attr('r', 5)
            .on('click', function(d, i) {
                var el = d3.select(this);
                that.ballManuallySelected(i);
            })
            .on('mouseenter', function(d) {
                var el = d3.select(this);

                // tooltip
                options.tooltip.transition()
                    .duration(200)
                    .style("opacity", .8);

                options.tooltip.html(parseFloat(d.pitchSpeed).toFixed(1)+' mph')
                    .style("left", (d3.event.pageX + 5) + "px")
                    .style("top", (d3.event.pageY - 28 - 5) + "px");

                // classes
                el.classed(options.ballHoverClass, true);
            })
            .on('mouseout', function(d) {
                var el = d3.select(this);

                // tooltip
                options.tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);

                // classes
                el.classed(options.ballHoverClass, false);
            });

        var circles = circlesSelection.merge(circlesEnter);

        circles
            .attr('fill', function(d,i){return options.color(d.pitchType)})
            .attr('cx', function(d, i){return that.ballXY(d).x})
            .attr('cy', function(d, i){return that.ballXY(d).y});

        this.drawBackground();
    },

    animateChart: function(){
        var that = this;
        var options = this.options.chartModule;

        options.mainGroup.selectAll('circle.pitch-ball')
            .classed(options.ballActiveClass, false);

        var el = options.mainGroup.selectAll('circle.pitch-ball').filter(function(d,i){return i===that.activeIndex});

        if(el.size() <= 0)
            return;

        // only one active
        var alreadyIsActive = el.classed(options.ballActiveClass);

        if( ! alreadyIsActive){
            el.classed(options.ballActiveClass, ! alreadyIsActive);
            el.classed(options.ballHoverClass, false);
        }
    },

    styleAxis: function(){
        var that = this;
        var options = this.options.chartModule;

        options.svg.selectAll('path.domain').attr('stroke', '#DEDEDE');
        options.svg.selectAll('g.tick line').attr('stroke', '#DEDEDE');
        options.svg.selectAll('g.tick text').attr('fill', '#DEDEDE');
    },

    ballXY: function(d){
        var that = this;
        var options = this.options.chartModule;

        return {
            x: options.margins.xAxis.left + options.scaleX(d.pitchX),
            y: options.scaleY(d.pitchY),
        }
    },

    // ============================== SELECT MODULE ==============================

    initSelectModule:function(){
        var options = this.options.selectModule;
        var select = d3.select(options.appendToSelector).append('select')
            .attr('name', 'active_event')
            .attr('class', 'form-control');

        var nullOption = select.append('option')
            .attr('value', '')
            .text('ALL PITCHES');

        for(var i=0; i < this.eventsData.length; i++){
            select.append('option')
                .attr('value', this.eventsData[i].values[0].eventID)
                .text(this.eventsData[i].values[0].eventName);
        }

        select.on('change', this.onSelectChange);
    },

    onSelectChange: function (e) {
        var old = PITCH_APP.activeEvent;
        PITCH_APP.activeEvent = this.value.length > 0 ? this.value : null;

        if(old != PITCH_APP.activeEvent){
            PITCH_APP.onActiveEventChange();
        }
    },

    onActiveEventChange: function(){
        this.updateData();
        this.updateModules();
        this.setIndexAndAnimate(null);
    },

    // ============================== EXPORT MODULE ==============================
    export: function(){
        var svgString = this.getSVGString(this.options.chartModule.svg.node());

        this.svgString2Image( svgString, 2 * this.options.chartModule.width, 2 * this.options.chartModule.height, 'png', save ); // passes Blob and filesize String to the callback

        function save( dataBlob, filesize ){
            saveAs( dataBlob, 'pitches_chart.png' ); // FileSaver.js function
        }
    },

    // Below are the functions that handle actual exporting:
    // getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
    getSVGString: function( svgNode ) {
        svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
        var cssStyleText = getCSSStyles( svgNode );
        appendCSS( cssStyleText, svgNode );

        var serializer = new XMLSerializer();
        var svgString = serializer.serializeToString(svgNode);
        svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
        svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix

        return svgString;

        function getCSSStyles( parentElement ) {
            var selectorTextArr = [];

            // Add Parent element Id and Classes to the list
            selectorTextArr.push( '#'+parentElement.id );
            for (var c = 0; c < parentElement.classList.length; c++)
                if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
                    selectorTextArr.push( '.'+parentElement.classList[c] );

            // Add Children element Ids and Classes to the list
            var nodes = parentElement.getElementsByTagName("*");
            for (var i = 0; i < nodes.length; i++) {
                var id = nodes[i].id;
                if ( !contains('#'+id, selectorTextArr) )
                    selectorTextArr.push( '#'+id );

                var classes = nodes[i].classList;
                for (var c = 0; c < classes.length; c++)
                    if ( !contains('.'+classes[c], selectorTextArr) )
                        selectorTextArr.push( '.'+classes[c] );
            }

            // Extract CSS Rules
            var extractedCSSText = "";
            for (var i = 0; i < document.styleSheets.length; i++) {
                var s = document.styleSheets[i];

                try {
                    if(!s.cssRules) continue;
                } catch( e ) {
                    if(e.name !== 'SecurityError') throw e; // for Firefox
                    continue;
                }

                var cssRules = s.cssRules;
                for (var r = 0; r < cssRules.length; r++) {
                    if ( contains( cssRules[r].selectorText, selectorTextArr ) )
                        extractedCSSText += cssRules[r].cssText;
                }
            }


            return extractedCSSText;

            function contains(str,arr) {
                return arr.indexOf( str ) === -1 ? false : true;
            }

        }

        function appendCSS( cssText, element ) {
            var styleElement = document.createElement("style");
            styleElement.setAttribute("type","text/css");
            styleElement.innerHTML = cssText;
            var refNode = element.hasChildNodes() ? element.children[0] : null;
            element.insertBefore( styleElement, refNode );
        }
    },

    svgString2Image: function( svgString, width, height, format, callback ) {
        var that = this;
        var format = format ? format : 'png';

        var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL

        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        var image = new Image();
        image.onload = function() {
            context.clearRect ( 0, 0, width, height );

            var backgroundImage = new Image();
            backgroundImage.onload = function(){
                if(that.options.chartModule.heatmap.show){
                    var heatmapDataURL = that.options.chartModule.heatmap.instance.getDataURL();
                    var heatmap = new Image();
                    heatmap.onload = function(){
                        context.globalAlpha = that.options.chartModule.pitchBgAlpha;
                        context.drawImage(backgroundImage, 0, 0, width, height);
                        context.globalAlpha = 1.0;
                        context.drawImage(heatmap, 0, 0, width, height);
                        context.drawImage(image, 0, 0, width, height);

                        that.onAllImagesLoad(canvas, callback);
                    };
                    heatmap.src = heatmapDataURL;
                }else{
                    context.drawImage(backgroundImage, 0, 0, width, height);
                    context.drawImage(image, 0, 0, width, height);
                                        //
                    that.onAllImagesLoad(canvas, callback);
                }

            };
            backgroundImage.src = that.options.chartModule.pitchBg;
        };

        image.src = imgsrc;
    },

    onAllImagesLoad: function(canvas, callback){
        canvas.toBlob( function(blob) {
            var filesize = Math.round( blob.length/1024 ) + ' KB';
            if ( callback ) callback( blob, filesize );
        });
    }
};

PITCH_APP.start();