31:T64f,md` ## Overview This notebook visualizes NBA shooting data for all players who took at least 50 shots in the 2018-19 season. The scatterplot to the top/left shows regions of the basketball court colored by cluster (e.g. close to the basket is called the paint region and is colored blue). The bottom/right heatmap shows players as columns and regions of the court as rows (we have categorized players based on where they take most of their shots). We have used hierarchical clustering to cluster players based on their shooting charts (binned into hexagon regions) in order to identify players that have similar shooting patterns. We have also identified regions of the court that are correlated to each other (e.g. court regions that tend to be commonly utilized by players). The notebook works best in landscape mode and in fullscreen. The UMAP scatterplot is made using deck.gl and the heatmap is made using Clustergrammer-GL. Data pre-processing can be found here: https://github.com/cornhundred/nba_shot_chart_clustergrammer2. Shooting chart data was processed in the following way: 1) player shot attempts were bined into hexagonal regions using pyplot 2) players with less than 50 attempted shots were removed, 3) regions of the court with fewer than 25 attempts were removed, 4) player shot attempts were converted to probability distributions by dividing by total shot attempts, 5) rows (court regions) were Z-scored in order to more easily compare regions of the court with different usage rates. ### References https://towardsdatascience.com/make-a-simple-nba-shot-chart-with-python-e5d70db45d0d ` 32:T6d7,viewof cgm = { // Clustergrammer-GL uses query selectors to re-find the container, so if we // might want multiple instances of Clustergrammer-GL on the page, they’ll // need unique identifiers! (It’d be better if Clustergrammer-GL used // element.querySelector instead of document.querySelector and didn’t depend // on these identifiers.) const containerId = DOM.uid("container"); const container = html`

`; // Clustergrammer-GL depends on the container having been inserted into the // document before it’s initialized. We can do this by yielding! However, // since we’re defining this cell as a view, we don’t want the view’s value // to resolve until CGM has initialized. Hence we define the view’s value as // a promise that resolves immediately after. We could simplify this if // Clustergrammer-GL allowed you to pass in a detached container. let resolve; container.value = new Promise(r => resolve = r); yield container; // Initialize CGM. // (We might want to use Observable’s reactive width here?) const cgm = CGM({ network, viz_width: 900, viz_height: 900, container }); // Redefine the order parameters as getters and setters, so that we can intercept // when these change and emit an event. That will allow other cells to listen for // these changes are react accordingly. Object.defineProperties(cgm.params.order.new, { row: reactiveValue(container, "row", cgm.params.order.new.row), col: reactiveValue(container, "col", cgm.params.order.new.col) }); // Resolve the view’s value so that downstream cells can run. resolve(cgm); d3.select('.row_search_container').remove() }33:T62a,umap_data = umap_data_ini.map( x => { var inst_long = umap_x_scale(parseFloat(x['x'])) var inst_lat = umap_y_scale(parseFloat(x['y'])) var inst_cat = x['Region'] // cat_dict[x['']].split(': ')[1] var rgb = d3.color(cat_colors[inst_cat]) var inst_color // console.log(selection) if (selection === 'category'){ // color by category var inst_alpha if (selection_type == 'row-dendro'){ if (dendro_selections.includes(x[''])){ inst_alpha = 255 } else { inst_alpha = 25 } } else { inst_alpha = 255 } inst_color = [rgb.r, rgb.g, rgb.b, inst_alpha] } else if (selection === 'grid-point') { console.log('>>> grid-point!!!!') // color by category var inst_alpha if (x[''] === selected_row){ inst_alpha = 255 } else { inst_alpha = 25 } inst_color = [rgb.r, rgb.g, rgb.b, inst_alpha] } else { // color by dimension var inst_index = network.row_node_names.indexOf(x['']) var inst_data = grid_data[inst_index] var inst_opacity = opacity_scale(Math.abs(inst_data)) if (inst_data > 0){ inst_color = [255, 0, 0, inst_opacity] } else { inst_color = [0, 0, 255, inst_opacity] } } var inst_obj = ({ name: x[''], position: [inst_long, inst_lat], food_type: inst_cat, color: inst_color }) return inst_obj } )34:T40f,scatter_layer = { const scatterLayer = new deck.ScatterplotLayer({ data: umap_data, getPosition: d => d.position, getFillColor: d => d.color, getRadius: 2100, opacity: 0.5, pickable: true, autoHighlight: true, highlightColor: d => [50, 50, 50, 200], // stroked: true, // lineWidthMinPixels: 0.05, onHover: function(info, event){ // if ('object' in info){ // mutable inst_neighborhood = info.object.Neighborhood // } }, onClick: function(info, event){ // if ('object' in info){ // if (info.object.name !== selected_station.name){ // // select stations to view paths // mutable path_types = 'all' // mutable selected_station = info.object // } else { // // turn off paths // mutable selected_station = {} // } // } } }) deckgl.setProps({layers: [ scatterLayer]}); return scatterLayer }35:[{"id":"7d6cecc3bad2ffc762b6a03b9f88ecb2a89dc2073195325a3eadb957a7f9cf8948047e657716fca537b05105f550fefd6203135db3045e9d12497f72efa65b58","href":"https://static.observableusercontent.com/files/7d6cecc3bad2ffc762b6a03b9f88ecb2a89dc2073195325a3eadb957a7f9cf8948047e657716fca537b05105f550fefd6203135db3045e9d12497f72efa65b58","name":"clustergrammer-gl.0.22.0.packd.js","type":"application/javascript","lastModified":1608927400207.159,"size":1028473},{"id":"880e112db843b65c8ff163e05a0d8589601eef5e88bec820f1d348cbf0904cf2abe6f5970bcb5e24208eedcfe4a6ac84ef5dfba6c47700166caea80f93012a9f","href":"https://static.observableusercontent.com/files/880e112db843b65c8ff163e05a0d8589601eef5e88bec820f1d348cbf0904cf2abe6f5970bcb5e24208eedcfe4a6ac84ef5dfba6c47700166caea80f93012a9f","name":"meta_grid@2.csv","type":"text/csv","lastModified":1608928114742.312,"size":22750},{"id":"ebfcaad00223ac1663cc2173490c919c381b778c86a4993541aa990f66325b7437dde16f0ff708983c7e7ef73e58816d8847088bf96a2766e9b35ca460bda906","href":"https://static.observableusercontent.com/files/ebfcaad00223ac1663cc2173490c919c381b778c86a4993541aa990f66325b7437dde16f0ff708983c7e7ef73e58816d8847088bf96a2766e9b35ca460bda906","name":"shot_chart_heatmap@4.json","type":"application/json","lastModified":1608933615160.881,"size":2165665}] 2f:{"title":"NBA Shot Chart Clustergrammer-GL","cells":[{"id":43,"value":"md`\n# NBA Shot Chart Clustergrammer-GL\n# ${selected_player}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof orientation = select({\n description: \"Select Orientation - switch to fullscreen for Landscape\",\n options: [\"Portrait\", \"Landscape\"],\n value: \"Portrait\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"{ \n\n if (orientation == 'Portrait' && is_fullscreen === false){\n \n var inst_html = html`\n

\n ${container}

${viewof cgm}

\n \n `\n } else {\n\n \n var inst_html = html`

${container}

${viewof cgm}

`\n }\n \n return inst_html\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`# Code`","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"selected_player = {\n var selected_player = 'Select Player'\n if (selected_col !== null){\n selected_player = selected_col.replace('_',' ')\n } \n return selected_player \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"function reactiveValue(container, name, value) {\n return {\n get() {\n return value;\n },\n set(v) {\n value = v;\n container.dispatchEvent(new CustomEvent(\"input\", {detail: {name, value}}));\n return value;\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"mutable is_fullscreen = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"inst_height = {\n var inst_height\n if (orientation === 'Portrait'){ \n inst_height = 850\n } else {\n inst_height = 850\n }\n return inst_height\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"// {\n// let container = html`

`;\n// yield container;\n// cgm({\n// network,\n// viz_width: 900,\n// viz_height: 900,\n// container\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`### FileAttachment(\"pre-calc-viz.json\")`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`Load [Network JSON](https://clustergrammer.readthedocs.io/clustergrammer_js.html#visualization-json) and initialize cgm object`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"network = FileAttachment(\"shot_chart_heatmap@4.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`## Clustergrammer-GL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"// CGM = require(await FileAttachment(\"clustergrammer-gl.0.19.0.packd.js\").url())\nCGM = require(await FileAttachment(\"clustergrammer-gl.0.22.0.packd.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"selection_type = Generators.observe(notify => {\n\n const mousemove = () => notify(cgm.params.tooltip.tooltip_type);\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.tooltip.tooltip_type);\n \n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"mutable selected_row = Generators.observe(notify => {\n const mouse_click = () => {\n\n if (cgm.params.tooltip.tooltip_type === 'row-label'){\n var inst_name = cgm.params.int.mouseover.row.name\n \n if (selection != inst_name){\n mutable selection = 'grid-point'\n } else {\n mutable selection = 'category'\n }\n \n }\n \n notify(cgm.params.int.mouseover.row.name)\n }\n \n viewof cgm.addEventListener(\"click\", mouse_click);\n \n notify(cgm.params.int.mouseover.row.name);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mouse_click);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"mutable selected_col = Generators.observe(notify => {\n const mouse_click = () => {\n\n if (cgm.params.tooltip.tooltip_type === 'col-label'){\n var inst_name = cgm.params.int.mouseover.col.name\n if (selection != inst_name){\n mutable selection = inst_name\n } else {\n mutable selection = 'category'\n }\n }\n \n notify(cgm.params.int.mouseover.col.name)\n }\n \n viewof cgm.addEventListener(\"click\", mouse_click);\n \n notify(cgm.params.int.mouseover.col.name);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mouse_click);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"dendro_selections = Generators.observe(notify => {\n\n const mousemove = () => {\n \n if (cgm.params.tooltip.tooltip_type.includes('dendro')){\n mutable selection = 'category'\n }\n\n notify(cgm.params.dendro.selected_clust_names)\n }\n \n viewof cgm.addEventListener(\"click\", mousemove);\n notify(cgm.params.dendro.selected_clust_names);\n\n return () => viewof cgm.removeEventListener(\"mousemove\", mousemove);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`## Deck.gl `","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"umap_data_ini = d3.csvParse(await FileAttachment(\"meta_grid@2.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"opacity_scale = d3.scaleLinear()\n .domain([0, 5])\n .range([0, 255]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"umap_x_min = Math.min.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"umap_x_max = Math.max.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['x']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"umap_y_min = Math.min.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"umap_y_max = Math.max.apply(Math, umap_data_ini.map(function(o) { return parseFloat(o['y']) }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"umap_x_scale = d3.scaleLinear()\n .domain([umap_x_min, umap_x_max])\n .range([-74, -73]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"umap_y_scale = d3.scaleLinear()\n .domain([umap_y_min, umap_y_max])\n .range([40, 40.785]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"cat_dict = {\n var cat_dict = {}\n network.col_nodes.map(x => {\n cat_dict[x.name] = x['cat-0']\n })\n return cat_dict\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"network.cat_colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"// cat_colors = {\n// var cat_colors = {} \n// var cat_colors_ini = network.cat_colors.row['cat-0']\n// var ini_keys = Object.keys(cat_colors_ini)\n \n// ini_keys.map(x => {\n// cat_colors[x.split(': ')[1]] = cat_colors_ini[x]\n// })\n// return cat_colors\n// }\n\ncat_colors = ({\n 'downtown': '#FF0000',\n 'midrange': '#A9A9A9',\n 'paint': '#0000FF'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"mutable selection = 'category'","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"selected_row_index = network.row_node_names.indexOf(selected_row)","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"// dimension_data = network.mat[selected_row_index]","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"selected_col_index","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"grid_data = network.mat.map(x => x[selected_col_index])","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"selected_col_index = network.col_node_names.indexOf(selected_col)","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"umap_data_ini[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"cat_colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"deckgl = {\n \n // // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles\n // // This is an Observable hack: clear previously generated content\n container.innerHTML = '';\n \n return new deck.DeckGL({\n container,\n initialViewState: {\n longitude: inst_lng,\n latitude: inst_lat,\n zoom: inst_zoom,\n minZoom: 9,\n maxZoom: 11, \n },\n controller: true,\n\n getTooltip: ({object}) => {\n // return object && `${object.Neighborhood} \\n ${object['cross-x']} and ${object['cross-y']}\n return object && `${object.name}\\n Shot Type: ${object.food_type}` },\n // Mapbox settings\n // set `map: false` to turn off Mapbox base map\n // map: mapboxgl,\n // This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com\n // mapboxApiAccessToken: mapbox_token,\n mapStyle: 'mapbox://styles/mapbox/light-v9',\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"inst_zoom = 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"inst_lng = -73.45","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"inst_lat = 40.4","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.3.7/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"// set table style to full width \nhtml`\n