31:T420,md` Given a horizontal axis for a nominal scale, for which all tick labels must be shown, adapt the size and rotation of labels, as well as the range of the axes, to satisfy the given parameters. An algorithm for solving this problem has been developed in this notebook. The algorithm produces solutions with three distinct strategies: 1. Labels placed horizontally, centered under the tick lines. 2. Labels are all rotated with some specific angle ${tex`\theta \in (0 \degree, 90 \degree)`}, with their right edges centered under the tick lines. The [Newton-Raphson method](https://en.wikipedia.org/wiki/Newton%27s_method) is used to numerically find the angle as the root of a function, as well as the range for the axis. 3. Labels rotated ${tex`90 \degree`}, centered under the tick lines. Font size is decreased to give sufficient margins between tick labels. This is a fallback strategy as it doesn't strictly satisfy the given parameters. The strategies are tried sequentially, and the algorithm returns the first valid solution that is produced. `32:Tbc8,{ const theSvg = d3 .select(DOM.svg(width, 200)) .classed("svg-outlines", showOutlines); yield theSvg.node(); // It seems the SVG element must be present in the DOM to be usable for text measurements const margin = 10; const s = d3 .scalePoint() .domain(defaultDomain) .range([marginLeft, width]); const axisContainer = theSvg.append("g"); // Create the axis, and find the width of the rightmost tick label. const textElements = axisContainer .call(d3.axisBottom(s)) .selectAll("text") .attr("font-size", fontSize); // const textSizes = textElements.nodes().map(el => el.getBBox()); const getTextRects = () => axisContainer .selectAll("text") .nodes() .map(el => el.getBoundingClientRect()); let textRects = getTextRects(); const firstWidth = textRects[0].width; const lastWidth = textRects[textRects.length - 1].width; // console.log(textRects); // Set the range so that the leftmost and rightmost ticklabels fit within the range s.range([Math.max(marginLeft, firstWidth / 2), width - lastWidth / 2]); axisContainer.call(d3.axisBottom(s)); textRects = getTextRects(); // Check if the labels overlap. If not, we are done. If they do, time to rotate. const horizontalLabelsOverlap = doRectsOverlapHorizontally( textRects, fontSize * labelHorizontalMarginFactor ); // console.log(horizontalLabelsOverlap); if (!horizontalLabelsOverlap) return; // We could take the rotation of the labels into account when calculating the available width, but // this would complicate things a lot: either requiring long explicit expressions, or numerical optimization. const rotationSolution = solveLabelRotationLayout({ maxWidth: width, firstLabelWidth: textRects[0].width, labelHeight: textRects[0].height, labelHeightMargin: fontSize * labelVerticalMarginFactor, labelCount: textRects.length, marginLeft }); mutable debug = rotationSolution; let theta; let rotatedFontSize; if (rotationSolution.converged) { theta = -rotationSolution.theta; s.range([ rotationSolution.marginLeft, width - rotationSolution.marginRight ]); rotatedFontSize = fontSize; } else { theta = -90; const halfRectHeight = textRects[0].height / 2; const x1 = Math.max(marginLeft, halfRectHeight); const x2 = width - halfRectHeight; s.range([x1, x2]); const labelSpacing = (x2 - x1) / (textRects.length - 1); const textHeightToFontSizeRatio = textRects[0].height / fontSize; rotatedFontSize = Math.min( fontSize, labelSpacing / (textHeightToFontSizeRatio + labelVerticalMarginFactor) ); } const yOffset = 12 + (cosd(theta) * rotatedFontSize) / 2; axisContainer .call(d3.axisBottom(s)) .selectAll("text") .attr("y", 0) .attr("dy", 0) .attr("font-size", rotatedFontSize) .attr("transform", `translate(0, ${yOffset}) rotate(${theta})`) .style("text-anchor", "end"); yield theSvg.node(); }33:T450,{ const valueColor = "teal"; const derivativeColor = "violet"; return html`

Label angle by Newton-Raphson iteration

${await vl .markLine({ point: true }) .data(debugThetaAll.map((t, i) => ({ t, i }))) .encode( vl .x() .fieldQ("i") .title("iteration"), vl .y() .fieldQ("t") .title("theta") ) .render()}

Value and derivative approximation of ${tex`f(\theta)`}

${await vl .layer( vl .markLine({ stroke: valueColor }) .data(debugThetaValues) .encode(vl.x().fieldQ("theta"), vl.y().fieldQ("value")), vl .markLine({ stroke: derivativeColor }) .data(debugThetaValues) .encode(vl.x().fieldQ("theta"), vl.y().fieldQ("derivative")) ) .render()}

`; }34:T764,function solveLabelRotationLayout({ maxWidth: wm, firstLabelWidth: l0, labelHeight: h, labelHeightMargin: m, labelCount: n, marginLeft: ml }) { const forwardDifferenceStep = 1e-6; const iterMax = 20; // Given the high convergence rate of Newton-Raphson, 20 is probably unneccessarily much. But each iteration is very cheap. let theta = 45; const thetaAll = Array(iterMax).fill(0); thetaAll[0] = theta; const f = theta => { const st = sind(theta); const l = Math.max(ml, l0 * cosd(theta)); return st * (wm - l - h * st) - (n - 1) * (h + m); }; for (let i = 1; i <= iterMax; i++) { const value = f(theta); // Forward difference approximation for the derivative const value2 = f(theta + forwardDifferenceStep); const derivativeApproximation = (value2 - value) / forwardDifferenceStep; // The Newton-Raphson method update theta = theta - value / derivativeApproximation; // Clamp to the valid range theta = clamp(theta, 0, 90); thetaAll[i] = theta; } const convergenceThreshold = 1e-4; // Arbitrarily chosen, but see https://en.wikipedia.org/wiki/Numerical_differentiation#Step_size const converged = theta >= 0 && theta <= 90 && Math.abs(f(theta)) < convergenceThreshold; mutable debugThetaAll = thetaAll; const debugThetaCount = 100; mutable debugThetaValues = Array.from({ length: debugThetaCount }, (_, i) => { const k = i / (debugThetaCount - 1); const theta = k * 90; const value = f(theta); const value2 = f(theta + forwardDifferenceStep); const derivative = (value2 - value) / forwardDifferenceStep; return { theta, value, derivative }; }); return { converged, theta, labelSpacing: (h + m) / sind(theta), marginLeft: Math.max(ml, l0 * cosd(theta) + (h / 2) * sind(theta)), marginRight: (h * sind(theta)) / 2 }; }35:[{"id":"df2504a07abad41bf4b24d882b862b264655459fc630d0cd097f5677ab05a20f9e63881c06c38d7f4c447531df1797bf0deeea7e5b529c394da7bbd9706bb1b0","href":"https://static.observableusercontent.com/files/df2504a07abad41bf4b24d882b862b264655459fc630d0cd097f5677ab05a20f9e63881c06c38d7f4c447531df1797bf0deeea7e5b529c394da7bbd9706bb1b0","name":"original_4555c023-8761-415a-b437-fbd838ffe5d5_IMG_20210414_184254.jpg","type":"image/jpeg","lastModified":1618418724583.901,"size":434069}] 2f:{"title":"Tick Label Adaptation Study 1 - Horizontally","cells":[{"id":0,"value":"md`# Tick Label Adaptation Study 1 - Horizontally`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`\nChange the parameters and see the labels adapt:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof marginLeft = Range([0, width / 2], {\n label: \"Axis margin left\",\n value: 100,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof fontSize = Range([4, 50], {\n label: \"Font size\",\n step: 1,\n value: 16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof labelCount = Range([2, 400], {\n label: \"Label count\",\n step: 1,\n value: 10,\n transform: Math.log2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof labelLength = Range([1, 40], { label: \"Label length\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"viewof labelHorizontalMarginFactor = Range([0, 2], {\n label: \"Label horizontal margin factor\",\n value: 1,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"viewof labelVerticalMarginFactor = Range([0, 1], {\n label: \"Label vertical margin factor\",\n value: 0.1,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof showOutlines = Toggle({ label: \"Show outlines\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"md`Related to strategy 2:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`Strategy 2 finds the rotation angle as the root of the function ${tex`f(\\theta)`}, derived below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"{\n const image = await FileAttachment(\n \"original_4555c023-8761-415a-b437-fbd838ffe5d5_IMG_20210414_184254.jpg\"\n ).image();\n\n return html`

\n ${image}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"{\n const descriptions = [\n [tex`w`, \"Total width\"],\n [tex`m_l`, \"Minimum left margin\"],\n [tex`s`, \"Space between adjacent labels\"],\n [\n tex`l_0`,\n \"Length of first label's bounding box. Label lengths assumed to be uniform enough that only the first label must be considered for the left margin.\"\n ],\n [tex`h`, \"Height of label bounding boxes. Larger than font size.\"],\n [\n tex`\\theta`,\n \"Angle of rotation of labels. (Note: The other angle adjacent to the same label is a right angle)\"\n ],\n [\n tex`n`,\n html`Number of labels. The figure illustrates the case ${tex`n = 2`}.`\n ]\n ];\n return html`\n ${descriptions.map(\n ([symbol, text]) => html`\n \n \n\n\n`\n )}\n

${symbol}

${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"md`From the figure, we can derive the following equations, and define ${tex`f(\\theta)`}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"html`\n

\n${tex`\\sin(\\theta) = \\frac{h + m_h}{s} \\Rightarrow s = \\frac{h + m_h}{\\sin(\\theta)}`}\n${tex`(1)`}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"html`\n

\n${tex`s = \\frac{1}{n-1}(w - \\max(m_l, l_0 \\cos(\\theta)) - h\\sin(\\theta))`}\n${tex`(2)`}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"html`\n

\n${tex`(1) \\& (2) \\Rightarrow 0 = ${fTexString}`}\n${tex`(3)`}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"tex`f(\\theta) \\equiv ${fTexString}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"md`The solution for equation 3 is the root of ${tex`f(\\theta)`}, which is computed numerically with the Newton-Raphson method. A [finite difference approximation](https://en.wikipedia.org/wiki/Numerical_differentiation#Finite_differences) of the derivative of ${tex`f(\\theta)`} is used in the computation:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"md`\n---\n\n## Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"fTexString = \"\\\\sin(\\\\theta)(w - \\\\max(m_l, l_0 \\\\cos(\\\\theta)) - h \\\\sin(\\\\theta)) - (n-1)(h + m_h)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"mutable debug = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"mutable debugThetaAll = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"mutable debugThetaValues = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"function doRectsOverlapHorizontally(rects, margin) {\n for (let i = 0; i < rects.length - 1; i++) {\n const a = rects[i];\n const b = rects[i + 1];\n if (a.x + a.width + margin > b.x) {\n return true;\n }\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"cosd = x => Math.cos(x * radiansPerDegree)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"sind = x => Math.sin(x * radiansPerDegree)","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"function clamp(x, a, b) {\n return Math.max(a, Math.min(b, x));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"radiansPerDegree = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"defaultDomain = Array(labelCount)\n .fill()\n .map(() =>\n Math.random()\n .toString()\n .substring(2, labelLength + 2)\n .padStart(labelLength, \"X\")\n )\n .sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { Range, Toggle } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"import { vl } from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}