30:T4d1,// Draw the visualization treeMap_chart = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) svg .selectAll("g") .data(tree_hierarchy.leaves()) .join( enter => { // For clarity, you create a const for the labels / rects // When there are new gs, you want to append these texts / rects const gs = enter.append("g") // Position each gs (text / rect) properly .attr("transform", d => `translate(${d.x0}, ${d.y0})`) gs.append("text") .text(d => d.data.Country.split(/(?=[A-Z][a-z])|\s+/g)) .style("font", "7px sans-serif") .attr("y", 7) .attr("alignment-baseline", "vertical") gs.append("text") .text(d => d.data.Continent) .style("font", "7px sans-serif") .attr("y", 15) .attr("alignment-baseline", "vertical") gs.append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .style("stroke", "white") .style("fill", d => color(d.parent.data.key)) .style("fill-opacity", .6) } ) return svg.node(); }31:T5ba,md ` - **Sunburst**: - Encodings: - Color - Angle - Size - Perception: Which bigger countries and continents, the color is way more overpowering than the smaller countries. It is easy to tell which continents have a larger population. But when it gets smaller, it has hard to tell which angle has more population or less if you're just depending on the eye. - **Circle Packing**: - Encodings: - Color (for certain tiers) - Size - Perception: You can see that the biggest circle that encompasses everything is the root of everything. If you hover over the the big circle, it should show the population of the entire world during the periods of 2004 and 2005. However, it is hard to tell which countries is which once the circles and text gets smaller. - **Tree Map**: - Encodings: - Color - Size - Perception: You can easily see which countries have the most population during the years 2004-2005, but with smaller countries it is kind of hard to differentiate as the boxes get very tiny and some of the text start overlapping with each other. - **Tree Diagram**: - Encodings: - Position - Perception: The diagram is easy to understand, as there is a root node and its descendents and it links to its descendents. You can see the countries of each regions are the very right-hand side from top to bottom. The only down-side is that, we cannot see the population amount of each countries/regions/continents. `32:[{"id":"4adfbc8074492c6e9131a3404da960cdcbba1fba0b40a307a17802563272debcd1b4ecc9e86243e230e172c92b56522ed7a4528ed109a7613b4c8d206e8c058c","href":"https://static.observableusercontent.com/files/4adfbc8074492c6e9131a3404da960cdcbba1fba0b40a307a17802563272debcd1b4ecc9e86243e230e172c92b56522ed7a4528ed109a7613b4c8d206e8c058c","name":"Oworld.csv","type":"text/csv","lastModified":1589071357309.463,"size":10205}] 2e:{"title":"Hierarchies Chang","cells":[{"id":0,"value":"md`# Hierarchies Chang`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"loading_data = 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":96,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md `\n

Work

Loading Data

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"render_data_table(data.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`\n**Data:** This dataset is about the population of 250 countries back in 2004-2005. It gives us the continent, region, country name and the population during that period of time.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md `\n

Work

Formatting Data

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`#### General`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"nested_data = d3\n .nest()\n .key(d => d['Continent'])\n .key(r => r['Region'])\n .key(c => c['Country'])\n .entries(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"named_data = nested_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":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"hierarchy = d3.hierarchy({ values: named_data }, d => d.values).sum(d => d.Population)","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"// Test Test\nnamed_data[0].values[0].values[0].values[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`#### Tree Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"// Data for Tree Map\nmap_data = d3\n .nest()\n .key(d => d['Continent'])\n .entries(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"// Write a function that can compute treemap layout\nmake_treemap = d3.treemap()\n .round(true)\n .tile(d3.treemapResquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"// Data for Tree Map\ntree_hierarchy = d3.hierarchy({ values: map_data }, d => d.values).sum(d => +d.Population + 9000000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"// Generate Tree\nmake_treemap(tree_hierarchy)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md `\n---\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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md `\n

Work

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"md `\n

Sunburst

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"sunburst_chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"md `\n

Circle Packing

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"circle_chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md `\n

TreeMap

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"md `\n

Tree Diagram

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"tree_chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"Summary = md`## Summary\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"md `\n---\n`","pinned":false,"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.\n\nI wasn't sure how to vertically align texts, or make them not overlap with each other... \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md `\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"sunburst = md`#### Sunburst`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"import { chart as sunburst_chart} with {\n hierarchy as data,\n my_partition as partition\n} from '@d3/sunburst'","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"my_partition = data => d3.partition().size([2 * Math.PI, 500])(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"circlePacking = md`#### Circle Packing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"import { circle_chart } from '@yungtc22/circle-packing-world-population-2004'","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"// Make a color scale for the regions\ncolor = d3\n .scaleOrdinal()\n .domain(nested_data.map(d => d.key))\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"TreeDiagram = md`#### Tree Diagram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"import { tree_chart } from '@yungtc22/tidy-tree-world-population-2004'","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"General = md`#### General`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"data = d3.csvParse(await FileAttachment(\"Oworld.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {\n displayCaution,\n code_styles,\n render_data_table, \n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"code_styles, table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}