Skip to content

Instantly share code, notes, and snippets.

@valex

valex/charts_pitcher_plot.js

Last active January 10, 2018 15:25
Show Gist options
  • Save valex/582eac2af49815662346d7fff1e4e5a7 to your computer and use it in GitHub Desktop.
Save valex/582eac2af49815662346d7fff1e4e5a7 to your computer and use it in GitHub Desktop.
Download ZIP
pitch chart export
Raw
charts_pitcher_plot.js
var PITCH_APP = {
url: 'pitchplot.json',
eventsData: [],
activeEvent: null,
data: [],
activeIndex: null,
options: {
selectModule: {
appendToSelector: '#pitch-select-module',
},
chartModule: {
appendToSelector: '#pitch-chart-module',
width: 500,
height: 302,
margins: {top: 10, right: 10, bottom: 20, left: 10},
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: 'video_icon',
label: '',
},
]
},
},
start: function(){
// Set-up the export button
d3.select('#pitch-export').on('click', function(){
PITCH_APP.export();
});
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) {
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"),
videoSrc: typeof d["videoPath"] !== 'undefined' ? (''+d["videoPath"]).trim() : '',
}
});
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.videoSrc.length > 0;
},
// ============================== 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(null !== this.activeIndex){
var datum = this.data[this.activeIndex];
if(this.hasVideo(datum)){
this.initVideoPlayer();
this.setVideoSrc(datum);
}
}
},
setVideoSrc: function(data){
this.options.videoModule.videoJs.src({
src: data.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 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) {
return options.columns.map(function (column) {
var value;
switch(column.key){
case 'video_icon':
value = '';
if(PITCH_APP.hasVideo(row)){
value = '<i class="fa fa-video-camera" aria-hidden="true"></i>';
}
break;
case 'pitchType':
case 'pitchResult':
value = row[column.key];
break;
default:
value = parseFloat(row[column.key]).toFixed(column.fixed);
break;
}
return {value: value};
});
});
var cellsEnter = cellsSelection
.enter()
.append('td');
var cells = cellsSelection.merge(cellsEnter);
cells.html(function (d) { return d.value; });
},
animateTableModule: function(){
this.setRowActive(this.activeIndex);
},
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);
}
}
},
// ============================== 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.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.initHeatmap();
// 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.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.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.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(){
this.initHeatmapCheckbox();
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")
.style("z-index", -1);
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;
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;
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.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();
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.6.0/alt/video-js-cdn.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="pitch-select-module"></div>
<div class="col-sm-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pitch-heatmap-checkbox">
<label class="form-check-label" for="pitch-heatmap-checkbox">Heatmap</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="pitch-chart-module"></div>
<button type="button" id="pitch-export" class="btn btn-outline-primary btn-sm">Export to PNG</button>
</div>
</div>
<div class="row">
<div class="col-sm-4" id="pitch-table-module"></div>
<div class="col-sm-8" id="pitch-video-module"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.6.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type='text/javascript' src='charts_pitcher_plot.js'></script>
</body>
</html>
Raw
pitchplot.json
{
"RECORDS": [
{
"playID": "834",
"eventName": "Tryouts 2",
"eventDate": "16/12/2017 23:47:23",
"eventID": "9",
"name": "Elian Almanzar",
"pitchvelo": "80.520",
"pitchX": "0.850",
"pitchY": "3.40",
"ptype": "slider",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"video_id": "802"
},
{
"playID": "835",
"eventName": "Tryouts 2",
"eventDate": "16/12/2017 23:47:23",
"eventID": "9",
"name": "Elian Almanzar",
"pitchvelo": "80.520",
"pitchX": "0.750",
"pitchY": "3.20",
"ptype": "changeup",
"presult": "Ball",
"videoPath": "",
"video_id": "802"
},
{
"playID": "836",
"eventName": "Tryouts 2",
"eventDate": "16/12/2017 23:47:23",
"eventID": "9",
"name": "Elian Almanzar",
"pitchvelo": "80.520",
"pitchX": "0.750",
"pitchY": "3.0",
"ptype": "curveball",
"presult": "Ball",
"video_id": "802"
},
{
"playID": "837",
"eventName": "Tryouts 2",
"eventDate": "16/12/2017 23:47:23",
"eventID": "9",
"name": "Elian Almanzar",
"pitchvelo": "80.520",
"pitchX": "0.750",
"pitchY": "2.80",
"ptype": "fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"video_id": "802"
},
{
"playID": "838",
"eventName": "Tryouts 2",
"eventDate": "16/12/2017 23:47:23",
"eventID": "9",
"name": "Elian Almanzar",
"pitchvelo": "80.520",
"pitchX": "0.750",
"pitchY": "3.650",
"ptype": "splitter",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"video_id": "802"
},
{
"playID": "839",
"eventName": "Tryouts 2",
"eventDate": "16/12/2017 23:47:23",
"eventID": "9",
"name": "Elian Almanzar",
"pitchvelo": "75.520",
"pitchX": "0.350",
"pitchY": "2.650",
"ptype": "knuckleball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"video_id": "802"
},
{
"playID": "841",
"eventName": "Tryouts 1",
"eventDate": "16/12/2017 23:47:23",
"eventID": "8",
"name": "Elian Almanzar",
"pitchvelo": "85.520",
"pitchX": "-0.350",
"pitchY": "1.750",
"ptype": "Slider",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"video_id": "802"
},
{
"playID": "842",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "85.520",
"pitchX": "0.000",
"pitchY": "0.000",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"video_id": "802"
},
{
"playID": "843",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "83.949",
"pitchX": "-1.760",
"pitchY": "1.050",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/249_ElianAlmanzar_Bullpen.mp4",
"video_id": "803"
},
{
"playID": "844",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "88.241",
"pitchX": "-0.144",
"pitchY": "2.465",
"ptype": "Fastball",
"presult": "Strike",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/250_ElianAlmanzar_Bullpen.mp4",
"video_id": "804"
},
{
"playID": "845",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "86.718",
"pitchX": "0.515",
"pitchY": "0.024",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/251_ElianAlmanzar_Bullpen.mp4",
"video_id": "805"
},
{
"playID": "846",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "87.905",
"pitchX": "0.608",
"pitchY": "1.434",
"ptype": "Fastball",
"presult": "Strike",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/252_ElianAlmanzar_Bullpen.mp4",
"video_id": "806"
},
{
"playID": "847",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "87.519",
"pitchX": "2.190",
"pitchY": "1.084",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/253_ElianAlmanzar_Bullpen.mp4",
"video_id": "807"
},
{
"playID": "848",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "86.924",
"pitchX": "0.000",
"pitchY": "0.000",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/254_ElianAlmanzar_Bullpen.mp4",
"video_id": "808"
},
{
"playID": "849",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "84.432",
"pitchX": "-3.377",
"pitchY": "0.431",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/255_ElianAlmanzar_Bullpen.mp4",
"video_id": "809"
},
{
"playID": "850",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "86.713",
"pitchX": "-0.455",
"pitchY": "3.587",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/256_ElianAlmanzar_Bullpen.mp4",
"video_id": "810"
},
{
"playID": "851",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "74.994",
"pitchX": "-2.375",
"pitchY": "1.023",
"ptype": "Curveball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/257_ElianAlmanzar_Bullpen.mp4",
"video_id": "811"
},
{
"playID": "852",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "68.233",
"pitchX": "-0.301",
"pitchY": "4.668",
"ptype": "Curveball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/258_ElianAlmanzar_Bullpen.mp4",
"video_id": "812"
},
{
"playID": "853",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "72.246",
"pitchX": "-1.486",
"pitchY": "2.132",
"ptype": "Curveball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/259_ElianAlmanzar_Bullpen.mp4",
"video_id": "813"
},
{
"playID": "854",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "72.823",
"pitchX": "-1.894",
"pitchY": "3.345",
"ptype": "Curveball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/260_ElianAlmanzar_Bullpen.mp4",
"video_id": "814"
},
{
"playID": "855",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "78.118",
"pitchX": "0.000",
"pitchY": "0.000",
"ptype": "Changeup",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/261_ElianAlmanzar_Bullpen.mp4",
"video_id": "815"
},
{
"playID": "856",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "78.518",
"pitchX": "-2.766",
"pitchY": "1.780",
"ptype": "Changeup",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/262_ElianAlmanzar_Bullpen.mp4",
"video_id": "816"
},
{
"playID": "857",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "84.582",
"pitchX": "-0.376",
"pitchY": "3.587",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/263_ElianAlmanzar_Bullpen.mp4",
"video_id": "817"
},
{
"playID": "858",
"eventName": "Chandler World Tryouts",
"eventDate": "16/12/2017 23:47:23",
"eventID": "7",
"name": "Elian Almanzar",
"pitchvelo": "87.359",
"pitchX": "-0.592",
"pitchY": "4.363",
"ptype": "Fastball",
"presult": "Ball",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/264_ElianAlmanzar_Bullpen.mp4",
"video_id": "818"
}
]
}
Raw
style.css
circle.pitch-ball.active{
stroke: #ee83d8;
stroke-width: 8;
}
circle.pitch-ball.hovered{
fill: #c6c6c6;
}
table {
border-collapse: collapse;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
font-size: 0.92rem;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #e9ecef;
}
.table tr.active{
background-color: #c5e8f5;
}
.table td, .table th {
padding: .3rem;
vertical-align: top;
border-top: 1px solid #e9ecef;
text-align: center;
}
.table td, .table th {
padding: .3rem;
vertical-align: top;
border-top: 1px solid #e9ecef;
}
div.pitch-tooltip {
position: absolute;
text-align: center;
width: 70px;
height: 28px;
line-height: 28px;
padding: 6px 2px 2px 2px;
font: 12px sans-serif;
background: black;
border: 0px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
pointer-events: none;
color:white;
}
#pitch-chart-module {
position: relative;
}
.pitch-heatmap-wrapper{
position: absolute;
top: 0;
left: 0;
}
.pitch-heatmap {
position: relative;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment