31:T885,recordChart = { const hover = vl .selectSingle() .on('mouseover') .empty('none'); const fontSize = width > 450 ? 13 : 7; const titleFontSize = width > 450 ? 13 : 8; const textMarkings = { align: "left", dx: 3.5, fontSize }; const axis = { grid: true, tickCount: 5, gridDash: [3, 10], titleFontSize }; const bucks = vl .markLine() .data(bucks1920) .encode( vl .x({ title: "Games Played" }) .fieldQ("Total_Games") .axis({ ...axis, grid: false, titleFontSize }) .scale({ domain: [0, 95] }), vl .y({ title: "Wins" }) .fieldQ("Total_Wins") .axis({ ...axis, titleFontSize }), vl.detail().fieldN("Code"), vl.color({ value: "darkgreen" }) ); const bucksLayer = bucks .data(bucks1920.slice(0, 1)) .markText(textMarkings) .encode( vl.text().fieldN("Code"), vl.x().fieldQ("Max_Games"), vl.y().fieldQ("Max_Wins") ); const teams = vl .markLine() .data(winsByDateData) .encode( vl .x({ title: "Games Played" }) .fieldQ("Total_Games") .axis({ ...axis, grid: false }) .scale({ domain: [0, 95] }), vl .y({ title: "Wins" }) .fieldQ("Total_Wins") .axis(axis), vl.detail().fieldN("Code"), vl.color({ value: "Gainsboro" }), vl.opacity({ value: .3 }) ); const detail = "#94ae83"; const teamDetailColor = teams .markLine() .select(hover) .encode( vl .color() .if(hover, vl.value(detail)) .value("grey"), vl .opacity() .if(hover, vl.value(1)) .value(0) ); const teamDetail = teams .transform(vl.filter(hover)) .markText(textMarkings) .encode( vl.detail().fieldN("Code"), vl.x().fieldQ("Max_Games"), vl.y().fieldQ("Max_Wins"), vl.text().fieldN("Code"), vl.color({ value: detail }), vl.opacity({ value: 1 }) ); const w = width * .85; return vl .layer(teams, teamDetailColor, teamDetail, bucks, bucksLayer) .width(w) .height(w / 2) .config({ view: { stroke: null } }) .render(); }32:T50b,{ let filtered = shooting.filter(s => { return ( s["FG%"] >= sliders.fg && s["FT%"] >= sliders.ft && s["FG3%"] >= sliders.fg3 && s["FG3A/G"] > 1.0 ); }); filtered = filtered.map(s => { return { Player: s.PLAYER, Season: `20${s.Season - 1}-${s.Season}`, ["Points/G"]: s["Points/G"].toFixed(1), ["FG%"]: s["FG%"].toFixed(1), ["FG3%"]: s["FG3%"].toFixed(1), ["FT%"]: s["FT%"].toFixed(1), ["Games Played"]: s["GP"].toFixed(0), ["Minutes"]: s["MIN"].toFixed(0) }; }); if (width < 600) { filtered = filtered.map(f => lodash.pick(f, ['Player', 'Season', 'Points/G', 'FG%', "FG3%", 'FT%']) ); } if (filtered.length > 0) { const t = table(filtered, { pageSize: 10 }); // post-process table to highlight Khris Middleton const tr = t.getElementsByTagName("tr"); for (const row of tr) { const cols = row.getElementsByTagName("td"); if ( cols[0].textContent === "Khris Middleton" && cols[1].textContent === "2019-20" ) { row.className = "km"; } } return html`

${caption}

${t}`; } else { return md`No players matched the given criteria`; } }33:T446,viewof selectedStat = { let value = badges[0].stat; const cards = html`

${badges.map((badge, idx) => { const { start, end, stat, backColor, description } = badge; let columnsString; start && end ? (columnsString = "grid-column-start: " + start + "; grid-column-end: " + end) : ""; let selectedClass = idx === 0 ? "selected" : ""; const card = html`

${stat}

${description}

`; card.onclick = () => { cards.value = stat; cards.dispatchEvent(new CustomEvent("input")); Array.prototype.forEach.call( document.getElementsByClassName("badge"), function(el) { el.className = "badge"; } ); card.className += " selected"; }; return card; })}

`; cards.value = value; return cards; }34:T9f4,scatter = { const fontSize = width > 600 ? 10.5 : 9; const fewerAnnotation = vl .markText({ align: "center", fontSize }) .data([{}]) .encode( vl.y({ datum: .4925 }), vl.x({ datum: .345 }), vl.text().value("⭠ Opponents shoot less shots") ); const moreAnnotation = vl .markText({ align: "center", fontSize, angle: 90 }) .data([{}]) .encode( vl.y({ datum: .595 }), vl.x({ datum: .2125 }), vl.text().value("Opponents shoot lower % →") ); const yTitle = vl .markText({ align: "left", fontWeight: 700 }) .data([{}]) .encode( vl.y({ datum: .735 }), vl.x({ datum: .21 }), vl.text().value("Opponent Field Goal %") ); const bucksAnnotation = vl .markText({ align: "center", dy: -14, fontSize: 10 }) .data( seasonsData.filter( s => s.TEAM_NAME === "Milwaukee Bucks" && s.Season === 2019 ) ) .encode( vl.x().fieldQ("Freq"), vl.y().fieldQ("OPP_FG_PCT"), vl.text({ value: "2019-20 Bucks" }) ); function makeDomain(key) { const buffer = .05; const extent = d3.extent(seasonsData.map(d => d[key])); return [extent[0] - buffer, extent[1] + buffer]; } const axis = { grid: false, tickCount: 3, gridDash: [3, 3], format: ".0%", titlePadding: 10 }; function makeAxis({ key, type_, title }) { let base; if (type_ === "x") base = vl.x({ axis }); else base = vl.y({ axis }); return base .fieldQ(key) .scale({ domain: makeDomain(key) }) .title(title); } const expression = `if(datum.TEAM_NAME === "Milwaukee Bucks" && datum.Season === 2019, true, false)`; const scale = { domain: [true, false], range: [bucksGreen, "Gainsboro"] }; const scatter = vl .markCircle({ size: 65 }) .data(seasonsData.filter(seasonFilter)) .transform(vl.calculate(expression).as('selected_team')) .encode( makeAxis({ type_: "x", key: "Freq", title: "Percentage of Total Shots Allowed from Restricted Area" }), makeAxis({ type_: "y", key: "OPP_FG_PCT", title: "" }), vl.tooltip(['TEAM_NAME', 'Season', "OPP_FG_PCT"]), vl .color() .fieldN("selected_team") .scale(scale) .legend(false) ); return vl .layer([scatter, bucksAnnotation, fewerAnnotation, moreAnnotation, yTitle]) .width(width * .8) .height(width * .5) .config({ view: { stroke: null } }) .render(); }35:T767,html``36:[{"id":"54b20243f518ea1a9a2bb8d2cd4574da8d282c09b68a667f875b2ca0c443fd1c80639445b09803dbb5bccea8af13f7d40ce060db5c6fa0d20fba0e8177d0c48d","href":"https://static.observableusercontent.com/files/54b20243f518ea1a9a2bb8d2cd4574da8d282c09b68a667f875b2ca0c443fd1c80639445b09803dbb5bccea8af13f7d40ce060db5c6fa0d20fba0e8177d0c48d","name":"four_factors@1.csv","type":"text/csv","lastModified":1586642379637.792,"size":4833},{"id":"1887f4e7ee5508963f2c3674a91223985adf137b3160440e7035aaab4789ea7210709205f15838d59bda141e9a20c1d36291c42e9a8f19f20434c5819b284763","href":"https://static.observableusercontent.com/files/1887f4e7ee5508963f2c3674a91223985adf137b3160440e7035aaab4789ea7210709205f15838d59bda141e9a20c1d36291c42e9a8f19f20434c5819b284763","name":"player_shooting@7.csv","type":"text/csv","lastModified":1588556494082.856,"size":807677},{"id":"9c8723e491f1df5557a6ab284fb2188e4dac2ce5baafe6b0aa3c1534cb7c46418c77d1a2067918f40fd78657fbed69a23b07fcbf2d9ceeca190749555b0fc301","href":"https://static.observableusercontent.com/files/9c8723e491f1df5557a6ab284fb2188e4dac2ce5baafe6b0aa3c1534cb7c46418c77d1a2067918f40fd78657fbed69a23b07fcbf2d9ceeca190749555b0fc301","name":"player_efficiency.csv","type":"text/csv","lastModified":1585805413291.111,"size":58311},{"id":"8eeed0c777bbc606d85458e7ebc2b746e36e792f8bcd8c77834f6f995175391ccacbbf13c313e6b039a3be2c755d1c77cd2f75a36bf16a850a508fb314c450db","href":"https://static.observableusercontent.com/files/8eeed0c777bbc606d85458e7ebc2b746e36e792f8bcd8c77834f6f995175391ccacbbf13c313e6b039a3be2c755d1c77cd2f75a36bf16a850a508fb314c450db","name":"bucks_vs_league_opp_shooting.csv","type":"text/csv","lastModified":1587013032026.151,"size":1359},{"id":"b9d9d31759cc88dd84842d9f39fbf51dc33f066d682faf35f7fba617af2a9fa83b794050a049f5be3615257de0e90c123f5f5425c956f56d65ee22a2862e6889","href":"https://static.observableusercontent.com/files/b9d9d31759cc88dd84842d9f39fbf51dc33f066d682faf35f7fba617af2a9fa83b794050a049f5be3615257de0e90c123f5f5425c956f56d65ee22a2862e6889","name":"game_logs_clean.csv","type":"text/csv","lastModified":1586298297530.686,"size":420618},{"id":"360d710dd00849776616b94bc37dd34cd50ce484bc23b22f203b9b9f0815772c1a65d4799e9165084652e0bee02d0bb7808f6ce982f0722d9d52c1ad0a670bb5","href":"https://static.observableusercontent.com/files/360d710dd00849776616b94bc37dd34cd50ce484bc23b22f203b9b9f0815772c1a65d4799e9165084652e0bee02d0bb7808f6ce982f0722d9d52c1ad0a670bb5","name":"player_shooting@6.csv","type":"text/csv","lastModified":1586395725385.799,"size":276765},{"id":"16306783c72ec9456f80a7062e71db5ef4a7f6f4ae1cc091cb1a0167deca6d1511c6fa1037b856542f7ec3ea23a600546d45b5538d10c4ff5969f787e15cca7e","href":"https://static.observableusercontent.com/files/16306783c72ec9456f80a7062e71db5ef4a7f6f4ae1cc091cb1a0167deca6d1511c6fa1037b856542f7ec3ea23a600546d45b5538d10c4ff5969f787e15cca7e","name":"technology.svg","type":"image/svg+xml","lastModified":1588455106408.113,"size":4710},{"id":"8273d6babf35e76d6e3724eb35de103e8e2134643c2594c48f97056ada10be2773fe467d69cd1e244721dc1974e07b5bd7f8ec090e58b557276625a99af7c325","href":"https://static.observableusercontent.com/files/8273d6babf35e76d6e3724eb35de103e8e2134643c2594c48f97056ada10be2773fe467d69cd1e244721dc1974e07b5bd7f8ec090e58b557276625a99af7c325","name":"team_stats_advanced.csv","type":"text/csv","lastModified":1586311505672.999,"size":7551},{"id":"93d14258d5d36933d53053ee23fa3994185fa7bc618fcecc9d93a772d460cc52e0bb160f364d3e5d2bc1fb45b3ed7e50402ea2f710d41a811d3ac13a89b47c8b","href":"https://static.observableusercontent.com/files/93d14258d5d36933d53053ee23fa3994185fa7bc618fcecc9d93a772d460cc52e0bb160f364d3e5d2bc1fb45b3ed7e50402ea2f710d41a811d3ac13a89b47c8b","name":"opponent_shooting_with_seasons_1@1.csv","type":"text/csv","lastModified":1588009959656.736,"size":170241},{"id":"e932abbe2ec407d5ee5152751dc878642da67f3cb15b3d5b02e569b462afa0d2be681d7b8b0fe98a4c6d6a48028af84fd66c8f00ce1c3021c185c379a3b77186","href":"https://static.observableusercontent.com/files/e932abbe2ec407d5ee5152751dc878642da67f3cb15b3d5b02e569b462afa0d2be681d7b8b0fe98a4c6d6a48028af84fd66c8f00ce1c3021c185c379a3b77186","name":"season_game_logs@2.csv","type":"text/csv","lastModified":1588042535653.478,"size":826855},{"id":"a28afa0ea277762b21d0971b922b90917e2a3b093663129aabdbbeb6935640a426d242f3f0a2474264a521c876d9571b7631450a29f8ed85030b152c39c2aef2","href":"https://static.observableusercontent.com/files/a28afa0ea277762b21d0971b922b90917e2a3b093663129aabdbbeb6935640a426d242f3f0a2474264a521c876d9571b7631450a29f8ed85030b152c39c2aef2","name":"team_3pa_breakdown.csv","type":"text/csv","lastModified":1588533183746.124,"size":1620},{"id":"309bee717389ef8432519d01ded3a0a914598e87bb4b86a26a719155c689f4b60258c2e9bd8ef345c6ba43d29934decbeb36519bb942f39d8ccdf4256b5e0fac","href":"https://static.observableusercontent.com/files/309bee717389ef8432519d01ded3a0a914598e87bb4b86a26a719155c689f4b60258c2e9bd8ef345c6ba43d29934decbeb36519bb942f39d8ccdf4256b5e0fac","name":"team_shooting_locations.csv","type":"text/csv","lastModified":1588571040483.994,"size":10279}] 2f:{"title":"Playing the Percentages","cells":[{"id":5541,"value":"titleCell({\n title: \"Playing the Percentages\",\n subTitle: \"A Deep Dive into the Success of Milwaukee Bucks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`It's been ${daysSince()} days since the NBA season was abruptly suspended on ${lastGame.format(\n 'LL'\n)}. Since then, people have found various ways to cope with the resulting void. Users of the popular NBA subreddit [r/nba](www.reddit.com/r/nba) have resorted to [analzying how many times LeBron James](https://www.reddit.com/r/nba/comments/fsk0ha/is_it_really_lebron_report/) has appeared on Bleacher Report Instagram posts, or [jokingly turning mundane sequences into highlights](https://www.reddit.com/r/nba/comments/fj2k6v/highlight_lonzo_ball_dribbles_the_ball_down_the/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`To fulfill my own need for basketball, I am dedicating part of my quarantine to writing about and visualizing publicly available NBA data. To do so, I will be leveraging the \"magic\" of Observable, as it is the best medium for communicating with data visualization I have yet to come across, so much so that (full disclosure!) I started working at Observable in February 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`In this post, we will be taking a closer look at the Milwaukee Bucks - the factors of their success, and how those factors could affect the Bucks if this year's playoffs are to take place 🤞.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7065,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6894,"value":"{\n return html`\n

\n\n\n${md`\nA quick note before we get started:\n\n* This post contains interactive charts, which will be labeled with a banner describing the interaction available to the reader: \n${interaction(\"Hover over any...\", 0)}\n\n* Some sections will reference basketball statistics that may be foreign to some readers. Those statistics will be ${defn(\n \"underlined in orange\"\n)}, and you will be able to toggle their definitions based on your familiarity.`}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"md`At 53-12, the Bucks have the best record in the NBA. Their record puts them at a 66 win pace for a full season, which would rank as one of the most successful seasons in the last ${d3.extent(\n winsByDateData.map(s => s.Season)\n)[1] - d3.extent(winsByDateData.map(s => s.Season))[0]} years:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4735,"value":"interaction(\n ' Hover over or click on any individual line to see the corresponding team and season'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3051,"value":"md`## Offense`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2685,"value":"md`There are clear reasons for the Bucks success. On offense, the Bucks are extremely efficient, ranking ${rank(\n 1\n)} in ${defn(\"Effective Field Goal %\")} and ${rank(3)} in ${defn(\n \"True Shooting %\"\n)}. They play extremely fast as well, ranking ${rank(\n 1\n)} in the league in ${defn(\"Pace\")}, all of which contributes to the ${rank(\n 6\n)} highest ${defn(\"Offensive Rating\")} in the league.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7789,"value":"{\n const t = table([\n {\n Statistic: \"Offensive Rating\",\n Definition: \"Measures a team's points scored per 100 possessions.\"\n },\n {\n Statistic: \"Effective Field Goal %\",\n Definition:\n \"Measures field goal percentage adjusting for made 3-point field goals being 1.5 times more valuable than made 2-point field goals.\"\n },\n {\n Statistic: \"True Shooting %\",\n Definition:\n \" A shooting percentage that factors in the value of three-point field goals and free throws in addition to conventional two-point field goals.\"\n },\n {\n Statistic: \"Pace\",\n Definition:\n \"The number of possessions per 48 minutes for a team or player.\"\n }\n ]);\n\n const tableWithCaption = html`${t}

${md`[Definitions from stats.nba.com](https://stats.nba.com/help/glossary/)`}

`;\n\n return html`

Show Definitions

${tableWithCaption}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4586,"value":"md`Giannis Antetokounmpo, the front runner to win this year's MVP award, is without a doubt the primary driver of the Buck's efficient offense. But someone else is also playing a large role, and I think he deserves more credit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4590,"value":"md`### Khris Middleton`","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"md`Khris Middleton is quietly in the middle of a monster shooting season, averaging 21 points per game on the vaunted 50-40-90 (FG-FG3-FT) shooting percentages - splits which have only been achieved four times in the past ${d3.max(\n shooting.map(s => s.Season)\n) - d3.min(shooting.map(s => s.Season))} seasons:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5817,"value":"interaction(\"Drag the sliders to see which players match the criteria\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5809,"value":"viewof sliders = {\n const fg = makeSlider({\n key: \"FG%\",\n description: \"Field Goal %\",\n value: 49.9\n });\n\n const fg3 = makeSlider({\n key: \"FG3%\",\n description: \"Three-Point %\",\n value: 40.0\n });\n\n const ft = makeSlider({\n key: \"FT%\",\n description: \"Free Throw %\",\n value: 90.0\n });\n\n const container = html`

${fg}

${fg3}

${ft}

`;\n\n container.value = {\n fg: 49.9,\n fg3: 40.0,\n ft: 90.0\n };\n\n for (const slider of [\n { name: \"fg\", value: fg },\n { name: \"fg3\", value: fg3 },\n { name: \"ft\", value: ft }\n ]) {\n const { name, value } = slider;\n const origInput = value.oninput;\n value.oninput = e => {\n origInput(e);\n container.value[name] = value.value;\n };\n }\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2891,"value":"md` ## Defense`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2460,"value":"md`The Bucks are even more impressive on defense - they have the league's best ${defn(\n \"Defensive Rating\"\n)} by a comfortable margin. Digging into their [Defensive Four Factors](https://squared2020.com/2017/09/05/introduction-to-olivers-four-factors/) reveals why the Bucks are so successful defensively, as they rank ${rank(\n 1\n)} in ${defn(\"Opponent Effective Field Goal %\")}, ${rank(4)} in ${defn(\n \"Opponent Free Throw Rate\"\n)}, and ${rank(1)} in ${defn(\"Opponent Offensive Rebound %\")}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7504,"value":"{\n const t = table([\n {\n Statistic: \"Defensive Rating\",\n Definition: \"The number of points allowed per 100 possessions by a team.\"\n },\n {\n Statistic: \"Opponent Effective Field Goal %\",\n Definition:\n \"An opponent's field goal percentage that is adjusted for made 3 pointers being 1.5 times more valuable than a 2 point shot.\"\n },\n {\n Statistic: \"Opponent Free Throw Rate\",\n Definition:\n \"The number of free throw attempts a player or team allows in comparison to the number of shot attempts that player or team allows.\"\n },\n {\n Statistic: \"Opponent Offensive Rebound %\",\n Definition:\n \"The percentage of available offensive rebounds an opponent obtains.\"\n }\n ]);\n\n const tableWithCaption = html`${t}

${md`[Definitions from stats.nba.com](https://stats.nba.com/help/glossary/)`}

`;\n\n return html`

Show Definitions

${tableWithCaption}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4683,"value":"interaction(\n ' Click on a category to see how the Bucks compare to the rest of the league'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5172,"value":"{\n const statMap = {\n \"Defensive Rating\": { name: \"DEF_RATING\", format: d3.format(\".1f\") },\n \"Opponent eFG%\": { name: \"OPP_EFG_PCT\", format: d3.format(\".1%\") },\n \"Opponent FTA Rate\": { name: \"OPP_FTA_RATE\", format: d3.format(\".1%\") },\n \"Opponent TOV%\": { name: \"OPP_TOV_PCT\", format: d3.format(\".1%\") },\n \"Opponent OReb%\": { name: \"OPP_OREB_PCT\", format: d3.format(\".1%\") }\n };\n const { name, format } = statMap[selectedStat];\n\n const data = fourFactors\n .map(ff => {\n return {\n name: ff.TEAM_NAME,\n value: ff[name]\n };\n })\n .sort((a, b) => a.value - b.value)\n .slice(0, 10);\n\n return makeChart({\n data: data,\n color: lightGreen,\n colTitle: selectedStat,\n format,\n type_: \"Compare\",\n title: `Top ${data.length} Teams by ${selectedStat}`,\n xBuffer: 70 / 954\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3147,"value":"md`So how exactly are the Bucks able to force those misses?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2719,"value":"md`### Location, Location, Location`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2724,"value":"md`NBA courts are big - 94 feet long and 50 feet wide - which means there are a lot of locations to shoot from. The recent analytics revolution produced an increased understanding of how \"valuable\" shots are from different locations, with the most notable result being the [increase in three-point attempts at the expense of the \"long-two\", or \"mid-range\" shot](https://twitter.com/kirkgoldsberry/status/1217109175894831105/photo/1). But despite that emphasis, the most efficient shots in the NBA are still ones taken closest to the basket - that is, shots taken near the rim, also known as the Restricted Area.\n\nThe chart below summarizes that understanding in the form of the expected value of a shot taken from each zone. You might want to take an extra second to study this chart, as it will be referenced later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4751,"value":"interaction(\n 'Hover over or click on any bar to highlight the corresponding zone on the basketball court'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2914,"value":"viewof ppsArea = makeChart({\n data: ppsLeagueData,\n format: d3.format(\".2f\"),\n colorScale: scale,\n colTitle: 'Expected Points Per Shot Attempt (League Average)',\n pointer: \"pointer\",\n xBuffer: 190 / 954\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4532,"value":"center(makeCourt())","pinned":false,"hidden":false,"mode":"ojs"},{"id":3174,"value":"md`The Bucks therefore, have made it their **defensive priority to prevent teams from shooting from the Restricted Area** - allowing about 6% fewer shots from there compared to the league average.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3244,"value":"makeChart({\n data: [\n { name: \"Milwaukee Bucks\", value: .260 },\n { name: \"League Average\", value: .323 }\n ],\n format: d3.format(\".1%\"),\n colTitle: \"Percentage of Total Shots Allowed (Restricted Area)\",\n type_: \"Compare\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3259,"value":"md`But even more impressive, when teams do shoot from the Restricted Area, the Bucks do an outstanding job of defending those shots:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3261,"value":"oppFgPctRa = makeChart({\n data: [\n { name: \"Milwaukee Bucks\", value: .5488 },\n { name: \"League Average\", value: .633693 }\n ],\n format: d3.format(\".1%\"),\n color: \"#74b1d4\",\n colTitle: \"Field Goal Percentage Allowed (Restricted Area)\",\n type_: \"Compare\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3291,"value":"md`To get a sense of how potent this combination of first preventing opponents from shooting at the rim, and then limiting the success of those shots, let's take a look at how this current Bucks teams stacks up against teams from the last ${seasonMinMax[1] -\n seasonMinMax[0]} seasons:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5047,"value":"interaction(\"Drag slider to the right to plot more seasons of data\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3325,"value":"viewof minYear = slider({\n min: 0,\n max: seasonMinMax[1] - seasonMinMax[0],\n step: 1,\n value: 0,\n format: v =>\n `Data from ${2019 - v}-${parseInt((2019 - v).toString().substr(2, 4)) +\n 1} to 2019-20`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3334,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4574,"value":"md`In short, the Bucks are likely in the midst of one of the best rim-protecting seasons of all time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4570,"value":"md`But if the Buck's defensive success is largely attributed to their extraordinary ability to protect the rim, the next question naturally becomes: how are the Bucks able to do so with so much success?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4582,"value":"md`### The Trade-Off`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6241,"value":"md`Good rim protection starts with personnel, namely players with size and length. Shooting a layup with someone who is 7 feet tall trying to block the shot is simply harder than shooting one against someone who is 6 feet tall. Brook Lopez, the Buck's center, is also known as \"Splash Mountain\", a nickname which pays homage to both his ability to shoot threes and his tremendous size. In the clip below, watch how Lopez (11 in black) uses that size to force Kendrick Nunn into a difficult lay-up attempt which Nunn misses:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6221,"value":"lopezD = video({ start: 269, end: 274, autoplay: lopezR })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6295,"value":"viewof lopezR = makeReplay()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4624,"value":"md`But personnel alone does not explain their success. Playing defense in the NBA is challenging. The recent surge in three-point shooting makes defense even harder - players who can shoot need to be guarded closely, taking defensive players *away* from the rim, which opens up driving lanes towards the rim. In other words, defending the three-point shot is at odds with defending the rim.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5070,"value":"md`What's interesting about the Bucks is that they've made a conscious decision to allow three-point shots, conceding almost 3% higher frequency of three-pointers than the league average, which ranks ${rank(\n 3\n)} in the league.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5589,"value":"makeChart({\n data: team_3pa_breakdown\n .slice(0, 5)\n .concat([{ name: \"League Average\", value: 0.37975130874871915 }]),\n color: lightGreen,\n format: d3.format(\".1%\"),\n type_: \"Compare\",\n colTitle: `Percent of Opponent Shots Which Come From Three-Pointers`,\n xBuffer: 155 / 954\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5079,"value":"md`But not all three-point shots are created equal.\n\nThe three-point line is actually closer at the corners: 22 feet versus to 23 feet, 9 inches elsewhere, which explains why corner threes have higher expected points per shot attempt than above-the-break threes. So if we take a closer look at that 2.9% by looking at the *location* of those three-pointers, we can see the exact trade-off the Bucks are making:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5098,"value":"threeBreakdown","pinned":false,"hidden":false,"mode":"ojs"},{"id":5754,"value":"md`It's as if the Bucks took the values from the expected points per shot attempt in each zone from [above](https://observablehq.com/d/1a72c7d853804b95#ppsArea), and used them to dictate their defensive scheme. They first prioritize defending the shots at the rim. Because the geometry of the NBA court makes it challenging to do so without conceding three-pointers, the Bucks are intentional about conceding the least efficient type of three-pointer, the above-the-break 3, whenever possible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6261,"value":"md`The sequence below is a clear example of this trade-off in action. Goran Dragic of the Miami Heat (7 in baby blue) beats his defender and drives towards the basket, threatening the rim. The Bucks' Ersan Ilyasova (7 in black) responds to this threat immediately by leaving his man - Andre Igoudala (28 in baby blue) - open above-the-break. Contrast this to how, at the left corner of the court, Pat Connaughton (24 in black) stays attached to his man. Igoudala makes the shot, but the Bucks are betting their emphasis on rim protection pays off over the course of an entire game.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6265,"value":"video({ start: 192, end: 199, autoplay: tradeOff })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6337,"value":"viewof tradeOff = makeReplay()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5767,"value":"md`## What's the Point?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6135,"value":"md`I wrote this post because I wanted to use my passion for writing and data visualization to communicate an aspect of the Milwaukee Bucks success. But numbers, charts and words describing those numbers and charts aside, the question remains is: why does this matter?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6145,"value":"md`For one, all schemes have weaknesses. Sure, above-the-break threes are not as efficient as threes taken from the corner, but they are far from impossible to make, especially when they are open. In fact, the Bucks' opponent from the two video clips above, the Miami Heat, are the league's best team shooting from above-the-break:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6560,"value":"viewof teamShootingByZone = makeChart({\n data: teamShooting\n .filter(t => t.Zone === 'Above the Break 3')\n .sort((a, b) => (a.OPP_FG_PCT > b.OPP_FG_PCT ? -1 : 1))\n .map(v => {\n return {\n name: v.Team,\n value: v.OPP_FG_PCT\n };\n })\n .slice(0, 5),\n format: d3.format(\".1%\"),\n color: lightGreen,\n type_: \"Compare\",\n colTitle: \"Shooting Percentage on Above-the-Break Threes\",\n xBuffer: 190 / 954\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6564,"value":"md`The Heat have also won both their games agains the Bucks this season. They are currently the ${rank(\n 4\n)} best team in the Eastern Conference, meaning if the playoffs were to miraculously start tomorrow, the Bucks and the Heat are likely to meet in an awesome ${rank(\n 2\n)} round matchup.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6578,"value":"md`Of course, drawing any meaningful conclusions from a two game sample size is foolish, and distilling a potential matchup between the Bucks and the Heat into \"rim protection vs. three-point shooting\" is reductive of all the other factors involved in winning basketball games.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6587,"value":"md`So this post is less about numbers and charts, and more about the questions they prompt. Can teams like the Miami Heat exploit the trade-offs the Bucks are making during the playoffs, when a team's strengths and weaknesses are magnified? If so, will the Bucks make adjustments, something their head coach Mike Budenholzer has been criticzed for his inability to do so in the past? Those questions are a reminder of the tremendous intrigue of the playoffs as a whole.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6652,"value":"md`This post is less about the Miami Heat, or even the Milwaukee Bucks, for that matter. Rather, it's more about the richness of NBA basketball, a game in which players capable of breathtaking displays of athleticism and skill execute the intracacies of strategy and scheme that nerds like me find so much joy in analyzing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6605,"value":"md`For me, this post is also about hope - hope that its contents provided a brief respite in these difficult times. More importantly, it's about hoping that basketball fans will be able to indulge in the richness and intrigue of the NBA again, sooner rather than later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6647,"value":"md`Thanks for reading!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2733,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6606,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6664,"value":"md`The code which powers the content is contained below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6080,"value":"teamShooting = d3.csvParse(\n await FileAttachment(\"team_shooting_locations.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3327,"value":"seasonsData = d3\n .csvParse(\n await FileAttachment(\"opponent_shooting_with_seasons_1@1.csv\").text(),\n d3.autoType\n )\n .filter(s => s.Season >= minSeason && s.Zone === 'Restricted Area')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5583,"value":"team_3pa_breakdown = d3\n .csvParse(await FileAttachment(\"team_3pa_breakdown.csv\").text(), d3.autoType)\n .map(v => {\n return {\n name: v.Team,\n value: v.OPP_FG3_FREQ\n };\n })\n .sort((a, b) => b.value - a.value)\n .slice(0, 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3848,"value":"winsByDateData = d3\n .csvParse(await FileAttachment(\"season_game_logs@2.csv\").text(), d3.autoType)\n .filter(s => s.Season >= 2014)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6929,"value":"function defn(text) {\n return html` ${text}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6324,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":6308,"value":"function makeReplay() {\n const button = html``;\n\n button.value = 0;\n\n // set the autoplay param on the embed to true on embeds\n button.onclick = () => {\n button.value = 1;\n };\n\n // set the autoplay param on the embed to true on embeds\n button.ontouchstart = () => {\n button.value = 1;\n };\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6219,"value":"function video({ start, end, autoplay }) {\n const w = width * .9;\n const h = w / 1.8;\n const url = `https://www.youtube.com/embed/HxBJgeiLIm8?start=${start}&end=${end}&autoplay=${autoplay}`;\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5973,"value":"lodash = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4727,"value":"function interaction(text, margin) {\n return html`\n

${text} \n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4668,"value":"mouse = FileAttachment(\"technology.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3323,"value":"function seasonFilter(row) {\n return row.Season >= 2019 - minYear;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5539,"value":"function titleCell({ title, subTitle }) {\n return html`

${title}

${subTitle}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2880,"value":"import { makeChart, threeBreakdown } from \"@jzhang/bucks-shooting-by-zone\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4534,"value":"import { makeCourt, center } with {\n ppsArea as area,\n scale as pointsPerShotColorScale\n} from \"@jzhang/d3-court\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4524,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5176,"value":"lightGreen = \"#94ae83\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4502,"value":"scale = {\n return d3.scaleQuantize(\n [.7, d3.max(ppsLeagueData.map(d => d.value))],\n d3.schemeGreens[8]\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"bucksVsLeague = d3.csvParse(\n await FileAttachment(\"bucks_vs_league_opp_shooting.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2919,"value":"ppsLeagueData = bucksVsLeague\n .filter(b => b.Team === 'Totals' && b.Zone !== 'Backcourt')\n .map(b => {\n return {\n name: b.Zone,\n value: b['Points per shot']\n };\n })\n .sort((a, b) => (a.value > b.value ? -1 : 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4436,"value":"caption = {\n const minYear = d3.min(shooting.map(f => f.Season));\n\n const seasonStr = `20${minYear}-${minYear + 1}`;\n\n const { fg, fg3, ft } = sliders;\n\n return `Players who have shot at least ${fg}%-${fg3}%-${ft}% (FG-FG3-FT) since ${seasonStr}
(min. 1000 minutes and 1 Three-Point Attempt Per Game)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"moment = require(\"moment\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2287,"value":"badges = [\n {\n stat: \"Defensive Rating\",\n description: \"1st\"\n },\n {\n stat: \"Opponent eFG%\",\n description: \"1st\"\n },\n {\n stat: \"Opponent FTA Rate\",\n description: \"4th\"\n },\n {\n stat: \"Opponent OReb%\",\n description: \"1st\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"function makeSlider({ key, description, value }) {\n return slider({\n min: 0,\n max: 100,\n value,\n precision: 3,\n step: .1,\n description\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"shooting = d3\n .csvParse(await FileAttachment(\"player_shooting@7.csv\").text(), d3.autoType)\n .filter(s => s.MIN > 1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2657,"value":"fourFactors = d3.csvParse(\n await FileAttachment(\"four_factors@1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3409,"value":"minSeason = 2011","pinned":false,"hidden":false,"mode":"ojs"},{"id":3401,"value":"seasonMinMax = d3.extent(seasonsData.map(d => d.Season))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3853,"value":"bucks1920 = winsByDateData.filter(s => s.isBucks20 === \"True\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"advancedData = d3.csvParse(\n await FileAttachment(\"team_stats_advanced.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1979,"value":"bucksGreen = \"darkgreen\" // \"#00471B\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2238,"value":"function rank(num) {\n let suffix = \"th\";\n if (num === 1) suffix = \"st\";\n if (num === 2) suffix = \"nd\";\n if (num === 3) suffix = \"rd\";\n\n return `${num}^${suffix}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"function daysSince() {\n const now = moment();\n return now.diff(lastGame, 'days');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"lastGame = moment('Wed, March 11 2020')","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"import { table } from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}