2b:T464,md` # There's more than one way to beat the field at Augusta The chart below shows the relative importance of driving, approach play, and short game to the overall game of past Masters winners and 2nd-3rd place runners-up (2004-2020). Each cirlce represents a player's Strokes Gained composition in a season. The more a player gravitates to a corner of the triangle, the greater their reliance on a partiuclar cateogry of shot to gain an edge on the field. Conversely, more rounded players, who are above average in all 3 categories, sit towards the middle of the triangle. You can see the *absolute* Strokes Gained values of each player-season by hovering over a circle. This tells us how many shots / round better a player was than an average PGA Tour pro in each category. Circle size = the total Strokes Gained across the categories - a measure of overall ability. `2c:T132c,chart = { // const triangleSVG = d3.select(DOM.svg(width, height)); const triangleSVG = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const chart = triangleSVG.append("g").attr("id","triangle") .attr("transform", `translate(${width/2} ${height/2})`); const size = Math.min(width, height) / 2; const yOffset = (size - Math.sin(30 * Math.PI / 180) * size) / 2; const [A, B, C] = [150, 30, -90].map(d => [ Math.cos(d * Math.PI / 180) * size, Math.sin(d * Math.PI / 180) * size + yOffset ]); /////////////////////////////////////////////////////////////////////////// //////////////////////////// Triangle Frame /////////////////////////////// /////////////////////////////////////////////////////////////////////////// //triangle chart.append("path") .attr("d", `M${A}L${B}L${C}Z`) .attr("fill", "#fff") .attr("stroke","#B6C0C2") .attr("stroke-width","3px") // axis labels at vertices chart.append("g") .attr("class", "labels") .attr("font-size", 18) .selectAll("text") .data([ {label: "Driving", pos: A, rot: 60, color:"#EBD0B3"}, {label: "Short Game", pos: B, rot: -60, color: "#AED8E6"}, {label: "Approach Play", pos: C, rot: 0, color: "#c1d0cb"}, //"#CED7D4" ]) .join("text") .attr("dy", (d, i) => i === 2 ? "-1em" : "1.5em") .attr("transform", (d, i) => `translate(${d.pos})rotate(${d.rot})`) .attr("text-anchor", "middle") .style("fill", d => d.color) .style("font-weight","bold") .text(d => d.label) .style("font-family","Source Serif Pro") .style("font-size",18); /////////////////////////////////////////////////////////////////////////// ///////////////////////////// Corner Arcs ///////////////////////////////// /////////////////////////////////////////////////////////////////////////// var arc = d3.arc() .innerRadius(0) .outerRadius(380); let cornerArcs = chart.selectAll(".corner-gradients") .data([ {coords: A, angle: [30,90],direction:[0,100], color: "235, 208, 179"}, {coords: B, angle: [-30,-90],direction:[100,100], color: "174, 216, 230"}, {coords: C, angle: [150,210],direction:[50,0], color: "193, 208, 203"} ]) .enter().append("g") .attr("transform", d => `translate(${d.coords})`) let gradient = cornerArcs.append("defs") .append("radialGradient") .attr("id", (d,i) => "radial-gradient"+i) .attr("cx",d => `${d.direction[0]}%`) .attr("cy",d => `${d.direction[1]}%`) .attr("r","100%") gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => `rgba(${d.color},1)`) gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => `rgba(${d.color},0)`); cornerArcs.append("path") .attr("stroke-width", 3) .attr("d", d => arc({startAngle: d.angle[0] * (Math.PI/180), endAngle:(Math.PI/180) * d.angle[1]})) .style("fill", (d,i) => `url(#radial-gradient${i})`) /////////////////////////////////////////////////////////////////////////// //////////////////////////// Circles ////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// let data = top5_field_norm.filter(d => (d.year == "2020/21" & d.player == select.filter) | d.year != "2020/21") //data let playerSeasonSel = chart.append("g") .attr("id","player-circles") .selectAll(".playerSeasons") .data(data.map(d => ({ player: d.player, season: d.year, totalSG: d.totalSG, rank: +d.rank, pos: [ A[0] * d.OTT_Pct + B[0] * d.SHORT_Pct + C[0] * d.APP_Pct, A[1] * d.OTT_Pct + B[1] * d.SHORT_Pct + C[1] * d.APP_Pct ] }) )) playerSeasonSel .enter().append("circle") .attr("id","playerSeasonCircles") .attr("r", d => d.totalSG * 5) .attr("cx", d => d.pos[0]) .attr("cy", d => d.pos[1]) .attr("fill", d => d.rank == 1 ? '#B6C0C2' : d.season == "2020/21" ? "grey" : "white") .attr("stroke",d => d.rank == 1 ? 'grey' : d.season == "2020/21" ? "black" : '#B6C0C2') .attr("stroke-width",1.5) .on('mouseover', function(d,i) { //player-season parameters to pass into tooltip let player = d3.select(this).data()[0].player let season = d3.select(this).data()[0].season barTooltip(player,season) tooltip.style("visibility","visible") }) .on('mouseout', function(d,i) { return tooltip.style("visibility", "hidden") }) .on('mousemove', function() { let tooltipOffset = d3.event.pageY > 1000 ? -70 : 20 return tooltip.style("top", (d3.event.pageY+tooltipOffset)+"px") .style("left",(d3.event.pageX+20)+"px"); }); return triangleSVG.node() }2d:T51b,annotations = { const annotations = [{ note: {label: "Bubba Watson '12 & '14", wrap:80}, //can use x, y directly instead of data x: -229, y: 154, dx: 43, dy: 36, subject: { radius: 25, }, type: d3_svg_annotation.annotationCalloutCircle },{ note: {label: "Tiger Woods '06", wrap:60}, //can use x, y directly instead of data x: -31, y: -73, dx: 13, dy: -26 },{ note: {label: "Jordan Spieth '15",wrap:60}, //can use x, y directly instead of data x: 39, y: 66, dx: 24, dy: 23 },{ note: {label: "Patrick Reed '18",wrap:60}, //can use x, y directly instead of data x: 167, y: 128, dx: 24, dy: 23 },{ note: {label: "Luke Donald '05", wrap:60}, //can use x, y directly instead of data x: 110, y: -28, dx: 54, dy: 0 },{ note: {label: "Ángel Cabrera '09",wrap:80}, //can use x, y directly instead of data x: -124, y: -24, dx: -33, dy: -35 }] chart const makeAnnotations = d3_svg_annotation.annotation() // .editMode(true) //also can set and override in the note.padding property //of the annotation object // .notePadding(15) .type(d3_svg_annotation.annotationLabel) .annotations(annotations) d3.select("#triangle") .insert("g","#player-circles") .attr("class", "annotation-group") .call(makeAnnotations) } 2e:T8c5,barTooltip = function (player, season) { let PlayerData = flatRawData.filter(d => d.player == player & d.year == season) var colScale = d3.scaleOrdinal() .domain(PlayerData.map(d => d.stat)) .range(["#EBD0B3","#c1d0cb","#AED8E6","#AED8E6"]) //For best in dataset context, only consider players who have played >=7 tourns in a season let statRangeData = flatRawData.filter(d => d.tourn_count >= 7) //Find the min/max SG's in the dataset across the categories let statRange = d3Array.rollup(statRangeData, v => [d3.min(v, d => d.sg),d3.max(v, d => d.sg)], d => d.stat) let statRangeFlat = unroll(statRange,['stat','sg'],"sg") // let xScale = d3.scaleLinear() // .domain([d3.min(flatRawData_top5, d=>d.sg), d3.max(flatRawData,d => d.sg)]) // .range([margin.left, tooltipWidth - margin.right]) //Dynamic tooltip header headerSVG .select("#player-name") .text(`${player} | ${season}`) //Plot best in dataset context bars barSVG .selectAll("#rangeBars") .data(statRangeFlat) .join("rect").attr("id","rangeBars") .attr("x", xScale(0)) .attr("y", (d, i) => yScale(i)) .attr("width", d => xScale(d.sg[1]) - xScale(0)) .attr("height", yScale.bandwidth()) .attr("fill", "#e6e6e6") .attr("opacity",0.6) //Plot selected SG bars barSVG .selectAll("#bars") .data(PlayerData) .join("rect").attr("id","bars") .attr("x", d => d.sg > 0 ? xScale(0) : xScale(d.sg)) .attr("y", (d, i) => yScale(i)) .attr("width", d => d.sg > 0 ? xScale(d.sg) - xScale(0) : xScale(0) - xScale(d.sg)) .attr("height", yScale.bandwidth()) .attr("fill", d => colScale(d.stat)) .attr("opacity",0.8) barSVG //.append("g") .selectAll("#sg-labels") .data(PlayerData) .join("text").attr("id","sg-labels") .attr("x", d => xScale(d.sg)) .attr("y", (d, i) => yScale(i) + yScale.bandwidth()/2) .text(d=> Math.round(d.sg*10)/10) .attr("font-size",15) .attr("text-anchor", d => d.sg >= 0 ? "start" : "end") .attr("dy", "0.3em") .attr("dx",d => d.sg >= 0 ? 4 : -4) .attr("font-weight","bold") .attr("fill",d=> d3.hsl(colScale(d.stat)).darker(0.1)) return tooltipsvg.node(); }2f:T454,function wrap(text, width) { text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1, // ems x = 0, y = text.attr("y"), dy = 1.2, //parseFloat(text.attr("dy")), tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + "em") .text(word); } } }); }30:[{"id":"194609a60584e71dc2650b05996f9f945e78309b1aa4f2ab5eb752736b9f0877edf2b84f10d98b1cbdfa01096d1954aa32d0d58abbfe605f21aade8841e336f9","href":"https://static.observableusercontent.com/files/194609a60584e71dc2650b05996f9f945e78309b1aa4f2ab5eb752736b9f0877edf2b84f10d98b1cbdfa01096d1954aa32d0d58abbfe605f21aade8841e336f9","name":"top5@3.csv","type":"text/csv","lastModified":1605441763936.796,"size":276091},{"id":"e913de10b955f48a3d6c827743b2f5889167952a60df19b18c4cfbd3bef94b71e7023a076f71069d67b07b1c432c3566ffecae1c243fc7a0976579f45df5fa8e","href":"https://static.observableusercontent.com/files/e913de10b955f48a3d6c827743b2f5889167952a60df19b18c4cfbd3bef94b71e7023a076f71069d67b07b1c432c3566ffecae1c243fc7a0976579f45df5fa8e","name":"Masters 20 sg@5.csv","type":"text/csv","lastModified":1605441763936.796,"size":4520},{"id":"06c0edd67f8a70a628396ebfdf3f053c8da72fcaedf5879699a99f98fb1868ad3c36716cdc0e4b9fcee2fb40481ef85a35585ae1c4eb0b121f44aefab5e915b6","href":"https://static.observableusercontent.com/files/06c0edd67f8a70a628396ebfdf3f053c8da72fcaedf5879699a99f98fb1868ad3c36716cdc0e4b9fcee2fb40481ef85a35585ae1c4eb0b121f44aefab5e915b6","name":"sg-utf8@1.csv","type":"text/csv","lastModified":1605441763936.796,"size":240413}] 2a:{"title":"There's more than one way to beat the field at Augusta","cells":[{"id":514,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2776,"value":"viewof select = form(html``)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3218,"value":"md `## CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2402,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2321,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2575,"value":"md `## Tooltip `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"tooltip = d3.select(\"body\")\n .append(\"div\")\n .attr('class','tooltip')\n .style(\"height\",`${tooltipHeight}px`)\n .style(\"width\", `${tooltipWidth}px`)\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\")\n .style(\"color\", \"black\")\n .style(\"background-color\", \"#FFFFFF\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"tooltipsvg = tooltip.append(\"svg\").attr(\"id\",\"tooltipContent\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2082,"value":"barSVG = tooltipsvg.insert(\"svg\",\"#zero-line\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2085,"value":"headerSVG = tooltipsvg.append(\"g\")\n .attr(\"transform\",`translate(${tooltipWidth/2},23)`)\n .append(\"text\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3222,"value":"{\n tooltipsvg\n .append(\"line\").attr(\"id\", \"zero-line\")\n .attr(\"x1\",xScale(0))\n .attr(\"x2\",xScale(0))\n .attr(\"y1\",margin.top)\n .attr(\"y2\",tooltipHeight-margin.bottom)\n .attr(\"stroke\",\"#B6C0C2\")\n .attr(\"stroke-width\",1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3225,"value":"xScale = d3.scaleLinear()\n .domain([d3.min(flatRawData_top5, d=>d.sg), d3.max(flatRawData,d => d.sg)])\n .range([margin.left, tooltipWidth - margin.right])\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":3229,"value":"xScale(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2094,"value":"tooltipHeader = {\n headerSVG.append(\"tspan\")\n .attr(\"id\",\"player-name\")\n .text(\"player name\")\n .style(\"font-size\",15)\n .attr(\"text-anchor\",\"middle\")\n .attr(\"fill\",\"grey\")\n .attr(\"x\",0);\n\n headerSVG.append(\"tspan\")\n .attr(\"text-anchor\",\"middle\")\n .text(\"Absolute Strokes Gained by shot type\")\n .style(\"font-size\",12)\n .attr(\"dy\",\"1.5em\")\n .attr(\"fill\",\"#B6C0C2\")\n .attr(\"x\",0);\n \n headerSVG.append(\"tspan\")\n .text(\"▊\")\n .attr(\"fill\",\"#e6e6e6\")\n .attr(\"opacity\",0.7)\n .attr(\"x\",0)\n .attr(\"dy\",\"1.2em\")\n .style(\"font-size\",12)\n .attr(\"fill\",\"#e6e6e6\")\n .attr(\"opacity\",0.75)\n .attr(\"text-anchor\",\"middle\")\n\n headerSVG.append(\"tspan\")\n .text(\" = highest value in dataset\")\n .style(\"font-size\",11)\n .attr(\"fill\",\"#B6C0C2\")\n \n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale).tickFormat(i => flatRawData[i].stat).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1351,"value":"margin = ({top: 67, right: 30, bottom: 15, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1372,"value":"tooltipHeight = 140","pinned":true,"hidden":false,"mode":"ojs"},{"id":1627,"value":"tooltipWidth =230","pinned":true,"hidden":false,"mode":"ojs"},{"id":1340,"value":"yScale = d3.scaleBand()\n .domain(d3.range(3))\n .range([margin.top, tooltipHeight - margin.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2564,"value":"md `## Data Input & Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"flatData = flattenData(top5_SG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3232,"value":"flatRawData = flattenData(sgRaw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2010,"value":"flatRawData_top5 = flattenData(top5_SG_raw);","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 640","pinned":true,"hidden":false,"mode":"ojs"},{"id":2704,"value":"sg = await FileAttachment(\"sg-utf8@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2940,"value":"sg2 = await FileAttachment(\"sg-utf8@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2722,"value":"fieldSG = await FileAttachment(\"Masters 20 sg@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2946,"value":"fieldSG2 = await FileAttachment(\"Masters 20 sg@5.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2742,"value":"sgWithField = [...sg,...fieldSG]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3184,"value":"sgWithField.filter(d=>d.player == \"Bryson DeChambeau\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2751,"value":"sgWithField2 = [...sg2,...fieldSG2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2720,"value":"sgWithField.filter(d => d.year == \"2020/21\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"sgNorm = {\nconst data = sgWithField.filter(d => +d.tourn_count >= 5)\n\n data.forEach(function(d){\n d.OTT = Math.max(+d.OTT,0);\n d.APP = Math.max(+d.APP,0);\n d.ARG = +d.ARG;\n d.PUTT = +d.PUTT;\n d.SHORT = Math.max(d.ARG + d.PUTT,0);\n d.totalSG = d.OTT + d.APP + d.SHORT;\n d.OTT_Pct = d.OTT/d.totalSG;\n d.APP_Pct = d.APP/d.totalSG;\n d.SHORT_Pct = d.SHORT/d.totalSG;\n })\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1524,"value":"sgRaw = {\n let data = sgWithField2.filter(d => +d.tourn_count >= 5)\n data.forEach(function(d){\n d.OTT = +d.OTT;\n d.APP = +d.APP;\n d.SHORT = +d.ARG + +d.PUTT;\n })\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2755,"value":"sgNorm.filter(d => d.year == \"2020/21\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"top5 = await FileAttachment(\"top5@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"mastersTop5 = top5.filter(d => ['Masters Tournament'].includes(d.tourn_names) & d.rank <=3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"//Only return data for top5 Masters finishers\ntop5_SG = {\n\n let data = []\n\n sgNorm.forEach(function(d){\n for (let i=0; i d.year == \"2020/21\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2770,"value":"top5_field_norm = [...top5_SG,...fieldNorm]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2552,"value":"md` ## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"flattenData = function(data) {\n \n let results = [];\n\n data.forEach(function (a) {\n let stats = {OTT:a.OTT, APP:a.APP, SHORT:a.SHORT}\n \n var statsObj = Object.entries(stats).map(([stat, sg]) => ({stat,sg}));\n \n statsObj.forEach(function(d){\n let comb = {player:a.player,\n year:a.year,\n tourn_count: a.tourn_count,\n stat:d.stat,\n sg:d.sg}\n\n results.push(comb)\n\n })\n \n \n })\n return results\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"function unroll(rollup, keys, label = \"value\", p = {}) {\n return Array.from(rollup, ([key, value]) => \n value instanceof Map \n ? unroll(value, keys.slice(1), label, Object.assign({}, { ...p, [keys[0]]: key } ))\n : Object.assign({}, { ...p, [keys[0]]: key, [label] : value })\n ).flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2974,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2558,"value":"md `## Dependancies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1651,"value":"d3Array = require(\"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2266,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2779,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2782,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}