30:Td7a,{ const svg = d3.select(DOM.svg(width, stepHeight)); svg.append("g") .call(stepXAxis); svg.append("text") .attr("transform", function(d) { return "translate(" + stepX(80) + "," + stepY(-10) + ")"; }) .attr("dy", "1em") .style("text-anchor", "middle") .style("font", "12px sans-serif") .style("fill", "black") .text("Games"); svg.append("g") .call(stepYAxis); svg.append("text") .attr("x", stepX(-7)) .attr("y", stepY(710)) .style("text-anchor", "left") .style("font", "12px sans-serif") .style("fill", "black") .text("At bats"); /* Season lines */ var season = svg.selectAll(".season") .data(step_data) .enter().append("g") .attr("class", "line"); season.append("path") .attr("class", function (d) { return d.id == 2018 ? "live" : "dead"; }) .attr("d", function(d) { return stepLine(d.values); }); /* 2018 progress dot */ svg.append("circle") .attr("class", "live-disk") .attr("cx", stepX(latest_scrape_raw.mariners_stats.mariners_games_played)) .attr("cy", stepY(latest_scrape_raw.ichiro_totals[2018].ab)) .attr("r", 6); svg.append("circle") .attr("class", "live-circle") .attr("cx", stepX(latest_scrape_raw.mariners_stats.mariners_games_played)) .attr("cy", stepY(latest_scrape_raw.ichiro_totals[2018].ab)) .attr("r", 4); svg.append("circle") .attr("class", "live-circle-2") .attr("cx", stepX(latest_scrape_raw.mariners_stats.mariners_games_played)) .attr("cy", stepY(latest_scrape_raw.ichiro_totals[2018].ab)) .attr("r", 16); /* 2018 projections */ let current_value = stepX(latest_scrape_raw.mariners_stats.mariners_games_played) + " " + stepY(latest_scrape_raw.ichiro_totals[2018].ab); let max_projection = stepX(162) + " " + stepY(Math.max(...Object.values(projected_data))); let min_projection = stepX(162) + " " + stepY(Math.min(...Object.values(projected_data))); let triangle = current_value + ', ' + max_projection + ', ' + min_projection + ', ' + current_value; svg.append('polyline') .attr('points', triangle) .attr('class', 'projection'); /* Right axis labels */ season.append("text") .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + stepX(d.value.game) + "," + stepY(d.value.ab) + ")"; }) .attr("x", 3) .attr("dy", "0.35em") .attr("visibility", function (d) { let yearsToShow = [ 2004, 2006, 2008, 2002, 2009, 2012, 2013, 2014, 2015, 2016, 2017 ]; return yearsToShow.indexOf(parseInt(d.id))>-1 ? "visible" : "hidden"; }) .style("font", "10px sans-serif") .text(function(d) { return d.id; }); /* THE PITTS LINE */ svg.append("line") .attr("x1", stepX(0)) .attr("y1", stepY(190)) .attr("x2", stepX(162)) .attr("y2", stepY(190)) .style("stroke-width", 2) .style("stroke", "#0C2340") .style("fill", "#0C2340"); svg.append("text") .attr("x", stepX(0)) .attr("y", stepY(182)) .style("font", "12px sans-serif") .style("fill", "#0C2340") .text("The Pitts Line"); return svg.node(); }31:T4fd,{ const svg = d3.select(DOM.svg(width, lineHeight)); svg.append("g") .call(lineXAxis); svg.append("g") .call(lineYAxis); svg.append("text") .attr("x", lineX(parseLineDate("2018-03-20"))) .attr("y", lineY(307)) .style("text-anchor", "left") .style("font", "12px sans-serif") .style("fill", "black") .text("At bats"); svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(projection_series) .enter().append("path") .attr("data-projection", d => d.key) .attr("d", d => lineLine(d.values)); /* THE PITTS LINE */ svg.append("line") .attr("x1", lineX(parseLineDate("2018-03-23"))) .attr("y1", lineY(190)) .attr("x2", lineX(parseLineDate("2018-10-10"))) .attr("y2", lineY(190)) .style("stroke-width", 2) .style("stroke", "#0C2340") .style("fill", "#0C2340"); svg.append("text") .attr("x", lineX(parseLineDate("2018-10-06"))) .attr("y", lineY(182)) .style("font", "12px sans-serif") .style("fill", "#0C2340") .style("text-anchor", "end") .text("The Pitts Line"); return svg.node(); }32:Tcea,html``33:T5ec,robotext = { let madlibs = { ab: latest_scrape_raw.ichiro_totals['2018'].ab, ab_percent: round((latest_scrape_raw.ichiro_totals['2018'].ab / 190.0)*100, 1), games_plural: latest_scrape_raw.mariners_stats.mariners_games_played > 1 ? "games": "game", games_played: latest_scrape_raw.mariners_stats.mariners_games_played, games_played_percent: latest_scrape_raw.mariners_stats.mariners_games_played / 162.0, pitts_head: "https://i.imgur.com/uG02iWd.png", bowers_head: "https://i.imgur.com/9wJ1n8c.png" }; let projected_to_reach = 0; madlibs['steamer_head'] = madlibs.bowers_head; if (projected_data.steamer >= 190) { projected_to_reach += 1; madlibs['steamer_head'] = madlibs.pitts_head; } madlibs['thebat_head'] = madlibs.bowers_head; if (projected_data.thebat >= 190) { projected_to_reach += 1; madlibs['thebat_head'] = madlibs.pitts_head; } madlibs['zips_head'] = madlibs.bowers_head; if (projected_data.zips >= 190) { projected_to_reach += 1; madlibs['zips_head'] = madlibs.pitts_head; } madlibs['depthcharts_head'] = madlibs.bowers_head; if (projected_data.depthcharts >= 190) { projected_to_reach += 1; madlibs['depthcharts_head'] = madlibs.pitts_head; } madlibs['projected_to_reach'] = projected_to_reach; let humanize = { 0: "zero", 1: "one", 2: "two", 3: "three", 4: "four" } madlibs['projected_to_reach_humanized'] = humanize[madlibs['projected_to_reach']].capitalize(); return madlibs; }34:Tf6d,gauge = function(container, configuration) { var that = {}; var config = { size : 710, clipWidth : 200, clipHeight : 110, ringInset : 20, ringWidth : 20, pointerWidth : 10, pointerTailLength : 5, pointerHeadLengthPercent : 0.9, minValue : 0, maxValue : 10, minAngle : -90, maxAngle : 90, transitionMs : 750, majorTicks : 5, labelFormat : d3.format('d'), labelInset : 10, arcColorFn : d3.interpolateHsl(d3.rgb('#8A8D8F'), d3.rgb('#00685E')) }; var range = undefined; var r = undefined; var pointerHeadLength = undefined; var value = 0; var svg = undefined; var arc = undefined; var scale = undefined; var ticks = undefined; var tickData = undefined; var pointer = undefined; var donut = d3.pie(); function deg2rad(deg) { return deg * Math.PI / 180; } function newAngle(d) { var ratio = scale(d); var newAngle = config.minAngle + (ratio * range); return newAngle; } function configure(configuration) { var prop = undefined; for ( prop in configuration ) { config[prop] = configuration[prop]; } range = config.maxAngle - config.minAngle; r = config.size / 2; pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent); // a linear scale that maps domain values to a percent from 0..1 scale = d3.scaleLinear() .range([0,1]) .domain([config.minValue, config.maxValue]); ticks = scale.ticks(config.majorTicks); tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;}); arc = d3.arc() .innerRadius(r - config.ringWidth - config.ringInset) .outerRadius(r - config.ringInset) .startAngle(function(d, i) { var ratio = d * i; return deg2rad(config.minAngle + (ratio * range)); }) .endAngle(function(d, i) { var ratio = d * (i+1); return deg2rad(config.minAngle + (ratio * range)); }); } that.configure = configure; function centerTranslation() { return 'translate('+r +','+ r +')'; } function isRendered() { return (svg !== undefined); } that.isRendered = isRendered; function render(newValue) { svg = d3.select(DOM.svg(config.clipWidth, config.clipHeight)) .attr('class', 'gauge'); var centerTx = centerTranslation(); var arcs = svg.append('g') .attr('class', 'arc') .attr('transform', centerTx); arcs.selectAll('path') .data(tickData) .enter().append('path') .attr('fill', function(d, i) { return config.arcColorFn(d * i); }) .attr('d', arc); var lg = svg.append('g') .attr('class', 'label') .attr('transform', centerTx); lg.selectAll('text') .data(ticks) .enter().append('text') .attr('transform', function(d) { var ratio = scale(d); var newAngle = config.minAngle + (ratio * range); return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')'; }) .text(config.labelFormat); var lineData = [ [config.pointerWidth / 2, 0], [0, -pointerHeadLength], [-(config.pointerWidth / 2), 0], [0, config.pointerTailLength], [config.pointerWidth / 2, 0] ]; var pointerLine = d3.line().curve(d3.curveLinear) var pg = svg.append('g').data([lineData]) .attr('class', 'pointer') .attr('transform', centerTx); pointer = pg.append('path') .attr('d', pointerLine) .attr('transform', 'rotate(' +config.minAngle +')'); update(newValue === undefined ? 0 : newValue); return svg.node(); } that.render = render; function update(newValue, newConfiguration) { if ( newConfiguration !== undefined) { configure(newConfiguration); } var ratio = scale(newValue); var newAngle = config.minAngle + (ratio * range); pointer.transition() .duration(config.transitionMs) .ease(d3.easeElastic) .attr('transform', 'rotate(' +newAngle +')'); } that.update = update; configure(configuration); return that; }35:[] 2e:{"title":"The Ichiro Bet","cells":[{"id":0,"value":"md`# The Ichiro Bet\n\nBy [Ben Welsh](http://palewi.re/who-is-ben-welsh/) ⚾ Opening Day 2018\n\nNow 44 years old, Japanese baseball legend Ichiro Suzuki has returned to play for the Seattle Mariners. Despite his age, Ichiro believes he can still compete in the major leagues.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`He has his doubters. At the recent conference of the National Institute for Computer-Assisted Reporting in Chicago, a group of amateur [sabermetricians](https://en.wikipedia.org/wiki/Sabermetrics) debated Ichiro's ability to see significant playing time without injury.\n\nA wager was made: Will Ichiro earn 190 major-league at bats in the 2018 regular season? [@ryanpitts](twitter.com/ryanpitts) said yes. [@jeremybowers](twitter.com/jeremybowers) said no. Hands were shaken. A poll was taken.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`

A #NICAR18 bet is born between @jeremybowers and @ryanpitts.

Will Ichiro get 190 ABs this season?
— Ben Welsh (@palewire) March 11, 2018

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"html`

Now time will tell. The charts below plot Ichiro's progress through the 2018 campaign.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`### After ${robotext.games_played} ${robotext.games_plural}, Ichiro has taken ${robotext.ab} at bats. He is ${robotext.ab_percent}% of the way to 190\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"{\n var g = gauge('#power-gauge', {\n\t\tsize: 300,\n\t\tclipWidth: 300,\n\t\tclipHeight: 250,\n\t\tringWidth: 60,\n\t\tmaxValue: 200,\n\t\ttransitionMs: 4000,\n\t});\n let svg = g.render();\n g.update(latest_scrape_raw.ichiro_totals['2018'].ab);\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"md`### ${robotext.projected_to_reach_humanized} of four projection models estimate Ichiro will make @ryanpitts a winner`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"html`\n \n \n \n \n \n \n \n \n \n

ZiPS

\n ${projected_data.zips}\n

Steamer

\n ${projected_data.steamer}\n

The Bat

\n ${projected_data.thebat}\n

Depth Charts

\n ${projected_data.depthcharts}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`### How Ichiro's pace compares to past seasons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"html`

Past seasons are green. Ichiro's pace this season is red. The range of projections is silver.

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"md`### How projections have shifted since Opening Day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"html`

ZiPS Steamer The Bat Depth Charts` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`Source: [Baseball Reference](https://www.baseball-reference.com) and [FanGraphs](http://www.fangraphs.com) via an [open-source web scraper](https://github.com/palewire/the-ichiro-bet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"html`Last updated ${timeString}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"md`## Appendix\n\nThis page updates as new data arrives. It is powered by the computer code below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"round = function(number, precision) {\n var factor = Math.pow(10, precision);\n return Math.round(number * factor) / factor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"String.prototype.capitalize = function() {\n return this.charAt(0).toUpperCase() + this.slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"timeString = formatTime(new Date(latest_scrape_raw.last_updated))","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"formatTime = d3.timeFormat(\"%B %d, %Y at %I:%m %p UTC\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"stepHeight = 1300","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"stepY = d3.scaleLinear()\n .range([stepHeight - margin.bottom, margin.top])\n .domain([0, 710])","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"stepX = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain([0, 162])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"stepXAxis = g => g\n .attr(\"transform\", `translate(0,${stepHeight - margin.bottom})`)\n .call(d3.axisBottom(stepX)\n .tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"stepYAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(stepY))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"stepLine = d3.line()\n .x(d => stepX(d.game))\n .y(d => stepY(d.ab))\n .curve(d3.curveStepAfter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"lineHeight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"parseLineDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"lineXAxis = g => g\n .attr(\"transform\", `translate(0,${lineHeight - margin.bottom})`)\n .call(d3.axisBottom(lineX)\n .tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"lineYAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(lineY))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"lineY = d3.scaleLinear()\n .range([lineHeight - margin.bottom, margin.top])\n .domain([0, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"lineX = d3.scaleTime()\n .domain([\n parseLineDate(\"2018-03-28\"),\n parseLineDate(\"2018-10-01\")\n ])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"lineLine = d3.line()\n .curve(d3.curveStep)\n .x(d => lineX(d.date))\n .y(d => lineY(d.ab))","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"step_data = {\n let transformed_data = [];\n for (const [year, game_log] of Object.entries(latest_scrape_raw.ichiro_logs)) {\n let transformed_game_log = [];\n let total_ab = 0;\n for (const [game_number, game_stats] of Object.entries(game_log)) {\n total_ab += game_stats.ab;\n transformed_game_log.push({game: game_number, ab: total_ab});\n }\n transformed_data.push({id: year, values: transformed_game_log});\n }\n return transformed_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"projected_data = {\n return {\n \"steamer\": latest_scrape_raw.ichiro_totals[2018].ab,\n \"thebat\": latest_scrape_raw.ichiro_totals[2018].ab,\n \"zips\": latest_scrape_raw.ichiro_totals[2018].ab,\n \"depthcharts\": (latest_scrape_raw.depthcharts + latest_scrape_raw.ichiro_totals[2018].ab),\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"latest_scrape_raw = {\n return await (await fetch(`https://gist.githubusercontent.com/palewire/440096ea7dc6f5a8bdd420bf1cfc8f03/raw/f808498d1436db57507ccce2834f1643b91de5c3/performance.json`)).json();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"projection_series = {\n return d3.nest().key(d => d.projection).entries(projections_by_date_transformed);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"projections_by_date_transformed = {\n let object_list = [];\n let whitelist = [\n 'depth-charts-adjusted-ros',\n 'steamer-update',\n 'the-bat-adjusted-ros',\n 'zips-update'\n ];\n projections_by_date_raw.forEach(function (d) {\n if (whitelist.indexOf(d.projection) >= 0) {\n object_list.push({\n projection: d.projection,\n date: parseLineDate(d.date),\n ab: d.ab\n })\n }\n });\n return object_list;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"projections_by_date_raw = {\n return await (await fetch(`https://gist.githubusercontent.com/palewire/440096ea7dc6f5a8bdd420bf1cfc8f03/raw/f808498d1436db57507ccce2834f1643b91de5c3/projections.json`)).json();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}