31:T436,drawChart = function (data) { // Create the container SVG. const svg = d3 .create("svg") .attr("width", dims.width) .attr("height", dims.height) .attr("viewBox", [0, 0, dims.width, dims.height]) .attr("style", "max-width: 100%; height: auto;"); // Add the axes. svg .append("g") .attr("transform", `translate(0,${dims.height - dims.marginBottom})`) .call(d3.axisBottom(xScale)); // Shade the interquartile range svg .append("rect") .attr("x", xScale(quartiles[0])) .attr("width", xScale(quartiles[2]) - xScale(quartiles[0])) .attr("y", yScale(1.2)) .attr("height", yScale(-0.2) - yScale(1.2)) .style("fill", "steelblue") .style("opacity", ".08"); // Append a circle for each data point. svg .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", pointRadius) .style("fill", "#888") .style("stroke", "#000") .style("fill-opacity", 0.3) .style("stroke-opacity", 0.7); return svg.node(); }32:T485,// To use this function outside Observable, copy this function and the functions in the following // three cells into your .js file. function spacedJitter( data, getX, yRange, { random = Math.random, iterations = 20, edgeSpacing = 0 } = {} ) { const yStart = yRange[0]; const ySize = yRange[1] - yRange[0]; const _data = data.map((d, i) => ({ x: getX(d), y: yStart + random() * ySize, index: i, datum: d })); _data.sort((a, b) => a.x - b.x); for (let i = 0; i < iterations; i++) { for (let j = 0; j < _data.length; j++) { const index = getRandomInt(0, _data.length, random); // choose a random point to try to move const d = _data[index]; const distanceFromNearestPoint = distance( index, d.y, yRange, edgeSpacing, _data ); const candidateY = yStart + random() * ySize; if ( distance(index, candidateY, yRange, edgeSpacing, _data) > distanceFromNearestPoint ) { d.y = candidateY; } } } _data.sort((a, b) => a.index - b.index); for (const d of _data) { delete d.index; } return _data; }33:[{"id":"44fff3ba8b0eecf058da4a239ea3c770494d642342c331255df46bb5ee301994177932ba11713bbc415ad24fb40eb54368daa0d0c1507afd990e5199e38ab78a","href":"https://static.observableusercontent.com/files/44fff3ba8b0eecf058da4a239ea3c770494d642342c331255df46bb5ee301994177932ba11713bbc415ad24fb40eb54368daa0d0c1507afd990e5199e38ab78a","name":"data.json","type":"application/json","lastModified":1709200882027.507,"size":64963}] 2f:{"title":"Avoiding overlaps in jitter plots","cells":[{"id":0,"value":"# Avoiding overlaps in jitter plots\n\nJitter plots — where one dimension shows the values and the other dimension shows random noise in order to space out the points — tend to have at least some overlapping points.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"drawChart(dataWithRandomY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof numberOfPoints = Inputs.range([25, 1500], {\n label: \"Number of points\",\n step: 25,\n value: 300\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"The `spacedJitter` function in this notebook tries to avoid overlaps. It uses random initial y-positions, just like a normal jitter plot. The function then applies the following strategy for reducing overlaps. A dot is picked at random, and a new candidate y-position is chosen at random for the dot; if this new position increases the distance between the dot and its nearest neighbour, it is accepted.","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"drawChart(dataWithAdjustedY)","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof iterations = Inputs.range([0, 100], {\n label: \"Number of iterations\",\n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof edgeSpacing = Inputs.range([0, 1], {\n label: \"Edge spacing\",\n step: 0.1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"## Options\n\nThe function has the following options:\n- `iterations`: Try moving individual points _kn_ times, where _k_ is the value of `iterations` and _n_ is the number of points.\n- `edgeSpacing`: If this equals 1, the algorithm treats the horizontal lines at the minimum and maximum _y_ values as \"neighbours\" when calculating the distance from the nearest neighbour. Lower values of `edgeSpacing` causes the distance from the lines to have less influence, and a value of zero means the lines have no influence. Zero and `0.5` could be good values to try.","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"## An example\n\nThe second chart [here](https://observablehq.com/@jtrim-ons/jitter-plots-and-unit-histograms) uses this method.\n\n## Related work\n\nTukey texturing is discussed in [a lecture handout by Ross Ihaka](https://www.stat.auckland.ac.nz/~ihaka/787/lectures-simple-plots-handouts.pdf), and looks like it has similar results to the `spacedJitter` function. Ihaka describes Tukey texturing as \"sadly neglected\". I haven't tracked down Tukey's paper yet (maybe I've just reinvented Tukey texturing or something very similar???). An implementation of Tukey texturing is in the [vipor](https://github.com/sherrillmix/vipor) package for R.\n\n## Thanks\n\nThanks to Scott Sherrill-Mix for a helpful email conversation that led to the `edgeSpacing` option.","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"pointRadius = numberOfPoints > 600 ? 2 : numberOfPoints > 300 ? 3 : 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"dataWithRandomY = {\n const random = makeRng();\n return data.map((d) => ({ x: xScale(d), y: yScale(random()) }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"dataWithAdjustedY = spacedJitter(\n data,\n (d) => xScale(d),\n [yScale(0), yScale(1)],\n { random: makeRng(), iterations, edgeSpacing }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"function distance(dIndex, yVal, yRange, edgeSpacing, data) {\n const closestEdgeDist = Math.min(\n Math.abs(yVal - yRange[0]),\n Math.abs(yVal - yRange[1])\n );\n let closestDist =\n edgeSpacing === 0 ? Infinity : closestEdgeDist / edgeSpacing;\n const yThis = yVal;\n closestDist = updateClosestDistance(closestDist, dIndex, yThis, 1, data);\n closestDist = updateClosestDistance(closestDist, dIndex, yThis, -1, data);\n return closestDist;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"function updateClosestDistance(closestDist, dIndex, yThis, step, data) {\n const xThis = data[dIndex].x;\n const startIndex = dIndex + step;\n const endIndex = step === 1 ? data.length : -1;\n for (let i = startIndex; i !== endIndex; i += step) {\n const other = data[i];\n const xOther = other.x;\n if (Math.abs(xThis - xOther) > closestDist) {\n break;\n }\n const yOther = other.y;\n const xDiff = xThis - xOther;\n const yDiff = yThis - yOther;\n if (yDiff * yDiff >= closestDist * closestDist) continue; // An optimisation\n const dist = Math.hypot(xDiff, yDiff);\n if (dist < closestDist) closestDist = dist;\n }\n return closestDist;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"function getRandomInt(min, max, random = Math.random) {\n // based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random\n return Math.floor(random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(data))\n .range([dims.marginLeft, dims.width - dims.marginRight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"yScale = d3\n .scaleLinear()\n .domain([-0.2, 1.2])\n .range([dims.height - dims.marginBottom, dims.marginTop])","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"dims = ({\n width: 640,\n height: 140,\n marginTop: 25,\n marginRight: 20,\n marginBottom: 35,\n marginLeft: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = 140","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"marginTop = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"quartiles = simpleStatistics.quantile(data, [0.25, 0.5, 0.75])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = {\n const rawData = (await FileAttachment(\"data.json\").json())\n .map((d) => d.datum.value)\n .filter((d) => d < 14);\n\n if (numberOfPoints < rawData.length) {\n return rawData.slice(0, numberOfPoints);\n } else {\n const initialLength = rawData.length;\n const random = makeRng();\n while (rawData.length < numberOfPoints) {\n rawData.push(\n rawData[Math.floor(random() * initialLength)] - 0.1 + random() / 5\n ); // Random element of array from https://stackoverflow.com/a/5915122\n }\n }\n\n return rawData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"simpleStatistics = require(\"simple-statistics\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"makeRng = function () {\n function sfc32(a, b, c, d) {\n return function () {\n a |= 0;\n b |= 0;\n c |= 0;\n d |= 0;\n var t = (((a + b) | 0) + d) | 0;\n d = (d + 1) | 0;\n a = b ^ (b >>> 9);\n b = (c + (c << 3)) | 0;\n c = (c << 21) | (c >>> 11);\n c = (c + t) | 0;\n return (t >>> 0) / 4294967296;\n };\n }\n\n let seed = 1337 ^ 0xdeadbeef; // 32-bit seed with optional XOR value\n // Pad seed with Phi, Pi and E.\n // https://en.wikipedia.org/wiki/Nothing-up-my-sleeve_number\n let _rand = sfc32(0x9e3779b9, 0x243f6a88, 0xb7e15162, seed);\n for (let i = 0; i < 15; i++) _rand();\n return _rand;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}