2b:null 2c:["$","title",null,{"children":"Hierarchical data - Daily solution | antonbardera | Observable"}] 31:T5a1,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; }); 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})`); 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.31em") .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 => d.data.data[0] || d.data.data["article"] || "Generalitat") .clone(true).lower() .attr("stroke", "white"); return svg.node(); }32:T455,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 + 1},${d.y + 1})`); 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:T55b,treemapChart = { const root = treemap(hierarchy); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data[0] || d.data["article"]).join("/")}\n${format(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 treemapcolor(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["article"].split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.data["amount"])+"€")) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("font-size", "0.7em") .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); return svg.node(); }35:[{"id":"449db85b657050a2fbfb59cbe516c202a28e653c687578d9b63a93db2cda14828dbc34d3f59c7b3811f96e2f073a59f044cf9c634b5e08d3ef7a28653b890497","href":"https://static.observableusercontent.com/files/449db85b657050a2fbfb59cbe516c202a28e653c687578d9b63a93db2cda14828dbc34d3f59c7b3811f96e2f073a59f044cf9c634b5e08d3ef7a28653b890497","name":"out@1.csv","type":"text/csv","lastModified":1605134926772.721,"size":1890479}] 2f:{"id":"750cfc71a5de7a63","slug":"hierarchical-data-daily-solution","title":"Hierarchical data - Daily solution","thumbnail":"bdf4bc80586f0b0b0418a44d8b2f7b205b99664f7c92dd9e7c0e88f8cd8954a4","access_level":"public","create_time":"$D2020-11-11T22:48:46.772Z","update_time":"$D2020-11-12T19:02:14.575Z","view_time":null,"first_public_time":"$D2020-11-12T19:08:07.933Z","fork":{"id":"610b53841bc7a631","slug":"hierarchical-data","title":"Hierarchical data","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc63de81f2766bde","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":"starter_2024"},"version":263,"publish_version":263,"role":null,"authored":false,"authors":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}],"members":[{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"969379b9e1ec7a72","slug":"mvtec-dataviz-programming-course","title":"2020-21 MVTEC Dataviz programming course","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"type":"notebook","body":{"title":"Hierarchical data - Daily solution","cells":[{"id":0,"value":"md`# Hierarchical data - Daily solution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## Preliminary definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"CatalanBudget= FileAttachment(\"out@1.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"minimum_amount = 20000000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":16,"value":"groupedData = d3.group(desiredData, d => d.department, d => d.chapter);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"hierarchy = d3.hierarchy(groupedData).sum(d => d.amount);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"sum = d3.sum(desiredData, d=>d.amount);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (hierarchy);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"md`## Tidy Tree`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"md`Based on the [Tidy Tree](https://observablehq.com/@d3/tidy-tree) example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":146,"value":"md`## Circle packing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"md`Based on the [circle packing](https://observablehq.com/@d3/circle-packing) example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":46,"value":"color = d3.scaleSequential([8, 0], d3.interpolateMagma)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"format = d3.format(\".3s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`## Treemap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"md`Based on the [Treemap](https://observablehq.com/@d3/treemap) example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"treemap = data => d3.treemap()\n .tile(d3.treemapSquarify)\n .size([width, height])\n .padding(1)\n .round(true)\n (hierarchy)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"treemapcolor = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"md`## General definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"height = 700;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"width = 700;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"