30:T477,chart = { const root = treemap(data); const context = DOM.context2d(width, height) const leaves = root.leaves(); const getColor = (d) => { while (d.depth > 1) d = d.parent; return color(d.data.name); } leaves.forEach(leaf => { context.save(); // For clipping the text context.globalAlpha = 0.7; context.beginPath(); context.rect( leaf.x0, // x leaf.y0, // y leaf.x1 - leaf.x0, // width leaf.y1 - leaf.y0 // height ) context.fillStyle = getColor(leaf) context.fill(); context.clip(); // Generate the Clip Path context.font = "10px sans-serif"; const textData = leaf.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(leaf.value)); context.globalAlpha = 1; textData.forEach((d, i, nodes) => { let offsetY = 12; // Some simple logic to set the y of the text if(i > 0) { offsetY += i * 12 } context.fillStyle = "black"; context.fillText(d, leaf.x0, leaf.y0 + offsetY) }); context.restore(); // Restore so you can continue drawing }) return context.canvas; }31:T678,canvasTreemap = (width, height, data, textKey, customTreemap = false, customColor = false) => { let treemap; if(!customTreemap) { treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true)(d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value)); } else { treemap = customTreemap; } const root = treemap(data); const context = DOM.context2d(width, height) const leaves = root.leaves(); leaves.forEach(leaf => { context.save(); // For clipping the text context.globalAlpha = 0.7; context.beginPath(); context.rect( leaf.x0, // x leaf.y0, // y leaf.x1 - leaf.x0, // width leaf.y1 - leaf.y0 // height ) if(customColor) { const getColor = (d) => { while (d.depth > 1) d = d.parent; return color(d.data.name); } context.fillStyle = getColor(leaf) context.fill(); } else { context.fillStyle = "lightgray" context.fill(); } context.clip(); // Generate the Clip Path context.font = "10px sans-serif"; const textData = leaf.data[textKey].split(/(?=[A-Z][^A-Z])/g).concat(format(leaf.value)); context.globalAlpha = 1; textData.forEach((d, i, nodes) => { let offsetY = 12; // Some simple logic to set the y of the text if(i > 0) { offsetY += i * 12 } context.fillStyle = "black"; context.fillText(d, leaf.x0, leaf.y0 + offsetY) }); context.restore(); // Restore so you can continue drawing }) return context.canvas; }32:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1572884573156.85,"size":11634}] 2e:{"title":"Canvas Treemap","cells":[{"id":0,"value":"md`# Canvas Treemap\n\nImplementation of D3 team's Treemap notebook, using Canvas instead of SVG. This is helpful if you're trying to create a very large treemap.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof tile = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`There is (or at least, I couldn't find) a canvas alternative to an SVG title tag, so this version does not have that. If you want similar functionality, just set up a hover over effect.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = FileAttachment(\"flare-2.json\").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 = 1060","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"},{"id":206,"value":"md`## Easy to Import Function`","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}