29:null 2a:["$","title",null,{"children":"voronoi treemap with seed | Beatriz Martínez | Observable"}] 2f:Tcd4,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. let seed = new Math.seedrandom(20); const _voronoiTreemap = d3.voronoiTreemap() .prng(seed) let hierarchy; let circlingPolygon; // end: treemap conf. initData() initLayout(data) hierarchy = d3.hierarchy(data).sum(d => d.weight); _voronoiTreemap .clip([[0,0], [width, 0], [width, height], [0, height]]) (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:[] 2d:{"id":"cb556f8d2e6b2f33","slug":null,"title":"voronoi treemap with seed","thumbnail":"e8554a2119f7ae6d82fbbe1ab5afe7f626cf0ba30fe160f68a89887b1972d1a2","access_level":"public","create_time":"$D2023-11-21T12:04:02.324Z","update_time":"$D2024-10-07T16:24:49.439Z","view_time":null,"first_public_time":"$D2023-11-21T12:04:02.324Z","fork":{"id":"66ba91e642044a72","slug":null,"title":"voronoi treemap","owner":{"id":"008f123a7234eb35","login":"yuqing","name":"vizqing"}},"stars":0,"starred":false,"owner":{"type":"team","id":"24df172f750e2226","login":"maritrinez","name":"Beatriz Martínez","avatar_url":"https://avatars-next.observableusercontent.com/203873aa26b99a1ec4a48a781f51932dc306228c9f73b383ada133c6f2f181b7","tier":"starter_2024"},"version":195,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8655f512d4072d08","login":"maritrinez","name":"Beatriz Martínez","avatar_url":"https://avatars-next.observableusercontent.com/203873aa26b99a1ec4a48a781f51932dc306228c9f73b383ada133c6f2f181b7","tier":null}],"members":[{"type":"individual","id":"8655f512d4072d08","login":"maritrinez","name":"Beatriz Martínez","avatar_url":"https://avatars-next.observableusercontent.com/203873aa26b99a1ec4a48a781f51932dc306228c9f73b383ada133c6f2f181b7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"voronoi treemap with seed","cells":[{"id":0,"value":"# voronoi treemap with seed\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":false,"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([0, 100], {label: \"África del Norte\", step: 0.1, value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof group_2 = Inputs.range([0, 100], {label: \"África Subsahariana\", step: 0.1, value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof group_3 = Inputs.range([0, 100], {label: \"Europa Occidental\", step: 0.1, value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof group_4 = Inputs.range([0, 100], {label: \"Europa del Este\", step: 0.1, value: 20})","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': 'África del Norte',\n 'color': '#fcb315',\n 'children': [\n { 'name': 'África del Norte', 'weight': group_1, 'code': '--' }\n ]\n },\n {\n 'name': 'África Subsahariana',\n 'color': '#00939b',\n 'children': [\n { 'name': 'África Subsahariana', 'weight': group_2, 'code': '--' }\n ]\n },\n {\n 'name': 'Europa Occidental',\n 'color': '#40456a',\n 'children': [\n { 'name': 'Europa Occidental', 'weight': group_3, 'code': '--' }\n ]\n },\n {\n 'name': 'Europa del Este',\n 'color': '#40456a',\n 'children': [\n { 'name': 'Europa del Este', 'weight': group_4, '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\", 'seedrandom@2.4.3/seedrandom.min.js')","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"