Skip to content

Instantly share code, notes, and snippets.

@valex

valex/data.json

Created January 6, 2018 18:27
Show Gist options
  • Save valex/4d3d83bcef2a3b95329a599a5129bde8 to your computer and use it in GitHub Desktop.
Save valex/4d3d83bcef2a3b95329a599a5129bde8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.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": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"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",
"videoPath": "https://s3.amazonaws.com/prospectwire/2017-12-16/ChandlerWorldTryouts/248_ElianAlmanzar_Bullpen.mp4",
"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
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 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 justify-content-center">
<div class="col-sm-4">
<div id="pitch-chart-module"></div>
</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/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 type='text/javascript' src='script.js'></script>
</body>
</html>
Raw
script.js
var PITCH_APP = {
url: 'data.json',
eventsData: [],
activeEvent: null,
data: [],
options: {
selectModule: {
appendToSelector: '#pitch-select-module',
},
chartModule: {
id: 'pitch-chart',
appendToSelector: '#pitch-chart-module',
width: 400,
height: 400,
margins: {top: 10, right: 10, bottom: 20, left: 10},
color: null,
defaultBallColor:'#b3b3b3',
ballHoverClass:"hovered",
svg: null,
mainGroup: null,
tooltip: null,
scaleX: null,
scaleY: null,
strikeZone:{
color: '#2ad146',
width: 1
},
heatmap: {
show: false,
instance: null,
}
},
},
start: function(){
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"),
}
});
that.eventsData = d3.nest()
.key(function(d) { return d.eventID; })
.entries(data);
that.updateData();
that.initModules();
that.updateModules();
});
},
initModules: function(){
this.initSelectModule();
this.initChart();
},
updateModules: function(){
this.updateChart();
},
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;
})
})
);
},
// ============================== 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);
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);
},
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)
.insert("div", ':first-child')
.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();
}else{
that.clearHeatmap();
}
},
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);
})
.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('id', function(d, i){return 'pitch-ball-'+i;})
.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();
},
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();
},
};
PITCH_APP.start();
Raw
style.css
circle.pitch-ball.hovered{
fill: #c6c6c6;
}
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-heatmap-wrapper{
position: absolute;
}
.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