30:Tc7d,function voronoiTreemap (data, { bind = null, // pass in a d3 selection i.e d3.select('class/div') width = 500, height = 500, margin = { top: 10, right: 10, bottom: 10, left: 10 }, treemapRadius = 205, treemapCenter = [width / 2, height / 2], } = {}) { // set the dimensions and margins of the graph const w = width + margin.left + margin.right; const h = height + margin.top + margin.bottom; bind.selectAll('svg').remove(); const svg = bind.append('svg') .attr('width', w) .attr('height', h) .append('g') .attr('transform', `translate(${margin.left},${margin.top})`); // begin: constants const _2PI = 2 * Math.PI; // end: layout conf. const formatThousands = d3.format(',d'); // begin: treemap conf. const _voronoiTreemap = d3.voronoiTreemap(); let hierarchy; let circlingPolygon; // end: treemap conf. initData() initLayout(data) hierarchy = d3.hierarchy(data).sum(d => d.weight); _voronoiTreemap .clip(circlingPolygon) (hierarchy); drawTreemap(hierarchy); function initData (rootData) { circlingPolygon = computeCirclingPolygon(treemapRadius); } function computeCirclingPolygon (radius) { let points = 60; let increment = _2PI / points; let circlingPolygon = []; for (let a = 0, i = 0; i < points; i++, a += increment) { circlingPolygon.push( [radius + radius * Math.cos(a), radius + radius * Math.sin(a)] ) } return circlingPolygon; }; function initLayout (rootData) { const drawingArea = svg.append('g') .classed('drawingArea', true) .attr('transform', 'translate(' + [margin.left, margin.top] + ')'); const treemapContainer = drawingArea.append('g') .classed('treemap-container', true) .attr('transform', 'translate(' + treemapCenter + ')'); treemapContainer.append('path') .classed('world', false) .attr('transform', 'translate(' + [-treemapRadius, -treemapRadius] + ')') .attr('d', 'M' + circlingPolygon.join(',') + 'Z'); } function drawTreemap (hierarchy) { const leaves = hierarchy.leaves(); const _treemapContainer = svg.select('g.treemap-container'); console.log('_treemapContainer', _treemapContainer); const cells = _treemapContainer.append('g') .classed('cells', true) .attr('transform', 'translate(' + [-treemapRadius, -treemapRadius] + ')') .selectAll('path.cell') .data(leaves) .join('path') .classed('cell', true) .attr('d', d => 'M' + d.polygon.join(',') + 'z') .attr('fill', d => d.parent.data.color); const labels = _treemapContainer.append('g') .classed('labels', true) .attr('transform', 'translate(' + [-treemapRadius, -treemapRadius] + ')') .selectAll('.label') .data(leaves) .join('g') .classed('label', true) .attr('transform', d => 'translate(' + [d.polygon.site.x, d.polygon.site.y] + ')'); labels.append('text') .classed('name', true) .html(d => (d.data.weight < 1) ? d.data.code : d.data.name); labels.append('text') .classed('value', true) .text(d => formatThousands(d.data.weight)); } return svg.node(); }31:[] 2e:{"title":"voronoi treemap","cells":[{"id":0,"value":"# voronoi treemap\n\n[d3-voronoi-map](https://github.com/Kcnarf/d3-voronoi-treemap) that can potentially have its size/area as an additional dimension (e.g. a bubble chart)— made into a reusable function for ease of application","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"vis = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"voronoiTreemap(data, {\n bind: d3.select(vis),\n treemapRadius: 250\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof group_1 = Inputs.range([500, 5000], {label: \"Amount group 1:\", step: 10, value: 600})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof group_2 = Inputs.range([500, 5000], {label: \"Amount group 2:\", step: 10, value: 800\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof group_3 = Inputs.range([500, 5000], {label: \"Amount group 3.1:\", step: 10, value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof group_4 = Inputs.range([500, 5000], {label: \"Amount group 3.2:\", step: 10, value: 4000})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"viewof group_5 = Inputs.range([500, 5000], {label: \"Amount group 3.3:\", step: 10, value: 900})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"vis2 = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"voronoiTreemap(data2, {\n bind: d3.select(vis2),\n treemapRadius: 250\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"-------------\n## Reusable function/code:","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"-------------\n## Dummy data:","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"data = {\n return {\n 'name': 'groups',\n 'children': [\n {\n 'name': 'GROUP-1',\n 'color': '#fcb315',\n 'children': [\n { 'name': 'GROUP-1', 'weight': group_1, 'code': '--' }\n ]\n },\n {\n 'name': 'GROUP-2',\n 'color': '#00939b',\n 'children': [\n { 'name': 'GROUP-2', 'weight': group_2, 'code': '--' }\n ]\n },\n {\n 'name': 'GROUP-3',\n 'color': '#40456a',\n 'children': [\n { 'name': 'GROUP-3.1', 'weight': group_3, 'code': '--' }\n ]\n },\n {\n 'name': 'GROUP-4',\n 'color': '#40456a',\n 'children': [\n { 'name': 'GROUP-3.2', 'weight': group_4, 'code': '--' }\n ]\n },\n {\n 'name': 'GROUP-5',\n 'color': '#40456a',\n 'children': [\n { 'name': 'GROUP-3.3', 'weight': group_5, 'code': '--' }\n ]\n }\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"data2 = {\n return {\n 'name': 'groups',\n 'children': [\n {\n 'name': 'GROUP-1',\n 'color': '#fcb315',\n 'children': [\n { 'name': 'GROUP-1', 'weight': group_1, 'code': '--' }\n ]\n },\n {\n 'name': 'GROUP-2',\n 'color': '#00939b',\n 'children': [\n { 'name': 'GROUP-2', 'weight': group_2, 'code': '--' }\n ]\n },\n {\n 'name': 'GROUP-3',\n 'color': '#40456a',\n 'children': [\n { 'name': 'GROUP-3.1', 'weight': group_3, 'code': '--' }\n ]\n }\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"------------\n## Libraries: ","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"d3 = require(\"d3@6\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"--------\n# CSS:\n","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"

\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}