31:T5b1,genre_chart = { make_treemap_layout(hierarchy.sum(d => d.Global_Sales)); const svg = d3 .create("svg") .attr("width", width) .attr("height", height); svg .selectAll("rect") .data(hierarchy.leaves()) .join(enter => { const gs = enter .append("g") .attr("transform", d => `translate(0 , ${height / 2})`); gs.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .style("stroke", "white") .style("fill", d => color(d.data.Genre)); gs.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); gs.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.Name.split(/(?=[A-Z][a-z])|\s+/g).concat( d.data.Global_Sales + "M" ) ) .join("tspan") .attr("font-size", "12px") .attr("x", 3) .attr( "y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em` ) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null ) .text(d => d); return gs; }) .attr("transform", d => `translate(${d.x0}, ${d.y0 + 20})`) .selectAll("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); return svg.node(); }32:[{"id":"f08c4f25813e4c0d7b278aea0b4b9f48e606cf63a58efc4bef465a6a42e73ffba330e2cec392b4a569fce8c4d7767a890182cd51fdd397d7810d182471529e11","href":"https://static.observableusercontent.com/files/f08c4f25813e4c0d7b278aea0b4b9f48e606cf63a58efc4bef465a6a42e73ffba330e2cec392b4a569fce8c4d7767a890182cd51fdd397d7810d182471529e11","name":"vgsales.csv","type":"text/csv","lastModified":1588646957194.641,"size":1355781}] 2f:{"title":"Hierarchies Escalera","cells":[{"id":0,"value":"md`# Hierarchies Escalera`","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":137,"value":"data = d3\n .csvParse(await FileAttachment(\"vgsales.csv\").text())\n .filter((d, i) => {\n return i < 50;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"render_data_table(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`This data set contains information about the sales of video games, along with information about their publisher, genre, and platform. The data was scraped from vgchartz, a website that keeps track of video game sales.`","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":150,"value":"nest_class = d3.nest().key(d => d.Genre)","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"nested_data = nest_class.entries(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"hierarchy = d3.hierarchy({ key: \"Genre\", values: nested_data }, d => d.values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"make_treemap_layout = d3\n .treemap()\n .round(true)\n .tile(d3.treemapResquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"sunburst_data = d3\n .nest()\n .key(d => d['Platform'])\n .key(r => r['Publisher'])\n .entries(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"sunburst_data2 = sunburst_data.map(d => {\n d.name = d.key;\n d.values = d.values.map(dd => {\n dd.name = dd.key;\n dd.values = dd.values.map(ddd => {\n ddd.name = ddd.key;\n return ddd;\n });\n return dd;\n });\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"sunburst_hierarchy = d3.hierarchy(\n { key: \"Platform\", values: sunburst_data2 },\n d => d.values\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"sunburst_hierarchy2 = sunburst_hierarchy.copy().sum(d => +d.Global_Sales)","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":250,"value":"color = d3\n .scaleOrdinal()\n .domain(_.uniqBy(data.map(d => d.Genre)))\n .range([\n \"#4e79a7\",\n \"#f28e2c\",\n \"#e15759\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#edc949\",\n \"#af7aa1\",\n \"#ff9da7\",\n \"#9c755f\",\n \"#bab0ab\"\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"Key = swatches({\n color: d3.scaleOrdinal(_.uniqBy(data.map(d => d.Genre)), [\n \"#4e79a7\",\n \"#f28e2c\",\n \"#e15759\",\n \"#76b7b2\",\n \"#59a14f\",\n \"#edc949\",\n \"#af7aa1\",\n \"#ff9da7\",\n \"#9c755f\",\n \"#bab0ab\"\n ])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`\nEncodings \n- Size/Area\n- Position \n- Color\n

\nAdvantages: Depending on the difference between sizes, it can be easy to tell which points are the biggest within a certain category. You can also see the total value for each category compared to each other\n
\nDisadvantages: It is a bit har to tell the order of the highest or lowest values since squares of similar sizes can be far away from each other.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"sunburst","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"circles","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":142,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"import { chart as sunburst } with {\n sunburst_hierarchy2 as data\n} from \"@d3/sunburst\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"import { chart as circles } with {\n sunburst_data2 as data\n} from \"@d3/circle-packing\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}