2c:null 2d:["$","title",null,{"children":"NBA Shot Charts | John Hancock | Observable"}] 32: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'); }33:[] 30:{"id":"ecdab0e51786045a","slug":"nba-shot-charts","title":"NBA Shot Charts","thumbnail":"0105f5142f8ca9fd74f866c4322f55903b34818db74f49d962e183379ad4659d","access_level":"public","create_time":"$D2019-03-23T02:05:01.075Z","update_time":"$D2019-03-28T15:11:45.720Z","view_time":null,"first_public_time":"$D2019-03-27T05:26:07.197Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"e02b4321dc513496","login":"jdhancock88","name":"John Hancock","avatar_url":"https://avatars-next.observableusercontent.com/da53368bd0c37a129cd1b775b92d3e315e6ef0046d163fa2892d3feeb4c0c1c3","tier":"starter_2024","bio":"Editor, Data and Interactives, The Dallas Morning News. On Twitter at @Hancock_JohnD"},"version":694,"publish_version":694,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bb3decdeb97f6ab","login":"jdhancock88","name":"John Hancock","avatar_url":"https://avatars-next.observableusercontent.com/da53368bd0c37a129cd1b775b92d3e315e6ef0046d163fa2892d3feeb4c0c1c3","tier":null,"bio":"Editor, Data and Interactives, The Dallas Morning News. On Twitter at @Hancock_JohnD"}],"members":[{"type":"individual","id":"2bb3decdeb97f6ab","login":"jdhancock88","name":"John Hancock","avatar_url":"https://avatars-next.observableusercontent.com/da53368bd0c37a129cd1b775b92d3e315e6ef0046d163fa2892d3feeb4c0c1c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"f292e4b02d029b1c","slug":"nba-on-observable","title":"NBA On Observable","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"NBA Shot Charts","cells":[{"id":0,"value":"md`# NBA Shot Charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"chart = drawChart(playerData.resultSets[0].rowSet);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"html`Missed shotMade shot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"DOM.download(await serialize(chart), 'shot-chart.svg', 'Download as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof playerID = select({\n title: \"Player\",\n options: masterPlayerList,\n value: \"1717\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"viewof missedColor = color({\n value: \"#D35400\",\n title: \"Missed shots\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"viewof madeColor = color({\n value: \"#2980B9\",\n title: \"Made shots\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"html`

Settings

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"html`

D3 setup

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"height = width * .53191489","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"x = d3.scaleLinear()\n .domain([-50, 890])\n .range([0, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"y = d3.scaleLinear()\n .domain([250, -250])\n .range([0, height]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"svg = d3.select(DOM.svg(width, height));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"court = svg.append('g');\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"shots = svg.append('g').attr('class', 'shot-group')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"html`

Settings

D3 setup

Configuration