30:T450,md`

Hiearchy Examples. Image: [datavizcatalogue](https://datavizcatalogue.com/search/hierarchy.html)

Quoting [datavizcatalogue](https://datavizcatalogue.com/methods/treemap.html) > ... an alternative way of visualising the hierarchical structure of a Tree Diagram while also displaying quantities for each category via area size. Each category is assigned a rectangle area with their subcategory rectangles nested inside of it. > When a quantity is assigned to a category, its area size is displayed in proportion to that quantity and to the other quantities within the same parent category in a part-to-whole relationship. Also, the area size of the parent category is the total of its subcategories. > If no quantity is assigned to a subcategory, then it's area is divided equally amongst the other subcategories within its parent category. > **Pros**: Space efficient > **Cons**: doesn't show the hierarchal levels as clearly as other charts that visualise hierarchal data.`31:T5ea,md`### Layout for Trees using d3.tree() Lays out root and its descendants on 2D plane by assigning x and y coordintes to them. - node.x - the x-coordinate of the node - node.y - the y-coordinate of the node ex: d3.tree().size([W, H])(root) Nodes can be drawn using circle/rectangle/text at node.x and node.y. Links can be drawn using lines. - node.copy(): Creates and returns a deep copy of the node. d3 also supports path generator to draw pleasing curves as links. #### Link Path Generators: (see https://github.com/d3/d3-shape#linkVertical) Helps you draw a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical, horizontal or radial. - **d3.linkVertical()**: Returns a new path generator with vertical tangents. For example, to visualize links in a tree diagram rooted on the top edge of the display, you might say: ~~~ const link = d3.linkVertical() .x(d => d.x) .y(d => d.y); ~~~ - **d3.linkHorizontal()**: Returns a new path generator with horizontal tangents. For example, to visualize links in a tree diagram rooted on the left edge of the display, you might say: ~~~ const pathGenerator = d3.linkHorizontal() .x(d => d.y) .y(d => d.x) ~~~ - **d3.linkRadial()**: Returns a new link generator with radial tangents. For example, to visualize links in a tree diagram rooted in the center of the display, you might say: ~~~ const link = d3.linkRadial() .angle(d => d.x) .radius(d => d.y); ~~~ `32:T54c,drawTreeH = root => { const [svgNode, svg] = getSVG(); const treeLayout = d3.tree().size([H, W - 100])(root.copy()); // Nodes const nodes = svg .append("g") .selectAll('g') .data(treeLayout.descendants()) .join('g') .attr('transform', d => `translate(${d.y},${d.x})`); // Circles nodes .append("circle") .attr("fill", d => (d.children ? "#555" : "#999")) .attr("r", 2.5); // Texts nodes .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[0]) .clone(true) .lower() .attr("stroke", "white"); // Links const links = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); if (linkRepresentation == "curves") links .selectAll("path") .data(treeLayout.links()) .join("path") .attr( "d", d3 .linkHorizontal() .x(d => d.y) .y(d => d.x) ); else links .selectAll('line') .data(treeLayout.links()) .join('line') .attr('x1', d => d.source.y) .attr('y1', d => d.source.x) .attr('x2', d => d.target.y) .attr('y2', d => d.target.x); return svgNode; }33:T79d,drawTreeHorizontal = root => { //const [svgNode, svg] = getSVG(); const margin = { left: 50, right: 100, top: 50, bottom: 50 }; const W = width - margin.left - margin.right; const nodeSize = [10, W / root.height]; let treeLayoutH = d3.tree().nodeSize(nodeSize)(root.copy()); let x0 = Infinity; let x1 = -x0; treeLayoutH.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const [svgNode, svg] = getSVG({ width: width, height: x1 - x0 + nodeSize[0] * 2 + margin.top + margin.bottom, margin: margin }); // Links const links = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); if (linkRepresentation == "curves") links .selectAll("path") .data(treeLayoutH.links()) .join("path") .attr( "d", d3 .linkHorizontal() .x(d => d.y) .y(d => d.x - x0) ); else links .selectAll("line") .data(treeLayoutH.links()) .join("line") .attr('x1', d => d.source.y) .attr('y1', d => d.source.x - x0) .attr('x2', d => d.target.y) .attr('y2', d => d.target.x - x0); // Nodes const nodes = svg .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(treeLayoutH.descendants()) .join("g") .attr("transform", d => `translate(${d.y},${d.x - x0})`); // Circles nodes .append("circle") .attr("fill", d => (d.children ? "#555" : "#999")) .attr("r", 2.5); // Texts nodes .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[0]) .clone(true) .lower() .attr("stroke", "white"); return svgNode; }34:T6a1,radialLayoutDraw = root => { const radius = height / 2; const radialLayout = d3.cluster().size([2 * Math.PI, radius - 100])( root.copy() ); const [svgNode, svg] = getSVG(); const chart = svg .append("g") .attr("transform", `translate(${W / 2},${H / 2})`); const links = chart .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(radialLayout.links()) .join("path") .attr( "d", d3 .linkRadial() .angle(d => d.x) .radius(d => d.y) ); chart .append("g") .selectAll("circle") .data(radialLayout.descendants()) .join("circle") .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .attr("fill", d => (d.children ? "#555" : "#999")) .attr("r", 10); chart .append("g") .attr("font-family", "sans-serif") .attr("font-size", 9) .selectAll("text") .data(radialLayout.descendants()) .join("text") .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) ` ) .attr("dy", "0.31em") .attr("x", d => (d.x < Math.PI === !d.children ? 6 : -6)) .attr("text-anchor", d => (d.x < Math.PI === !d.children ? "start" : "end")) .text(d => d.data.name || d.data[0] || "") .style("stroke", "none") .style("fill", "black"); return svgNode; }35:T666,drawTreeMap = (root, attribute) => { const newRoot = (valueAs == "count" ? root.copy().count() : root.copy().sum(d => d[attribute]) ) .sort //(a, b) => b.value - a.value (); mutable feedback = newRoot; const treemapLayout = d3 .treemap() .size([width, height]) .padding(1) .paddingOuter(0)(newRoot); const [svgNode, svg] = getSVG({ width: width, height: height, margin: { top: 0, bottom: 0, lefft: 0, right: 0 } }); const leaf = svg .attr("font-family", "sans-serif") .attr("font-size", 6) .selectAll("g") .data(treemapLayout.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf .append("title") .text(d => `${d.data.name}\nPop: ${d3.format("~s")(d.value)}`); leaf .append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return colorScale(d.data.name || d.data[0]); }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf .append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf .append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => [ `${d.data.name}`, valueAs == "count" ? " " : `${attribute}: ${d3.format(".1s")(d.value)}` ]) .join("tspan") .attr("x", 3) .attr("y", (d, i) => (1.1 + i) * 6) .attr("fill-opacity", (d, i) => (i ? 0.7 : null)) .text(d => d); return svgNode; }36:T529,drawPack = (root, attribute) => { const newRoot = (valueAs == "count" ? root.copy().count() : root.copy().sum(d => d[attribute]) ).sort((a, b) => b.value - a.value); const packLayout = d3 .pack() .padding(3) .size([H, H])(newRoot); mutable feedback = packLayout; const [svgNode, svg] = getSVG(); const nodes = svg .style("font", "10px sans-serif") .attr("text-anchor", "middle") .selectAll('g') .data(packLayout.descendants()) .join('g') .attr('transform', d => `translate(${d.x}, ${d.y})`); nodes .append('circle') .attr('r', d => d.r) .style("fill", d => { if (d.depth == 0) return "lightgrey"; while (d.depth > 1) d = d.parent; return colorScale(d.data.name || d.data[0]); }) .style("stroke", "black") .append("title") .text( d => `${d.data.name || d.data[0]}\${attribute}: ${d3.format("~s")(d.value)}` ); nodes .append('text') .attr('dy', 4) .style("text-anchor", "middle") .text(function(d) { if (d.children === undefined && d.r > 10) return d.children === undefined && d.r > 10 ? (typeof d.data.name == "string" ? d.data.name : d.parent.data.name ).substring(0, 3) : ''; }); return svgNode; }37:T619,drawPartition = (root, attribute) => { const newRoot = (valueAs == "count" ? root.copy().count() : root.copy().sum(d => d[attribute]) ).sort((a, b) => b.value - a.value); const partitionLayout = d3.partition().size([2 * Math.PI, H / 2])(newRoot); mutable feedback = partitionLayout; const [svgNode, svg] = getSVG(); const radius = H / 2; const arcGenerator = d3 .arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .innerRadius(d => d.y0) .outerRadius(d => d.y1); const chart = svg .append("g") .attr("transform", `translate(${W / 2},${H / 2})`); chart .selectAll('path') .data(partitionLayout.descendants().filter(d => d.depth)) .join('path') .attr('d', arcGenerator) .style("stroke", "white") .style("fill", d => { while (d.depth > 1) d = d.parent; //mutable feedback = d.data.name || d.data[0]; return colorScale(d.data.name || d.data[0]); }); chart .append("g") .attr("text-anchor", "middle") .attr("font-size", 10) .attr("font-family", "sans-serif") .selectAll("text") .data( partitionLayout .descendants() .filter(d => d.depth && ((d.y0 + d.y1) / 2) * (d.x1 - d.x0) > 10) ) .join("text") .attr("transform", function(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = (d.y0 + d.y1) / 2; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; }) .attr("dy", "0.35em") .text(d => d.data.name || d.data[0] || ""); return svgNode; }38:[{"id":"c330551628be9748f45832d0c7caae17e8f07a01bbfe47faa6e90c0863d937e6c28c7744f6de76f346e7ab9968860a54bf49759ecf324168b8a7d931f9088274","href":"https://static.observableusercontent.com/files/c330551628be9748f45832d0c7caae17e8f07a01bbfe47faa6e90c0863d937e6c28c7744f6de76f346e7ab9968860a54bf49759ecf324168b8a7d931f9088274","name":"atheletes.csv","type":"text/csv","lastModified":1614479386964.056,"size":470}] 2e:{"title":"Week 8: Hierarchies","cells":[{"id":0,"value":"md`# Week 8: Hierarchies\n- [Intro](#Intro)\n- [Tuesday](#Tuesday)\n- [Thursday](#Thursday)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"Intro = md`Organizing Hierarchical data for Visualization using a number of visualization techniqes.:\n- Tree layout\n- Treemap layout\n- Circle packing layout\n- Partition layout\n\nNote that the data must have the hierachical relationship.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`### Tree Diagram\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"md`#### What we need for creating Tree:\n- Hierachical relationship organized into node and links.\n- Node location\n- Links: Connection between the nodes. Source node and Target node.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"md`### Sunburst Chart\n*a.k.a.* Ring Chart, Multi-level Pie Chart, Belt Chart, Radial Treemap.\n\nQuoting [datavizcatalogue](https://datavizcatalogue.com/methods/sunburst_diagram.html)\n> ... shows hierarchy through a series of rings, that are sliced for each category node. Each ring corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it.\n\n> Rings are sliced up and divided based on their hierarchical relationship to the parent slice. The angle of each slice is either divided equally under its parent node or can be made proportional to a value.\n\n> Color can be used to highlight hierarchal groupings or specific categories.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"md`#### What we need to create Sunburst chart:\n- Hierachical relationship organized into node and links.\n- Some measurable quantity to define part of the whole: could be simply count of children.\n- Layout: Similar to that of Donut chart: \n - Nodes: start angle, end angle. The angular difference is proportional to the measurable quantity.\n - Links: inner radius, outer radius\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`### Tree Maps`","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"md`#### What do we need for creating Tree Map:\n- Hierachical relationship\n- Some measurable quantity to define part of the whole.\n- Layout: algorithm to organize the hierachical data into a rectangular area\n - Nodes and links: \n - position of rectangles \n - Width and height of the rectangles\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`### Circle Packing\n

\nQuoting [datavizcatalogue](https://datavizcatalogue.com/methods/circle_packing.html)\n> a variation of a Treemap that uses circles instead of rectangles. \n\n> Containment within each circle represents a level in the hierarchy: each branch of the tree is represented as a circle and its sub-branches are represented as circles inside of it. \n\n> The area of each circle can also be used to represent an additional arbitrary value, such as quantity or file size. \n\n> Colour may also be used to assign categories or to represent another variable via different shades.\n\n> **Pros**: Pleasing apperance and shows hierachy better than treemap.\n\n> **Cons**: Not space efficient. \n\nProportionality of value across the hierachy is not proportionas to data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"md`#### What do we need for creating Circle Packing:\n- Hierachical relationship\n- Some measurable quantity to define part of the whole.\n- Layout: algorithm to organize the hierachical data into a circular area\n - Nodes and links: \n - center of circle \n - radius of the circle\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1101,"value":"Tuesday = md`### Week 8 TuesDay`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1103,"value":"Table(athletes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":886,"value":"// Data source : https://observablehq.com/@d3/d3-group\nathletes = d3.csvParse(\n await FileAttachment(\"atheletes.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"grtAthletes = d3.group(athletes, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"aroot = d3.hierarchy(grtAthletes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"md`### [d3-hierarchy](https://observablehq.com/@d3/d3-hierarchy)\n>A d3.hierarchy is a nested data structure representing a tree: \n- A tree is root and each root has one or more child nodes, except where the root is a leaf.\n- A leaf in a tree does not have any child node.\n- Each node has one parent node (node.parent), except for the root; \n - each node has one or more child nodes (node.children), except for the leaves. \n - each node can have associated data (node.data) to store whatever additional fields you like.\n\nRef: https://github.com/d3/d3-hierarchy\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"md` Every node has the following properties.\n- node.data - the associated data.\n- node.depth - zero for the root node, and increasing by one for each descendant generation.\n- node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.\n- node.parent - the parent node, or null for the root node.\n- node.children - an array of child nodes, if any; undefined for leaf nodes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"aroot.depth","pinned":true,"hidden":false,"mode":"ojs"},{"id":1173,"value":"aroot.children[0].depth","pinned":true,"hidden":false,"mode":"ojs"},{"id":1176,"value":"aroot.children[0].height","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"aroot.height","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"aroot.children[0].children[0].children[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"md` Every node data structure has the number of associated methods. Some of them are:\n- node.descendants() : Returns the array of descendant nodes, starting with this node, then followed by each child in topological order.\n- node.leaves() : Returns the array of leaf nodes in traversal order; leaves are nodes with no children.\n- node.links() : Returns an array of links for this node and its descendants, where each link is an object that defines source and target properties. The source of each link is the parent node, and the target is a child node.\n...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"aroot.descendants()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1183,"value":"aroot.links()","pinned":true,"hidden":false,"mode":"ojs"},{"id":992,"value":"md`### Descendants and Links\nroot.descendants() returns a flat array of root’s descendants.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"aroot.descendants()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1112,"value":"aroot.leaves()","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"atree = d3.tree().size([W, H])(aroot.copy())","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"drawTree(aroot)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"viewof linkRepresentation = radio({\n options: [\"lines\", \"curves\"],\n value: \"lines\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"drawTreeH(aroot)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1124,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"md`### Creating Treelayout from nodesize\n~~~\ne.g. d3.tree().nodeSize([10, width/root.height])(root)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"drawTree = root => {\n const [svgNode, svg] = getSVG();\n const treeLayout = d3.tree().size([W, H])(root.copy());\n // Nodes\n svg\n .append(\"g\")\n .selectAll('circle')\n .data(treeLayout.descendants())\n .join('circle')\n .style(\"fill\", d => (d.children ? \"#555\" : \"#999\"))\n .attr('cx', d => d.x)\n .attr('cy', d => d.y)\n .attr('r', 4);\n\n // Links\n const links = svg\n .append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\");\n if (linkRepresentation == \"curves\")\n links\n .selectAll(\"path\")\n .data(treeLayout.links())\n .join(\"path\")\n\n .attr(\n \"d\",\n d3\n .linkVertical()\n .x(d => d.x)\n .y(d => d.y)\n );\n else\n links\n .selectAll('line')\n .data(treeLayout.links())\n .join('line')\n .attr('x1', d => d.source.x)\n .attr('y1', d => d.source.y)\n .attr('x2', d => d.target.x)\n .attr('y2', d => d.target.y);\n\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"drawTreeHorizontal(aroot)","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"md`#### Draw Tree: Cluster Layout\nThe cluster layout is very similar to the tree layout the main difference being all leaf nodes are placed at the same depth. For example:\n~~~\nclusterLayout = d3.cluster().size([W, H])(root.copy())\n~~~\nSame tree drawing method used above can be use for it drawing. \nCluster layouts are used for Radial Dendogram drawing\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"radialLayoutDraw(aroot.copy())","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"yelpReview = d3.json(\n \"https://gist.githubusercontent.com/MargretWG/b3f9e0a383408c6e6a45fc652e83a26c/raw/8756e2320d05a774e96983234beff81b01409315/hierarchy.json\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1225,"value":"yelpReviewHierarchy = d3.hierarchy(yelpReview)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1230,"value":"yelpReviewHierarchy.children[0].children[0].children[0].children[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"Thursday = md`## Week 8: Thursday`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"md`### Node methods useful area based layout plots.\n- node.count() : Computes the number of leaves under this node and assigns it to node.value, and similarly for every descendant of node. If this node is a leaf, its count is one.\n- node.sum(value) : Evaluates the specified value function for this node and each descendant in post-order traversal, and returns this node. The node.value property of each node is set to the numeric value returned by the specified function plus the combined value of all children. The function is passed the node’s data, and must return a non-negative number. \n- node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"md`### Treemap Layout: d3.treemap()\nBefore applying this layout to our hierarchy we must run .sum() on the hierarchy. This traverses the tree and sets value on each node to the sum of its children\n~~~\nroot.sum(d => d.earnings)\nor \nroot.count()\n~~~\nSee exampler from : https://observablehq.com/@d3/treemap\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1169,"value":"aroot.sum(d => d.earnings)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":1084,"value":"drawTreeMap(aroot, \"earnings\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1236,"value":"drawTreeMap(yelpReviewHierarchy, \"size\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"viewof valueAs = radio({\n options: [\"sum\", \"count\"],\n value: \"count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"md`### Circle Packing: d3.pack()\nLike in Treemap layout, before applying this layout to our hierarchy we must run .sum() on the hierarchy. This traverses the tree and sets .value on each node to the sum of its children\n~~~\nroot.sum(d => d.population)\nor \nroot.count()\n~~~\n\nSee example: https://observablehq.com/@d3/circle-packing\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1040,"value":"temp = drawPack(aroot, \"earnings\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1292,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":1035,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":1259,"value":"drawPack(yelpReviewHierarchy, \"size\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"md`### Sunburst chart: d3.partition()\nSee example: https://observablehq.com/@d3/sunburst\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"drawPartition(aroot, \"earnings\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1298,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":1067,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"drawPartition(yelpReviewHierarchy, \"size\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md`### World data\nLet us look at the world map data. World may be thought of as a collection of *region*'s, regions as a collection of *subregion*'s, subregions as collection of *countries*, and so on.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"root.leaves().map(d => d.data) // The original data is in the hierarchy’s leaves and can be accessed directly. Compare below with countryData","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"countryData","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`We can find a node based on some criterion, and seek the shortest path from that node to another.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"northAmerica = root.find(d => d.data[0] === \"Northern America\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"india = root.find(d => d.data.name === \"India\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"northAmerica.path(india).map(d => d.data[0] || d.data.name || \"^root\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"india.path(northAmerica).map(d => d.data[0] || d.data.name || \"^root\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"root.descendants()","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md` root.links() returns a flat array of objects containing all the parent-child links`","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"root.links()","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"leaves = root.leaves()","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"countryData = {\n const data = await d3.json(\n \"https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/master/countries%2Bstates%2Bcities.json\",\n d3.autoType\n );\n return data.map(d => {\n d.population = latestPopulationGroupedByCountryCode.get(d.iso3)\n ? latestPopulationGroupedByCountryCode.get(d.iso3).Value\n : 0;\n return d;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"latestPopulationGroupedByCountryCode = {\n const D = d3.group(\n await d3.csv(\n \"https://datahub.io/core/population/r/population.csv\",\n d3.autoType\n ),\n d => d[\"Country Code\"]\n );\n [...D.keys()].forEach(key => {\n const A = D.get(key);\n D.set(key, A[A.length - 1]);\n });\n return D;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"group = d3.group(countryData, d => d.region, d => d.subregion)","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"root = d3.hierarchy(group)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`#### Draw Tree: Tree Layout: Using d3.linkVertical()`","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"drawTree(root)","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"md`#### Draw Tree: Tree Layout: Using d3.linkHorizontal()`","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"drawTreeHorizontal(root)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"radialLayoutDraw(root.copy())","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"feedback","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"treeWithCounts = root.copy().count()","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"totalCounts = treeWithCounts.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"treeWithCounts.descendants().map(d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"treeWithPopulation = root.copy().sum(d => d.population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"treeWithPopulation.descendants().map(d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"treeWithPopulation.find(d => d.data[0] === \"Northern America\").value","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"treeWithPopulation.find(d => d.data.name === \"China\").value","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"treeWithPopulation.find(d => d.data.name === \"United States\").value","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"drawTreeMap(root, \"population\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"drawPack(root, \"population\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"drawPartition(root, \"population\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"mutable feedback = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`## Data`","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"regions = [...new Set(countryData.map(d => d.region))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"subregions = [...new Set(countryData.map(d => d.subregion))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"countryData.filter(d => d.population == 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"d3.csv(\"https://datahub.io/core/population/r/population.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"W = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"H = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`## Useful Functions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(regions)\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"getSVG = (options = { width: width, height: height, margin: margin }) => {\n const svgElement = DOM.svg(options.width, options.height);\n\n const svg = d3\n .select(svgElement)\n .append(\"g\")\n .attr(\n \"transform\",\n `translate(${options.margin.left},${options.margin.top})`\n );\n return [svgElement, svg];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Libraries & Imports`","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"import {serialize} from \"@palewire/saving-csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"import { radio, select, slider, button } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1087,"value":"import { Table } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}