31:T66e,chart = { settings.numSims = 0; settings.delay = settings.initialDelay; let fullWidth = settings.width + settings.margin.left + settings.margin.right, fullHeight = settings.height + settings.margin.top + settings.margin.bottom const svg = d3.select(DOM.svg(fullWidth, fullHeight)); const x = d3.scaleLinear() .rangeRound([0, settings.width]) .domain(d3.extent(data, function(d) { return +d.value; })); const g = svg.append("g") .attr("transform", "translate(" + settings.margin.left + "," + settings.margin.top + ")"); const simulation = d3.forceSimulation(data) .force("x", d3.forceX(function(d) { return x(d.value); }).strength(1)) .force("y", d3.forceY(settings.height / 2)) .force("collide", d3.forceCollide(8)) .stop(); svg.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(" + settings.margin.left + "," + settings.height + ")") .call(d3.axisBottom(x)); const circles = g .selectAll("circle").data(data); circles.enter().append("circle") .attr("cx", function(d) { return x(d.value)}) .attr("cy", function(d) { return settings.height/2; }) .attr("r", 10) .attr("fill", (d) => d.color) .style("opacity", .3); svg.node().update = () => { // Iterate through the simulation 100 times to find the optimal positions for(let i =0; i<100; i++) simulation.tick(); g.selectAll("circle").data(data) .transition().duration(settings.delay) .ease(d3.easeLinear) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } return svg.node() }32:[] 2f:{"title":"The Simulation Behind Beeswarm Plots","cells":[{"id":0,"value":"md`# The Simulation Behind Beeswarm Plots\nBeeswarm plots provide a layout for representing the distribution of a **single continuous variable**. Using a _position encoding_ of a single continous variable yields a one-dimensional scatterplot (or _dot plot_) (below), which is unable to express all the observations (because of _occlusion_). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"dot_density = {\n let fullWidth = settings.width + settings.margin.left + settings.margin.right;\n \n const svg = d3.select(DOM.svg(fullWidth, 100));\n const x = d3.scaleLinear()\n .rangeRound([0, settings.width])\n .domain(d3.extent(data, function(d) { return +d.value; }));\n\n const g = svg.append(\"g\")\n .attr(\"transform\", \"translate(\" + settings.margin.left + \",\" + settings.margin.top + \")\");\n\n svg.append(\"g\")\n .attr(\"class\", \"axis axis--x\")\n .attr(\"transform\", \"translate(\" + settings.margin.left + \",\" + 70 + \")\")\n .call(d3.axisBottom(x));\n\n const circles = g\n .selectAll(\"circle\").data(data);\n \n circles.enter().append(\"circle\")\n .attr(\"cx\", function(d) { return x(d.value)})\n .attr(\"cy\", function(d) { return 0 })\n .attr(\"r\", 10)\n .attr(\"fill\", (d) => d.color)\n .style(\"opacity\", .3);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md` While the range of the values and some signal of the central tendencies are visible, this representation yields little information. As an alternative, the y position of each element can be shifted to reveal any overlapping points, yielding a **Beeswarm plot** \\n\nThe complexity required to compute this layout should not be overlooked. The code below uses D3's [Force Directed Layout](https://github.com/d3/d3-force), which applies a simulation of physical forces on particles to achieve the desired layout.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof button = {\n const form = html`