31:T4ac,chart = { const svg = d3.select(DOM.svg(width, height)) .style("fill","white") const renderCell = (d) => { return d == null ? null : "M" + d.join("L") + "Z"; } var points = [] for (var x in grid) { if (grid.hasOwnProperty(x)) { for (var y in grid[x]) { if (grid[x].hasOwnProperty(y)) { var point = cell2point(x,y, gridType) if (grid[x][y].hasOwnProperty("fill")) { point.fill = grid[x][y].fill point.stroke = "black" } points.push(point) } } } } var circle = svg.selectAll("g") .data(points) .enter().append("g") var cell = circle.append("path") .data(voronoi.polygons(points).filter(d => d.data.hasOwnProperty("fill"))) //.style("stroke", "#cccccc") .attr("d", renderCell) .attr("id", function(d, i) { return "cell-" + i; }) .style("fill", function(d) { if (d.data.hasOwnProperty("fill")) { return d.data.fill; } }) .style("stroke", function(d) { if (d.data.hasOwnProperty("stroke")) { return d.data.stroke; } }) return svg.node(); }32:[] 2f:{"title":"Voronoi representation of a grid cartogram (Bolivia departments)","cells":[{"id":0,"value":"md`# Voronoi representation of a grid cartogram (Bolivia departments)\n\nReferences:\n\n- https://beta.observablehq.com/@severo/hello-geo2rect-for-bolivia\n- https://beta.observablehq.com/@pepf/simple-voronoi\n- https://github.com/d3/d3-voronoi\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof gridType = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"function cell2point(x, y, type) {\n var xx = 0\n var yy = 0\n \n switch (type) {\n case \"squ\":\n xx = x*100\n yy = y*100\n break;\n case \"vhex\":\n xx = x*100\n yy = y * 86.6\n if (y % 2) {\n xx += 50\n }\n break;\n case \"hhex\":\n yy = y*100\n xx = x * 86.6\n if (x % 2) {\n yy += 50\n }\n break;\n case \"fil\":\n xx = x*100 + (y == 0 ? 1 : !(y % 2) ? -1 : y == 3 ? -2 : 0) * 25 * (1 + Math.cos(now/500))\n yy = y * (100 - 6.66 * (1 + Math.cos(now/500)))\n break;\n }\n \n return {\n x: xx,\n y: yy\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"boliviaPoints = {\n const points =\n [\n {x:2,y:1, COD_DEP:8},\n {x:3,y:3, COD_DEP:1},\n {x:2,y:2, COD_DEP:3},\n {x:1,y:2, COD_DEP:2},\n {x:2,y:3, COD_DEP:4},\n {x:1,y:1, COD_DEP:9},\n {x:1,y:4, COD_DEP:5},\n {x:3,y:2, COD_DEP:7},\n {x:4,y:3, COD_DEP:6}\n ]\n\n const colours = d3.interpolateViridis;\n points.forEach(function(p) {\n p.fill = colours(p.COD_DEP/9)\n return p;\n })\n \n return points\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"grid = {\n const defaultCell = {color:\"white\"}\n const grid = d3.range(6).reduce(function(obj, arrValue) {\n return (\n obj[arrValue] = Object.assign(\n {},\n d3.range(6).reduce(function(obj, arrValue) {\n return (\n obj[arrValue] = Object.assign(\n {},\n defaultCell\n ),\n obj\n )\n }, {})\n ),\n obj)\n }, {})\n // Uncomment to verify that only one cell is modified\n // grid[0][3][\"color\"]=\"black\"\n \n boliviaPoints.forEach(function(p) {\n grid[p.x][p.y].fill = p.fill\n })\n \n return grid\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"voronoi = d3.voronoi()\n .x(function(d) { return d.x; })\n .y(function(d) { return d.y; })\n .extent([[-1, -1], [width + 1, height + 1]])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}