30:T146c,function drawCourt() { court.append('line') .attr('x1', 1) .attr('x2', width) .attr('y1', 1) .attr('y2', 1) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('x1', 1) .attr('x2', 1) .attr('y1', 1) .attr('y2', height) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('x1', width - 1) .attr('x2', width - 1) .attr('y1', height - 1) .attr('y2', 0) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('x1', 0) .attr('x2', width) .attr('y1', height - 1) .attr('y2', height - 1) .attr('stroke-widtht', 2) .attr('stroke', 'black'); // the backboards court.append('line') .attr('y1', y(-30)) .attr('y2', y(30)) .attr('x1', x(-10)) .attr('x2', x(-10)) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('y1', y(-30)) .attr('y2', y(30)) .attr('x1', x(850)) .attr('x2', x(850)) .attr('stroke-width', 2) .attr('stroke', 'black'); // the hoops court.append('circle') .attr('cx', x(0)) .attr('cy', y(0)) .attr('r', 10.5) .attr('stroke-width', 2) .attr('stroke', 'black') .attr('fill', 'none'); court.append('circle') .attr('cx', x(840)) .attr('cy', y(0)) .attr('r', 10.5) .attr('stroke-width', 2) .attr('stroke', 'black') .attr('fill', 'none'); // the lanes court.append('rect') .attr('x', 0) .attr('y', y(80)) .attr('width', 190) .attr('height', 160) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'none'); court.append('rect') .attr('x', width - 190) .attr('y', y(80)) .attr('width', 190) .attr('height', 160) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'none'); court.append('line') .attr('y1', y(60)) .attr('y2', y(60)) .attr('x1', 0) .attr('x2', 190) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('y1', y(-60)) .attr('y2', y(-60)) .attr('x1', 0) .attr('x2', 190) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('y1', y(60)) .attr('y2', y(60)) .attr('x1', width) .attr('x2', (width - 190)) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('y1', y(-60)) .attr('y2', y(-60)) .attr('x1', width) .attr('x2', (width - 190)) .attr('stroke-width', 2) .attr('stroke', 'black'); // 3-point arcs court.append('line') .attr('y1', y(220)) .attr('y2', y(220)) .attr('x1', 0) .attr('x2', x(90)) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('y1', y(-220)) .attr('y2', y(-220)) .attr('x1', 0) .attr('x2', x(90)) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append("path") .attr("class", "arc") .attr("d", threeArc) .attr('stroke-width', 2) .attr('transform', `translate(${x(0)}, ${y(0)})`); court.append('line') .attr('y1', y(220)) .attr('y2', y(220)) .attr('x1', x(width)) .attr('x2', x(750)) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('line') .attr('y1', y(-220)) .attr('y2', y(-220)) .attr('x1', x(width)) .attr('x2', x(750)) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append("path") .attr("class", "arc") .attr("d", threeArc) .attr('stroke-width', 2) .attr('transform', `translate(${x(840)}, ${y(0)}), rotate(180)`); // key arcs court.append("path") .attr("class", "arc") .attr("d", keyArc) .attr('stroke-width', 2) .attr('transform', `translate(${x(134)}, ${y(0)})`); court.append("path") .attr("class", "arc") .attr("d", dashedKeyArc) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'none') .attr('transform', `translate(${x(134)}, ${y(0)}), rotate(180)`) .style('stroke-dasharray', ('20, 20')); court.append("path") .attr("class", "arc") .attr("d", keyArc) .attr('stroke-width', 2) .attr('transform', `translate(${x(706)}, ${y(0)}), rotate(180)`); court.append("path") .attr("class", "arc") .attr("d", dashedKeyArc) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'none') .attr('transform', `translate(${x(706)}, ${y(0)})`) .style('stroke-dasharray', ('20, 20')); // center strips and jump circles court.append('line') .attr('y1', 0) .attr('y2', height) .attr('x1', width / 2) .attr('x2', width / 2) .attr('stroke-width', 2) .attr('stroke', 'black'); court.append('circle') .attr('cx', ((width / 2) + .5)) .attr('cy', (height / 2)) .attr('r', 20) .attr('stroke-width', 2) .attr('stroke', 'black') .attr('fill', 'none'); court.append('circle') .attr('cx', ((width / 2) + .5)) .attr('cy', (height / 2)) .attr('r', 60) .attr('stroke-width', 2) .attr('stroke', 'black') .attr('fill', 'none'); return ('court drawn'); }31:[] 2e:{"title":"NBA Shot Charts","cells":[{"id":0,"value":"md`# NBA Shot Charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"chart = drawChart(playerData.resultSets[0].rowSet);","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"html`Missed shotMade shot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"{ if (player === undefined) {\n return html`No player matches your selected criteria.`;\n} else {\n return html`You are viewing all shots by ${player} in the ${season} ${seasonType.toLowerCase()}.`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"DOM.download(await serialize(chart), 'shot-chart.svg', 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof playerID = select({\n title: \"Player\",\n options: masterPlayerList,\n value: \"1717\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof season = select({\n title: \"Season\",\n options: [\"1996-97\", \"1997-98\", \"1998-99\", \"1999-00\", \"2000-01\", \"2001-02\", \"2002-03\", \"2003-04\", \"2004-05\", \"2005-06\", \"2006-07\", \"2007-08\", \"2008-09\", \"2009-10\", \"2010-11\", \"2011-12\", \"2012-13\", \"2013-14\", \"2014-15\", \"2015-16\", \"2016-17\", \"2017-18\", \"2018-19\"],\n value: \"2018-19\",\n description: 'NBA provides shot data for every player in the league for each season since 1996-97. Note: Selecting a season in which the selected player didn’t play will result in no shot chart being displayed. ',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof seasonType = select({\n title: 'Season Type',\n options: [\"Regular Season\", \"Playoffs\"],\n value: 'Regular Season',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"viewof missedColor = color({\n value: \"#D35400\",\n title: \"Missed shots\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"viewof madeColor = color({\n value: \"#2980B9\",\n title: \"Made shots\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"md`### About this notebook\nAfter spending a couple NBA seasons waiting for [Dirk Nowitzki to retire](http://interactives.dallasnews.com/2019/every-shot-dirk-ever-took/), I decided to build this interactive notebook so that others could build and download shot charts for any NBA player. Feel free to download any of the charts or fork this notebook as you want. Please attribute the NBA for any usage.\n\nShot data provided by the NBA stats API and is keyed on each player’s unique NBA stats id. There's a python scraper to get the full list of available players [here](https://github.com/johndhancock/observablehq-shotcharts/tree/master/scraper). To see all the various endpoints of the API, and their required parameters, check out this repo by [seemethere](https://github.com/seemethere): [NBA Stats API Documentation](https://github.com/seemethere/nba_py/wiki/stats.nba.com-Endpoint-Documentation).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"html`

Settings

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"url = `https://stats.nba.com/stats/shotchartdetail?Period=0&VsConference&LeagueID=00&LastNGames=0&TeamID=0&PlayerPosition&Location&Outcome&ContextMeasure=FGA&DateFrom&StartPeriod&DateTo&OpponentTeamID=0&ContextFilter&RangeType&Season=${season}&AheadBehind&PlayerID=${playerID}&EndRange&VsDivision&PointDiff&RookieYear&GameSegment&Month=0&ClutchTime&EndPeriod&SeasonType=${formatSeason(seasonType)}&SeasonSegment&GameID`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"playerData = (await jQuery.ajax({dataType: 'jsonp', url: url, cache: false,success: function(data) {return data}}));\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"player = {\n if (playerData.resultSets[0].rowSet[0] !== undefined) {\n return playerData.resultSets[0].rowSet[0][4];\n } else {\n return undefined; \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"function formatSeason(type) {\n if (type === 'Regular Season') {\n return 'Regular+Season'\n } return type;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"html`

D3 setup

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"height = width * .53191489","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"x = d3.scaleLinear()\n .domain([-50, 890])\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"y = d3.scaleLinear()\n .domain([250, -250])\n .range([0, height]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"svg = d3.select(DOM.svg(width, height));\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"court = svg.append('g');\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"shots = svg.append('g').attr('class', 'shot-group')","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"threeArc = d3.arc()\n .innerRadius(x(186.5))\n .outerRadius(x(188.5))\n .startAngle(22 * (Math.PI/180))\n .endAngle(158 * (Math.PI/180)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"keyArc = d3.arc()\n .innerRadius(61)\n .outerRadius(63)\n .startAngle(0 * (Math.PI/180))\n .endAngle(180 * (Math.PI/180)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"dashedKeyArc = d3.arc()\n .innerRadius(61)\n .outerRadius(61)\n .startAngle(0 * (Math.PI/180))\n .endAngle(180 * (Math.PI/180)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"function drawChart(data) {\n shots.html('');\n shots.selectAll('.shot').data(data)\n .enter()\n .append('circle')\n .attr('class', 'shot')\n .attr('r', 3)\n .attr('cx', d => x(d[18]))\n .attr('cy', d => y(d[17]))\n .attr('fill-opacity', 0.4)\n .attr('fill', (d) => {\n if (d[20] === 0) {\n return missedColor;\n } else {\n return madeColor;\n }\n });\n \n return Object.assign(svg.node());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"targetPlayer = (await masterPlayerList.filter(player => {\n if (player.player === playerID) {\n return player.id;\n }\n}));","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"html`

Configuration

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"jQuery = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"import {select, text, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"svgCourt = drawCourt()","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"masterPlayerList = d3.csv(\"https://gist.githubusercontent.com/johndhancock/90e884b8f34d0d14e373b9941a078a20/raw/588b10e4e2361c0c487457c12e52e02c8eff41cb/nba-players.csv\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}