33:[{"id":"df63c2d58f62aa5fa7c0b2f40abf6c442e0f77d2e72a6cb36797aba82393e1a1162b6fb516f7ad8017e1f6e8de8af7f641d496cd229b139758bf7c4f710a0517","href":"https://static.observableusercontent.com/files/df63c2d58f62aa5fa7c0b2f40abf6c442e0f77d2e72a6cb36797aba82393e1a1162b6fb516f7ad8017e1f6e8de8af7f641d496cd229b139758bf7c4f710a0517","name":"lec_playerdata.csv","type":"text/csv","lastModified":1588653749654.792,"size":31233},{"id":"53991387e29e7945da117bbb03916ad9fff95124626cd849f375654a5f95064ce3928b9eb387fe816133d0045e9d7983ef6a4cbbe1caf4a2ade72fe04a3dd330","href":"https://static.observableusercontent.com/files/53991387e29e7945da117bbb03916ad9fff95124626cd849f375654a5f95064ce3928b9eb387fe816133d0045e9d7983ef6a4cbbe1caf4a2ade72fe04a3dd330","name":"lec_playerdata@1.csv","type":"text/csv","lastModified":1588657017282.239,"size":26212}] 32:{"title":"Hierarchies - Banusing","cells":[{"id":0,"value":"md`# Hierarchies - Banusing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"summary = md`In this notebook, you will create **four different representations** of the same hierarchical data through the following steps: \n1. Read through the brief descriptions of each visualization type on the [datavizcatalogue](https://datavizcatalogue.com/search/hierarchy.html)\n2. Using a dataset of your choice:\n - Create all four layouts mentioned in the reading\n - Reflect on the relative advantages // disadvantages in the layout, noting the **encodings** that the chart type uses, and their impact on **perceptual accuracy**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"setup = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Hierarchies Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/hierarchies-assignment)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"loading_data = md`## Loading Data\nAs in previous notebooks, you'll choose the dataset to work with in this assignment. The only real requirement is that the dataset has a natural hierarchy to it (in other words, each observation belongs to a _group_). Many datasets contain implicit hierarchies, such as countries that belong to _regions_, songs that appear on _albums_, courses that are taught by different _departments_, etc. \n\nIn the cells below, please do the following:\n- Load your data (either directly from the web, or by uploading it as [File Attachment](https://observablehq.com/@observablehq/file-attachments))\n- Display a subset of the data (e.g., the first ~10 rows) using the \\`render_data_table()\\` function, which I've already imported below (see how we did that [here](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#loading_data))\n- Tell us a little bit about the data (just enough so we understand where the data came from, and what we're looking at).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"data = d3.csvParse(\n await FileAttachment(\"lec_playerdata@1.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"render_data_table(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`This dataset is from Kaggle and talks about the players in the 2019 LoL European Championship Season. It contains players from 10 different teams, each of which have about 5-7 players.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"formatting_data = md`## Formatting Data\nIn order to visualize the hierarchies in your data, you'll need to organize your data into different groups. To do so, I suggest you use the \\`d3.nest()\\` method, as described in this [tutorial](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#aggregating_data).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"splitData = splitSelected => {\n return data.filter(d => d.Split == splitSelected);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"nestedData = d3\n .nest()\n .key(d => d[sortRadio])\n .entries(splitData(splitSelection))\n .map(d => {\n return {\n name: d.key,\n children: d.values\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"nestedData.forEach(\n d =>\n (d.children = d3\n .nest()\n .key(a => a.Name)\n .rollup(a => {\n return d3.sum(a, function(d) {\n return d.GP;\n });\n })\n .entries(d.children)\n .map(a => {\n return {\n name: a.key,\n value: a.value\n };\n }))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"cleanData = ({ name: `${splitSelection}`, children: nestedData })","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"visualizations = md`## Visualizations\nIn this section, you'll create **all four** representations of hierarchical data discussed on [this page](https://datavizcatalogue.com/search/hierarchy.html). Following each visualization, please make note of the **encodings** in the chart, and the relative advantages / disadvantages in terms of **perception**. \n\nIf you want, you may **import** three out of the four charts (the other one, you must write the code here). As you do so, make sure you import the charts _with_ your data as the data to visualize!\n\nFeel free to organize this section as you see fit (e.g., create sub-sections for each visualzation, put all of your reflections at the end in a table) however you want to organize your work is fine!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof splitSelection = select({\n title: \"Split\",\n options: _.uniqBy(data, 'Split').map(d => d.Split),\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof sortRadio = radio({\n title: 'Sort Type',\n options: [\n { label: 'Team', value: 'Team' },\n { label: 'Position', value: 'Pos' }\n ],\n value: 'Team'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## Treemap`","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"treemap","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"import { chart as treemap } with { cleanData as data } from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"md` The visualization here uses color encoding to either denote what team a player was on or what position they played in during the selected split. It also uses size encoding to show how many games they played incomparison to other players. In terms of perception, I think it provides a straightforward view of how present each player was in the overall scheme of things. One downside I see is that that each team/position section is sized differently even though all teams played the same games, which may cause perception issues.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`## Sunburst`","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"sunburst","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"import { chart as sunburst } with { cleanData as data } from '@d3/sunburst'","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md` This visualization once again uses color and size to denote a player's team/position and their play frequency, respectively. I find this to be a pretty confusing visualization since it squashes some of the players who didn't play as much, and in general is hard to read. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`## Tree Diagram`","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"treeDiagram","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"import { chart as treeDiagram } with {\n cleanData as data\n} from '@mbostock/tree-o-matic'","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"md` This visualization uses position encoding to show which players played for what team, as well as which players played what position -- based on the option selected above. It's a straightforward visualization that does its job well-enough, I think since it's clear and concise. Its primary downside is being unable to communicate the match frequency of each player. `","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`## Circle Packing`","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"circlePacking","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"import { chart as circlePacking } with {\n cleanData as data\n} from '@d3/circle-packing'","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"md` This visualization primarily uses size encodings to denote how frequent a player played for a team/position. I think it quite accurately represents what it's trying to do, though a downside could be the relatively small size of players who didn't play as much as starters -- which could cause visibility issues. `","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {\n displayCaution,\n code_styles,\n render_data_table\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"_ = require(\"lodash@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}