2c:null 2d:["$","title",null,{"children":"NBA Beeswarm Chart | Tanya Shapiro | Observable"}] 32:T1a22,beeswarm = { let el = this const t = d3.transition().duration(1500) const circleFill = form.playerNodeStyle === "Text" ? "#005985" : "#ECECEC"; const highlightFill = "#FF590C"; const fontColor = "white"; const fontFamily = "Oswald"; const radius = 29; const strokeColor = "black"; const strokeWidth = radius *.05; const strokeMultiple = .05; const textRadius = radius *.7; const lineHeight = 17; //create tooltip placeholder const tooltip = d3.select("body") .append("div") .attr("class", "toolTip") .style("position", "absolute") .style("visibility", "hidden") .text("Placeholder"); if (!el || previousPlayerNodeStyle !== form.playerNodeStyle) { // Update the stored value to the current playerNodeStyle mutable previousPlayerNodeStyle = form.playerNodeStyle; el = DOM.svg(width, height) const svg = d3.select(el) el.g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) 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", radius) // .attr("fill", playerNodeStyle === 'Image' ? "white" : 'black') .attr("fill", circleFill) .attr("stroke-width", radius * strokeMultiple) .attr("stroke", strokeColor); if(form.playerNodeStyle==="Image"){ currentNode.append("image") .attr("class", "headshot") .attr("height", radius * 2) .attr("clip-path", d=> "circle(" + radius + "px at " + radius + "px " + radius + "px)" ) .attr("href", headshot) .attr("x", -radius) // Adjust the image position to center it .attr("y", -radius*1.04) .attr("width", radius * 2) .attr("preserveAspectRatio", "xMidYMid slice"); // Maintain aspect ratio and fill the circle } else { //add text currentNode.append("text") .style("text-anchor", "middle") //rescale text based on size .attr("transform", `translate(0, 0) scale(${textRadius / getTextRadius(getLines(labelText, lineHeight), lineHeight)})`) .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 .style("cursor", "pointer") // Set the cursor to pointer for the entire group .on("mouseover", (event, d) => { const newRadius = radius * 1.5 const newTextRadius = newRadius * .7 mutable hoveredPlayer = d.id; // Increase the radius of the circle to 1.5 times on mouseover d3.select(this) .select("circle") .transition() .duration(200) .attr("r", newRadius) .attr("stroke-width", newRadius * strokeMultiple) .attr("fill", highlightFill); el.circles .filter(x => x.id !== d.id) .select("image") .attr("filter", "grayscale(0.9)") // Change the text color to red on mouseover d3.select(this).select("text") .transition() .duration(200) .attr("transform", `translate(0, 0) scale(${newTextRadius / getTextRadius(getLines(labelText, lineHeight), lineHeight)})`); d3.select(this).select("image") .transition() .duration(200) .attr("height", newRadius * 2) .attr("clip-path", d=> "circle(" + newRadius + "px at " + newRadius + "px " + newRadius + "px)" ) .attr("href", headshot) .attr("x", -newRadius) // Adjust the image position to center it .attr("y", -newRadius *1.04) .attr("width", newRadius * 2) .attr("preserveAspectRatio", "xMidYMid slice"); // Maintain aspect ratio and fill the circle //raise circle and text element on hover d3.select(event.currentTarget).raise(); console.log(d) //make tooltip visible, use custom function to return info about player tooltip .style("visibility", "visible") .html(`${d.id}: ${d.value}`) }) .on("mouseout", function() { // Return to the regular size on mouseout mutable hoveredPlayer = null; d3.select(this) .select("circle") .transition() .duration(200) .attr("r", radius) .attr("stroke-width", radius * strokeMultiple) .attr("fill", circleFill); el.circles .filter(x => x.id !== d.id) .select("image") .attr("filter", "grayscale(0)") // Change the text color back to the original color on mouseout d3.select(this).select("text") .transition() .duration(200) .attr("transform", `translate(0, 0) scale(${textRadius / getTextRadius(getLines(labelText, lineHeight), lineHeight)})`); d3.select(this).select("image") .transition() .duration(200) .attr("height", radius * 2) .attr("clip-path", d=> "circle(" + radius + "px at " + radius + "px " + radius + "px)" ) .attr("href", headshot) .attr("x", -radius) // Adjust the image position to center it .attr("y", -radius) .attr("width", radius * 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) .attr("transform", function (d, i) { const x = d.x; const y = d.y; return `translate(${x}, ${y})`; }); el.circles = update } return el }33:[{"id":"abdda6db8073a2a6e470c24fa2445c938323d051a68d01743540057d5be0c31f1d543a1759a297c32c9ce117a64e9ba43327e5666162a57f1337bd491226d76d","href":"https://static.observableusercontent.com/files/abdda6db8073a2a6e470c24fa2445c938323d051a68d01743540057d5be0c31f1d543a1759a297c32c9ce117a64e9ba43327e5666162a57f1337bd491226d76d","name":"nba_stats.csv","type":"text/csv","lastModified":1700058264107.971,"size":16283},{"id":"c45e26c879e6df5f6bab47bd63e634d53fde60d903ecd0c2cc8ad185bbb5869486e938ec8b3e1404674cf8dccacb7f3395432e79f0ee8c370e5aa75e4d86a566","href":"https://static.observableusercontent.com/files/c45e26c879e6df5f6bab47bd63e634d53fde60d903ecd0c2cc8ad185bbb5869486e938ec8b3e1404674cf8dccacb7f3395432e79f0ee8c370e5aa75e4d86a566","name":"nba_stats@2.csv","type":"text/csv","lastModified":1701096820425.999,"size":29328},{"id":"10d39c957bfaf48ebe4188244291968e9ba9e8266cfa65a6be4c27119992170e41453e78b02bd4eb12b63362b3bf0c2dc69bf091c686bd428ec0e0bc456e9ea8","href":"https://static.observableusercontent.com/files/10d39c957bfaf48ebe4188244291968e9ba9e8266cfa65a6be4c27119992170e41453e78b02bd4eb12b63362b3bf0c2dc69bf091c686bd428ec0e0bc456e9ea8","name":"nba.csv","type":"text/csv","lastModified":1700512016516.768,"size":17032},{"id":"0a6656abd85bc5f1a3de5852b6e663ba3c16b57ca6f82c8162ccf1a0013115b50d3071574fad4c5b4185c8332f63ca5e498c358fba945a45f92535f30c37e5c0","href":"https://static.observableusercontent.com/files/0a6656abd85bc5f1a3de5852b6e663ba3c16b57ca6f82c8162ccf1a0013115b50d3071574fad4c5b4185c8332f63ca5e498c358fba945a45f92535f30c37e5c0","name":"nba_stats@1.csv","type":"text/csv","lastModified":1700513915209,"size":21596}] 30:{"id":"f84fc36b0dac2d13","slug":"nba-beeswarm","title":"NBA Beeswarm Chart","thumbnail":"ff1338ad1b4b87e7c4126bb62d23a60bb540bbd6209527c8235b0ad9b8cfb639","access_level":"public","create_time":"$D2023-11-15T14:23:56.686Z","update_time":"$D2023-11-30T22:54:09.252Z","view_time":null,"first_public_time":"$D2023-11-15T23:28:38.812Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":"starter_2024","bio":"Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️‍🌈"},"version":862,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null,"bio":"Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️‍🌈"}],"members":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"titling":"auto","title":"NBA Beeswarm Chart","cells":[{"id":0,"value":"# NBA Beeswarm Chart\n\nThis notebook looks at distribution of NBA player basketball stats. I wanted to continue testing the \"text in circle\" concept from [Mike Bostock's Notebook](https://observablehq.com/@mbostock/fit-text-to-circle) to \ncreate scalable labeling inside circle svgs. Beeswarm chart adadpted from [Mike's other notebook](https://observablehq.com/@d3/beeswarm). \n\nI also tested a transition movement effect using D3 force. I adapted ideas from [Chris Henrick's Notebook](https://observablehq.com/@clhenrick/general-update-pattern-in-observable). H/t to Fil for contributing as well!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"

Distribution by Stat

Shows top 75 players by average points per game. Data as of November 27th, 2023.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"viewof form = Inputs.form({\n stat: Inputs.select(new Map([[\"Points\",\"pts\"],[\"3P Made\", \"x3pm\"],[\"3P Attempts\", \"x3pa\"],[\"3P %\",\"x3p_percent\"],[\"Field Goal Attempts\",\"fga\"],[\"Field Goals Made\", \"fgm\"],[\"Field Goal %\", \"fg_percent\"],[\"Free Throw Attempts\",\"fta\"],[\"Free Throws Made\",\"ftm\"],[\"Free Throw %\", \"ft_percent\"]]), {label: \"Stat\"}),\n playerNodeStyle: Inputs.radio([\"Text\", \"Image\"], {label: \"Style\", value: \"Image\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"mutable hoveredPlayer = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"simulationForceColide = 33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"hoveredData = data.filter(d => d.id === \"LeBron James\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"med = d3.median(data, d => d.value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"function createTooltipText(id) {\n\n return `

**${hoveredPlayer}** has an average of **${hoveredData[0].value}** ${form.stat} per game. This is ${hoveredData[0].value`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"mutable previousPlayerNodeStyle = null; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"Inputs.table(nba)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Data \nData import, scraped from ESPN on November 14th, 2023.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":777,"value":"nba = await FileAttachment(\"nba_stats@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"nba","database":"$undefined"},{"id":813,"value":"topData = nba.sort(function(a, b) {\n return d3.descending(+a.pts, +b.pts);\n}).slice(0, 75);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"nba_stats = await FileAttachment(\"nba_stats.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"nba_stats","database":"$undefined"},{"id":485,"value":"data = topData.map(d => ({ value: Number(d[form.stat]), id: d.name, headshot:d.player_image }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"## UTILS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"This section borrows similar set up from [Chris Henrick's Notebook](https://observablehq.com/@clhenrick/general-update-pattern-in-observable). Uses simulation to create the x and y positions for the beeswarm chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"xAxis = d3.axisBottom(xScale).ticks(20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"xMin = d3.min(data, d => d.value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"xMax = d3.max(data, d => d.value);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"xScale = d3.scaleLinear()\n .range([0, width - margin.left - margin.right])\n .domain([xMin-1, xMax+1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"margin = ({ top: 10, right: 20, bottom: 30, left: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"height = 720","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"simulation = {\n const sim = d3.forceSimulation(data)\n .force(\"x\", d3.forceX(d => xScale(d.value)).strength(0.75))\n .force(\"y\", d3.forceY(height / 2))\n .force(\"collide\", d3.forceCollide(simulationForceColide))\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"function xGrid (g){ \n g\n .attr('class', 'grid-lines')\n .selectAll('line')\n .data(xScale.ticks())\n .join('line')\n .attr('x1', d => xScale(d))\n .attr('x2', d => xScale(d))\n .attr('y1', margin.top)\n .attr('y2', height - margin.bottom)\n .style('stroke', \"#E7E7E7\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"xScale.ticks()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"## TEXT FUNCTION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"Import functions from previous experiment with cast connections (network diagram). \n\nThis includes my custom functions getTextRadius and getLines to splice up the text and calculate the radius.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"import {getTextRadius, getLines} from \"@tashapiro/tv-shows-cast-connections\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"getLines(\"Hello There My Name is Tanya\", 15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"