29:null 2a:["$","title",null,{"children":"voronoi treemap | vizqing | Observable"}] 2f: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(); }30:[{"id":"ddf30560def3f263f7dd8de6cf4f2af68fee01222400188aee3176b46619afbdc7faf7bc53a365871b00f326d67dec61d8380ac69f32bf37d00906ea2b973404","href":"https://static.observableusercontent.com/files/ddf30560def3f263f7dd8de6cf4f2af68fee01222400188aee3176b46619afbdc7faf7bc53a365871b00f326d67dec61d8380ac69f32bf37d00906ea2b973404","name":"asiangroup.csv","type":"text/csv","lastModified":1695074657554.429,"size":443}] 2d:{"id":"66ba91e642044a72","slug":null,"title":"voronoi treemap","thumbnail":"4a08aea20e97147bc1d1acd151b07e4def2459447ac8b32b75efa9938716e21c","access_level":"public","create_time":"$D2023-09-18T22:03:47.299Z","update_time":"$D2023-09-18T22:04:27.797Z","view_time":null,"first_public_time":"$D2023-09-18T22:03:47.299Z","fork":{"id":"c85de5fa5035cbc8","slug":"voronoi-treemap","title":"voronoi treemap","owner":{"id":"956970941b62fd35","login":"eesur","name":"Sundar Singh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"008f123a7234eb35","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":"starter_2024"},"version":172,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ef2ab2a685fd836","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":null}],"members":[{"type":"individual","id":"3ef2ab2a685fd836","login":"yuqing","name":"vizqing","avatar_url":"https://avatars-next.observableusercontent.com/0a51e26a870fdce2fa5f3ddc3b4b9d3ef9c72cdee2a0337d4aecd07c2e2d0963","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"vis = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"voronoiTreemap(data, {\n bind: d3.select(vis),\n treemapRadius: 250\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof group_1 = Inputs.range([500, 5000], {label: \"Amount group 1:\", step: 10, value: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"vis2 = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"voronoiTreemap(data2, {\n bind: d3.select(vis2),\n treemapRadius: 250\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"-------------\n## Reusable function/code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"-------------\n## Dummy data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"------------\n## Libraries: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"--------\n# CSS:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"

\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"