2b:null 2c:["$","title",null,{"children":"Baseball Win-Loss Sparklines and Other Charts | Mike Mattozzi | Observable"}] 31:T651,winPercentageChart = { const width = 600; const height = 150; const margin = ({top: 20, right: 70, bottom: 30, left: 24}); const x = d3.scaleTime().domain(d3.extent(philliesData, d => d.date)).range([margin.left, width-margin.right]); const y = d3.scaleLinear() .domain([0,1]).nice() .range([height - margin.bottom, margin.top]); var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(5).tickSizeOuter(1)) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5)); const svg = d3.select(DOM.svg(width, height)); var line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.percent)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("path") .datum(philliesData) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 1) .attr("d", line); svg.append("path") .datum(nationalsData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1) .attr("d", line); svg.append("text") .attr("class", "small") .attr("x", width - margin.right + 6) .attr("y", y(philliesData[philliesData.length - 1].percent) + 6) .attr("fill", "red") .text("Phillies"); svg.append("text") .attr("class", "small") .attr("x", width - margin.right + 6) .attr("y", y(nationalsData[nationalsData.length - 1].percent) + 6) .attr("fill", "steelblue") .text("Nationals"); return svg.node(); }32:T85a,function valueVsOpponent(field) { const width = 1000; const height = 300; const margin = ({top: 20, right: 40, bottom: 80, left: 20}); const x = d3.scaleTime().domain(d3.extent(philliesData, d => d.date)).range([margin.left, width-margin.right]); const y = d3.scaleLinear() .domain([0,d3.max(philliesData, d => d[field])]).nice() .range([height - margin.bottom, margin.top]); var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(0).tickSizeOuter(1)) var xAxisTop = g => g .attr("transform", `translate(0,${margin.top})`) .attr("class", "xAxis") .call(d3.axisTop(x).ticks(5).tickSize(-1 * (height - margin.top - margin.bottom)).tickSizeOuter(1)) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5)); const svg = d3.select(DOM.svg(width, height)); var ordinalScale = d3.scaleOrdinal() .domain(d3.map(philliesData, d => d.opponent).keys()) .range(d3.schemeCategory10); svg.append("g") .attr("stroke", "none") .selectAll("rect").data(homeAwayStretches(philliesData)).enter().append("rect") .attr("x", d => x(d.startDate)) .attr("y", margin.top) .attr("fill", "whitesmoke") .attr("height", d => (d.homeAway == "H" ? height - margin.bottom - margin.top: 0)) .attr("width", d => x(d.endDate) - x(d.startDate)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(xAxisTop); svg.append("g") .attr("stroke", "none") .selectAll("g") .data(philliesData) .enter().append("circle") .attr("transform", d => `translate(${x(d.date)},${y(d[field])})`) .attr("fill", d => ordinalScale(d.opponent)) .attr("r", 3); svg.append("g") .selectAll("g") .data(firstGameOfSeriesOnly(philliesData)).enter().append("text") .attr("class", "small") .attr("transform", d => `translate(${x(d.date)},${height - margin.bottom + 6}) rotate (90)`) .text(d => d.opponent) .attr("fill", d => ordinalScale(d.opponent)); return svg.node(); }33:[] 2f:{"id":"423bd8603e83ac3a","slug":"baseball-sparklines","title":"Baseball Win-Loss Sparklines and Other Charts","thumbnail":"29da2abaf74c6408600fdf0fe79aaf15d5eed8fbead1e7011b3af6cbc4a82477","access_level":"public","create_time":"$D2018-05-20T01:53:14.823Z","update_time":"$D2018-05-28T02:47:21.190Z","view_time":null,"first_public_time":"$D2018-05-22T03:11:56.332Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"9f53a378d7aced11","login":"mmattozzi","name":"Mike Mattozzi","avatar_url":"https://avatars-next.observableusercontent.com/0a224b86044a6c4adbb60403de2c58e66a0b3bd7c409e1d52589065ff6a00baf","tier":"starter_2024"},"version":628,"publish_version":628,"role":null,"authored":false,"authors":[{"type":"individual","id":"39efec815d5de21d","login":"mmattozzi","name":"Mike Mattozzi","avatar_url":"https://avatars-next.observableusercontent.com/0a224b86044a6c4adbb60403de2c58e66a0b3bd7c409e1d52589065ff6a00baf","tier":null}],"members":[{"type":"individual","id":"39efec815d5de21d","login":"mmattozzi","name":"Mike Mattozzi","avatar_url":"https://avatars-next.observableusercontent.com/0a224b86044a6c4adbb60403de2c58e66a0b3bd7c409e1d52589065ff6a00baf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Baseball Win-Loss Sparklines and Other Charts","cells":[{"id":0,"value":"md`# Baseball Win-Loss Sparklines and Other Charts\nThis notebook shows off how D3 can be used to generate sparklines and simple graphs using the complete team record of the Phillies and Nationals for 2017. It was inspired by Edward Tufte's [_Beautiful Evidence_](http://a.co/3lwPlOP) (2006).\n\n## Wins and Losses via Sparklines\nAn unconventional sparkline style in _Beautiful Evidence_ captures the 162 game MLB season for a team. Each uptick represents a win and each downtick represents a loss. Shorter red ticks up indicate the opposing team was shutout while shorter red downticks indicate the team being examined was shutout. \n\nThe Phillies 2017 season as a sparkline: ${winsLossSparkline(philliesData, 250, 15)}. Compare that to the 2017 Washington Nationals season: ${winsLossSparkline(nationalsData, 250, 15)}. The one element missing from my implementation is an indicator for home games.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"html`\n

Seen as a more organized view:

\n\n \n\n

Philadelphia	${winsLossSparkline(philliesData, 250, 15)}	66-96
Washington	${winsLossSparkline(nationalsData, 250, 15)}	97-65

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"md`## Standard Sparklines \nThere's always more traditional sparklines for modeling values over time, such as home attendance numbers ${standardSparkline(philliesData.filter(r => r.homeAway === \"H\"), \"attendance\", 200, 17)} over the course of the season. Comparing that to the Nationals attendance ${standardSparkline(nationalsData.filter(r => r.homeAway === \"H\"), \"attendance\", 200, 17)} doesn't seem to yield a radically different line, despite the difference in records. \n\nOne cool thing here is how easy it is to filter our data to just home games:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":485,"value":"philliesData.filter(r => r.homeAway === \"H\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"md`## Win Percentage \nWhat analysis of baseball teams would be complete without a win percentage chart over time? This is fairly conventional chart, not a sparkline, but in a fairly condensed form tells the tale of two seasons, using 324 data points. \n\nNote the reader friendly touch of placing the labels next to their corresponding lines rather than in a disconnected legend. This is easily achievable using D3 SVG text and calling my y() function on the final data point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"md`## Runs Scored By Phillies in each Game\nThis is another chart I'm still tweaking. The chart captures the number of runs scored by the Phillies in every game of the season as a timechart, but also captures the opponent using color coding. Home games are shaded with a gray horizontal bar. Finding the right spot for the color labels is difficult.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"valueVsOpponent(\"runsFor\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"md`## Runs Scored Against Phillies in each Game\nUsing a function designed to return a chart of any field value measured across time vs. opponents allows me to recreate the same chart as above but with runs against.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":562,"value":"valueVsOpponent(\"runsAgainst\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"md`# Data Source \nThe information used here was obtained free of\n charge from and is copyrighted by Retrosheet. Interested\n parties may contact Retrosheet at [www.retrosheet.org](http://www.retrosheet.org).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"dateParse = d3.timeParse(\"%Y%m%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"function translateBaseballGameRecord(row, teamCode, points) {\n let runsFor = 0;\n let runsAgainst = 0;\n var p = new Object();\n if (row[\"3\"] === teamCode) {\n runsFor = parseInt(row[\"9\"]);\n runsAgainst = parseInt(row[\"10\"]);\n p.homeAway = \"H\";\n p.opponent = row[\"6\"];\n } else {\n runsFor = parseInt(row[\"10\"]);\n runsAgainst = parseInt(row[\"9\"]);\n p.homeAway = \"A\";\n p.opponent = row[\"3\"];\n }\n p.date = dateParse(row[\"0\"]);\n if (runsFor > runsAgainst) {\n p.value = (runsAgainst == 0 ? 2 : 3); \n } else {\n p.value = (runsFor == 0 ? -2 : -3);\n }\n p.runsFor = runsFor;\n p.runsAgainst = runsAgainst;\n p.attendance = parseInt(row[\"17\"]);\n points.push(p);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"function firstGameOfSeriesOnly(gamesData) {\n var filteredRecords = [];\n var lastOpponent = \"\";\n gamesData.forEach(game => {\n if (game.opponent != lastOpponent) {\n filteredRecords.push(game);\n lastOpponent = game.opponent;\n }\n });\n return filteredRecords;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"philliesData = {\n let rawdata = await d3.csv(\"https://gist.githubusercontent.com/mmattozzi/a1e33d0f4b337a8ec821392fe5f6fcd8/raw/3d8a433424f1b37fbc3e02b9d60673f46868f8be/phillies-games-2017.csv\")\n let points = [];\n let wins = 0, loss = 0;\n rawdata.forEach(row => {\n let p = translateBaseballGameRecord(row, \"PHI\", points);\n if (p.runsFor > p.runsAgainst) { wins++; } else { loss++; }\n p.percent = wins/(wins+loss);\n });\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"nationalsData = {\n let rawdata = await d3.csv(\"https://gist.githubusercontent.com/mmattozzi/a1e33d0f4b337a8ec821392fe5f6fcd8/raw/3d8a433424f1b37fbc3e02b9d60673f46868f8be/nationals-games-2017.csv\")\n let points = [];\n let wins = 0, loss = 0;\n rawdata.forEach(row => {\n let p = translateBaseballGameRecord(row, \"WAS\", points);\n if (p.runsFor > p.runsAgainst) { wins++; } else { loss++; }\n p.percent = wins/(wins+loss);\n });\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"function homeAwayStretches(schedule) {\n let stretch = [];\n var startDate = schedule[0].date;\n var homeAway = schedule[0].homeAway;\n for (var i = 1; i < schedule.length; i++) {\n if (schedule[i].homeAway != homeAway) {\n stretch.push({ \"startDate\": startDate, \"endDate\": schedule[i].date, \"homeAway\": homeAway });\n startDate = schedule[i].date;\n homeAway = schedule[i].homeAway;\n }\n }\n stretch.push({ \"startDate\": startDate, \"endDate\": schedule[schedule.length - 1].date, \"homeAway\": homeAway });\n return stretch;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"function winsLossSparkline(data, width = 64, height = 17) {\n const x = d3.scaleBand().range([0, width]).padding(0).domain(data.map(d => d.date));\n const y = d3.scaleLinear().domain(d3.extent(data, d => d.value)).range([height - 0.5, 0.5]);\n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"g\")\n .attr(\"stroke-opacity\", 0.8)\n .attr(\"stroke-width\", 0.1)\n .selectAll(\"rect\").data(data).enter().append(\"rect\")\n .attr(\"x\", d => x(d.date))\n .attr(\"y\", d => y(d.value) < y(0) ? y(d.value) : y(0))\n .attr(\"fill\", d => (Math.abs(d.value) < 3 ? \"red\" : \"#505050\"))\n .attr(\"height\", d => y(d.value) < y(0) ? y(0) - y(d.value) : y(d.value) - y(0))\n .attr(\"width\", x.bandwidth());\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"function standardSparkline(data, field, width = 64, height = 17) {\n const x = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([0, width]);\n const y = d3.scaleLinear()\n .domain([d3.min(data, d => d[field]), d3.max(data, d => d[field])]).nice()\n .range([height - 0.5, 0.5]);\n \n const svg = d3.select(DOM.svg(width, height));\n \n var line = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d[field]));\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", line);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"