31: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() }32:T4b2,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 = cat_dict[x['']].split(': ')[1] var rgb = d3.color(cat_colors[inst_cat]) var inst_color if (selection === 'category'){ // color by category var inst_alpha if (selection_type == 'col-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 { // color by dimension var inst_index = network.col_node_names.indexOf(x['']) var inst_data = dimension_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 } )33:T40f,scatter_layer = { const scatterLayer = new deck.ScatterplotLayer({ data: umap_data, getPosition: d => d.position, getFillColor: d => d.color, getRadius: 200, opacity: 0.75, 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 }34:[{"id":"528cd8d183651c3cd33f113b0f22843a943d2a6a2782ba27650081ba1ec6c3c6a1bac2241163346846da6f4f00cb93276be9c94ee40dbfea5cbc76102077a276","href":"https://static.observableusercontent.com/files/528cd8d183651c3cd33f113b0f22843a943d2a6a2782ba27650081ba1ec6c3c6a1bac2241163346846da6f4f00cb93276be9c94ee40dbfea5cbc76102077a276","name":"clustergrammer-gl.0.19.0.packd.js","type":"application/javascript","lastModified":1608759945122.333,"size":1017517},{"id":"ad51f76e917c8ce1fd7fec52eae48c2c1340ef3474796e1b5ed77b554fc5ad844f7a38baac3b5e91491c4847e1d6c71f2b0ef2ab4a32d229fd6bb6441c295525","href":"https://static.observableusercontent.com/files/ad51f76e917c8ce1fd7fec52eae48c2c1340ef3474796e1b5ed77b554fc5ad844f7a38baac3b5e91491c4847e1d6c71f2b0ef2ab4a32d229fd6bb6441c295525","name":"nba-players-stats.json","type":"application/json","lastModified":1608760033861.664,"size":6387225},{"id":"2f0fa69d741c42bc45a2a7093063e10bda89fb8218c174dea303a71680710020f69741e434b40b5c12c9f79efc504b46203df308d29c73ee617bcea5311aa3d6","href":"https://static.observableusercontent.com/files/2f0fa69d741c42bc45a2a7093063e10bda89fb8218c174dea303a71680710020f69741e434b40b5c12c9f79efc504b46203df308d29c73ee617bcea5311aa3d6","name":"nba-players-stats-UMAP@2.csv","type":"text/csv","lastModified":1608776011338.945,"size":373761}] 2f:{"title":"NBA Player Stats UMAP-Heatmap","cells":[{"id":43,"value":"md`\n# NBA Player Stats UMAP-Heatmap\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":"md`This notebook visualizes NBA player statistics from 2005 to present obtained from https://www.kaggle.com/drgilermo/nba-players-stats. The UMAP shows players as dots colored by position (or statistic after clicking the hetamap rows). The heatmap shows players are shown as columns and statistics are shown as rows. We can identify clusters of players with distinctive stats. For instance, the left cluster consists mainly of centers with high rebound statistics (DRB, ORB) and low three point stats (3PA). \n\nThe 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_player_stats_clustergrammer2/tree/master`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$31","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(\"nba-players-stats.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"// cgm = require(\"https://bundle.run/clustergrammer-gl@0.11.9\")\n// cgm = require(await FileAttachment(\"clustergrammer-gl-0.11.9.js\").url())","pinned":false,"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())","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 if (selection != inst_name){\n mutable selection = inst_name\n } else {\n mutable selection = 'category'\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":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(\"nba-players-stats-UMAP@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.75]);","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":142,"value":"cat_colors = {\n var cat_colors = {} \n var cat_colors_ini = network.cat_colors.col['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}","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":138,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"$33","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: 8,\n maxZoom: 15, \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 Food 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.35","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"}],"files":"$W34","stdlib":"1","titling":"auto"}