2d:null 2e:["$","title",null,{"children":"Label Dodging | Climate Lab | Observable"}] 33:[] 31:{"id":"be6abddae6534cc5","slug":"label-dodging","title":"Label Dodging","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-02-15T18:27:33.233Z","update_time":"$D2024-07-22T20:47:31.258Z","view_time":null,"first_public_time":"$D2023-02-24T19:13:05.159Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"650e68a1afc4786b","login":"climatelab","name":"Climate Lab","avatar_url":"https://avatars-next.observableusercontent.com/b06f29c9ebba5f82bb96583af4e514bf21938607389bae332427fac99185246f","tier":"starter_2024"},"version":153,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"team","id":"650e68a1afc4786b","login":"climatelab","name":"Climate Lab","avatar_url":"https://avatars-next.observableusercontent.com/b06f29c9ebba5f82bb96583af4e514bf21938607389bae332427fac99185246f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Label Dodging","cells":[{"id":0,"value":"md`# Label Dodging\n\n~~~js\nimport { dodge } from \"${await getCurrentPinnedName()}\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof separation = Inputs.range([0, 40], {\n label: \"Separation:\",\n value: 20,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"overflow\", \"visible\");\n\n svg.selectAll(\".label.start\")\n .data(myLabels)\n .enter().append(\"text\")\n .attr(\"class\", \"label start\")\n .text(d => d.name)\n .attr(\"x\", 0)\n .attr(\"y\", d => d.value);\n \n svg.selectAll(\".label.end\")\n .data(myLabels)\n .enter().append(\"text\")\n .attr(\"class\", \"label end\")\n .text(d => d.name)\n .attr(\"x\", 80)\n .attr(\"y\", d => d.position);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`When making line charts, we often label the final values at the end of each of the lines. But when you’re generating the charts programmatically and the final values are very close to each other, those labels overlap. This notebook includes a method to “dodge” the positions of those labels so they do not overlap.\n\nSay you have a dataset represented as an array of objects where each object’s y attribute is mapped to a value property.\n\n~~~js\nconst labels = [{\n name: \"Betty\",\n value: 70\n}, {\n name: \"Caroline\",\n value: 78\n}];\n~~~\n\nThose labels will be placed on top of each other, making them difficult to read. You can dodge their positions so that they remain as close as possible to their values without sitting on top of each other.\n\n~~~js\nconst dodged = dodge(labels.map(label => label.value));\nlabels.forEach((label, index) => {\n label.position = dodged[index];\n return label;\n});\n~~~\n\nThen you can use the position property to place the label.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"myLabels = {\n const labels = [{\n \"name\": \"Ann\",\n \"value\": 16\n }, {\n \"name\": \"Betty\",\n \"value\": 70\n }, {\n \"name\": \"Caroline\",\n \"value\": 78\n }, {\n \"name\": \"Dave\",\n \"value\": 86\n }, {\n \"name\": \"Ed\",\n \"value\": 150\n }, {\n \"name\": \"Frank\",\n \"value\": 158\n }, {\n \"name\": \"Georgia\",\n \"value\": 166\n }];\n \n const dodged = dodge(labels.map(label => label.value), separation);\n labels.forEach((label, index) => {\n label.position = dodged[index];\n return label;\n });\n \n return labels;\n};\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Takes an array of numbers representing the y-coordinate\n// See https://observablehq.com/@d3/slope-chart/3\nfunction dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n let n = positions.length;\n if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 200;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"import { getCurrentPinnedName } from '@bryangingechen/version-pinning-for-notebooks@469'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"