Baseball Pitcher Explorer (open in new tab to see full block)
Brush along one or more dimensions to see a table of Pitchers that match your critera. Output table code from this syntagmatic block.
I scraped the 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>Pitchers</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| #main { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| margin: 20px 30px 20px 10px; | |
| } | |
| .title { | |
| margin-left: 9px; | |
| font-size: 14px; | |
| } | |
| .bar, .selection { | |
| fill: steelblue; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #666666; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| fill: #666666; | |
| font-size: 14px; | |
| } | |
| #output { | |
| margin: 0 20px 10px 10px; | |
| } | |
| pre { | |
| width: 100%; | |
| height: 300px; | |
| margin: 6px 12px; | |
| tab-size: 30; | |
| font-size: 10px; | |
| overflow: auto; | |
| } | |
| </style> | |
| <body> | |
| <div id="main"></div> | |
| <div id="output"></div> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| <script> | |
| var margin = { | |
| top: 20, | |
| right: 20, | |
| bottom: 20, | |
| left: 10 | |
| }; | |
| var height = 100 - margin.top - margin.bottom; | |
| var width = 200 - margin.left - margin.right; | |
| d3.csv("http://dhoboy.github.io/baseball/pitchers.csv", function(data) { | |
| var filteredData = data; | |
| var filters = {}; | |
| var columnKey = { | |
| 'G': 'Games Pitched', | |
| 'GS': 'Games Started', | |
| 'CG': 'Complete Games', | |
| 'SHO': 'Shutouts', | |
| 'GF': 'Relief Games Finished', | |
| 'SV': 'Saves', | |
| 'IP': 'Innings Pitched', | |
| 'H': 'Hits Allowed', | |
| 'BFP': 'Batters Faced Pitcher', | |
| 'HR': 'Home Runs Allowed', | |
| 'R': 'Runs Allowed', | |
| 'ER': 'Earned Runs Allowed', | |
| 'BB': 'Bases On Balls', | |
| 'IB': 'Intentional Bases On Balls', | |
| 'SO': 'Strikeouts', | |
| 'SH': 'Sacrifice Hits Allowed', | |
| 'SF': 'Sacrifice Flies Allowed', | |
| 'WP': 'Wild Pitches', | |
| 'HBP': 'Hit By Pitch', | |
| 'BK': 'Balks', | |
| 'GDP': 'Grounded in Double Plays', | |
| 'W': 'Wins', | |
| 'L': 'Losses', | |
| 'ERA': 'Earned Run Average', | |
| 'RS': 'Run Support', | |
| 'PW': 'Pitcher Wins' | |
| }; | |
| var output = d3.select("#output").append("pre") | |
| .text("Brush along at least one dimension above to see a table of results"); | |
| var scales = d3.keys(columnKey).reduce(function(prev, next) { | |
| prev[next] = d3.scaleLinear() | |
| .domain(d3.extent(data, function(d) { | |
| return +d[next]; | |
| })) | |
| .range([0, width]); | |
| return prev; | |
| }, {}); | |
| var reverseScales = d3.keys(columnKey).reduce(function(prev, next) { | |
| prev[next] = d3.scaleLinear() | |
| .domain([margin.left, width + margin.left, height]) | |
| .range(d3.extent(data, function(d) { | |
| return +d[next]; | |
| })); | |
| return prev; | |
| }, {}); | |
| var axes = d3.keys(columnKey).reduce(function(prev, next) { | |
| prev[next] = d3.axisBottom(scales[next]).ticks(3) | |
| return prev; | |
| }, {}); | |
| var brushes = d3.keys(columnKey).reduce(function(prev, next) { | |
| prev[next] = d3.brushX().extent([[margin.left, -15], [width + margin.left, height]]); | |
| return prev; | |
| }, {}); | |
| var graphs = d3.select("#main").selectAll(".graph") | |
| .data(d3.keys(columnKey)) | |
| .enter() | |
| .append("div") | |
| .attr("class", "graph"); | |
| graphs.append("div") | |
| .attr("class", "title") | |
| .text(function(d) { return columnKey[d] + ": " + d; }); | |
| var svgs = graphs.append("svg") | |
| .attr("id", function(d) { return d; }) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .attr("width", width + margin.right + margin.left) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svgs.append("rect") | |
| .attr("class", "bar") | |
| .attr("height", 15) | |
| .attr("width", width) | |
| .attr("rx", 5) | |
| .attr("ry", 5); | |
| d3.keys(columnKey).forEach(function(key) { | |
| var s = d3.select("svg#" + key); | |
| s.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + margin.left + "," + height + ")") | |
| .call(axes[key]); | |
| s.append("g") | |
| .attr("class", "brush") | |
| .call(brushes[key]); | |
| brushes[key].on("brush end", function() { | |
| var brushSection = d3.brushSelection(this); | |
| if (brushSection === null) { | |
| removeFilter(key); | |
| } else { | |
| var filterInput = [ | |
| reverseScales[key](brushSection[0]), | |
| reverseScales[key](brushSection[1]) | |
| ]; | |
| addFilter(key, filterInput); | |
| } | |
| }); | |
| }); | |
| function addFilter(key, filterInput) { | |
| filters[key] = filterInput; | |
| filterData(); | |
| } | |
| function removeFilter(key) { | |
| delete filters[key]; | |
| filterData(); | |
| } | |
| function filterData() { | |
| // reset filteredData | |
| filteredData = data; | |
| // apply each filter | |
| d3.keys(filters).forEach(function(filterKey) { | |
| filteredData = filteredData.filter(function(d) { | |
| return +d[filterKey] >= filters[filterKey][0] && | |
| +d[filterKey] <= filters[filterKey][1]; | |
| }); | |
| }); | |
| // only draw result table if you've filtered the dataset somewhat | |
| if (d3.keys(filters).length > 0) { | |
| output.text(d3.tsvFormat(filteredData.slice(0))); | |
| } else { | |
| output.text("Brush along at least one dimension above to see a table of results"); | |
| } | |
| } | |
| }); | |
| </script> |
