30:T4f7,chart = { const root = treemap(data); 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.key).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 color(d.data.name); }) .attr("fill-opacity", 1) .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(format(d.value))) .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", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); return svg.node(); }31:[] 2e:{"title":"DC Treemap","cells":[{"id":0,"value":"md`# DC Treemap`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof input = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"csv = {\n const data = d3.csvParse(await Files.text(input), d3.autoType);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = {\n let nested = d3.nest()\n .key(d => d.DATASET)\n .key(d => d.PROGRAM)\n .key(d => d.TYPE)\n .entries(csv);\n \n let root = {key: \"Buildings\", values: nested};\n \n function rename(node) {\n if (\"GSF\" in node.values[0]) {\n let name = node.key;\n let value = node.values.reduce((acc, d) => acc + d.GSF, 0);\n return {name: name, value: value};\n }\n return {name: node.key, children: node.values.map(d => rename(d))};\n }\n \n return rename(root);\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof tile = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"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":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"color = d => {\n \n let lookup = { \n \"T0\": \"#a8a7ab\", \n \"T1\": \"#8958a4\",\n \"T2\": \"#04a8dc\",\n \"T3\": \"#0c7c3e\",\n \"T4\": \"#559459\",\n \"T5\": \"#f4847b\",\n \"T6\": \"#aa85bd\",\n \"T7\": \"#f59087\",\n \"T8\": \"#c0bec0\",\n \"T9\": \"#f69c93\",\n \"T10\": \"#d3d2d3\",\n \"T11\": \"#f6a9a1\",\n \"T12\": \"#84b280\",\n \"T13\": \"#e8e8e8\",\n \"T14\": \"#f7b6af\",\n \"T15\": \"#d4bcdb\",\n \"T16\": \"#b8ddae\",\n \"T17\": \"#f8da63\",\n \"T18\": \"#8dd1e9\",\n \"T19\": \"#f8c3be\",\n \"T20\": \"#f8d0cd\",\n \"T21\": \"#b65e07\",\n \"T22\": \"#fee8a3\",\n \"T23\": \"#d0f1f4\",\n \"T24\": \"#f99f1b\",\n \"T25\": \"#faaa3b\",\n \"T26\": \"#fcb65b\",\n \"T27\": \"#fdc377\",\n \"T28\": \"#fecf92\",\n \"T29\": \"#fedcae\",\n \"T30\": \"#ffe9cc\"\n }\n \n return lookup[d];\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@v5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}