2d:null 2e:["$","title",null,{"children":"Explainable Clustering Through Surrogate Decision Trees | andrew-qu2000 | Observable"}] 33:Tb2a,md ` ## Cluster Interpretation There are a lot of clustering algorithms that aim to find groups of similar subjects (or data instances) such as KMeans, DBSCAN, hierarchical clustering, etc. There are also several cluster quality measurements that help people to evaluate the quality of a cluster. However, to select an expected clustering result, people still want to evaluate the generated clusters semantically, that is, validate the content of the clusters. And in a more general situation, decision makers also need to learn from the discovered patterns of clusters so that they can make strategies and plans for subjects of different kinds. Imagine that a data analyst, Charlie, who is working for a sports data company, wanted to get familiar with the data of NBA players and figure out the performance and skill patterns of players. He runs KMeans on the subset of players that are Power Forwards (PF). Looking at the results, he gets confused because he has no idea about the meaning of the clusters and he cannot even validate the discovered patterns. To better understand the clustering results, he is looking for a visual technique that allows him to answer the following three questions: 1. What are the skill/performance patterns of NBA players discovered by the clustering algorithm? 2. How does one cluster differentiate from another in terms of the skill/performance features? 3. Are there any interesting subgroups of players inside one cluster or combinations of multiple subgroups to be further explored? Actually, the three questions above are not only a main concern for the described situation. They are relevant to knowledge discovery (Q1, Q2) and further investigation (Q3) for any cluster analysis problems in general. More specifically, a data analyst needs to summarize the knowledge that can be used for a later decision or discussion by answering question Q1; and further validate the discovered patterns or groups by answering question Q2. And to explore other potentially interesting patterns, the answer of Q3 can guide a person to interpret the data hierarchically for any given clustering results. In this notebook, we demonstrate how well we can answer these questions by using common visual techniques as well as our proposed system, TreeCP. In the later sections, we exclude the discussion of visualizations for cluster quality metrics (e.g. bar charts that visualize silhouette coefficient) and general data distribution (e.g. scatter plots that visualize the projection of high-dimensional data in 2D space [**Fig 1**]) because they cannot really help the semantic understanding of clusters. In practice, researchers and practitioners in the VIS community visualize the cluster content in a parallel coordinates plot so that we want to further discuss and compare our approach with a parallel coordinates plot. `34:T459,md ` ## *Tree*CP To interpret the discovered clusters, we propose to use the clustering results as the ground truth to train an interpretable classification model. Because this model is trained based on the original model’s input and its output in order to approximate the original model’s behaviors, we can call it a surrogate. And with the help of a surrogate model, people can easily interpret the original model by understanding the interpretable insights of the surrogate.

${Object.assign(await FileAttachment("methods@1.png").image())} Decision trees are usually considered human-interpretable for that the decision path on a tree is close to how humans think and make decisions. The tree is an Sklearn DecisionTreeClassifier that is fitted on the same DataFrame that was clustered, plus the labels given to each row by the clustering model. This tree is visualized in an interactive tool. In this article, we present how a surrogate decision tree assists the understanding of the decisions from a clustering model, using a case study on a dataset of NBA Power Forward season stats. `35:Tc0d,md ` ## Findings By selecting the large purple and orange leaf nodes, a significant difference between the nodes (and clusters) is made apparent. Players in the orange cluster have, on average, higher 3-Point Attempt Rate (3PAr) and 3-Point Percentage (3P%). The former is a measure of how many of a player's field goal attempts are 3-point field goals, while the latter is how many of those 3-point attempts are successful. On the other hand, the purple cluster is superior in rebounding dimensions like Total Rebound Percentage (TRB%), an estimate of the percentage of available rebounds a player grabbed while he was on the floor. These players are from nearly the same years, averaging to the late 2000s and early 2010s. Using prior knowledge of basketball and intuition, our data analyst Charlie confirms that these clusters are valid. His findings suggest that in the modern era, there exists a group of PFs that are well trained in the 3-Point shot, while the other group is stronger at rebounding. This also agrees with the slightly higher Field Goal Percentage (FG%) stat in the purple cluster. Instead of 3-Point shots, these players attempt mostly close-range, 2-Point shots, which have a higher probability of being successful. What about the green cluster? Comparing it to the purple, they are close in all dimensions except for Year played. In green versus orange, they differ in Year as well as the 3-Point and Rebounding dimensions. To summarize and answer the questions posed at the beginning: 1. What are the skill/performance patterns of NBA players discovered by the clustering algorithm? *In older eras, the PF position was played mainly in one style. The PF grabbed lots of rebounds, and dared not shoot from long range. In the modern era, we see the addition of a new type of PF that is capable from long range, while sacrificing some traditional PF skills like rebounding and defense.* 2. How does one cluster differentiate from another in terms of the skill/performance features? *The green cluster represents conventional PFs from the old era. The purple and orange clusters are from the modern era, with the former playing in the conventional style, and the latter playing in a new style with more shooting involved.* 3. Are there any interesting subgroups of players inside one cluster or combinations of multiple subgroups to be further explored? *Yes! Consider the sample of 68 players who played before the year 2000, yet had 3-Point shooting that placed them into the orange cluster. Are they an early example of shooting PFs? We could investigate their shooting volume to see whether their 3P% is based off of a handful of attempts, or several hundred. This small group of 68 would have been lost in the sea of the greater orange cluster, if only a standard PCP were used.* As a note, any basketball fan is well aware of the orange cluster's performance pattern. Players that can fill the role of a PF while also shooting long-range shots are known as Stretch 4s, which you can read more about [here.](https://en.wikipedia.org/wiki/Stretch_four) `36:T86b,md ` ## Discussion/Conclusion A key feature of the interactive tool is the dynamic reordering of PCP axes in response to selecting different nodes. Since KMeans is distance based, the dimensions in which these samples differ should be made readily apparent by grouping them to the left. The decision tree further enforces the importance of these dimensions. The tree can closely approximate the clustering model using just the few dimensions where differences appear. Clusters are not just defined by differences, but also similarities. For example, consider an ordered PCP that compares the purple and orange clusters. The dimensions of 3PAr, 3P%, and TRB% are of note because of how purple and orange differ. However, purple and orange are very similar in all of the other dimensions. We could ignore these, but with TreeCP, the Year dimension is boldened. This reminds us that purple and orange instances are also defined by their Year of occurence, since it distinguishes them from the other clusters. In general, when looking at two clusters, they might be characterized by a dimension that they have in common, which is not readily apparent since its axis doesn't appear near the left. With only a PCP, how could a viewer know that Year is an important dimension, and not something like Free Throw Percentage (FT%)? Purple and orange agree in both Year and FT% anyway, right? Moreover, if a user selects just one node instead of two, they can still see the dimensions important to it, which will be boldened by the decision path. This would not be possible with just a standard PCP, since plotting only one cluster's lines, or average line, gives us nothing to compare or contrast it to. To conclude, a decision tree is a highly-interpretable model since it explicitly states the dimensions and thresholds used in categorizing a data instance. With that, analysts can verify the results of a clustering model. Plus, the presence of nodes with smaller sample sizes represent possible subgroups within a cluster. By boldening the dimensions that lead to these smaller nodes, TreeCP facilitates further exploration and understanding of a dataset. `37:Tb4f,treeCode = { var link = treeg.selectAll(".link") .data( nodes.descendants().slice(1)) //slice the root node because it has no parent .enter() .append("g") .attr("class", "link"); var pathScale = d3.scaleLinear() .domain([1, 2779]) //hardcoded for iris .range([1, 60]); link.append("path") .attr("id", function(d) { return "path" + d.data.id; }) .style("stroke-width", function(d) { return pathScale(d.data.support) + "px"; }) .attr("d", function(d) { return "M" + d.x + "," + d.y + "C" + (d.x + d.parent.x) / 2 + "," + d.y + " " + (d.x + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y; }); link.append("text") .attr("x", function(d) { var base = (d.x + d.parent.x) / 2; (d.x < d.parent.x ? base -= 20 : base += 20) return base; }) .attr("y", function(d) { return (d.y + d.parent.y) / 2; }) .style("text-anchor", "middle") .text(function(d) { return (d.x < d.parent.x ? "=<" + d.parent.data.threshold.toFixed(2) : ">" + d.parent.data.threshold.toFixed(2)); }); var node = treeg.selectAll(".node") .data(nodes.descendants()) .enter().append("g") .attr("id", function(d) { return "node" + d.data.id; }) .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) // set pie function var pie = d3.pie() .value(function(d) {return d.value; }) var pies = node.selectAll("pies") .data( function(d) { var distribution = d.data.distribution; var data_ready = pie(d3.entries(distribution)); for (var i = 0, len = data_ready.length; i < len; i ++) { data_ready[i]['oRadius'] = d.data.support; data_ready[i]['fidelity'] = d.data.fidelity; } return data_ready; }) .enter() .append("path") .attr('d', d3.arc() .innerRadius(0) // This is the size of the donut hole .outerRadius(function(d) { return radiusScale(d.oRadius); }) ) .attr("fill", function(d) { return color(d.data.key); }) .style("opacity", function(d) { return d.fidelity; }); // adds the text to the node node.append("text") .attr("x", 0) .style("text-anchor", "middle") .text(function(d) { return d.data.name; }); node.on("click", function(d) { if (solidId === d.data.id) { mutable solidId = emphasizeNode(d.data.id, "0", d); } else if (dashedId === d.data.id) { mutable dashedId = emphasizeNode(d.data.id, "2", d); } else if (solidId === null) { mutable solidId = emphasizeNode(d.data.id, "0", d); } else if (dashedId === null) { mutable dashedId = emphasizeNode(d.data.id, "2", d); } }); }38:T4fb,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }39:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3a:[{"id":"9e6c5612229c3a7de8a450ddec120a9d2ff93c6a1d823f02633efca96ca9aef83b77f019e7bf0cdb86f0bc19860520e30836e5406f359fa3e7560dc4a0103ad2","href":"https://static.observableusercontent.com/files/9e6c5612229c3a7de8a450ddec120a9d2ff93c6a1d823f02633efca96ca9aef83b77f019e7bf0cdb86f0bc19860520e30836e5406f359fa3e7560dc4a0103ad2","name":"iris_node_avgs.csv","type":"text/csv","lastModified":1598166277246.4,"size":686},{"id":"c2d5bb1ba5c7faa02d68a702f2c1bac74f07c36a6b0cc0076b85a8e9e0da5c8f5ea85192c9bd1f49905efe5ea6bcdbb94edb5dd925222d78add33d6ab7f05c6c","href":"https://static.observableusercontent.com/files/c2d5bb1ba5c7faa02d68a702f2c1bac74f07c36a6b0cc0076b85a8e9e0da5c8f5ea85192c9bd1f49905efe5ea6bcdbb94edb5dd925222d78add33d6ab7f05c6c","name":"iris_cluster_avgs.csv","type":"text/csv","lastModified":1598166277246.4,"size":278},{"id":"0adc824c66216ff6973d371698d3b0750766c17554bdcb253df8b8a149baf8d2055550ffc82cc467ee694b5d89c573ac6c80ae2985ce4539f15fbdbeadc6eae0","href":"https://static.observableusercontent.com/files/0adc824c66216ff6973d371698d3b0750766c17554bdcb253df8b8a149baf8d2055550ffc82cc467ee694b5d89c573ac6c80ae2985ce4539f15fbdbeadc6eae0","name":"iris_tree.json","type":"application/json","lastModified":1598166277246.4,"size":1499},{"id":"9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","href":"https://static.observableusercontent.com/files/9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","name":"Iris.csv","type":"text/csv","lastModified":1598166277246.4,"size":5107},{"id":"4992b930a94c8a961c61b458d659d7091f5a7a94929190a4aa9b6f58257e34319f8eee5cc51ff5971bc2b4cb122fa67bc4800218d02e9f80b7003889e19c5d96","href":"https://static.observableusercontent.com/files/4992b930a94c8a961c61b458d659d7091f5a7a94929190a4aa9b6f58257e34319f8eee5cc51ff5971bc2b4cb122fa67bc4800218d02e9f80b7003889e19c5d96","name":"pf_pcp_full.png","type":"image/png","lastModified":1598328280510.208,"size":372643},{"id":"18540287415535f9157a034fa70aab4159b25a4dfdb75e6b1f36da711e065bc7c09325dbeb7d8a512425e9b4feb6d8b1c05ab12567c83b1156ff1cb86ca6fcf1","href":"https://static.observableusercontent.com/files/18540287415535f9157a034fa70aab4159b25a4dfdb75e6b1f36da711e065bc7c09325dbeb7d8a512425e9b4feb6d8b1c05ab12567c83b1156ff1cb86ca6fcf1","name":"PF.csv","type":"text/csv","lastModified":1598316568520.593,"size":421152},{"id":"746bb56e4765164c725daceba3ad3e60d56782db3f883cd207afcc269d9ae2cd33c0fe8479aaddf34cdcb52f91c42b45e93bf59c74c4ea29fefd0f020883a953","href":"https://static.observableusercontent.com/files/746bb56e4765164c725daceba3ad3e60d56782db3f883cd207afcc269d9ae2cd33c0fe8479aaddf34cdcb52f91c42b45e93bf59c74c4ea29fefd0f020883a953","name":"pf_tsne.png","type":"image/png","lastModified":1598331776808.384,"size":109518},{"id":"21bf9570f61f967e08bbc50b4f02342aaa379ec512fafb56c24167e56bbe201f7be463f4c77ee7ae560784bdb67465b0b9eff89bbaee70239f1d4ced9eba2fe3","href":"https://static.observableusercontent.com/files/21bf9570f61f967e08bbc50b4f02342aaa379ec512fafb56c24167e56bbe201f7be463f4c77ee7ae560784bdb67465b0b9eff89bbaee70239f1d4ced9eba2fe3","name":"methods@1.png","type":"image/png","lastModified":1598331140228.95,"size":58091},{"id":"bdc1d8bf1208ed5394b919b445be2782b3edd4205c537c65b5c473df14b8c3b7d695e8f4485335cae91a75476c7892e735afb2df9edceff67beee0bc85fe775b","href":"https://static.observableusercontent.com/files/bdc1d8bf1208ed5394b919b445be2782b3edd4205c537c65b5c473df14b8c3b7d695e8f4485335cae91a75476c7892e735afb2df9edceff67beee0bc85fe775b","name":"pf_cluster_avgs.csv","type":"text/csv","lastModified":1598316720654.546,"size":1250},{"id":"a33ee2965e6e2a952c98cb2f3bfffa0c367d82dd2a5dc28299f52b9c6973f41086065333a8dd914e169c323da2239b0da84b1e2eb50fb1996a10db503aa6c713","href":"https://static.observableusercontent.com/files/a33ee2965e6e2a952c98cb2f3bfffa0c367d82dd2a5dc28299f52b9c6973f41086065333a8dd914e169c323da2239b0da84b1e2eb50fb1996a10db503aa6c713","name":"pf_node_avgs.csv","type":"text/csv","lastModified":1598316742917.074,"size":8536},{"id":"0cf757c6fda35209111fd60260071fc4748174daae24949ed3c838a0e895adc7552ef56f10437cef4b6a67d23a6f3cf2a52dc86969cd19b25423f66482996320","href":"https://static.observableusercontent.com/files/0cf757c6fda35209111fd60260071fc4748174daae24949ed3c838a0e895adc7552ef56f10437cef4b6a67d23a6f3cf2a52dc86969cd19b25423f66482996320","name":"pf_tree_data.json","type":"application/json","lastModified":1598317144250.082,"size":3304},{"id":"899cd2f62683c5071451c54a88f72d27bf3be17722266bc54f00812123566dd42756e02d8fe8c80809877e4cf53bb0c3b407c6b7ab89d399fe89d1d9a28acd9f","href":"https://static.observableusercontent.com/files/899cd2f62683c5071451c54a88f72d27bf3be17722266bc54f00812123566dd42756e02d8fe8c80809877e4cf53bb0c3b407c6b7ab89d399fe89d1d9a28acd9f","name":"pf_pcp_avg.png","type":"image/png","lastModified":1598328721758.729,"size":73958}] 31:{"id":"f373a2596b8c31a5","slug":"surrogate-decision-trees","title":"Explainable Clustering Through Surrogate Decision Trees","thumbnail":"10f04dcea0f35c86ffbc939d7dd6728febf1da539ac57ce392975ae462450195","access_level":"public","create_time":"$D2020-08-23T07:04:37.246Z","update_time":"$D2020-10-22T18:42:52.089Z","view_time":null,"first_public_time":"$D2020-08-24T16:37:27.134Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"1ba04e8b680deddc","login":"andrew-qu2000","name":"","avatar_url":"https://avatars-next.observableusercontent.com/342ed85b36dd4c11736f3b14b97401818b19fe852a24ade41465075508f60c34","tier":"starter_2024"},"version":944,"publish_version":944,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b619839114133ee","login":"andrew-qu2000","name":"","avatar_url":"https://avatars-next.observableusercontent.com/342ed85b36dd4c11736f3b14b97401818b19fe852a24ade41465075508f60c34","tier":null}],"members":[{"type":"individual","id":"0b619839114133ee","login":"andrew-qu2000","name":"","avatar_url":"https://avatars-next.observableusercontent.com/342ed85b36dd4c11736f3b14b97401818b19fe852a24ade41465075508f60c34","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Explainable Clustering Through Surrogate Decision Trees","cells":[{"id":0,"value":"md`# Explainable Clustering Through Surrogate Decision Trees`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"md `### By Andrew Qu, Jun Yuan, and Enrico Bertini`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md `\n## Introduction\nClustering is widely used for exploratory data analysis. It assists analysts to discover and further investigate consistent patterns in the data. However, people usually face a problem of understanding the cluster content when getting the clustering results. The problem becomes even more challenging for high-dimensional data. With the development of explainable AI, more and more methods are proposed to explain the results of supervised machine learning such as classification and regression. But there is still a lack of research of explaining an unsupervised model such as clustering. \n\nThis notebook attempts to introduce a novel way of exploring and interpreting clustering results of tabular data by visualizing the clusters in a parallel coordinate plot (PCP) with the guidance of a decision tree. In this work, we adapt the model-agnostic explanation method of building a surrogate model to assist the process of understanding the clusters.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"md `\n

${Object.assign(await FileAttachment(\"pf_tsne.png\").image())}\n**Fig. 1** *This TSNE projection of NBA power forwards tells us a bit about overlap between clusters, but nothing about which dimensions define a particular cluster.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"md `\n## Parallel Coordinates Plot (PCP)\nA parallel coordinates plot is a common way of visualizing and analyzing high-dimensional datasets. In a PCP, a data instance in n-dimensional space is represented as a polyline with vertices on the parallel axes. And the position of the vertex on the i-th axis corresponds to the i-th coordinate of the instance. In most cases, data analysts visualize the instances in the PCP and encode the instances in different colors according to the clustering labels they have as shown in **Fig. 2**.\n\n

${Object.assign(await FileAttachment(\"pf_pcp_full.png\").image())}\n**Fig. 2** *Nearly three thousand Power Forwards are visualized on this PCP. *\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"md `\nThe problem of showing all the instances in a PCP comes from the large number of lines. The clutter of lines in a plot may obscure the trends and patterns in the data so that many useful insights can be ignored by humans. One way to solve this problem is only to visualize the average vector of a group. In **Fig. 3**, we can see the clear representation of the average feature values for instances in 3 different clusters. However, this representation can still be problematic for the high dimensionality. With so many features, it is not clear which features can really differentiate the clusters.\n\n

${Object.assign(await FileAttachment(\"pf_pcp_avg.png\").image())}\n**Fig. 3** *It can take a moment to identify dimensions that show great difference between clusters. Still, some datasets can have several times as many dimensions as this one, which makes the task even harder.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"md `\n## Instructions\nThe results of KMeans clustering (n=3) on the Power Forwards set is shown in the below interface. The size of each node encodes the size of the sample that reaches it (the entire set passes through the root of course). The colored pie slices show how the sample was clustered by the initial KMeans model.\n\nClick on a node to select/deselect it. A selected node has its sample's average vector added to the PCP. The dimensions in the decision path to that node also become boldened.\n\nUp to two nodes can be selected at once. When two nodes are selected, the PCP reorders its axes from most to least difference.\n\nUse the checkboxes to add an entire cluster's average vector to the PCP as well.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"treesvg.node();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"pcpsvg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof cluster0 = checkbox({\n //description: \"Just a single checkbox to toggle\",\n options: [{ value: \"toggle\", label: \"Cluster 0\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"viewof cluster1 = checkbox({\n //description: \"Just a single checkbox to toggle\",\n options: [{ value: \"toggle\", label: \"Cluster 1\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"viewof cluster2 = checkbox({\n //description: \"Just a single checkbox to toggle\",\n options: [{ value: \"toggle\", label: \"Cluster 2\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"md `\n## Acknowledgements\n- Contributors to this notebook:\n - Andrew Qu\n - PhD candidate Jun Yuan\n - Dr. Enrico Bertini\n- [A guide to visualizing decision trees with D3 by Aaron Schumacher](https://bl.ocks.org/ajschumacher/65eda1df2b0dd2cf616f)\n- [A guide to visualizing PCPs with D3 by Yan Holtz](https://www.d3-graph-gallery.com/graph/parallel_basic.html)\n- [Checkbox functionality by Jeremy Ashkenas](https://observablehq.com/@jashkenas/inputs#checkboxDemo)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"md `## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md`Functionality`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"nodeOnclick = {\n if (!treeg.selectAll(\".node\").empty()){\n treeg.selectAll(\".node\")\n .on(\"click\", function(d) { \n if (solidId === d.data.id) {\n mutable solidId = emphasizeNode(d.data.id, \"0\", d);\n } else if (dashedId === d.data.id) {\n mutable dashedId = emphasizeNode(d.data.id, \"2\", d);\n } else if (solidId === null) {\n mutable solidId = emphasizeNode(d.data.id, \"0\", d);\n } else if (dashedId === null) {\n mutable dashedId = emphasizeNode(d.data.id, \"2\", d);\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"function emphasizeNode(node_id, stroke_dash, node) {\n var pathDims = getBoldDims(node);\n\t if (d3.select(\"#emphasis\" + node_id).empty()) {\n pathDims.forEach(function(dim){ mutable boldDims[dim] += 1; });\n\t d3.select(\"#node\" + node_id)\n\t .append(\"circle\")\n\t\t .attr(\"id\", \"emphasis\" + node_id)\n\t .attr(\"r\", function(d) { \n\t\t return radiusScale(d.data.support); })\n\t .style(\"stroke\", \"#000000\")\n\t\t .style(\"stroke-dasharray\", stroke_dash)\n\t\t .style(\"fill\", \"None\");\n return node_id;\n\t } else { //deemphasize node\n pathDims.forEach(function(dim){ mutable boldDims[dim] -= 1; });\n\t\t d3.select(\"#emphasis\" + node_id).remove();\n\t\t return null;\n\t }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"relevantDims = {\n if (boldDims || solidId || dashedId) { //these all have to be here apparently\n pcp.selectAll(\"g\").selectAll(\"text\")\n .style(\"font-weight\", function(d) {\n\t\t\t return (boldDims[d] > 0 ? \"bold\" : \"normal\");\n\t\t })\n\t\t .style(\"font-size\", function(d) {\n\t\t\t return (boldDims[d] > 0 ? \"14\" : \"10\");\n\t\t })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"reorderAxes = {\n if (solidId !== null && dashedId !== null) {\n var firstAvgs = pf_node_avgs[solidId];\n var secondAvgs = pf_node_avgs[dashedId];\n var diffs = Object({});\n for (var dim in firstAvgs) {\n diffs[dim] = Math.abs(y[dim](firstAvgs[dim]) - y[dim](secondAvgs[dim]));\n }\n // Create items array\n var items = Object.keys(diffs).map(function(key) {\n return [key, diffs[key]];\n });\n\n // Sort the array based on the second element\n items.sort(function(first, second) {\n return second[1] - first[1];\n });\n \n var ret = [];\n for (var i in items) {\n ret.push(items[i][0]);\n }\n \n mutable dimensions = ret;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"redrawAxes = {\n if (dimensions) { //this cell reruns everytime the dimensions array changes order\n pcp.selectAll(\"g\").remove();\n pcp.selectAll(\"myAxis\")\n .data(dimensions).enter()\n .append(\"g\")\n .attr(\"transform\", function(d) { return \"translate(\" + x(d) + \")\"; })\n .each(function(d) { d3.select(this).call(d3.axisLeft().scale(y[d])); })\n .append(\"text\")\n .style(\"text-anchor\", \"start\")\n\t\t .attr(\"transform\", \"rotate(-30)\")\n\t\t .attr(\"x\", 5)\n .text(function(d) { return d; })\n .style(\"font-weight\", function(d) {\n\t\t\t return (boldDims[d] > 0 ? \"bold\" : \"normal\");\n\t\t })\n\t\t .style(\"font-size\", function(d) {\n\t\t\t return (boldDims[d] > 0 ? \"14\" : \"10\");\n\t\t })\n\t\t .style(\"fill\", \"black\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"mutable boldDims = Object({'Year': 0,\n 'Player': 0,\n 'Pos': 0,\n 'Age': 0,\n 'Tm': 0,\n 'PER': 0,\n 'TS%': 0,\n '3PAr': 0,\n 'FTr': 0,\n 'ORB%': 0,\n 'DRB%': 0,\n 'TRB%': 0,\n 'AST%': 0,\n 'STL%': 0,\n 'BLK%': 0,\n 'TOV%': 0,\n 'USG%': 0,\n 'BPM': 0,\n 'FG%': 0,\n '3P%': 0,\n '2P%': 0,\n 'eFG%': 0,\n 'FT%': 0});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"function getBoldDims(node) {\n var curr = node;\n var pathDims = [];\n while (curr.parent) {\n var dim = curr.parent.data.name;\n if (!pathDims.includes(dim)) {pathDims.push(dim);}\n curr = curr.parent;\n }\n return pathDims;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"mutable dimensions = d3.keys(pf_node_avgs[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"viewof cluster0Line = pcp.append(\"path\")\n .attr(\"id\", \"cluster0PCP\")\n .attr(\"d\", \"M 0,0 z\")\n .style(\"fill\", \"none\")\n\t .style(\"stroke-width\", \"4px\")\n .style(\"opacity\", 0.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"viewof cluster1Line = pcp.append(\"path\")\n .attr(\"id\", \"cluster1PCP\")\n .attr(\"d\", \"M 0,0 z\")\n .style(\"fill\", \"none\")\n\t .style(\"stroke-width\", \"4px\")\n .style(\"opacity\", 0.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"viewof cluster2Line = pcp.append(\"path\")\n .attr(\"id\", \"cluster2PCP\")\n .attr(\"d\", \"M 0,0 z\")\n .style(\"fill\", \"none\")\n\t .style(\"stroke-width\", \"4px\")\n .style(\"opacity\", 0.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"cluster0LineToggle = {\n pcp.select(\"#cluster0PCP\")\n .attr(\"d\", function() {\n if (cluster0) {return path(pf_cluster_avgs[0]);}\n else {return \"M 0,0 z\";}\n })\n .style(\"stroke\", color(0));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"cluster1LineToggle = {\n pcp.select(\"#cluster1PCP\")\n .attr(\"d\", function() {\n if (cluster1) {return path(pf_cluster_avgs[1]);}\n else {return \"M 0,0 z\";}\n })\n .style(\"stroke\", color(1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"cluster2LineToggle = {\n pcp.select(\"#cluster2PCP\")\n .attr(\"d\", function() {\n if (cluster2) {return path(pf_cluster_avgs[2]);}\n else {return \"M 0,0 z\";}\n })\n .style(\"stroke\", color(2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof solidLine = pcp.append(\"path\")\n .attr(\"id\", \"solidPCP\")\n .attr(\"d\", \"M 0,0 z\")\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"#000000\")\n\t .style(\"stroke-width\", \"4px\")\n .style(\"opacity\", 0.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"viewof dashedLine = pcp.append(\"path\")\n .attr(\"id\", \"dashedPCP\")\n .attr(\"d\", \"M 0,0 z\")\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"#000000\")\n .style(\"stroke-dasharray\", \"2\")\n\t .style(\"stroke-width\", \"4px\")\n .style(\"opacity\", 0.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"solidToggle = {\n pcp.select(\"#solidPCP\")\n .attr(\"d\", function() {\n if (solidId !== null) {return path(pf_node_avgs[solidId]);}\n else {return \"M 0,0 z\";}\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"dashedToggle = {\n pcp.select(\"#dashedPCP\")\n .attr(\"d\", function() {\n if (dashedId !== null) {return path(pf_node_avgs[dashedId]);}\n else {return \"M 0,0 z\";}\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"mutable solidId = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"mutable dashedId = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"// create circle size scale\nradiusScale = d3.scaleSqrt()\n .domain([1,2779]) //hardcoded for pf\n\t .range([1,50]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"color = d3.scaleOrdinal()\n .domain([0,1,2,3,4,5])\n .range([\"#fdc086\", \"#7fc97f\", \"#beaed4\", \"#ffff99\", \"#386cb0\", \"#f0027f\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function path(d) {\n return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"y = Object({});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"x = d3.scalePoint()\n .range([0, width])\n .padding(1)\n .domain(dimensions);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"{\n for (var i in dimensions) {\n var name = dimensions[i];\n y[name] = d3.scaleLinear()\n .domain( {'Year': [1980.0, 2017.0], 'Age': [18.0, 40.0], 'PER': [-8.3, 34.8], 'TS%': [0.127, 0.773], '3PAr': [0.001, 0.929], 'FTr': [0.025, 2.667], 'ORB%': [0.0, 33.0], 'DRB%': [0.0, 37.8], 'TRB%': [0.0, 30.2], 'AST%': [0.0, 36.4], 'STL%': [0.0, 10.0], 'BLK%': [0.0, 9.8], 'TOV%': [0.0, 34.8], 'USG%': [6.4, 41.9], 'BPM': [-17.7, 11.6], 'FG%': [0.0, 0.8], '3P%': [0.0, 1.0], '2P%': [0.0, 1.0], 'eFG%': [0.0, 0.8], 'FT%': [0.0, 1.0]}[name] )\n .range([height * 0.5, 0]);\n }\n return y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`Tree and PCP layout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"treesvg = d3.select(DOM.svg(width + margin.left + margin.right, 0.85 * height + margin.top + margin.bottom));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"treeg = treesvg.append('g')\n .attr(\"transform\", \"translate(0,\" + margin.top + \")\" );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"margin = ({top: 100, right: 90, bottom: 100, left: 90})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"height = 750 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"tree = d3.tree().size([width,0.85*height]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"hier = d3.hierarchy(pf_tree_data, function(d) {\n return d.children;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"pcpsvg =d3.select(DOM.svg(width+margin.left+margin.right,0.5 * height+margin.top+margin.bottom));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"pcp = pcpsvg\n .append(\"g\")\n .attr(\"transform\", \"translate(0,100)\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"nodes = tree(hier);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"md`Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"md`Power Forward data read-in`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"pf = d3.csvParse(await FileAttachment(\"PF.csv\").text(), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"pf_tree_data = FileAttachment(\"pf_tree_data.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"pf_cluster_avgs = d3.csvParse(await FileAttachment(\"pf_cluster_avgs.csv\").text(), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"pf_node_avgs = d3.csvParse(await FileAttachment(\"pf_node_avgs.csv\").text(), d3.autoType);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"