31:T5ef,tree_diagram = { const root = tree_data(hierarchy_data); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg .append("g") .attr("font-size", 12) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); const link = g .append("g") .attr("fill", "none") .attr("stroke", "green") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkVertical() .x(d => d.y) .y(d => d.x) ); const node = g .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x})`); node .append("circle") .attr("fill", d => (d.children ? "green" : "green")) .attr("r", 2.5); node .append("text") .attr("dy", "0.31em") .attr("x", d => (d.children ? -6 : 6)) .attr("text-anchor", d => (d.children ? "end" : "start")) .text(d => d.data.name + ": " + d.data.covid_cases) .clone(true) .lower() .attr("stroke", "none"); svg .append("text") .text("Global COVID-19 Cases by Continent and Country") .style("font-size", "15px") .attr("transform", "translate(20, 20)"); return svg.node(); }32:T514,treemap_chart = { treemap(hierarchy_tree.sum(d => d.covid_cases)); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 30]); const leaf = svg .selectAll("g") .data(hierarchy_tree.leaves()) .join(enter => { const g = enter.append("g"); g.append("rect") .style("stroke", "white") .style("fill", d => color(d.data.region)); g.append("text") .selectAll("tspan") .data(d => d.data.location .split(/(?=[A-Z][a-z])|\s+/g) .concat(d.data.covid_cases) ) .join("tspan") .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.8 : null ) .style("fill", "white") .text(d => d); return g; }) .attr("transform", d => `translate(${d.x0}, ${d.y0})`) .selectAll("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); svg .append("text") .text("Global Covid Cases by Continent and Country") .style("font-size", "15px") .style("font-weight", "bold") .attr("transform", "translate(380, 820)"); return svg.node(); }33:[{"id":"0ef4b7dc818fb00139f7a67c1e945447316b96042a8eedb51321e7e8200eda4d38a62edf3bdee1bf862090e6540b7a4914e4404202089b4b6e1dcc0418a81b97","href":"https://static.observableusercontent.com/files/0ef4b7dc818fb00139f7a67c1e945447316b96042a8eedb51321e7e8200eda4d38a62edf3bdee1bf862090e6540b7a4914e4404202089b4b6e1dcc0418a81b97","name":"covid.csv","type":"text/csv","lastModified":1613144784268.362,"size":11203392}] 2f:{"title":"Hierarchies - Hussain","cells":[{"id":0,"value":"md`# Hierarchies - Hussain`","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":20,"value":"assignment_instructions(\"Hierarchies\")","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":214,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"data = d3.csvParse(await FileAttachment(\"covid.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"render_data_table(data)","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.group()\\` method, as was demonstrated in [this notebook](https://observablehq.com/@uw-info474/treemap-activity-complete).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"grouped_data = d3.group(location_data, d => d.region)","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"hierarchy_tree = d3.hierarchy(grouped_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"hierarchy_data = {\n var world_case = 0;\n for (var i = 0; i < region_data.length; i++) {\n world_case += region_data[i].covid_cases;\n }\n\n var re = {\n data: {\n id: \"World\",\n covid_cases: world_case\n },\n children: [],\n name: \"World\",\n covid_cases: world_case\n };\n\n for (var [key, value] of grouped_data) {\n var sub_cases = 0;\n for (var i = 0; i < region_data.length; i++) {\n if (region_data[i].region === key) {\n sub_cases = region_data[i].covid_cases;\n }\n }\n\n var sub = {\n data: {\n id: key,\n covid_cases: sub_cases\n },\n children: [],\n name: key,\n covid_cases: sub_cases\n };\n\n for (var i = 0; i < value.length; i++) {\n sub.children.push({\n data: { id: value[i].location, covid_cases: value[i].covid_cases },\n name: value[i].location,\n covid_cases: value[i].covid_cases\n });\n }\n re.children.push(sub);\n }\n return re;\n}","pinned":false,"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":181,"value":"md `### Circle Diagram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"md` Circle diagram inspired by @d3/zoomable-circle-packing `","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`The size of the circles indicate the number of Covid cases in each continent at a first glance. After interacting with the initial circles we are able to see the amount via circle size of the countries within that continent. I think perception wise it is easy to get a general idea and compare the amount of cases but we don't know the exact number of cases i.e no numerical value is given for each continent and countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"import { chart as circlePackingChart } with {\n hierarchy_data as data,\n circle_pack as pack\n} from '@d3/zoomable-circle-packing'","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"circle_pack = hierarchy_data =>\n d3\n .pack()\n .size([width, 1000])\n .padding(3)(\n d3\n .hierarchy(hierarchy_data)\n .sum(d => d.data.covid_cases)\n .sort((a, b) => b.data.covid_cases - a.data.covid_cases)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"circlePackingChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"md ` ### Sunburst Diagram` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md` Sunburst diagram inspired by @d3/zoomable-sunburst `","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"import { chart as sunBurstDiagram } with {\n hierarchy_data as data,\n partition\n} from '@d3/zoomable-sunburst'","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"partition = h_data => {\n const root = d3\n .hierarchy(hierarchy_data)\n .sum(d => d.data.covid_cases)\n .sort((a, b) => b.data.covid_cases - a.data.covid_cases);\n return d3.partition().size([3 * Math.PI, root.height + 1])(root);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`The Sunburst diagram similar to the circle pack diagram does not give an exact number for the amount of covid cases in each location so that is definitely a disadvantage. It also just gives a general and easy overview of the number of covid cases in each continent and country and how they compare to each other.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"sunBurstDiagram","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md` ### Tree Diagram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md` Tree diagram inspired by @d3/cluster-dendrogram?collection=@d3/d3-hierarchy `","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"tree_data = data => {\n const root = d3.hierarchy(hierarchy_data);\n root.dx = 10;\n root.dy = width / (root.height + 1);\n return d3.tree().nodeSize([root.dx, root.dy])(root);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"md` The tree diagram does a really great job of showing the relationship between the continents and the countries within their respective continents. The number of cases in the world, continents and countries are written out but don't make as big of an impact as the Circle and Sunburst diagrams because of the lack of shapes/sizing to demonstrate amount.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md` ### Treemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"md` Treemap inspired by @uw-info474/treemap-activity-complete `","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"treemap = d3.treemap()\n .round(true)\n .tile(d3.treemapSquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"color = d3\n .scaleOrdinal()\n .domain([...grouped_data.keys()])\n .range(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`The Treemap does a really great job of presenting the different sizes to represent the numberof covid cases in different countries and also categorizing those countries into the different continents by different colors. The contrast of the white number of cases labels on these darker colors is also easy to read as well. Overall the layout is really easy to understand in comparison to the other diagrams.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"observable_challenges","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"width = 3000","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"import { swatches, legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"region_data = {\n let region_sum = [];\n\n location_data.forEach(object => {\n const region = object.region;\n const covid_cases = object.covid_cases;\n\n let region_folder = region_sum.find(d => d.region === region);\n\n if (region_folder === undefined) {\n region_sum.push({ region: region, covid_cases: covid_cases });\n } else {\n region_folder.covid_cases += covid_cases;\n }\n });\n\n return region_sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"location_data = {\n let location_sum = [];\n\n data.forEach(object => {\n const location = object.location;\n const covid_cases = object.new_cases;\n const region = object.continent;\n\n let location_folder = location_sum.find(d => d.location === location);\n if (location_folder === undefined) {\n location_sum.push({\n location: location,\n region: region,\n covid_cases: covid_cases\n });\n } else {\n location_folder.covid_cases += covid_cases;\n }\n });\n\n let removeNull = location_sum\n .map(d => {\n return d.location;\n })\n .indexOf(null);\n location_sum.splice(removeNull, 1);\n\n return location_sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {\n displayCaution,\n table_styles,\n render_data_table,\n assignment_instructions,\n observable_challenges\n} from \"@uw-info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}