2f:Tb29,TidyTreechart = { //Create the tree data structure const root = tree(rollupData); //find limits x1 i x0 //populate de maxim and the minimum of the point depending on the number of nodes 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); //build the viewbox //x1 -x0 + root.dx * 2 -> height taking into account the previous maximum and minimum calculated + all the nodes and its separation between them const svg = d3.create("svg") .attr("viewBox", [0, 0, width, x1 -x0 + root.dx * 2]);; // change x and y because we want the tree in vertical, not in horizontal const g = svg.append("g") .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); //create links (lines) 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())//links -> function in the tree function called at the beginning that provides d3 to make linking much simple .join("path") .attr("d", d3.linkHorizontal()//ho volem horitzontal. We create the links .x(d => d.y) .y(d => d.x)); //create the nodes (items) 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})`);//change x - y positions //add a circle to each node //colors are set depending on the childs the nodes have. If they have children the circle color will be "#555" (darker) and if not will be "#999" (lighter). This sentence works as an if condition. node.append("circle") .attr("fill", d => d.children ? "#555" : "#999") .attr("r", 2.5);//radius of the circles //append the text in the nodes. The text is the one will be shown in the structure node.append("text") .attr("dy", "0.3em") .attr("x", d => d.children ? -6 : 6) // if condition for children. If it's true the text will have a margin to the left (-6), if there's no children it will be placed to the right (6) .attr("text-anchor", d => d.children ? "end" : "start") // if condition for children. If it's true the text will be placed ending at the circle (true to childresn, left) or starting at the circle (negative to children, right) .attr("font-size", d => d.children ? "0.8em" : "0.6em") // if condition for children. Depending on true /false the text will have one size or another //d.data -> not sure what this does .text(d => d.data.data[0] || d.data.data["document"] || "Ajuntament") .clone(true).lower()//for the line to not appear when there's text on it .attr("stroke", "white"); return svg.node(); }30:T56c,circlePackingChart = { //the kind we want and the data we will use const root = pack(hierarchy); //create the viewbox const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif") .attr("text-anchor", "middle"); //create the shadow effect 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); //create the nodes (circles + shadow in the hierarchical mode) 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})`) //aquí no cal canviar x per y node.append("circle") .attr("r", d => d.r) //radius computed by the D3 pack module .attr("fill", d => color(d.height)) //color based on the node depth .call(addTooltip); //Add a tooltip for each circle 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(); }31:T4b9,//we want a requadret for each circle (node) 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; }32:[{"id":"89cfc7220ff89f9c77d89bbf4d7abdb248fd11dc1052a2b6f123d5e02546ebade8b5c33640c22814ceed688d88e5da713b8450bf6767e88030eb1056d7768ced","href":"https://static.observableusercontent.com/files/89cfc7220ff89f9c77d89bbf4d7abdb248fd11dc1052a2b6f123d5e02546ebade8b5c33640c22814ceed688d88e5da713b8450bf6767e88030eb1056d7768ced","name":"dades alcanar 2.csv","type":"text/csv","lastModified":1668611615696.305,"size":36344},{"id":"27409f36828273ff38533d31eaba09937812ed3046589f692cdcd12f2633904dcc906e08d2fea5bb30a4ab7001da53a46b42e76199a4077cbec0b471a25a5035","href":"https://static.observableusercontent.com/files/27409f36828273ff38533d31eaba09937812ed3046589f692cdcd12f2633904dcc906e08d2fea5bb30a4ab7001da53a46b42e76199a4077cbec0b471a25a5035","name":"Liquidació del pressupost (econòmic i per programes).csv","type":"text/csv","lastModified":1670784834168.62,"size":116297}] 2d:{"title":"Task of week 6 (10th - 16th November)","cells":[{"id":0,"value":"md`# Task of week 6 (10th - 16th November)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`This week, we have seen different ways to represent hierarchical relationships between elements. First, we have explained how to prepare data to be in the proper form for D3. Then, different techniques have been shown, such as a tidy tree, and circle packing. Please, take your time reading again the notebook presented in this session in case any part wasn't clear at all.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`In this [collection](https://observablehq.com/collection/@d3/d3-hierarchy), there are several basic techniques related to hierarchical data. You can also take a look at these other notebooks:\n- [Tidy tree with a mouseover interaction](https://observablehq.com/@fil/d3-tidy-tree-mouseover)\n- [Navigable nested tree](https://observablehq.com/@git-ashish/navigable-nested-tree)\n- [Voronoi treemap](https://observablehq.com/@will-r-chase/voronoi-treemap)\n- [Tree diagram](https://observablehq.com/@dianaow/tree-diagram)\n- [Dorling cartogram circle packs](https://observablehq.com/@clhenrick/dorling-cartogram-circle-packs)\n- [¿Dónde #nosEstánMatando?](https://observablehq.com/@sarahiaguilar/asesinatos-de-mujeres-en-el-2019/2) (*in spanish*) \n- [Octree color quantization](https://observablehq.com/@tmcw/octree-color-quantization)\n- [NFL plays: interactive sunburst chart](https://observablehq.com/@mikpanko/nfl-plays-sunburst-chart)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"The task of this week will consist of drawing your municipality's budget (if you don't find it in a friendly format, you can use the one used in the class or any other dataset that can be represented as hierarchical data). Then, you will have to show it using the Circle Packing representation. If you achieve this, try to represent the dataset using other representations as [Treemaps](https://observablehq.com/@d3/treemap) or [Icicle](https://observablehq.com/@d3/icicle) plots.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"dadesAlcanar2 = FileAttachment(\"dades alcanar 2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"desiredData = dadesAlcanar2.map(d => {\n return {\n any: d.ANY,\n document: d.NOM_DOCUMENT,\n estructura: d.DESC_ESTRUCTURA,\n import: d.IMPORT,\n eur_habitant: d.EUROS_HABITANT,\n codiDoc: d.CODI_DOCUMENT,\n codiEstructura: d.CODI_ESTRUCTURA,\n codiEns: d.CODI_ENS\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"//grouping data for each \"bigger\" to \"smallest\" categorical data\ngroupedData= d3.group(desiredData, d => d.document, d => d.estructura);","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"arbre = d3.hierarchy(groupedData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"//imports summed up by groups\n//The hierarchy function creates a property named value to store the sum of children (in your case the sum of the import property).\nhierarchy = d3.hierarchy(groupedData).sum(d => d.import);","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"//Sum up of the improts for each document/structure (two variables)\n//it makes the hierarchy + summing up all the numercial values in the var you put in d3.sum\nrolldata = d3.rollup(\n desiredData,\n v => d3.sum(v, d => d.import),\n d => d.document,\n d => d.estructura\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"rollupData = d3.hierarchy(rolldata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"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}\n//based on a given data it creates a tree call based on this data. It helps in creating nodes and links between data","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"# 2. Circle Representation","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":" //lo requadret en dades que apareix\n tooltip = d3.select('body') \n .append('div')\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('border-radius', '4px')\n .style('color', '#fff');","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"//Message in the tooltip\ntooltipMesage = d =>{\n let msg = '';\n switch(d.depth){\n case 1:\n msg = 'Department: ' + d.data[0] +'
' + \n 'Amount: ' + format(d.value) +'€';;\n break;\n case 2:\n console.log(d);\n msg = 'Program: ' + d.data[0] +'
' + \n 'Amount: ' + format(d.value) +'€';\n;\n break;\n case 3:\n msg = 'Department: '+d.data.document +'
'+\n 'Program: '+d.data.estructura +'
'+\n 'Amount: '+format(d.data.import)+'€';//pending to do the NaN values\n break;\n }\n return msg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (hierarchy);","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"color = d3.scaleSequential([8, 0], d3.interpolateMagma)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"format = d3.format(\".3s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"

Treemap with rollup

","pinned":false,"hidden":false,"mode":"html"},{"id":192,"value":"liquidacioPressuposts = FileAttachment(\"Liquidació del pressupost (econòmic i per programes).csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"filteredData = liquidacioPressuposts.filter(d => d.ANY_EXERCICI === \"2021\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"mapData = liquidacioPressuposts.map(d => ({\n departament: d.DESCRIPCIO,\n nivell: d.NIVELL,\n amount: +d.IMPORT_REC_PAG,\n import_obl: +d.IMPORT_DRET_OBLIG,\n import_cred: +d.IMPORT_PREV_CRED\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"rolledData = d3.rollup(mapData, v => d3.sum(v, d => d.import_obl), d => d.departament, d => d.nivell)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}