Using crossfilter on Justin Verlander pitching data.
Open in new window to see full block.
I scraped data from Retrosheet with Python's BeautifulSoup. Scraping repo here.
Retrosheet data use statement: 'The information used here was obtained free of charge from and is copyrighted by Retrosheet. Interested parties may contact Retrosheet at "www.retrosheet.org".'
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Verlander</title> | |
| <style> | |
| #title, .subtitle { | |
| font-family: sans-serif; | |
| } | |
| #title { | |
| font-size: 35px; | |
| padding: 10px; | |
| } | |
| .subtitle { | |
| font-size: 18px; | |
| padding-left: 10px; | |
| } | |
| #charts { | |
| margin: 25px; | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .secondaryChart { | |
| margin: 20px; | |
| } | |
| #secondaryCharts { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| margin-top: -100px; | |
| } | |
| .tooltip { | |
| background-color: #f7f7f7; | |
| padding: 3px 12px; | |
| font-family: sans-serif; | |
| border: 1px solid #bbbbbb; | |
| box-shadow: 1px 1px 4px #bbbbbb; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| pre { | |
| font-weight: normal; | |
| margin: 5px 0; | |
| text-align: center; | |
| } | |
| rect.selection { | |
| fill: steelblue; | |
| } | |
| .line { | |
| stroke: steelblue; | |
| fill: none; | |
| stroke-width: 3px; | |
| } | |
| .point { | |
| fill: steelblue; | |
| stroke: none; | |
| } | |
| .existing { | |
| stroke: red; | |
| stroke-width: 2px; | |
| } | |
| .bar, .bar.selected { | |
| fill: steelblue; | |
| } | |
| .bar.unselected { | |
| fill: #ddd; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #666666; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| fill: #666666; | |
| font-family: sans-serif; | |
| font-size: 14px; | |
| } | |
| text.axis_title { | |
| font-size: 15px; | |
| fill: black; | |
| font-weight: bold; | |
| } | |
| </style> | |
| <body> | |
| <div id="title">Justin Verlander</div> | |
| <div class="subtitle">Brush on the bar graph to filter scatter plot data</div> | |
| <div id="charts"> | |
| <div id="mainChart"></div> | |
| <div id="secondaryCharts"></div> | |
| </div> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| <script src='//alexmacy.github.io/crossfilter/crossfilter.v1.min.js'></script> | |
| <script> | |
| /* chart sizes */ | |
| var margin = { | |
| main: { // year v. innings pitched | |
| top: 10, right: 40, bottom: 80, left: 80 | |
| }, | |
| secondary: { // strikeouts, walks ... | |
| top: 10, right: 20, bottom: 40, left: 80 | |
| } | |
| }; | |
| var mainWidth = 625 - margin.main.left - margin.main.right; | |
| var mainHeight = 400 - margin.main.top - margin.main.bottom; | |
| var secondaryWidth = 250 - margin.secondary.left - margin.secondary.right; | |
| var secondaryHeight = 200 - margin.secondary.top - margin.secondary.bottom; | |
| // set this when you brush on the main graph | |
| var filterDates = []; | |
| /* load Verlander data */ | |
| d3.csv("http://dhoboy.github.io/baseball/Justin_Verlander.csv", function(err, raw) { | |
| var data = raw.slice(0, raw.length - 1); | |
| // set up crossfilter | |
| var pitchingData = crossfilter(data); | |
| var years = pitchingData.dimension(function(d) { | |
| return +d.Year; | |
| }); | |
| var metrics = { | |
| 'BB': "Walks", | |
| 'SO': "Strikeouts", | |
| 'H': "Hits allowed", | |
| 'ER': "Runs allowed", | |
| 'W': "Wins", | |
| 'L': "Loses", | |
| 'ERA': "Earned Run Average", | |
| 'CG': "Complete Games", | |
| //'SHO': "Shutouts" | |
| }; | |
| /* make charts */ | |
| var mainChart = d3.select("#mainChart") | |
| .append("svg") | |
| .attr("height", mainHeight + margin.main.top + margin.main.bottom) | |
| .attr("width", mainWidth + margin.main.left + margin.main.right) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.main.left + "," + margin.main.top + ")"); | |
| var secondaryCharts = Object.keys(metrics).map(function(metric) { | |
| var x = d3.scaleLinear() | |
| .domain(d3.extent(data, function(d) { return +d.Year; })) | |
| .range([0, secondaryWidth]); | |
| var y = d3.scaleLinear() | |
| .domain(d3.extent(data, function(d) { return +d[metric]; })) | |
| .range([secondaryHeight, 0]); | |
| return ( | |
| { metric: metric, | |
| svg: d3.select("#secondaryCharts") | |
| .append("svg") | |
| .attr("class", "secondaryChart " + metric) | |
| .attr("height", secondaryHeight + margin.secondary.top + margin.secondary.bottom) | |
| .attr("width", secondaryWidth + margin.secondary.left + margin.secondary.right) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.secondary.left + "," + margin.secondary.top + ")"), | |
| x: x, | |
| y: y, | |
| xAxis: d3.axisBottom(x).ticks(2).tickFormat(d3.format("")), | |
| yAxis: d3.axisLeft(y).ticks(5) | |
| }); | |
| }); | |
| /* for hovering on secondary charts */ | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip") | |
| .style("position", "absolute") | |
| .style("z-index", "10") | |
| .style("visibility", "hidden"); | |
| /* setup main chart */ | |
| var mainX = d3.scaleBand() | |
| .domain(data.map(function(d) { | |
| return d.Year; | |
| })) | |
| .range([0, mainWidth]) | |
| .padding(0.2); | |
| var mainY = d3.scaleLinear() | |
| .domain([0, d3.max(data, function(d) { return +d.IP; })]) | |
| .range([mainHeight, 0]); | |
| // for getting dates out of brush on main graph | |
| var reverseMainX = d3.scaleLinear() | |
| .domain([0, mainWidth]) | |
| .range(d3.extent(data, function(d) { | |
| return +d.Year; | |
| })); | |
| /* setup main axes */ | |
| var mainXAxis = d3.axisBottom(mainX); | |
| var mainYAxis = d3.axisLeft(mainY); | |
| /* draw main graph */ | |
| (function drawMainGraph() { | |
| mainChart.selectAll(".bar") | |
| .data(data) | |
| .enter() | |
| .append("rect") | |
| .attr("class", function(d) { | |
| return "bar yr" + d.Year; | |
| }) | |
| .attr("x", function(d) { | |
| return mainX(d.Year); | |
| }) | |
| .attr("y", function(d) { | |
| return mainY(+d.IP); | |
| }) | |
| .attr("width", mainX.bandwidth()) | |
| .attr("height", function(d) { | |
| return mainHeight - mainY(+d.IP); | |
| }); | |
| /* draw axes */ | |
| var mainXAxisG = mainChart.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + mainHeight + ")") | |
| .call(mainXAxis); | |
| mainXAxisG.append("text") | |
| .attr("transform", "translate(490,45)") | |
| .attr("class", "axis_title") | |
| .text("Year"); | |
| mainChart.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(0" + ",0)") | |
| .call(mainYAxis) | |
| .append("text") | |
| .attr("transform", "translate(-50,0) rotate(-90)") | |
| .attr("class", "axis_title") | |
| .text("Innings Pitched"); | |
| })(); | |
| /* setup brush on main graph */ | |
| var brush = d3.brushX() | |
| .extent([[0,-10],[mainWidth, mainHeight]]) | |
| var mainBrush = mainChart.append("g") | |
| .attr("class", "brush") | |
| .call(brush); | |
| brush.on("brush end", function() { | |
| var brushSection = d3.brushSelection(this); | |
| if (brushSection === null) { // clear the brush | |
| d3.selectAll(".bar") | |
| .attr("class", function(d) { | |
| return "bar yr" + d.Year; | |
| }); | |
| redrawSecondaryCharts(data, true); | |
| } else { // filter data for secondary graphs | |
| var f = d3.timeFormat("%Y"); | |
| // set filterDates for secondary graphs | |
| filterDates = [ | |
| Math.round(reverseMainX(brushSection[0])), | |
| Math.round(reverseMainX(brushSection[1])) + 1 | |
| ]; | |
| // clear all bar highlighting | |
| d3.selectAll(".bar") | |
| .attr("class", function(d) { | |
| return "bar yr" + d.Year + " unselected"; | |
| }); | |
| // highlight selected bars | |
| d3.range(filterDates[0], filterDates[1]).map(function(yr) { | |
| d3.select(".bar.yr" + yr) | |
| .attr("class", "bar yr" + yr + " selected"); | |
| }); | |
| // filter the data on the years selected | |
| years.filterRange(filterDates); | |
| redrawSecondaryCharts(years.bottom(pitchingData.size())); | |
| } | |
| }); | |
| // draw secondary charts | |
| (function initializeSecondaryCharts() { | |
| secondaryCharts.forEach(function(chart) { | |
| var metric = chart.metric; | |
| var svg = chart.svg; | |
| var x = chart.x; | |
| var y = chart.y; | |
| var xAxis = chart.xAxis; | |
| var yAxis = chart.yAxis; | |
| // draw the points | |
| svg.selectAll(".point") | |
| .data(data, function(d) { return d.Year; }) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "point") | |
| .attr("cx", function(d) { | |
| return x(+d.Year); | |
| }) | |
| .attr("cy", function(d) { | |
| return y(+d[metric]); | |
| }) | |
| .attr("r", 5); | |
| // draw the axes | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(0" + ",0)") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "translate(-40,0) rotate(-90)") | |
| .attr("class", "axis_title") | |
| .text(metrics[metric]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + secondaryHeight + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("transform", "translate(150,40)") | |
| .attr("class", "axis_title") | |
| .text("Year"); | |
| }); | |
| })(); | |
| function redrawSecondaryCharts(data, reset) { | |
| console.log("data in draw secondary: ", data); | |
| secondaryCharts.forEach(function(chart) { | |
| var metric = chart.metric; | |
| var svg = chart.svg; | |
| var x = chart.x; | |
| var y = chart.y; | |
| var xAxis = chart.xAxis; | |
| var yAxis = chart.yAxis; | |
| x.domain(d3.extent(data, function(d) { return +d.Year; })); | |
| y.domain(d3.extent(data, function(d) { return +d[metric]; })); | |
| svg.select(".x.axis") | |
| .transition() | |
| .duration(reset ? 0 : 750) | |
| .call(xAxis); | |
| svg.select(".y.axis") | |
| .transition() | |
| .duration(reset ? 0 : 750) | |
| .call(yAxis); | |
| var points = svg.selectAll(".point") | |
| .data(data, function(d) { return d.Year; }) | |
| points | |
| .exit() | |
| .transition() | |
| .duration(reset ? 0 : 400) | |
| .remove(); | |
| points | |
| .transition() | |
| .delay(reset ? 0 : 400) | |
| .duration(reset ? 0 : 500) | |
| .attr("cx", function(d) { | |
| return x(d.Year); | |
| }); | |
| points | |
| .transition() | |
| .delay(reset ? 0 : 900) | |
| .duration(reset ? 0 : 500) | |
| .attr("cy", function(d) { | |
| return y(+d[metric]); | |
| }); | |
| points | |
| .enter() | |
| .append("circle") | |
| .attr("class", "point") | |
| .attr("r", 5) | |
| .attr("cx", function(d) { | |
| return x(d.Year); | |
| }) | |
| .attr("cy", function(d) { | |
| return y(+d[metric]); | |
| }) | |
| .attr("fill-opacity", reset ? 1 : 0); | |
| // issues with the enter selection executing the | |
| // fill-opacity transition only when 'reseting' graph | |
| // graph resets on brush end where brush selection is null | |
| points | |
| .transition() | |
| .delay(reset ? 0 : 1400) | |
| .duration(reset ? 0 : 400) | |
| .attr("fill-opacity", 1); | |
| svg.selectAll(".point") | |
| .on("mouseover", function(d) { | |
| tooltip.html(""); | |
| tooltip.append("pre") | |
| .text(d.Year + ": " + d[metric] + " " + metrics[metric]); | |
| return tooltip.style("visibility", "visible"); | |
| }) | |
| .on("mousemove", function(d) { | |
| return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+10) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| return tooltip.style("visibility", "hidden"); | |
| }); | |
| }); | |
| } | |
| }); | |
| </script> |
