2f:T412,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 nodes (circles in the hierarchical mode) const node = svg.selectAll("g") .data(d3.group(root.descendants(), d => d.height)) .join("g") .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(); }30:T4a1,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; }31:[] 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":35,"value":"## Answer to task starts here","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"The chosen dataset was about the provinces, cities, municipalities and barangays in the Philippines. Great example for a hierarchical data because it is deeply nested as well.","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"data = fetch(\"https://raw.githubusercontent.com/flores-jacob/philippine-regions-provinces-cities-municipalities-barangays/master/philippine_provinces_cities_municipalities_and_barangays_2019v2.json\").then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"Structure of data nesting:\n- Region\n- -Province\n- --Municipality\n- ---Barangay","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"Tally the data by counting the number of barangays and municipalities per provinces so we can only get three layers of nesting, the region, province and municipality.","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"tallyData = Object.entries(data).map(r => {\n const [, region] = r\n const [[, regionName], [, provinces]] = Object.entries(region)\n const provincesTally = Object.entries(provinces).map(p => {\n const [province, {municipality_list}] = p\n const municipalityCount = Object.entries(municipality_list).length\n const municipalityTally = Object.entries(municipality_list).map(m => {\n const [municipality, {barangay_list}] = m\n const barangayCount = Object.entries(barangay_list).length\n const barangaysList = Object.entries(barangay_list).map(b => b[1])\n return {municipality, barangayCount, barangaysList}\n })\n return {province, municipalityCount, municipalityTally}\n })\n return [regionName, provincesTally]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"tidyData = tallyData.flatMap(r => {\n const [region, provincesObj] = r\n return provincesObj.flatMap(p => {\n const { province, municipalityCount, municipalityTally } = p\n return municipalityTally.flatMap(m => {\n const { municipality, barangayCount, barangaysList } = m\n return {\n barangayCount,\n municipality,\n municipalityCount,\n province,\n region\n }\n })\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"groupedData = d3.group(tidyData, d => d.region, d => d.province, d => d.municipality)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"hierarchy = d3.hierarchy(groupedData).sum(d => d.barangayCount);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"rollupData = d3.rollup(\n tidyData,\n v => d3.sum(v, d => d.barangayCount),\n d => d.region,\n d => d.province,\n d => d.municipality\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"rollupHierarchy = d3.hierarchy(rollupData);","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"tooltipMesage = d => {\n let msg = '';\n switch(d.depth){\n case 1:\n msg = `Region: ${d.data[0]}
\n Province count: ${d.children.length}`\n break;\n case 2:\n msg = `Province: ${d.data[0]}
\n Municipality count: ${d.children.length}
\n Region: ${d.parent.data[0]}`;\n break;\n case 3:\n msg = `Municipality: ${d.data[0]}
\n Province: ${d.parent.data[0]}
\n Region: ${d.parent.parent.data[0]}
\n Barangay count: ${d.data[1][0].barangayCount}`;\n break;\n case 4: \n msg = `Municipality: ${d.data[0]}
\n Province: ${d.parent.data[0]}
\n Region: ${d.parent.parent.data[0]}
\n Barangay count: ${d.data[1][0].barangayCount}`;\n break;\n default: break;\n }\n\n return msg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"format = d3.format(\".3s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"pack = data => d3.pack()\n .size([width - 2, height - 2])\n .padding(3)\n (hierarchy);","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"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":150,"value":"color = d3.scaleSequential([8, 0], d3.interpolateGnBu)","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"width= 700","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}