2f:T5a5,colors = (plot_input === "Tile") ? { type: "linear", range: ["steelblue", "orange"], interpolate: "hcl", legend:true, label: "Shot Frequency", style:{fontSize: "18px", fontFamily:'Archivo', paddingBottom:'40px', paddingTop:'10px', paddingLeft:'5px'} } : // if color input is distance shot (filters.color_input === "distanceShot") ? { type: "linear", range: ["steelblue", "orange"], interpolate: "hcl", legend:true, label: "Distance Shot (ft)", style:{fontSize: "18px", fontFamily:'Archivo', paddingBottom:'40px', paddingTop:'10px', paddingLeft:'5px'} } : filters.color_input==="typeEvent" ? { legend: true, range: ["#EB4242", "#CCCCCC"], domain : ["Made Shot", "Missed Shot"], style:{fontSize: "18px", fontFamily:'Archivo', paddingBottom:'40px', paddingTop:'10px', paddingLeft:'5px'}} : filters.color_input==="typeShot" ? {type: "categorical", legend: true, range: ["#F7CB15", "#2892D7"], style:{fontSize: "18px", fontFamily:'Archivo', paddingBottom:'40px', paddingTop:'10px', paddingLeft:'5px'} } : filters.color_input=="zoneRange" ? {legend: true, type:"categorical", domain: ["Less Than 8 ft.", "8-16 ft.", "16-24 ft.", "24+ ft."], style:{fontSize: "18px", fontFamily:'Archivo', paddingBottom:'40px', paddingTop:'10px', paddingLeft:'5px'}} : {legend:true, style:{fontSize: "18px", fontFamily:'Archivo', paddingBottom:'40px', paddingTop:'10px', paddingLeft:'5px'}};30:T72b,function markings({ stroke = "currentColor", strokeWidth = 2, strokeOpacity = 1 } = {}) { // Ref. https://observablehq.com/@nor/nba-2018-19-shooting-effeciency const angle = Math.atan(90 / 220); const arc = d3.arc(); const lines = [ [-250, 420, 250, 420], // half [-250, 450, -250, -50], // left [250, 450, 250, -50], // right [250, -50, -250, -50], // bottom [-220, -50, -220, 90], // corner 3 [220, -50, 220, 90], // corner 3 [-80, -50, -80, 140], // paint [80, -50, 80, 140], // paint [-60, -50, -60, 140], // paint [60, -50, 60, 140], // paint [-80, 140, 80, 140], // free throw line [-30, -10, 30, -10], // backboard [0, -10, 0, -7.5], // rim [-40, -10, -40, 0], // ra [40, -10, 40, 0] // ra ]; const circles = [ [0, 0, 7.5], // rim [0, 140, 60], // key [0, 420, 20], // center court inner [0, 420, 60] // center court outer ]; const arcs = [ [0, 0, 40, -Math.PI * 0.5, Math.PI * 0.5], // ra [0, 0, 237.5, -Math.PI * 0.5 - angle, Math.PI * 0.5 + angle] // 3pt ]; return (index, {x, y}) => { return htl.svg` ${lines.map(([x1, y1, x2, y2]) => htl.svg``)} ${circles.map(([cx, cy, r]) => htl.svg``)} ${arcs.map(([cx, cy, r, a1, a2]) => htl.svg``)} `; }; }31:T552,32:[{"id":"32c28b607af022d2dc3147169611625ace1a401c04dea3a37e6a0340fa756664daf366c40d3f25eb30ff659866ca0a8dd59184b5460355567e6990fdf6c61ade","href":"https://static.observableusercontent.com/files/32c28b607af022d2dc3147169611625ace1a401c04dea3a37e6a0340fa756664daf366c40d3f25eb30ff659866ca0a8dd59184b5460355567e6990fdf6c61ade","name":"lebron_shots.csv","type":"text/csv","lastModified":1681751984229.69,"size":6012690},{"id":"42ea11a8309236bf280c4db54ae789343e83ed8d665d7c5fdd9998faa089bfbb6da6bb45d4d789a6b61e899c0c199a9a7c444e6a53a20b0707054b4db792783c","href":"https://static.observableusercontent.com/files/42ea11a8309236bf280c4db54ae789343e83ed8d665d7c5fdd9998faa089bfbb6da6bb45d4d789a6b61e899c0c199a9a7c444e6a53a20b0707054b4db792783c","name":"shots_player.csv","type":"text/csv","lastModified":1681752689819.469,"size":4494125},{"id":"798f0288b0ba20109cfcf6e2fa6feb87ce9662f0b1d2c2d4a10324db4600201cc43f5e0a7ae73b49377f25b92eeef07525f342cfbb9ae500307ee9e1c22dbacc","href":"https://static.observableusercontent.com/files/798f0288b0ba20109cfcf6e2fa6feb87ce9662f0b1d2c2d4a10324db4600201cc43f5e0a7ae73b49377f25b92eeef07525f342cfbb9ae500307ee9e1c22dbacc","name":"player_images.csv","type":"text/csv","lastModified":1681755502490.871,"size":1280}] 2d:{"title":"NBA Player Shot Charts","cells":[{"id":0,"value":"# NBA Player Shot Charts \n### 2022-23 Regular Season\nBased on a notebook from [Mike Bostock](https://observablehq.com/@observablehq/plot-lebron-james-shots). Exploring shot charts by NBA player. Data is from [nbastatR](https://github.com/abresler/nbastatR).","pinned":false,"hidden":false,"mode":"md"},{"id":900,"value":"viewof plot_input = Inputs.select(['Scatter','Tile','Density'], {label:\"Plot Type\", value:'scatter'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"viewof filters = (\n Inputs.form({\n player_input:Inputs.select(player_list, {label: \"Player\", value: player_list}),\n color_input: Inputs.select(new Map([[\"Event Type\", \"typeEvent\"], [\"FG Type\", \"typeShot\"], [\"Zone\", \"nameZone\"], [\"Zone Range\", \"zoneRange\"], [\"Distance Shot (feet)\", \"distanceShot\"]]), {value: \"typeEvent\", label: \"Color\", disabled:plot_input === \"Tile\" ? true : false}),\n distance_input:Inputs.range([0, 50], {step: 1, label:\"Max Distance\", value:45}),\n tile_bin_input:Inputs.range([2, 50], {step: 1, label:\"Tile Bin\", value:10, disabled:plot_input===\"Tile\"? false: true}),\n event_input: Inputs.radio(new Map([[\"All\", \"All\"], [\"Missed\", \"Missed Shot\"], [\"Made\", \"Made Shot\"]]) ,{label: \"Shots\", value:\"All\"})\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":186,"value":"Plot.plot({\n height: 620,\n axis: null,\n color: colors,\n x: {domain: [-250, 250]},\n y: {domain: [-50, 450]},\n marks: [mark\n,\n markings()\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"# Plot Elements","pinned":false,"hidden":false,"mode":"md"},{"id":903,"value":"## Create Dynamic Plot Marks\n\nBased on plot_input selection, change the plot marks. Pass this new input, **mark**, into Observable Plot.","pinned":false,"hidden":false,"mode":"md"},{"id":907,"value":"mark = \n// if mark is Scatter\nplot_input==='Scatter' ? \nPlot.dot(filteredShots, \n {x:\"locationX\",\n y:\"locationY\",\n fill:`${filters.color_input}`,\n title: (d) => `Shot ID #${d.idEvent} \\n Event: ${d.typeEvent} \\n Distance: ${d.distanceShot} ft}`, \n stroke:\"white\", \n strokeWidth:1, \n r:8}) :\n// if mark is Tile\nplot_input==='Tile' ?\n [Plot.rect(filteredShots, \n Plot.bin({fill: \"count\"}, {x: \"locationX\", y: \"locationY\", inset: 0, interval: filters.tile_bin_input})),\n Plot.gridX({interval: filters.tile_bin_input, strokeOpacity: 0.05}),\n Plot.gridY({interval: filters.tile_bin_input, strokeOpacity: 0.05})]: \nplot_input == \"Density\" ?\nPlot.density(filteredShots, \n {x:\"locationX\", y:\"locationY\", fill:`${filters.color_input}`}) : null;","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"## Create Dynamic Color Palette Mapping \nBased on the color input filter, filters.color_input, we can change the mappings for our color palettes in the plot above. This might not be the most efficient way to do it, e.g. style is repeated for each one. Lot more tips on color scales in [Observable's walk-thru](https://observablehq.com/@observablehq/plot-scales). ","pinned":false,"hidden":false,"mode":"md"},{"id":825,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"## Dynamic HTML (Player Header)\n\nYou can generate dynamic HTML by injecting HTML code into a placeholder div. This is how I created the player title above the plot (logo, name, team, and shots). This player header also relies heavily on CSS which I've added at the end of the notebook for styling.","pinned":false,"hidden":false,"mode":"md"},{"id":584,"value":"create_header = { const playerTitle = document.querySelector('.player-card')\n const missedShots = filteredShots.filter((shot) => shot.typeEvent === \"Missed Shot\").length;\n const madeShots = filteredShots.filter((shot) => shot.typeEvent === \"Made Shot\").length;\n const allShots = filteredShots.length;\n const team = filteredShots[1].nameTeam\n const accuracy = (madeShots/(missedShots+madeShots))*100\n const accuracy_label = accuracy.toFixed(1)\n\n playerTitle.innerHTML = `\n

${filters.player_input}

${team}

Total Shots: ${allShots}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"## Import Plot Notebook with Tooltips\nTo add tooltip functionality, I'm importing a modified version of Observable Plot from [Mike Freeman's notebook](https://observablehq.com/@mkfreeman/plot-tooltip). With this notebook, we can set title equal to a field within our array. Check out the notebook for more details on how it works.","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"## Basketball Court Outline","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"All of the basketball court lines were created by Mike Bostock from the original notebook. Here is Mike's code to generate the lines, or **markings**.","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"# Data\n\n## Player Shots\nI collected the data with [nbastatR](https://github.com/abresler/nbastatR). Then exported as a csv and used Observable FileAttachment to upload it here.","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"shots_player = await FileAttachment(\"shots_player.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"## Player Images\n\nI created a separate file with player images using headshots from ESPN. We will use this file in the plot above to generate the dynamic player header.","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"player_images = await FileAttachment(\"player_images.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"## Subsetting & Filtering Data\n\nIt's all about the filtering! Here I'm using JS to subset and filter the player shot data and player image data based on the filter inputs selected.","pinned":false,"hidden":false,"mode":"md"},{"id":680,"value":"filteredShots = shots_player.filter(i => {\n if (filters.player_input.includes(i.namePlayer) && i.distanceShot<=filters.distance_input) {\n if (filters.event_input === \"Missed Shot\" || filters.event_input === \"Made Shot\") {\n return i.typeEvent === filters.event_input;\n } else {\n return true;\n }\n } else {\n return false;\n }\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"filteredImage = player_images.filter(i => filters.player_input.includes(i.namePlayer))","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"player_list = [...new Set(shots_player.map(i => i.namePlayer))].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"# CSS Styling\n\nApply CSS to create a custom look!","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"$31","pinned":true,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}