Week2 - Two Charts w/ Tooltip

chartist-plugin-tooltip.css

.chartist-tooltip {
  position: absolute;
  display: inline-block;
  opacity: 0;
  min-width: 5em;
  padding: .5em;
  background: #F4C63D;
  color: #453D3F;
  font-family: Oxygen,Helvetica,Arial,sans-serif;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  -webkit-transition: opacity .2s linear;
  -moz-transition: opacity .2s linear;
  -o-transition: opacity .2s linear;
  transition: opacity .2s linear; }
  .chartist-tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top-color: #F4C63D; }
  .chartist-tooltip.tooltip-show {
    opacity: 1; }

/*# sourceMappingURL=chartist-plugin-tooltip.css.map */

chartist-plugin-tooltip.js

/**
 * Chartist.js plugin to display a data label on top of the points in a line chart.
 *
 */
/* global Chartist */
(function (window, document, Chartist) {
  'use strict';

  var defaultOptions = {
    currency: undefined,
    tooltipOffset: {
      x: 0,
      y: -20
    },
    appendToBody: false,
    class: undefined
    // showTooltips: true,
    // tooltipEvents: ['mousemove', 'touchstart', 'touchmove'],
    // labelClass: 'ct-label',
    // labelOffset: {
    //   x: 0,
    //   y: -10
    // },
    // textAnchor: 'middle'
  };

  Chartist.plugins = Chartist.plugins || {};
  Chartist.plugins.tooltip = function (options) {
    options = Chartist.extend({}, defaultOptions, options);

    return function tooltip(chart) {
      var tooltipSelector = 'ct-point';
      if (chart instanceof Chartist.Bar) {
        tooltipSelector = 'ct-bar';
      } else if (chart instanceof Chartist.Pie) {
        // Added support for donut graph
        if (chart.options.donut) {
          tooltipSelector = 'ct-slice-donut';
        } else {
          tooltipSelector = 'ct-slice-pie';
        }
      }

      var $chart = chart.container;
      var $toolTip = $chart.querySelector('.chartist-tooltip');
      if (!$toolTip) {
        $toolTip = document.createElement('div');
        $toolTip.className = (!options.class) ? 'chartist-tooltip' : 'chartist-tooltip ' + options.class;
        if (!options.appendToBody) {
          $chart.appendChild($toolTip);
        } else {
          document.body.appendChild($toolTip);
        }
      }
      var height = $toolTip.offsetHeight;
      var width = $toolTip.offsetWidth;

      hide($toolTip);

      function on(event, selector, callback) {
        $chart.addEventListener(event, function (e) {
          if (!selector || hasClass(e.target, selector))
            callback(e);
        });
      }

      on('mouseover', tooltipSelector, function (event) {
        var $point = event.target;
        var tooltipText = '';

        var seriesName = ($point.parentNode) ? $point.parentNode.getAttribute('ct:meta') || 
            $point.parentNode.getAttribute('ct:series-name') : '';
        var meta = $point.getAttribute('ct:meta') || seriesName || '';
        var hasMeta = !!meta;
        var value = $point.getAttribute('ct:value');

        if (options.tooltipFnc) {
          tooltipText = options.tooltipFnc(meta, value);
        } else {

          meta = '<span class="chartist-tooltip-meta">' + meta + '</span>';
          value = '<span class="chartist-tooltip-value">' + value + '</span>';

          if (hasMeta) {
            tooltipText += meta + '<br>';
          } else {
            // For Pie Charts also take the labels into account
            // Could add support for more charts here as well!
            if (chart instanceof Chartist.Pie) {
              var label = next($point, 'ct-label');
              if (label.length > 0) {
                tooltipText += text(label) + '<br>';
              }
            }
          }

          if (options.currency) {
            value = options.currency + value.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,");
          }
          tooltipText += value;
        }

        $toolTip.innerHTML = tooltipText;
        setPosition(event);
        show($toolTip);

        // Remember height and width to avoid wrong position in IE
        height = $toolTip.offsetHeight;
        width = $toolTip.offsetWidth;
      });

      on('mouseout', tooltipSelector, function () {
        hide($toolTip);
      });

      on('mousemove', null, function (event) {
        setPosition(event);
      });

      function setPosition(event) {
        // For some reasons, on FF, we can't rely on event.offsetX and event.offsetY,
        // that's why we prioritize event.layerX and event.layerY
        // see https://github.com/gionkunz/chartist-js/issues/381
        height = height || $toolTip.offsetHeight;
        width = width || $toolTip.offsetWidth;
        if (!options.appendToBody) {
          $toolTip.style.top = (event.layerY || event.offsetY) - height + options.tooltipOffset.y + 'px';
          $toolTip.style.left = (event.layerX || event.offsetX) - width / 2 + options.tooltipOffset.x + 'px';
        } else {
          $toolTip.style.top = event.pageY - height  + options.tooltipOffset.y + 'px';
          $toolTip.style.left = event.pageX - width / 2 + options.tooltipOffset.x + 'px';
        }
      }
    }
  };

  function show(element) {
    element.classList.add('tooltip-show');
  }

  function hide(element) {
    element.classList.remove('tooltip-show');
  }

  function hasClass(element, className) {
    return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + className + ' ') > -1;
  }

  function next(element, className) {
    do {
      element = element.nextSibling;
    } while (element && !hasClass(element, className));
    return element;
  }

  function text(element) {
    return element.innerText || element.textContent;
  }

} (window, document, Chartist));

custom.css

h1,
h2 {
    font-family: 'Graduate', cursive;
    text-align: center;
    text-transform: uppercase;
}

p {
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.graph {
    width: 80vw;
    height: 40vh;
    display: flex;
    align-content: center;
    margin: auto;
}

.ct-series-a .ct-bar {
    /* Colour of your bars */
    stroke: #008D97;
    /* The width of your bars */
    stroke-width: 4em;
}

.ct-series-b .ct-bar {
    /* Colour of your bars */
    stroke: #999;
    /* The width of your bars */
    stroke-width: 4em;
}


/* Use this selector to override the line style on a given series */

.ct-series-a .ct-line {
    /* Set the colour of this series line */
    stroke: #008D97;
    /* Control the thikness of your lines */
    stroke-width: 5px;
}
.ct-series-a .ct-point {
    /* Set the colour of this series line */
    stroke: #008D97;
}


/* Use this selector to override the line style on a given series */

.ct-series-b .ct-line {
    /* Set the colour of this series line */
    stroke: #B31B34;
    /* Control the thikness of your lines */
    stroke-width: 5px;
}

.ct-series-b .ct-point {
    /* Set the colour of this series line */
    stroke: #B31B34;
}

.btn-group {
    display: flex;
    justify-content: center;
    margin: auto;
}

.btn {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin: auto;
    font-size: 14px;
    padding: 14px;
    cursor: pointer;
    border: none;
    color: white;
    background-color: #1696d2;
    display: block;
    line-height: 12px;
    text-transform: uppercase;
    text-align: center;
    float: none;
    margin: 5px;
}

.btn:hover {
    background-color: #000;
}

.clearfix:before,
.clearfix:after {
    content: ' ';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.ct-chart {
            position: relative;
        }

       

index.html

<!DOCTYPE html>
<!-- This was one of Scott Murray's Knight D3 course files, modified a bit. -->
<!-- This was copied from Lynn Cherny's class files and modified to load Josh's data. -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Loading CSV Data with D3</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script type="text/javascript" src="chartist-plugin-tooltip.js"></script>
    <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
    <link href="chartist-plugin-tooltip.css" rel="stylesheet" type="text/css" />
    <link href="custom.css" rel="stylesheet" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Graduate|Roboto' rel='stylesheet' type='text/css'>
</head>

<body>

    <h1>Houston Texans at Miami Dolphins</h1>
    <h1>Game Statistics</h1>
    <div class='btn-group clearfix'>
        <button id='buttonTwo' class='btn'>Show Two</button>
        <button id='buttonOne' class='btn selected'>Show One</button>
    </div>
    <div  id="chart-one" >
        <h2 >Miami Dolphins Offense</h2>
        <div id="miaoff" class="graph"></div>
        <p>This is Miami's offensive output in this game compared to its season averages. Aqua bars are game stats, gray bars are season averages.</p>
    </div>

    <div id="chart-two" >
        <h2>Chance to Win</h2>
        <div id="win" class="graph"></div>
        <p>This is each team's winning odds throuhout the game. Aqua represents Miami's winning odds, red represents Houston.</p>
    </div>
    <script>
        //Load in contents of CSV file
        var game_data = [];
        d3.csv("miahou_gamestats-wide.csv", function (data) {
            //Now CSV contents have been transformed into
            //an array of JSON objects.
            console.log("The first file is csv...")
                // Format number fields
            game_data.forEach(function (d) {
                d.pass_dyd = +d.pass_dyd;
                d.pass_dyd_avg = +d.pass_dyd_avg;
                d.pass_oyd = +d.pass_oyd;
                d.pass_oyd_avg = +d.pass_oyd_avg;
                d.pts_avg_allwd = +d.pts_avg_allwd;
                d.pts_avg_scored = +d.pts_avg_scored;
                d.rush_dyd = +d.rush_dyd;
                d.rush_dyd_avg = +d.rush_dyd_avg;
                d.rush_oyd = +d.rush_oyd;
                d.rush_oyd_avg = +d.rush_oyd_avg;
                d.score = +d.score;
                d.to_d = +d.to_d;
                d.to_d_avg = +d.to_d_avg;
                d.total_dyd = +d.total_dyd;
                d.total_dyd_avg = +d.total_dyd_avg;
                d.total_oyd = +d.total_oyd;
                d.total_oyd_avg = +d.total_oyd_avg;
            });

            new Chartist.Bar('#miaoff', {
                labels: ['Total', 'Pass', 'Run'],
                series: [
    [{meta:'MIA Total Offensive Yardage Gained', value: data[1].total_oyd}, {meta:'MIA Passing Yardage Gained', value: data[1].pass_oyd}, {meta:'MIA Rushing Yardage Gained', value: data[1].rush_oyd}],
    [{meta:'Avg. MIA Total Offensive Yardage', value: data[1].total_oyd_avg}, {meta:'Avg. MIA Passing Yardage', value: data[1].pass_oyd_avg}, {meta:'Avg. MIA Rushing Yardage', value: data[1].rush_oyd_avg}]
  ]
            }, {
                seriesBarDistance: 85,
                axisX: {
                    showGrid: false
                },
            plugins: [
                Chartist.plugins.tooltip({
                    valeTransform: function() {
                        return value + 'Offensive Yardage';
                    }
                })
            ]
              
            });


        });
        new Chartist.Line('#win', {
            labels: ['Start', 'Q1', 'Q2', 'Q3', 'End'],
            series: [
    [{meta:'MIA Chance to Win',value: 58.2}, {meta:'MIA Chance to Win After Q1',value: 98.8}, {meta:'MIA Chance to Win After Q2',value: 99.9}, {meta:'MIA Chance to Win After Q2',value: 99.9}, {meta:'MIA Won',value: 100}],
    [{meta:'HOU Chance to Win',value: 41.8}, {meta:'HOU Chance to Win After Q1',value: 1.2}, {meta:'HOU Chance to Win After Q2',value: 0.1}, {meta:'HOU Chance to Win After Q1',value: 0.1}, {meta:'HOU Lost',value: 0}]
  ]
        }, {
            high: 100,
            low: 0,
            showArea: false,
            showLine: true,
            showPoint: true,
            fullWidth: true,
            axisX: {
                showGrid: false
            },
            plugins: [
                Chartist.plugins.tooltip()
            ]
        });

        
    $(document).ready(function(){
    $("#buttonOne").click(function(){
        $("#chart-two").hide();
        $("#chart-one").show();
    });
    $("#buttonTwo").click(function(){
        $("#chart-two").show();
        $("#chart-one").hide();
    });
         
});
        
    </script>

</body>

</html>

miahou_gamestats-wide.csv