31:T6cd,TidyTreechart = { const root = tree(hierarchy); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); //console.log("x0: "+x0+", x1: "+x1); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); //By default, trees are assumed from top to bottom. Since we want from left to right, we use x from the tree for y in the chart and viceversa. const link = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkHorizontal() .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 ? "#555" : "#999") .attr("r", 2.5); node.append("text") .attr("dy", "0.3em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .attr("font-size", d => d.children ? "0.8em" : "0.6em") // .text(d => {console.log(d); return d.data.data[0] || d.data.data["article"] || "Generalitat";}) .text(d => d.data.data[0] || d.data.data["article"] || "Generalitat") .clone(true).lower() .attr("stroke", "white"); return svg.node(); }32:T43b,circlePackingChart = { const root = pack(hierarchy); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif") .attr("text-anchor", "middle"); const shadow = DOM.uid("shadow"); svg.append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("dy", 1); const node = svg.selectAll("g") .data(d3.group(root.descendants(), d => d.height)) .join("g") .attr("filter", shadow) .selectAll("g") .data(d => d[1]) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) node.append("circle") .attr("r", d => d.r) .attr("fill", d => color(d.height)) .call(addTooltip); const leaf = node.filter(d => !d.children); leaf.select("circle") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); return svg.node(); }33:T48c,addTooltip = node => { node.on("mouseover", function(e,d) { if(d.depth != 0){ tooltip.html(tooltipMesage(d)); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible'); }else{ tooltip.style('visibility', 'hidden'); } }) .on('mousemove', function(e) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(e,d) { tooltip .style('visibility', 'hidden') }); return node; }34:[{"id":"449db85b657050a2fbfb59cbe516c202a28e653c687578d9b63a93db2cda14828dbc34d3f59c7b3811f96e2f073a59f044cf9c634b5e08d3ef7a28653b890497","href":"https://static.observableusercontent.com/files/449db85b657050a2fbfb59cbe516c202a28e653c687578d9b63a93db2cda14828dbc34d3f59c7b3811f96e2f073a59f044cf9c634b5e08d3ef7a28653b890497","name":"out@1.csv","type":"text/csv","lastModified":1604909015558.171,"size":1890479},{"id":"a48f6131727b3de6eb072a6a184a6df215e305aa705f6d84d21921a77e34df7da3a3f01d1d9495c3929ae13e5f1423690b29bb66685545c5de855019a0b96372","href":"https://static.observableusercontent.com/files/a48f6131727b3de6eb072a6a184a6df215e305aa705f6d84d21921a77e34df7da3a3f01d1d9495c3929ae13e5f1423690b29bb66685545c5de855019a0b96372","name":"Treemap.PNG","type":"image/png","lastModified":1605135162968.043,"size":148384}] 2f:{"title":"Hierarchical data","cells":[{"id":0,"value":"md`# Hierarchical data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Preparing the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`Several types of data have some kind of hierarchical structure, usually related to some kind of recursive grouping. Also, large organizations typically have a hierarchical structure between their different parts. Today, we will use the [Catalan Government budget](https://analisi.transparenciacatalunya.cat/en/Economia/Pressupostos-aprovats-de-la-Generalitat-de-Catalun/yd9k-7jhw) that also reflects the hierarchical structure of the Government, which is composed of Departments. For each Department, the budget is divided into different Chapters and, within it, they describe each expenditure with the corresponding article description and the total amount (in euros). These data are given in a tabular form.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"CatalanBudget= FileAttachment(\"out@1.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`To simplify the data, we will only take into account the expenditures with an amount greater than the value of the variable minimum_amount.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"minimum_amount = 20000000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"desiredData = CatalanBudget.map(d => {return{\n amount : +d.Amount,\n department : d.Department,\n chapter : d.Chapter,\n article : d.Article};})\n .filter(d => d.amount > minimum_amount);","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`Note that these data aren't grouped on the Departments either on Chapters. We did something similar when we deal with different series of temporal data. In that case, we used the **d3.groups()** function. With the parameters *(input, key1, key2,...)*, this function returns an array that group all the elements that the function *key1, key2,...* return the same *values* from the *input*. We could apply this function to our data and we will get the following:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"groupedDatawithArray= d3.groups(desiredData, d => d.department, d => d.chapter);","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`But to create the hierarchy, D3 needs the structure made from *Maps* instead of *Arrays*. Luckily, there's also the **d3.group()** function that has a similar behavior than **d3.groups()**, but returns the grouped structure in the form of Maps:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"groupedData = d3.group(desiredData, d => d.department, d => d.chapter);","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`This data structure is closer to what we want, but it lacks of a tree structure. This can be achieved using the **d3.hierarchy()** function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"hierarchycount = d3.hierarchy(groupedData);","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"hierarchy = d3.hierarchy(groupedData).sum(d => d.amount);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`The resulting object is composed of *nodes* that have information about its *parent*, *children*, the corresponding value (which is defined as the sum of the amounts of the contained items),... For instance, the value of the *root* node corresponds to the *sum* of amounts of the original data: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"sum = d3.sum(desiredData, d=>d.amount);","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`In the following examples, we will use this form of data, since we will like to show the specific item associated with the budget. But this isn't always the case and sometimes we are only interested in how many items we have in each category or the total amount associated with it. In that case, we can use the **d3.rollup()** function. This function has three parameters: the original *data*, the *reducer* function (which defines how to get the final value), and the *key* functions (which defines how to group the data). This latter parameter is repeated as many times as the number of hierarchy levels (in the same way as the **d3.group()** function). In our case, we could do:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"rollupData = d3.rollup(\n desiredData,\n v => d3.sum(v, d => d.amount),\n d => d.department,\n d => d.chapter\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`From this roll-up structure we can also create a hierarchical tree using the **d3.hierarchy()** function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"rollupHierarchy = d3.hierarchy(rollupData);","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"rollupHierarchywithvalue = d3.hierarchy(rollupData).sum(d=> d[1]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`This excellent [notebook](https://observablehq.com/@d3/d3-group-d3-hierarchy) describes all these functions in more detail.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`Next, different ways to represent these data are shown. All of them will make use of the *hierarchy* data structure that we have previously defined.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`## Tidy Tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`The first example is based on the [Tidy Tree](https://observablehq.com/@d3/tidy-tree) notebook example. D3’s [tree layout](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree) implements the [Reingold–Tilford “tidy” algorithm](http://reingold.co/tidier-drawings.pdf) for constructing hierarchical node-link diagrams, improved to run in linear time by [Buchheim *et al.*](http://dirk.jivas.de/papers/buchheim02improving.pdf) Tidy trees are typically more compact than [cluster dendrograms](/@d3/cluster-dendrogram), which place all leaves at the same level.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"rootexample = tree(hierarchy);","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"tree = data => {\n const root = d3.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":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"md`Note that, in this case, this visualization isn't very compact, since all the branches have the same depth. \n\nSee also other versions of tree charts, such as the [collapsible tree](https://observablehq.com/@d3/collapsible-tree) and the [radial variant](/@d3/radial-tidy-tree).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`## Circle packing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`The previous example shows the relationships between elements based on a path. But there are other ways of showing it, such as enclosing-based techniques. In this case, the children are placed inside a mark that represents the parent on the hierarchy. In this example, we will use circles to represent the different elements on the hierarchy, and the textual information is shown through a tooltip. Note that this chart allows more data items than the previous tidy tree representation, so consider decreasing the *minimum_amount* value on the cell at the beginning of the notebook. Visually, it's much more appealing than the previous example ${emoji.star_struck()}.\n\nThis example is based on the [circle packing](https://observablehq.com/@d3/circle-packing) example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (hierarchy);","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"tooltip = d3.select('body')\n .append('div')\n .attr('id', 'barchart-tooltip')\n .style('position', 'absolute')\n .style('z-index', '1')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('font-size', '14px')\n .style('max-width', '200px')\n .style('border-radius', '4px')\n .style('color', '#fff');","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"tooltipMesage = d =>{\n let msg = '';\n switch(d.depth){\n case 1:\n msg = 'Department: '+d.data[0];\n break;\n case 2:\n msg = 'Chapter: '+d.data[0];\n break;\n case 3:\n msg = 'Department: '+d.data.department+'
'+\n 'Chapter: '+d.data.chapter+'
'+\n 'Article: '+d.data.article+'
'+\n 'Amount: '+format(d.data.amount)+'€';\n break;\n }\n return msg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"color = d3.scaleSequential([8, 0], d3.interpolateMagma)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"format = d3.format(\".3s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`## Daily Task: create a Treemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`Based on the [Treemap](https://observablehq.com/@d3/treemap) example, you have to create a representation of the dataset similar to:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"image = FileAttachment(\"Treemap.PNG\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"treemapChart = {\n //TODO\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"treemap = data => 0; //TODO","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"treemapcolor = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`## General definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = 700;","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"width = 700;","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20});","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"import {emoji} from '@asg017/emojis'","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`- [D3 hierarchy](https://observablehq.com/@d3/d3-group-d3-hierarchy)\n- [Hierarchy Collection](https://observablehq.com/collection/@d3/d3-hierarchy)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}