2e:null 2f:["$","title",null,{"children":"eFG% on Off-Ball Created Shots (Touch Time <2 Seconds)' | Saurabh Rane | Observable"}] 34:T281d,beeswarm = { let el = this const t = d3.transition().duration(1500) const circleFill = "#8699AC"; const highlightFill = "#FF590C"; const fontColor = "#f9f9f9"; const fontFamily = "Roboto Medium"; const radius_min = 5; const radius_max = 30; const strokeColor = "#505050"; const strokeWidth = radius_max *.05; const strokeMultiple = .05; const lineHeight = 17; const form_check = form.playerNodeStyle === "Text" ? "#005985" : "#ECECEC"; const colorLighten = 20; //create tooltip placeholder const tooltip = d3.select("body") .append("div") .attr("class", "toolTip") .style("position", "absolute") .style("visibility", "hidden") .text("Placeholder") .attr("class", "tooltip-box") .style("background-color", "white") .style("border", "1px solid black") .style("border-radius", "5px") // Rounded corners .style("padding", "2.5px"); // Add padding for margin around text if (!el || JSON.stringify( previousPlayerList) !== JSON.stringify(form.playersSelected) || stat_select.stat[0] !== previousStatSelect || season_selected !== previousSeasonSelect) { var fadeCircles = true; if(previousPlayerListLength != 0){ fadeCircles = false; } // Update the stored value to the current playerNodeStyle mutable previousPlayerList = form.playersSelected.slice(); mutable previousStatSelect = stat_select.stat[0]; mutable previousPlayerListLength = form.playersSelected.length; mutable previousSeasonSelect = season_selected; // Update stored season const radiusScale = d3.scaleLinear() .domain([d3.min(simulation.nodes(), d => d.poss), d3.max(simulation.nodes(), d => d.poss)]) .range([radius_min, radius_max ]); // Adjust the range based on your desired minimum and maximum radius const radiusScaleMouseOver = d3.scaleLinear() .domain([d3.min(simulation.nodes(), d => d.poss), d3.max(simulation.nodes(), d => d.poss)]) .range([radius_min*1.5, radius_max *1.5]); // Adjust the range based on your desired minimum and maximum radius console.log("Jumping into the if") el = DOM.svg(width, height) const svg = d3.select(el) el.g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) const xAxisGroup = el.g.append("g") .classed("axis axis--x", true) .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(xAxis); el.g.append("g") .classed("circles", true) // create an empty selection from data binding el.circles = el.g.select("g.circles") .selectAll(".node") .data(simulation.nodes(), d => d.id) .enter() .append("g") .attr('class', 'node') .attr("transform", function (d, i) { const x = d.x; const y = d.y; return `translate(${x}, ${y})`; }); // Iterate through each node el.circles.each(function (d) { const currentNode = d3.select(this) const labelText = d.id; const headshot = d.headshot; let value = d.value; //create circle currentNode.append('circle') .attr("r", d => radiusScale(d.poss)) // Set the radius based on the scale .attr("fill", d => lightenColor(d.color, colorLighten)) .attr("stroke-width", d => radiusScale(d.POSS) * strokeMultiple) .attr("stroke", strokeColor); //add text currentNode.append("text") .style("text-anchor", "middle") //rescale text based on size .attr("transform", function() { const scaleValue = radiusScale(d.poss)*0.7 / getTextRadius(getLines(labelText, lineHeight), lineHeight); return `translate(0, 0) scale(${scaleValue})`; }) .selectAll("tspan") //use custom functions to split text into lines, getLines creates an array of text per line .data(getLines(labelText, lineHeight)) .enter() .append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - getLines(labelText, lineHeight).length / 2 + 0.8) * lineHeight) .style("fill", fontColor) .style("font-family", fontFamily) .text(m => m.text); currentNode.append("image") .attr("class", "headshot") .attr("height", radiusScale(d.poss) * 2) .attr("clip-path", d=> "circle(" + radiusScale(d.poss) + "px at " + radiusScale(d.poss) + "px " + radiusScale(d.poss) + "px)" ) .attr("href", headshot) .attr("x", -radiusScale(d.poss)) // Adjust the image position to center it .attr("y", -radiusScale(d.poss)*1.04) .attr("width", radiusScale(d.poss) * 2) .attr("preserveAspectRatio", "xMidYMid slice") // Maintain aspect ratio and fill the circle .attr('opacity', 0); const playersSelected = form.playersSelected; const playersNotSelected = uniquePlayers.filter(player => !(form.playersSelected).includes(player)); playersSelected.forEach(player => { el.circles .filter(x => x.id == player) .raise() .select("circle") .attr("fill", x => x.color) el.circles .filter(x => x.id == player) .raise() .select("image") .attr('opacity', 1) el.circles .filter(x => x.id == player) .select("text") .attr("opacity", 0) }) /* if(fadeCircles){ playersNotSelected.forEach(player => { el.circles .filter(x => x.id == player) .select("circle") .attr("fill", circleFill); }) }*/ currentNode .style("cursor", "pointer") // Set the cursor to pointer for the entire group .on("mouseover", (event, d) => { mutable hoveredPlayer = d.id; console.log("Hovered Player is " + hoveredPlayer); // Increase the radius of the circle to 1.5 times on mouseover d3.select(this) .select("circle") .transition() .duration(200) .attr("r", d => radiusScaleMouseOver(d.poss)) .attr("stroke-width", d => radiusScaleMouseOver(d.poss) * strokeMultiple) .attr("fill", d => d.color); // Change the text color to red on mouseover d3.select(this).select("text") .transition() .duration(200) .attr("opacity", 0) //Make Image Radius Bigger on MouseOver d3.select(this).select("image") .transition() .duration(200) .attr('opacity', 1) .attr("height", radiusScaleMouseOver(d.poss) * 2) .attr("clip-path", d=> "circle(" + radiusScaleMouseOver(d.poss) + "px at " + radiusScaleMouseOver(d.poss) + "px " + radiusScaleMouseOver(d.poss) + "px)" ) .attr("href", headshot) .attr("x", -radiusScaleMouseOver(d.poss)) // Adjust the image position to center it .attr("y", -radiusScaleMouseOver(d.poss)*1.04) .attr("width", radiusScaleMouseOver(d.poss) * 2) .attr("preserveAspectRatio", "xMidYMid slice"); // Maintain aspect ratio and fill the circle //raise circle and text element on hover d3.select(event.currentTarget).raise(); //make tooltip visible, use custom function to return info about player if(stat_select.stat[0].startsWith("efg")){ tooltip .style("visibility", "visible") .html(`${d.id}: ${(d.value * 100).toFixed(2)} eFG% on ${((d.poss).toFixed(1))} FGA / 75`) } else{ tooltip .style("visibility", "visible") .html(`${d.id}: ${(d.value).toFixed(2)} PPP on ${((d.poss).toFixed(1))} Poss / 75`) } }) .on("mouseout", function() { // Return to the regular size on mouseout if (!(form.playersSelected).includes(d.id)) { console.log(form.playersSelected) console.log(d.id) mutable hoveredPlayer = null; d3.select(this) .select("circle") .transition() .duration(200) .attr("r", d => radiusScale(d.poss)) .attr("stroke-width", d => radiusScale(d.poss) * strokeMultiple) .attr("fill", d => lightenColor(d.color, colorLighten)); d3.select(this).select("image") .transition() .duration(200) .attr('opacity', 0) .attr("height", radiusScale(d.poss) * 2) .attr("clip-path", d=> "circle(" + radiusScale(d.poss) + "px at " + radiusScale(d.poss) + "px " + radiusScale(d.poss) + "px)" ) .attr("href", headshot) .attr("x", -radiusScale(d.poss)) // Adjust the image position to center it .attr("y", -radiusScale(d.poss)*1.04) .attr("width", radiusScale(d.poss) * 2) .attr("preserveAspectRatio", "xMidYMid slice"); // Maintain aspect ratio and fill the circle // Change the text color back to the original color on mouseout d3.select(this).select("text") .transition() .duration(200) .attr("opacity", 1); } else{ d3.select(this) .select("circle") .transition() .duration(200) .attr("r", d => radiusScale(d.poss)) .attr("stroke-width", d => radiusScale(d.poss) * strokeMultiple) .attr("fill", d => d.color); d3.select(this).select("image") .transition() .duration(200) .attr("height", radiusScale(d.poss) * 2) .attr("clip-path", d=> "circle(" + radiusScale(d.poss) + "px at " + radiusScale(d.poss) + "px " + radiusScale(d.poss) + "px)" ) .attr("href", headshot) .attr("x", -radiusScale(d.poss)) // Adjust the image position to center it .attr("y", -radiusScale(d.poss)*1.04) .attr("width", radiusScale(d.poss) * 2) .attr("preserveAspectRatio", "xMidYMid slice"); // Maintain aspect ratio and fill the circle } //hide tooltip after hovering tooltip.style("visibility", "hidden"); }) .on('mousemove', (event) => { tooltip.style("top", (event.pageY - 50) + "px").style("left", (event.pageX + 10) + "px")} ); }) } else { el.g.select("g.axis.axis--x") .transition(t) .call(xAxis) const update = d3.select(el) .selectAll(".node") .data(simulation.nodes(), d => d.id) update .transition(t) .duration(1000) .attr("transform", function (d, i) { const x = d.x; const y = d.y; return `translate(${x}, ${y})`; }); el.circles = update } return el }35:[{"id":"1fbae432e4f2a1eded434b13cc825dc6dd41cc3f32428c034bd11ad1785a67c1a5c6e4cae8c554a8699a66f93a834db805e7cbd6dcbb019e56a86eeb2133987c","href":"https://static.observableusercontent.com/files/1fbae432e4f2a1eded434b13cc825dc6dd41cc3f32428c034bd11ad1785a67c1a5c6e4cae8c554a8699a66f93a834db805e7cbd6dcbb019e56a86eeb2133987c","name":"observable_off_ball@3.csv","type":"text/csv","lastModified":1708032443755.907,"size":219342},{"id":"13c9925844d7b0ee0531d42c0a1851f45f50401c6015fc1f3cbc274483f2fb18041203f99679e971ec7ecf42d99b44aab303d5eb3d9a70bb1c6c05537b099736","href":"https://static.observableusercontent.com/files/13c9925844d7b0ee0531d42c0a1851f45f50401c6015fc1f3cbc274483f2fb18041203f99679e971ec7ecf42d99b44aab303d5eb3d9a70bb1c6c05537b099736","name":"off_ball_advantage.ipynb","type":"application/octet-stream","lastModified":1714058430442.133,"size":28475},{"id":"e8363e472b396c6875c6f193ea0d3e0381e4eeb9060c1d580da31ac1e2f0aca19835f736c4d8b95e44ac4a3daff64e7d2ccf8cd7841d26c9ff7c78c9eb0276a4","href":"https://static.observableusercontent.com/files/e8363e472b396c6875c6f193ea0d3e0381e4eeb9060c1d580da31ac1e2f0aca19835f736c4d8b95e44ac4a3daff64e7d2ccf8cd7841d26c9ff7c78c9eb0276a4","name":"observable_off_ball@5.csv","type":"text/csv","lastModified":1714058441520.594,"size":256662},{"id":"de7c9c9201e7a0f291a9e9d8798c10c9864f78e420f497e1e133824a32d3dde756a6a03d95fc121b2d57e327d4fed3a552839c43de26ce3e474017a3aa045505","href":"https://static.observableusercontent.com/files/de7c9c9201e7a0f291a9e9d8798c10c9864f78e420f497e1e133824a32d3dde756a6a03d95fc121b2d57e327d4fed3a552839c43de26ce3e474017a3aa045505","name":"observable_off_ball@4.csv","type":"text/csv","lastModified":1708537293785.573,"size":219827}] 32:{"id":"4e3d40e4d13c26d0","slug":"nba-beeswarm-sdr","title":"eFG% on Off-Ball Created Shots (Touch Time <2 Seconds)'","thumbnail":"301caa3fc136887cb00870eda6dfd845b443b9835ba62754c2eef1c70ec1f222","access_level":"public","create_time":"$D2024-02-13T05:15:19.368Z","update_time":"$D2026-02-14T18:08:31.366Z","view_time":null,"first_public_time":"$D2024-02-13T05:15:19.368Z","has_unpublished_edits":null,"fork":{"id":"f84fc36b0dac2d13","slug":"nba-beeswarm","title":"NBA Beeswarm Chart","owner":{"id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro"}},"stars":2,"starred":false,"owner":{"type":"team","id":"4305aeedd815d03b","login":"saurabh1975","name":"Saurabh Rane","avatar_url":"https://avatars-next.observableusercontent.com/7fd9af16a216b4acd2ff9ee494696d369c2d3281314a54e4021c16384d8f7433","tier":"starter_2024"},"version":1288,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0883ecdd65eff7d","login":"saurabh1975","name":"Saurabh Rane","avatar_url":"https://avatars-next.observableusercontent.com/7fd9af16a216b4acd2ff9ee494696d369c2d3281314a54e4021c16384d8f7433","tier":null}],"members":[{"type":"individual","id":"a0883ecdd65eff7d","login":"saurabh1975","name":"Saurabh Rane","avatar_url":"https://avatars-next.observableusercontent.com/7fd9af16a216b4acd2ff9ee494696d369c2d3281314a54e4021c16384d8f7433","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"eFG% on Off-Ball Created Shots (Touch Time <2 Seconds)'","cells":[{"id":914,"value":"title = md`# ${efficiency_type} on ${getKeyByValue(stat_select_map, stat_select.stat)}'`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"subtitle = md`#### ${season_selected} Season, Circles Sized by ${volume_type} (Min. ${min_total_poss} Total Possessions | Min. ${min_poss} ${volume_type})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"viewof season_selected = Inputs.select(\n [\"2025-26\", \"2024-25\", \"2023-24\", \"2022-23\"], \n {label: \"Select a Season\", value: \"2025-26\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"\nviewof stat_select = Inputs.form({ stat: Inputs.select(stat_select_map) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"// Step 3: Create the form\nviewof form = Inputs.form({\n playersSelected: multiAutoSelect({\n options: uniquePlayers, // Options dynamically based on uniquePlayers\n value: validPlayersSelected.length > 0 ? validPlayersSelected : [\"Stephen Curry\"], // Default fallback\n placeholder: \"Select Player(s)\"\n })\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"footer = md` Latest Update: ${latestUpdate} | Data: [stats.nba.com](stats.nba.com) via [nba_api](https://github.com/swar/nba_api) | Viz: @SaurabhOnTap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1039,"value":"copy_text = md`The above is an effort to find new (better?) ways to visualize the headshot plots that have become more pervasive in sports visualization. It borrow very liberally from the [great work Tanya Shapiro](https://observablehq.com/@tashapiro/nba-beeswarm) did with dynamic image positioning inside circles. [Additionally uses Chris Henrick's Beeswarm work for circle positioning](https://observablehq.com/@clhenrick/general-update-pattern-in-observable).\n\nThe visualization concept explored is finding ways to get the aesthetic of headshot plots while maintaining analytical literacy. Often I find replacing all scatter points with headshots makes it difficult to find parts of interest. I wanted player headshots to highlight points of interest rather than be the plot itself. Additionally, remembering all 450 NBA players faces is a daunting task, so wanted to ensure that users could reference plain text for the highlighted players as well.` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"#### Import Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":929,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"import {getTextRadius, getLines} from \"@tashapiro/tv-shows-cast-connections\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"#### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":942,"value":"function lightenColor(hexColor, amount) {\n // Parse hex color\n let r = parseInt(hexColor.substring(1, 3), 16);\n let g = parseInt(hexColor.substring(3, 5), 16);\n let b = parseInt(hexColor.substring(5, 7), 16);\n\n // Calculate blend with white\n const blendFactor = amount / 100;\n r = Math.round((1 - blendFactor) * 255 + blendFactor * r);\n g = Math.round((1 - blendFactor) * 255 + blendFactor * g);\n b = Math.round((1 - blendFactor) * 255 + blendFactor * b);\n\n // Convert RGB to hex\n return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"function getKeyByValue(map, searchValue) {\n for (let [key, value] of map.entries()) {\n if (value === searchValue) {\n return key;\n }\n }\n // Return undefined if the value is not found\n return undefined;\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"simulation = {\n const radiusScale = d3.scaleLinear()\n .domain([d3.min(data, d => d.poss), d3.max(data, d => d.poss)])\n .range([5, 30]);\n\n\n \n const sim = d3.forceSimulation(data)\n .force(\"x\", d3.forceX(d => xScale(d.value)).strength(0.5))\n .force(\"y\", d3.forceY(height/2).strength(0.5))\n .force(\"collide\", d3.forceCollide(d => radiusScale(d.poss) + 2.5))\n .stop()\n \n for (let i = 0; i < 120; ++i) {\n sim.tick();\n }\n \n return sim\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"#### Set Default Values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1257,"value":"##### Make sure players selected is valid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1196,"value":"mutable previousPlayersSelected = [\"Stephen Curry\", \"Nikola Jokić\", \"LeBron James\"];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"validPlayersSelected = mutable previousPlayersSelected.filter(player => uniquePlayers.includes(player));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"{\n if (JSON.stringify(previousPlayersSelected) !== JSON.stringify(form.playersSelected)) {\n mutable previousPlayersSelected = form.playersSelected.slice();\n }\n return mutable previousPlayersSelected;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"#### Declare Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":959,"value":"// Extract unique ids and sort alphabetically\nuniquePlayers = Array.from(new Set(observable_off_ball.map(d => d.PLAYER_NAME))).sort();\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"mutable previousSeasonSelect = ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"mutable previousStatSelect = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"mutable previousPlayerListLength = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"mutable previousPlayerList = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"mutable hoveredPlayer = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"margin = ({ top: 10, right: 20, bottom: 30, left: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"height = 720","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"xAxis = {\n const xAxisTickFormat = stat_select.stat[0].startsWith(\"efg\") \n ? d3.format(\".0%\") // Use percentage format if true\n : d3.format(\".2f\"); // Use fixed-point notation with two decimal places if false\n\n const xAxis = d3.axisBottom(xScale)\n .ticks(20)\n .tickFormat(xAxisTickFormat);\n\n return xAxis; // Output the xAxis\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"xMin = d3.min(data, d => d.value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"xMax = d3.max(data, d => d.value);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"xScale = d3.scaleLinear()\n .range([0, width - margin.left - margin.right])\n .domain([xMin - 0.1*(xMax - xMin), xMax + 0.1*(xMax - xMin)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"mutable min_poss = stat_select.stat[0].startsWith(\"efg\") ? 1.5 : 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"max_GP = d3.max(observable_off_ball, d => d.GP); // Find the maximum GP value\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"min_total_poss = max_GP > 60 \n ? 1500 \n : Math.round((max_GP / 60) * 1500 / 100) * 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"mutable volume_type = stat_select.stat[0].startsWith(\"efg\") ? \"FGA/75\" : \"Playtype Poss/75\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"mutable efficiency_type = stat_select.stat[0].startsWith(\"efg\") ? \"eFG%\" : \"PPP\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"stat_select_map = new Map([\n [\"Off-Ball Created Shots (Touch Time <2 Seconds)\", ['efg_not_self_created', 'FGA_not_self_created']], \n [\"On-Ball Created Shots (Touch Time 2+ Seconds)\", ['efg_self_created', 'FGA_self_created']],\n [\"Cuts\", ['PPP_Cut', 'POSS_Cut']],\n [\"Handoffs\", ['PPP_Handoff', 'POSS_Handoff']],\n [\"Isolation\", ['PPP_Isolation', 'POSS_Isolation']],\n [\"Off Screen\", ['PPP_OffScreen', 'POSS_OffScreen']],\n [\"Postup\", ['PPP_Postup', 'POSS_Postup']],\n [\"P&R Ball Handler\", ['PPP_PRBallHandler', 'POSS_PRBallHandler']],\n [\"P&R Roll Man\", ['PPP_PRRollman', 'POSS_PRRollman']],\n [\"Spotup\", ['PPP_Spotup', 'POSS_Spotup']],\n [\"Transition\", ['PPP_Transition', 'POSS_Transition']]\n]);\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"#### Bring in Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"data = observable_off_ball.map(d => ({ \n season: d.season,\n value: Number(d[stat_select.stat[0]]), \n id: d.PLAYER_NAME, headshot:d.headshot_url, \n poss: Number(d[stat_select.stat[1]]), \n total_poss: d.POSS,\n color:d.primary_color }))\n.filter(d => d.poss > min_poss)\n.filter(d => d.total_poss > min_total_poss);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"observable_off_ball_csv = await FileAttachment(\"observable_off_ball@5.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"observable_off_ball_csv","database":"$undefined"},{"id":1262,"value":"### Read in Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1264,"value":"#### Read in Actual Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1108,"value":"observable_off_ball = d3.csv(`https://raw.githubusercontent.com/Saurabh1975/nba_bubble_chart_data/refs/heads/main/Data/headshot_plot_obs_${season_selected}.csv`, d => ({\n ...d,\n GP: +d.GP // Parse GP as an integer\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"#### Read in Latest Update Date","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1268,"value":"latestUpdate = fetch(\"https://raw.githubusercontent.com/Saurabh1975/nba_bubble_chart_data/main/latest_update.txt\")\n .then(response => response.text())\n .then(text => text.trim()); // Trim to remove unnecessary whitespace","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"