2e:null 2f:["$","title",null,{"children":"Expanding Voronoi Treemap | Paul Buffa | Observable"}] 34:Tcc0,{ const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.left + margin.right); const background = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll('path') .data(nodes.filter(d => d.depth == 1), d => d.data.key) .join('path') .attr('d', d => "M" + d.polygon.join("L") + "Z") .style('fill', d => colorScale(d.data.key)) const clipPathLookup = {} svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll('clipPath') .data(nodes.filter(d => d.depth == 1), d => d.data.key) .join("clipPath") .attr("id", d => { const uid = DOM.uid("clip") clipPathLookup[d.data.key] = uid return uid.id }) .append("path") .attr('d', d => "M" + d.polygon.join("L") + "Z") const voronoi = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .selectAll('path') .data(nodes.filter(d => d.depth == 2), d => d.data.id) .join('path') .attr('d', d => "M" + d.polygon.join("L") + "Z") .style('fill', d => colorScale(d.data.parent)) .attr("clip-path", d => clipPathLookup[d.data.parent]) .attr("stroke", "#fff") .style("cursor", "pointer") .on("mouseenter", function() { const thisPath = d3.select(this) .classed("selected", true); thisPath.moveToFront() .transition() .attrTween("d", function(d) { const oldPath = thisPath.attr("d") const newPath = slightlyExpand(oldPath) const interpolator = flubber.interpolate(oldPath, newPath); return interpolator }); }) .on("mouseleave", function(d) { const thisPath = d3.select(this) .classed("selected", false) thisPath .transition() .attrTween("d", function(d) { const oldPath = thisPath.attr("d") const newPath = "M" + d.polygon.join("L") + "Z" const interpolator = flubber.interpolate(oldPath, newPath); return interpolator }).on("end", () => { thisPath .attr("clip-path", d => clipPathLookup[d.data.parent]); }) svg.select(".exit") .transition() .style("opacity", 0) }) .on("click", function() { const thisPath = d3.select(this) .classed("selected", true) .attr("clip-path", false) thisPath.moveToFront() .transition() .attrTween("d", function(d) { const oldPath = thisPath.attr("d") const newPath = `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z` const interpolator = flubber.interpolate(oldPath, newPath); return interpolator }); svg.select(".exit") .transition() .delay(100) .style("opacity", 1) }) svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("class", "exit") .style("opacity", 0) .append("text") .attr("transform", `translate(${width - 30}, ${30})`) .text("X") .style("font", "24px sans-serif") return svg.node(); }35:T425,slightlyExpand = (currentPath) => { const points = currentPath.replace("M",'').replace("Z","").split("L") const newPoints = [] let minX = width; let minY = height; let maxX = 0; let maxY = 0; for(let i = 0; i < points.length; i++) { const coord = points[i].split(","); const x = +coord[0]; const y = +coord[1]; if(x > maxX) maxX = x; if(x < minX) minX = x; if(y > maxY) maxY = y; if(y < minY) minY = y; } const w = maxX - minX; const h = maxY - minY; for(let i = 0; i < points.length; i++) { const coord = points[i].split(","); const x = +coord[0]; const y = +coord[1]; const xPerc = (x - minX) / w ; const yPerc = (y - minY) / h; let xOffset = xPerc > .75 ? expandDegree : xPerc < .25 ? -expandDegree : 0; let yOffset = yPerc > .75 ? expandDegree : yPerc < .25 ? -expandDegree : 0; if(x >= width - 5 || x <= 5) xOffset = 0; if(y >= height - 5 || y <= 5) yOffset = 0; newPoints.push(`${x + xOffset},${y + yOffset}`) } return `M ${newPoints.join("L")} Z`; }36:[] 32:{"id":"d6e05f98ae5c0fbf","slug":"expanding-voronoi-treemap","title":"Expanding Voronoi Treemap","thumbnail":"cf106bdcd415260ec868134fbe079b381472c11a850b9e0a43d96c6c2f7e7e65","access_level":"public","create_time":"$D2020-06-30T18:15:20.168Z","update_time":"$D2020-07-06T15:47:21.435Z","view_time":null,"first_public_time":"$D2020-07-01T15:10:29.510Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":"starter_2024"},"version":409,"publish_version":409,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}],"members":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Expanding Voronoi Treemap","cells":[{"id":0,"value":"md`# Expanding Voronoi Treemap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Hover to slightly expand a node, click to fully expand.\n\nThanks, [@Knarf](https://github.com/Kcnarf/d3-voronoi-treemap) for the logic and [@will-r-chase](https://observablehq.com/@will-r-chase/voronoi-treemap) for the observable implementation!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof nNodes = slider({\n min: 1, \n max: 100,\n step: 1,\n value: 50,\n title: 'Number of Nodes'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof nParents = slider({\n min: 1, \n max: 8,\n step: 1,\n value: 3,\n title: 'Number of Categories'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof expandDegree = slider({\n min: 0, \n max: 50,\n step: 1,\n value: 20,\n title: 'Degree of Expansion'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"colorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(root.children.map(d => d.data.key))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"margin = ({top: 10, bottom: 10, left: 10, right: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = window.innerWidth * .85","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"randomData = d3.range(nNodes).map(Object).map((d,i) => {\n return {\n parent: `parent-${Math.round(d3.randomUniform(1, nParents)())}`,\n id: (i + 1),\n value: Math.random()\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"structuredRandomData = nestAndHier(randomData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":" d3.nest()\n .key(d => d.parent)\n .entries(randomData)\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"nestAndHier = (flatData) => {\n const nestedArray = d3.nest()\n .key(d => d.parent)\n .entries(flatData)\n \n const hierarchyObject = {key: \"random_data\", values: nestedArray};\n \n return d3.hierarchy(hierarchyObject, d => d.values).sum(d => d.value)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"voronoiTreeMap = d3.voronoiTreemap()\n .clip([[0,0], [width, 0], [width, height], [0, height]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`Having some fun with this, though probably finding the centroid and bumping up the scale would be far simplier and very similar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"getBBox = (path) => {\n const points = path.replace(\"M\",'').replace(\"Z\",\"\").split(\"L\")\n const newPoints = []\n let minX = width;\n let minY = height;\n let maxX = 0;\n let maxY = 0;\n for(let i = 0; i < points.length; i++) {\n const coord = points[i].split(\",\");\n const x = +coord[0];\n const y = +coord[1];\n if(x > maxX) maxX = x;\n if(x < minX) minX = x;\n if(y > maxY) maxY = y;\n if(y < minY) minY = y;\n }\n const w = maxX - minX;\n const h = maxY - minY;\n \n return {\n x: minX,\n y: minY,\n width: w,\n height: h,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"root = {\n voronoiTreeMap(structuredRandomData)\n return structuredRandomData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"nodes = root.descendants()\n .sort((a, b) => b.depth - a.depth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"flubber = require('flubber')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"d3.selection.prototype.moveToFront = function() {\n return this.each(function(){\n this.parentNode.appendChild(this);\n });}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"