25:["$","title",null,{"children":"Hierarchies Yousuf | Spring 2020 Info Vis | Observable"}] 4b:[{"id":"95d7692a538ea3ad46e47aef2ae129ec73568e5302e373e8635e5d83f477fc633a3849444ce05cdc545971d414a2d73b5b10dd52af146fe7611e594895025b46","href":"https://static.observableusercontent.com/files/95d7692a538ea3ad46e47aef2ae129ec73568e5302e373e8635e5d83f477fc633a3849444ce05cdc545971d414a2d73b5b10dd52af146fe7611e594895025b46","name":"data@1.csv","type":"text/csv","lastModified":1588556035065.167,"size":566}] 47:{"id":"4380121932fd84fe","slug":"hierarchies-yousuf","title":"Hierarchies Yousuf","thumbnail":"e7500c4ba44b8f906c25ce1c9906cda25e45b31b96c425bd8b52e4eb988236c8","access_level":"public","create_time":"$D2020-05-01T17:55:21.427Z","update_time":"$D2020-05-13T18:07:57.598Z","view_time":null,"first_public_time":"$D2020-05-04T01:20:13.632Z","has_unpublished_edits":null,"fork":{"id":"ac8d85c2345665ab","slug":"hierarchies","title":"Hierarchies","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":595,"publish_version":595,"role":null,"authored":false,"authors":[{"type":"individual","id":"e82ff7b39f6354cf","login":"yousufj","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hierarchies Yousuf","cells":[{"id":0,"value":"md`# Hierarchies Yousuf`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"loading_data = md`## Loading Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"FileAttachment(\"data@1.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"my_data = {\n const text = await FileAttachment(\"data@1.csv\").text();\n return d3.csvParse(text, ({ x, y }) => ({\n x: x,\n y: y\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"render_data_table(my_data.slice(5, 15))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`About the Data
\nThis dataset includes data about Amy Winehouse's discography, which includes two albums (Frank and Back to Black) and song titles in each album. I compiled it by grabbing information from her Spotify page. There are 21 observations and two features.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"formatting_data = md`## Formatting Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"nested_data = d3\n .nest()\n .key(d => d.x)\n .entries(my_data)\n .map(d => {\n return { name: d.key, children: d.values, value: d.values.length };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"nested_data.forEach(\n d =>\n (d.children = d3\n .nest()\n .key(a => a['y'])\n .entries(d.children)\n .map(a => {\n return {\n name: a.key,\n children: a.values,\n value: a.values.length\n };\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"formatted_data = ({ name: 'Albums', children: nested_data })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"// Transform into a hierarchy\nhierarchy_data = d3.hierarchy({ values: nested_data }, d => d.values)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"circle_data = [\n { name: \"Frank\", count: 10 },\n { name: \"Back to Black\", count: 11 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"color = d3\n .scaleOrdinal()\n .domain(nested_data.map(d => d.key))\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"visualizations = md`## Visualizations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`### Circle Packing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`Encodings/Perception:
\nThis visualization uses position, color and size encoding. Although circle packing does a good job of seperating the albums and showcasing the amount of songs belong to which album, I think the chart would be better suited for a medium sized data set with more variety in values, so that the size encoding is more prominent. Another thing that would've made the chart stronger is if the songs names were shown on each circles as smaller circles, rather than just the count value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"circle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`### Sun Burst`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`Encodings/Perception:
\nThe visualization here uses color encoding and positioning to show which songs belong to which album (green, left for Frank and purple, right for Back to Black). I think this chart does a good job of showing relationships (ownership) between the songs and their albums. One thing I would do differently for this visual in the future is have the songs cover the entirety of each section and remove the slots with no values on them, since the spacing makes the chart look incomplete.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"sunburst","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`### Tree Diagram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`Encodings/Perception:
\nThe tree diagram uses position encoding to show different albums and the songs included in them. I think this chart is strong for data sets like mine that aren't particularly busy, since it is easy to see the divide of albums due to positioning and no scrolling is needed to view the entirety of the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"tree","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`### Tree Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`Encodings/Perception:
\nThe visualization here length and color encoding to show the number of songs according to album. This visual is not particularly strong for my dataset, since the values are so close to one another (10 and 11). Due to this, the colors are the same, but the size is slightly different, which is difficult for the eye to differentiate. I would recommend using Tree Map charts for datasets which contain a large number of some attribute, with lots of variety. An example of this could be comparing all albums with the same genre (Soul/Neo Soul) as Amy Winehouse and their ratings.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"treemap = {\n const svg = d3\n .create('svg')\n .attr(\"width\", width)\n .attr('height', height);\n\n make_treemap(hierarchy_data.sum(d => d.value));\n\n svg\n .selectAll('rect')\n .data(hierarchy_data.leaves())\n .join(enter => {\n const gs = enter.append('g');\n\n gs.append('text')\n .text(d => d.data.name)\n .attr(\"transform\", d => `translate(${d.x0}, ${d.y0})`)\n .style('font-size', '7px')\n .attr('y', 10);\n\n gs.append('rect')\n .attr(\"x\", d => d.x0)\n .attr('width', d => d.x1 - d.x0)\n .attr('y', d => d.y0)\n .attr('height', d => d.y1 - d.y0)\n .style('stroke', 'white')\n .style('fill', d => color(d.parent.data.key))\n .style('fill-opacity', 0.5);\n\n return gs;\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"make_treemap = d3\n .treemap()\n .round(true)\n .tile(d3.treemapResquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {\n displayCaution,\n code_styles,\n render_data_table\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import { chart as sunburst } with { formatted_data as data } from '@d3/sunburst'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"import { chart as circle } with {\n circle_data as data\n} from '@azhang/circle-packing'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"import { chart as tree } with {\n formatted_data as data\n} from '@mbostock/tree-o-matic'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"height = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"width = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"margin = ({ top: 30, right: 30, bottom: 60, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null