30:Ta82,function makeCourt() { const { courtWidth, courtHeight, scaleFactor } = dimensions; const threePoint = svg``; const restrictedArea = drawSemiCircle({ cx: 0, cy: basketY, radius: 4 }); const freeThrowCircle = drawSemiCircle({ cx: 0, cy: 19, radius: 6 }); const hoop = drawCircle({ cx: 0, cy: basketY, radius: .75 }); const midRangeArea = ` `; const aboveTheBreakArea = ``; const rightCornerThreeArea = ``; const leftCornerThreeArea = ``; const restrictedAreaArc = pathGenerator({ cx: 0, cy: basketY, radius: 4 }); const paintArea = ``; const restrictedAreaArea = ``; return svg` `; }31:[{"id":"8eeed0c777bbc606d85458e7ebc2b746e36e792f8bcd8c77834f6f995175391ccacbbf13c313e6b039a3be2c755d1c77cd2f75a36bf16a850a508fb314c450db","href":"https://static.observableusercontent.com/files/8eeed0c777bbc606d85458e7ebc2b746e36e792f8bcd8c77834f6f995175391ccacbbf13c313e6b039a3be2c755d1c77cd2f75a36bf16a850a508fb314c450db","name":"bucks_vs_league_opp_shooting@1.csv","type":"text/csv","lastModified":1588214982443.6,"size":1359}] 2e:{"title":"D3 Court","cells":[{"id":0,"value":"md`# D3 Court`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1747,"value":"viewof area = makeChart({\n data: ppsLeagueData,\n format: d3.format(\".2f\"),\n colorScale: colorScale({ data: ppsData, key: statKey }),\n title: 'Points Per Shot Attempt (League Average)'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"center(makeCourt())","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"import { printTable } from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"bucksVsLeague = d3.csvParse(\n await FileAttachment(\"bucks_vs_league_opp_shooting@1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"function extract(data, key) {\n return data.map(d => d[key]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1830,"value":"abcd = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1407,"value":"ppsData = bucksVsLeague\n .filter(b => b.Team === 'Totals')\n .filter(b => b.Zone !== 'Backcourt')","pinned":true,"hidden":false,"mode":"ojs"},{"id":729,"value":"pointsPerShotColorScale = colorScale({\n data: ppsData,\n key: statKey\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"dimensions = {\n const regulationWidth = 50;\n const regulationHeight = 35;\n const courtWidth = width * .75;\n const scaleFactor = courtWidth / regulationWidth;\n\n return {\n courtWidth,\n courtHeight: regulationHeight * scaleFactor,\n scaleFactor\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"function makeScale(data) {\n const max = d3.max(data);\n const min = d3.min(data);\n const mid = min + (max - min) / 2;\n\n const buffer = (max - min) * .1;\n return [min - buffer, max + buffer];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"statKey = 'Points per shot'","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"md`### TODO: \n\n* Create the \"implicit fill shapes for each zone\"\n* Refactor the difference locations of each relevant mark on the court to a config object\n* Generate a scale based on the values returned from the Bucks or league data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"// helper to create an arc path\nthreePointArc = {\n const ang = 90 - Math.atan((14 - basketY) / 22) * (180 / Math.PI);\n const startAngle = -ang * (Math.PI / 180);\n const endAngle = ang * (Math.PI / 180);\n\n const radius = 23.7 * dimensions.scaleFactor;\n const points = 30;\n const input = d3.range(points);\n\n var angle = d3\n .scaleLinear()\n .domain([0, points - 1])\n .range([startAngle, endAngle]);\n\n const angles = input.map(i => [angle(i), radius]);\n return d3.lineRadial()(angles);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"function styleArea({ zone }) {\n const selected = zone === area;\n\n const value = ppsData.filter(b => b.Zone === zone)[0][statKey];\n const fill = selected ? pointsPerShotColorScale(value) : \"white\";\n const fillOpacity = selected ? .6 : 0;\n return `fill:${fill};stroke:none;stroke-width:5;fill-opacity:${fillOpacity};stroke-opacity:1`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"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":1644,"value":"margin = ({ top: 0, right: 60, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1743,"value":"import { makeChart } from \"@jzhang/bucks-shooting-by-zone\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1795,"value":"function center(elem) {\n return html`

${elem}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"colorScale({ data: ppsData, key: statKey })(.8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"function colorScale({ data, key }) {\n return d3.scaleQuantize([.7, d3.max(extract(data, key))], d3.schemeBlues[8]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"courtHeight = 94","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"lineWidth = inchString(\"0'2\") * dimensions.scaleFactor","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"basketY = inchString(\"5'3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"function drawCircle({ cx, cy, radius }) {\n return ` `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"function pathGenerator({ cx, cy, radius }) {\n return semicircle()\n .cx(xScale(cx))\n .cy(yScale(cy))\n .r(radius * dimensions.scaleFactor)();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"function drawSemiCircle({ cx, cy, radius, fill = \"none\" }) {\n return ``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"import { semicircle } from \"@harrystevens/semicircle\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"function drawPath(path) {\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"outline = d3.line()([\n [xScale(-25), yScale(0)],\n [xScale(25), yScale(0)],\n [xScale(25), yScale(47)],\n [xScale(-25), yScale(47)],\n [xScale(-25), yScale(0)]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"rightThree = d3.line()([[xScale(22), yScale(0)], [xScale(22), yScale(14)]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"leftThree = d3.line()([[xScale(-22), yScale(0)], [xScale(-22), yScale(14)]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"paint = d3.line()([\n [xScale(6), yScale(0)],\n [xScale(6), yScale(19)],\n [xScale(-6), yScale(19)],\n [xScale(-6), yScale(0)],\n [xScale(6), yScale(0)]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"paintBorder = d3.line()([\n [xScale(8), yScale(0)],\n [xScale(8), yScale(19)],\n [xScale(-8), yScale(19)],\n [xScale(-8), yScale(0)],\n [xScale(8), yScale(0)]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"backBoard = d3.line()([[xScale(3), yScale(4)], [xScale(-3), yScale(4)]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"// xScale(0) is where the basket is\nxScale = d3\n .scaleLinear()\n .domain([-25, 25])\n .range([0, dimensions.courtWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"yScale = d3\n .scaleLinear()\n .domain([35, 0])\n .range([0, dimensions.courtHeight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"function inchString(measurement) {\n const [feet, inches] = measurement.split(\"'\");\n return parseInt(feet) + parseInt(inches) / 12;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}