2f:T442,non_fdgChart = measurePerformance("Non-force-directed beeswarm", () => { const svg = d3.create("svg").attr("height", height).attr("width", width); const axis = svg.append("g"); axis .call(d3.axisTop(xScale).tickSize(height * 0.9)) .attr("class", "x-axis") .style("transform", `translateY(${height * 0.95}px`); const chart = svg.append("g"); chart .selectAll("circle") .data(beeswarmPositions) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y + height * 0.5) .attr("r", (d) => rScale(d.datum.population)) .style("fill", (d) => colorScale[metric.value](d.datum[column])) .style("stroke", (d) => chroma(colorScale[metric.value](d.datum[column])).darken().hex() ); const labels = svg.append("g"); labels .selectAll("text") .data(beeswarmPositions.filter((d) => d.datum.population > 120e6)) .join("text") .attr("x", (d) => d.x) .attr("y", (d) => d.y + height * 0.5 + 5) .attr("text-anchor", "middle") .attr("class", "labels") .text((d) => d.datum.name); return svg.node(); })30:T5da,fdgChart = measurePerformance("d3-force beeswarm", () => { const svg = d3.create("svg").attr("height", height).attr("width", width); const max_pop = d3.max(data, (d) => d.population); const force = d3 .forceSimulation(data) .force("forceX", d3.forceX((d) => fdg_xScale(d[fdgColumn])).strength(2)) .force("forceY", d3.forceY(height / 2).strength(0.1)) .force( "collide", d3.forceCollide((d) => fdg_rScale(d.population)) ) .stop(); const iterations = 300; for (let i = 0; i < iterations; ++i) { force.tick(); } force.stop(); const axis = svg.append("g"); axis .append("g") .call(d3.axisTop(fdg_xScale).tickSize(height * 0.9)) .attr("class", "x-axis") .style("transform", `translateY(${height * 0.95}px`); const chart = svg.append("g"); chart .selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => fdg_rScale(d.population)) .style("fill", (d) => colorScale[metric.value](d[fdgColumn])) .style("stroke", (d) => chroma(colorScale[metric.value](d[fdgColumn])).darken().hex() ); const labels = svg.append("g"); labels .selectAll("text") .data(data.filter((d) => d.population > 120e6)) .enter() .append("text") .attr("x", (d) => d.x) .attr("y", (d) => d.y + 5) .attr("text-anchor", "middle") .attr("class", "labels") .text((d) => d.name); return svg.node(); })31:Tc2c,class AccurateBeeswarm { constructor( items, rScale, xScale, randomness1 = 0, randomness2 = 0, seed = 1 ) { this.rScale = rScale; this.xScale = xScale; this.randomness1 = randomness1; this.randomness2 = randomness2; this.tieBreakFn = this._sfc32(seed); this.rng = this._sfc32(seed); this.items = items.map((d, i) => ({ datum: d, originalIndex: i, x: this.xScale(d), y: null, placed: false, radius: this.rScale(d), tieBreaker: this.tieBreakFn(this.xScale(d)) })); this.maxR = Math.max(...this.items.map((d) => d.radius)); this.items.sort((a, b) => a.x - b.x); this.items.forEach((d, i) => { d.index = i; }); } calculateYPositions() { let allSortedByPriority = [...this.items].sort((a, b) => { let key_a = a.radius + a.tieBreaker * this.randomness1; let key_b = b.radius + b.tieBreaker * this.randomness1; return key_b - key_a; }); for (let item of allSortedByPriority) { item.placed = true; item.y = this._getBestYPosition(item, this.items); } this.items.sort((a, b) => a.originalIndex - b.originalIndex); return this.items.map((d) => ({ datum: d.datum, x: d.x, y: d.y })); } _sfc32(seed) { let a = seed, b = seed, c = seed, d = seed; let rng = function () { a >>>= 0; b >>>= 0; c >>>= 0; d >>>= 0; var t = (a + b) | 0; a = b ^ (b >>> 9); b = (c + (c << 3)) | 0; c = (c << 21) | (c >>> 11); d = (d + 1) | 0; t = (t + d) | 0; c = (c + t) | 0; return (t >>> 0) / 4294967296; }; for (let i = 0; i < 10; i++) { rng(); } return rng; } _getBestYPosition(item, all) { let forbiddenIntervals = []; for (let step of [-1, 1]) { let xDist; for ( let i = item.index + step; i >= 0 && i < all.length && (xDist = Math.abs(item.x - all[i].x)) < item.radius + this.maxR; i += step ) { let other = all[i]; if (!other.placed) continue; let sumOfRadii = item.radius + other.radius; if (xDist >= sumOfRadii) continue; let yDist = Math.sqrt(sumOfRadii * sumOfRadii - xDist * xDist); let forbiddenInterval = [other.y - yDist, other.y + yDist]; forbiddenIntervals.push(forbiddenInterval); } } if (forbiddenIntervals.length == 0) { return this.rScale(item.datum) * (this.rng() - 0.5) * this.randomness2; } let candidatePositions = forbiddenIntervals.flat(); candidatePositions.push(0); candidatePositions.sort((a, b) => { let abs_a = Math.abs(a); let abs_b = Math.abs(b); if (abs_a < abs_b) return -1; if (abs_a > abs_b) return 1; return a - b; }); for (let i = 0; i < candidatePositions.length; i++) { let position = candidatePositions[i]; if ( forbiddenIntervals.every( (interval) => position <= interval[0] || position >= interval[1] ) ) { return position; } } } }32:[{"id":"02c62e3f3e64b626186b8046150e9ab2ab0a5f04052917ada848551883f6b7b39ba55c59e20667b30d138b134ecc16472cb9c3483b52b253379e85858e77f31d","href":"https://static.observableusercontent.com/files/02c62e3f3e64b626186b8046150e9ab2ab0a5f04052917ada848551883f6b7b39ba55c59e20667b30d138b134ecc16472cb9c3483b52b253379e85858e77f31d","name":"aqli_2021_gadm0.csv","type":"text/csv","lastModified":1701080076416.962,"size":81545}] 2d:{"title":"Beeswarm methods","cells":[{"id":4,"value":"# Beeswarm methods\nWe're considering using a **beeswarm instead of the ranking bar chart** at the bottom of the index. A beeswarm helps understand the distribution of the dataset. The differences between countries are encoded in the `x-axis` as the distance between circles instead of the bars' height. It also lets us add another variable, population, encoded as the radii of the circles.\n\nA beeswarm like this shows where the world's **population** falls **along the ranking**.\n\nThis notebook compares the layout and performance of **force-directed** and **non-force-directed methods** to calculate the _x_ and _y_ positions on beeswarms with variable radii.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"---\nThis first one uses the [**non-force-directed** method](https://observablehq.com/@jtrim-ons/non-force-directed-beeswarm-of-mobility-version-3-no-union-o) by [@jtrim-ons](https://observablehq.com/@jtrim-ons). As he indicates in the original notebook, the main advantages are:\n* It is very quick to calculate compared to the force-directed version.\n* It has completely accurate _x_ values.","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"viewof metric = Inputs.select(metrics, {\n label: \"What metric do you want to visualize\",\n format: (x) => x.name,\n value: metrics.find((t) => t.value === \"who\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof years = Inputs.range([1998, 2020], {\n step: 1,\n label: \"Years\",\n value: 2020\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof _width = Inputs.range([300, width], {\n label: \"Width\",\n step: 10,\n value: width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"While this one uses **_d3-force_** to calculate the _x_ and _y_ positions:\n* The overall layout is smoother.\n* That's because the circles and gaps are more evenly distributed —that is a _pro_ AND a _con_, since it's a bit trypophobia-inducing.\n\nBut:\n* The _x_ positions are not completely accurate.\n* It takes a lot longer to calculate. If you use the ranges below, they're a lot laggier than the ones above.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"viewof fdgYears = Inputs.range([1998, 2020], {\n step: 1,\n label: \"Years\",\n value: 2020\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof _fdgWidth = Inputs.range([300, width], {\n label: \"Width\",\n step: 10,\n value: width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"Here's a comparison using [@harrislapiroff](https://observablehq.com/@harrislapiroff) [performance](https://observablehq.com/@harrislapiroff/performance) utilities.","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"performanceResults()","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"---\nBelow is my attempt to refactor [@jtrim-ons](https://observablehq.com/@jtrim-ons)'s code by reducing array operations and calculating the radii of the circles only once. I don't think the performance savings are at all noticeable, ~~but we should test.~~ _I tested both algorithms and the execution time on this one is around 3ms, while the original is around 6ms ... I mean ... compared to the over 100ms of the d3-force method, who cares? _","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"It returns this new array with the _data_, and _x_ and _y_ positions:","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"beeswarmPositions = new AccurateBeeswarm(\n data,\n (d) => rScale(d.population),\n (d) => xScale(d[column])\n).calculateYPositions()","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"---\nDefine _radius_, _x_, and _color_ scales.","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"rScale = d3\n .scaleSqrt()\n .domain([0, d3.max(data, (d) => d.population)])\n .range([1.5, _width / 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"fdg_rScale = d3\n .scaleSqrt()\n .domain([0, d3.max(data, (d) => d.population)])\n .range([1.5, _fdgWidth / 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"xScale = d3\n .scaleLinear()\n .domain(metric.domain)\n .range([30, _width - 30])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"fdg_xScale = d3\n .scaleLinear()\n .domain(metric.domain)\n .range([30, _fdgWidth - 30])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"colorScale = {\n const pmDef = {\n colors: [\n \"#ffffff\",\n \"#bfd3e6\",\n \"#9ebcda\",\n \"#8c96c6\",\n \"#8c6bb1\",\n \"#88419d\",\n \"#810f7c\",\n \"#6e016b\",\n \"#4d004b\"\n ],\n labels: [\"0\", \"5\", \"10\", \"20\", \"30\", \"40\", \"50\", \"60\", \"≥70\"],\n values: [5, 10, 20, 30, 40, 50, 60, 70],\n unit: \"µg/m3\"\n };\n\n const pm = d3.scaleThreshold().domain(pmDef.values).range(pmDef.colors);\n\n const whoDef = {\n colors: [\n \"#ffffff\",\n \"#ffeda0\",\n \"#fed976\",\n \"#feb24c\",\n \"#fd8d3c\",\n \"#fc4e2a\",\n \"#e31a1c\",\n \"#bd0026\",\n \"#800026\"\n ],\n labels: [\"0\", \"0.1\", \"0.5\", \"1.0\", \"2.0\", \"3.0\", \"4.0\", \"5.0\", \"≥6.0\"],\n values: [0.1, 0.5, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0],\n unit: \"years\"\n };\n\n const who = d3.scaleThreshold().domain(whoDef.values).range(whoDef.colors);\n\n return { pm, who };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"---\n## Data, imports ...","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"column = `${metric.value}${years}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"fdgColumn = `${metric.value}${fdgYears}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"height = width * 0.35","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"metrics = [\n { name: \"PM2.5\", value: \"pm\", domain: [0, 80] },\n { name: \"Potential gain in life expectancy\", value: \"who\", domain: [0, 7] }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"chroma = require(\"chroma-js\") ","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = FileAttachment(\"aqli_2021_gadm0.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"import {\n measurePerformance,\n measurePerformanceAsync,\n performanceResults\n} from \"@harrislapiroff/performance\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}