31:T52d,chart = { const root = treemap(data); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("max-width", "620px") .style("height", "auto") .style("font", "20px 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.name).join("/")}\n${format(d.label)}`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .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.name.split(/(?=[A-Z][^A-Z])/g).concat(String(d.data.label.toFixed(1)).concat("¢"))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", 1) .text(d => d); return svg.node(); }32:[] 2f:{"title":"Treemap","cells":[{"id":0,"value":"md`# Treemap\n\nIntroduced by [Ben Shneiderman](http://www.cs.umd.edu/hcil/treemap-history/), treemaps recursively partition space into rectangles according to each node’s associated value. D3 supports several treemap tiling methods. See also [nested](/@d3/nested-treemap) and [animated](/@d3/animated-treemap) treemaps.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof tile = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = d3.json(\"https://raw.githubusercontent.com/greencracker/georgia-budget-2020/master/ga-budget-2020-simplified-for-treemap.json\")\n// data = d3.json(\"http://greencracker.pythonanywhere.com/budget-2020/ga-budget-2020-simplified-for-treemap.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"treemap = data => d3.treemap()\n .tile(d3[tile])\n .size([width, height])\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"height = 1100","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}