3e:null 3f:["$","title",null,{"children":"Task of week 6 (10th - 16th November) | pere roca ristol | Observable"}] 45: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; }46:T514,circlePackingChart = { const root = pack(hierarchy); //console.log(root) 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})`) 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(); }47:T8a8,treemapChart = { const height = 700; //Create the treemap data structure const treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true) (hierarchy); const root = treemap(hierarchy); //Create the SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); //Create a group for each leave node const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); //Format defines how the numbers have to be shown const format = d3.format(".3s"); //The title consists of the names of the hierarchy and the amount //It's a "cheap" way of having a tooltip-like information -> but depends on the browser leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data[0] || d.data["article"]).join("/")}\n${format(d.value)}€`); //Color scale const treemapcolor = d3.scaleOrdinal(d3.schemeCategory10); //Append a rect for each leave //a id is needed for later define the cliping and the text 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); //Clip path is used to don't overflow the rect with the text leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); //We add the informative text to each leave leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data["Text_Politica"].split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.data["CREDIT_DEFINITIU"])+"€")) .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(); }48:[{"id":"496442f10fc62922f7cbad522367b6b7dadf03c2d5816d012731ef6364e0a998aa14dc59d52a5609594479527ece6b2ba5a1c6306c22177764b0f254ad36a330","href":"https://static.observableusercontent.com/files/496442f10fc62922f7cbad522367b6b7dadf03c2d5816d012731ef6364e0a998aa14dc59d52a5609594479527ece6b2ba5a1c6306c22177764b0f254ad36a330","name":"2020_base-de-dades-despeses-pressupost.csv","type":"text/csv","lastModified":1668527368789.814,"size":2456604}] 43:{"id":"ef1982f8018185fa","slug":null,"title":"Task of week 6 (10th - 16th November)","thumbnail":"507e8f978ec27dbdf8a7987ee77a770f60871fa430feca85262bbc64a4d39362","access_level":"public","create_time":"$D2022-11-15T15:48:42.230Z","update_time":"$D2022-11-17T14:51:20.899Z","view_time":null,"first_public_time":"$D2022-11-17T14:39:40.082Z","has_unpublished_edits":null,"fork":{"id":"571716ab8087d830","slug":null,"title":"Task of week 6 (10th - 16th November)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"c5215dd716ed8e17","login":"perikut","name":"pere roca ristol","avatar_url":"https://avatars-next.observableusercontent.com/56ba36bd2e20eeb52df640d17ea1083f66526c5beef466fdb3f528cc3ea0e0e0","tier":"starter_2024","bio":"","following":false},"version":98,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f5f56b36d10ccd0b","login":"perikut","name":"pere roca ristol","avatar_url":"https://avatars-next.observableusercontent.com/56ba36bd2e20eeb52df640d17ea1083f66526c5beef466fdb3f528cc3ea0e0e0","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f5f56b36d10ccd0b","login":"perikut","name":"pere roca ristol","avatar_url":"https://avatars-next.observableusercontent.com/56ba36bd2e20eeb52df640d17ea1083f66526c5beef466fdb3f528cc3ea0e0e0","tier":null,"role":"editor"}],"comments":[{"id":"d5c99f3d561a2e3b","reply_to_id":null,"content":"Good job, but maybe less level of detail could improve the visualization.","create_time":"$D2022-11-23T14:49:13.945Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}},{"id":"2d3070d6feac7baa","reply_to_id":null,"content":"The tooltip doesn't show correctly the data values. Check what's on d[0] for each depth level.","create_time":"$D2022-11-23T14:51:44.050Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"_baseDeDadesDespesesPressupost = await FileAttachment(\"2020_base-de-dades-despeses-pressupost.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_baseDeDadesDespesesPressupost","database":"$undefined"},{"id":44,"value":"_baseDeDadesDespesesPressupost\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"groupedData = d3.group(_baseDeDadesDespesesPressupost, d => d.Text_Capitol, d => d.Text_Politica);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"height = 700\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"color = d3.scaleSequential([8, 0], d3.interpolateMagma)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"format = d3.format(\".3s\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"tooltipMesage = d =>{\n let msg = '';\n console.log(d)\n switch(d.depth){\n case 1:\n msg = 'Capítol: ' + d.data[0] +'
' + \n 'Amount: ' + format(d.value) +'€';\n break;\n case 2:\n msg = 'Capítol: ' + d.data[0] +'
' + \n 'Política: ' + d.data['Text_Politica'] +'
' + \n 'Amount: ' + format(d.value) +'€';\n;\n break;\n case 3:\n msg = 'Capítol: ' + d.data[0] +'
' + \n 'Política: ' + d.data['Text_Politica'] +'
' + \n 'Concepte: ' + d.data['Text_Concepte'] +'
' + \n \n \n \n 'Amount: '+format(d.data.CREDIT_DEFINITIU)+'€';\n break;\n }\n return msg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"hierarchy = d3.hierarchy(groupedData).sum(d => d.CREDIT_DEFINITIU);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (hierarchy);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"