28:null 29:["$","title",null,{"children":"Auto Size Label | Ajay | Observable"}] 2e:T2562,Visualization = { let chartWidth = width, chartHeight = height, random = d3.randomNormal(0, 0.1), fontSizeRange = [8, 64], colors = [ "#7496be", "#fda95d", "#c598b9", "#ffb6bd", "#7eb876", "#f8da73", "#ef7c7d", "#96cbc7" ]; let svgRef = DOM.svg(width, height); const svg = d3.select(svgRef); // .append("g") // .attr("transform", "translate(" + margin.left + " " + margin.top + ")"); const x = d3.scaleLinear().range([0, chartWidth]), y = d3.scaleLinear().range([chartHeight, 0]); const series = svg .selectAll(".area") .data(films) .enter() .append("g") .attr("class", "area"); series .append("path") .attr("class", "area") .attr("fill", (d, i) => colors[i]); series .append("path") .attr("class", "midline") .attr("id", (d, i) => uids[i].id); series .append("text") .attr("class", "measurable") .attr("dy", "0.35em") .text(d => d); series .append("text") .attr("class", "along-path") .attr("dy", "0.35em") .append("textPath") .attr("xlink:href", (d, i) => uids[i].href) .text(d => d); yield svgRef; const line = d3.line().curve(d3.curveMonotoneX); function positionLabel({ points } = {}, j) { let area = d3.select(this), pathText = area.select(".along-path"); let { width, height } = area .select(".measurable") .node() .getBBox(); let distances = [], gaps = []; // Convert list of midpoints into a list of distances between them and their vertical gaps, // also interpolate the halfway point between each pair to get higher resolution points.forEach(function(point, i) { let distanceBefore = i ? distanceBetween(points[i - 1].mid, point.mid) : 0, gap = point.gap; if (i) { // Take this point off the table if it's a sharp turn if ( i < points.length - 1 && sharpAngle(points[i - 1].mid, point.mid, points[i + 1].mid) ) { gap = 0; } gaps.push(point.crossed ? 0 : (gaps[gaps.length - 1] + gap) / 2); distances.push(distanceBefore / 2); } gaps.push(gap); distances.push(distanceBefore / 2); }); let { fontSize, offset, index } = getTextPathPosition( distances, gaps, width, height ); // It fits! if (fontSize) { pathText .style("display", "block") .style("font-size", fontSize + "px") .select("textPath") .attr("startOffset", offset + "%"); } else { pathText.style("display", "none"); } } function getTextPathPosition(distances, gaps, width, height) { let bestPos, bestSize, bestMargin; for (let i = 1; i < distances.length - 1; i++) { let [min, max] = fontSizeRange, margin; // Binary search for the largest usable font size at center point i while (min <= max) { let size = Math.floor((min + max) / 2); // Text fits if ((margin = testSize(size, i) > 0)) { // If it's bigger than the previous winner, or same size with a bigger margin, new winner if ( !bestSize || size > bestSize || (size === bestSize && margin >= bestMargin) ) { bestSize = size; bestPos = i; bestMargin = margin; } // Try a larger font size min = size + 1; } else { // Try a smaller font size max = size - 1; } } } // Return the estimated startOffset and font size return bestSize ? { offset: (100 * d3.sum(distances.slice(0, bestPos + 1))) / d3.sum(distances), index: bestPos, fontSize: bestSize } : {}; // Test a given font size at a given center index function testSize(s, center) { let halfWidth = (width * s) / 32, // estimated half of text width at this size h = (height * s) / 16, // estimated text height at this size paddedHeight = h + Math.max(6, h / 6); // desired vertical clearance - at least 2px, more if it's big let minHeight = gaps[center], leftPos = center, left = 0, rightPos = center, right = 0; // Work left from the center, finding the minimum vertical clearance // Stop before the first two points to leave some padding on the end while (leftPos >= 2 && left < halfWidth) { left += distances[leftPos]; leftPos--; minHeight = Math.min(gaps[leftPos], minHeight); // If there's not enough clearance, give up if (minHeight < paddedHeight) { break; } } // Work right from the center, finding the minimum vertical clearance // Stop before the last two points to leave some padding on the end while ( minHeight >= paddedHeight && rightPos < distances.length - 2 && right < halfWidth ) { right += distances[rightPos]; rightPos++; minHeight = Math.min(gaps[rightPos], minHeight); // If there's not enough clearance, give up if (minHeight < paddedHeight) { break; } } // If we have room on all sides, return the remaining vertical margin if ( left >= halfWidth && right >= halfWidth && minHeight >= paddedHeight ) { return minHeight - h; } // Doesn't fit return 0; } } function getGap(point, before, after, polygon) { if (before && after) { let bisected = bisect(before.mid, point.mid, after.mid); let points = polygonRayCast(polygon, point.mid, bisected); if (points && points.every(p => p)) { return distanceBetween(...points); } return 0; } return point.bottom[1] - point.top[1]; } // Turn data into a set of top/bottom for a bumped area chart function bumpArea(data) { let sorted = data.map(function(d) { return d3.entries(d).sort((a, b) => a.value - b.value); }); return d3.keys(data[0]).map(function(key) { return sorted.map(function(set) { let index = set.findIndex(d => d.key === key), sumBefore = d3.sum(set.slice(0, index).map(d => d.value)); return [ sumBefore, // bottom sumBefore + set[index].value, // top sumBefore + set[index].value / 2 // mid ]; }); }); } function distanceBetween(a, b) { let dx = a[0] - b[0], dy = a[1] - b[1]; return Math.sqrt(dx * dx + dy * dy); } // Avoid excessively sharp angle turns in text function sharpAngle(a, b, c) { let ab = Math.sqrt(Math.pow(b[0] - a[0], 2) + Math.pow(b[1] - a[1], 2)), bc = Math.sqrt(Math.pow(b[0] - c[0], 2) + Math.pow(b[1] - c[1], 2)), ac = Math.sqrt(Math.pow(c[0] - a[0], 2) + Math.pow(c[1] - a[1], 2)), angle = (Math.abs(Math.acos((bc * bc + ab * ab - ac * ac) / (2 * bc * ab))) * 180) / Math.PI; return angle < 130 || angle > 230; } function bisect(a, b, c) { var at = getAngle(a, b), bt = getAngle(b, c), adjusted = bt - at; return (adjusted + Math.PI / 2) % (2 * Math.PI); } function getAngle(a, b) { let t = Math.atan2(b[1] - a[1], b[0] - a[0]); return t > 0 ? t : 2 * Math.PI + t; } while (true) { await Promises.delay(2000); let data = []; // Random-ish walk for (let i = 0; i < 10; i++) { data[i] = {}; films.forEach(function(film) { data[i][film] = Math.max(0, random() + (i ? data[i - 1][film] : 10)); }); } let stacked = bumpArea(data); x.domain([0, data.length - 1]); y.domain([ d3.min(stacked.map(d => d3.min(d.map(p => p[0])))), d3.max(stacked.map(d => d3.max(d.map(p => p[1])))) ]); let scaled = stacked.map((series, i) => { let points = series.map((p, j) => { let px = x(j), py1 = y(p[0]), py2 = y(p[1]), crossed; if (j) { // Disqualify points where another area will overlap on top of it stacked.slice(i + 1).some(function(otherSeries, k) { if ( otherSeries[j - 1][2] < series[j - 1][2] !== otherSeries[j][2] < p[2] ) { return (crossed = true); } }); } return { bottom: [px, py1], top: [px, py2], mid: [px, (py1 + py2) / 2], crossed }; }); let topLine = points.map(p => p.top), bottomLine = points.map(p => p.bottom).reverse(), midLine = points.map(p => p.mid), polygon = topLine.concat(bottomLine); // Get the actual gap available for rotated text at this point points.forEach(function(point, i) { point.gap = getGap(point, points[i - 1], points[i + 1], polygon); }); return { topLine, bottomLine, midLine, points, polygon }; }); // Draw filled areas series .data(scaled) .select(".area") .attr("d", area => [line(area.topLine), line(area.bottomLine).replace("M", "L"), "Z"].join( "" ) ); // Update invisible midlines series.select(".midline").attr("d", area => line(area.midLine)); // Position labels along midlines series.each(positionLabel); yield svgRef; } }2f:T465,function polygonRayCast(poly, origin, alpha = 0) { const eps = 1e-9; origin = [ origin[0] + eps * Math.cos(alpha), origin[1] + eps * Math.sin(alpha) ]; const [x0, y0] = origin; const shiftedOrigin = [x0 + Math.cos(alpha), y0 + Math.sin(alpha)]; let idx = 0; if (Math.abs(shiftedOrigin[0] - x0) < eps) idx = 1; let i = -1; const n = poly.length; let b = poly[n - 1]; let minSqDistLeft = Number.MAX_VALUE; let minSqDistRight = Number.MAX_VALUE; let closestPointLeft = null; let closestPointRight = null; while (++i < n) { const a = b; b = poly[i]; const p = lineIntersection(origin, shiftedOrigin, a, b); if (p && segmentBoxContains(a, b, p)) { const sqDist = pointDistanceSquared(origin, p); if (p[idx] < origin[idx]) { if (sqDist < minSqDistLeft) { minSqDistLeft = sqDist; closestPointLeft = p; } } else if (p[idx] > origin[idx]) { if (sqDist < minSqDistRight) { minSqDistRight = sqDist; closestPointRight = p; } } } } return [closestPointLeft, closestPointRight]; }30:[] 2c:{"id":"5b74007815243d9e","slug":"auto-label-size","title":"Auto Size Label","thumbnail":"77a5a88be0027432ff5e908dde9cba7c9a14277121321648537b5ee7d242b1cd","access_level":"public","create_time":"$D2019-07-29T02:28:23.861Z","update_time":"$D2021-12-27T20:19:17.786Z","view_time":null,"first_public_time":"$D2019-07-31T02:15:52.862Z","has_unpublished_edits":null,"fork":true,"stars":11,"starred":false,"owner":{"type":"team","id":"c4502285a4e37a76","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/849d25192620761ccd4197b7433f5fb9328fa64b2eae6f2efeda3ec38d44931b","tier":"starter_2024"},"version":339,"publish_version":339,"role":null,"authored":false,"authors":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null}],"members":[{"type":"individual","id":"598f272ebeef8654","login":"stroked","name":"Ajay","avatar_url":"https://avatars-next.observableusercontent.com/d44b451942fea52596b1c676ac370921eb7a9fcbafedb9695b15ef3e7e3adcd1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"729a4075096a8ad2","slug":"reblock","title":"from bl.ocks","owner":{"id":"c4502285a4e37a76","login":"stroked","name":"Ajay"}},"type":"notebook","body":{"title":"Auto Size Label","cells":[{"id":0,"value":"md`# Auto Size Label`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`[https://bl.ocks.org/veltman/3195a6c9f7426ee699b18ee4c8e99181](https://bl.ocks.org/veltman/3195a6c9f7426ee699b18ee4c8e99181)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`\n---\n## Visualization\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`---\n### SELECTION`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`---\n### LAYOUT`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`---\n### SCALES`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`---\n### Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"height=500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"uids= films.map(x=>DOM.uid(x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`---\n## DATA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"films = [\n \"The Fast and the Furious\",\n \"2 Fast 2 Furious\",\n \"The Fast and the Furious: Tokyo Drift\",\n \"Fast & Furious\",\n \"Fast Five\",\n \"Fast & Furious 6\",\n \"Furious 7\",\n \"The Fate of the Furious\"\n ];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`---\n## ANX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"// d3plus = require(\"https://cdn.jsdelivr.net/npm/d3plus-shape@1\").catch(\n// () => window[\"ownKeys\"]\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`Original Uses d3plus.polygonRayCast but the import doesn't seem to work anymore\n\n\nCopied relevant functions from:\nhttps://github.com/d3plus/d3plus-shape/blob/master/src/geom/polygonRayCast.js\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"function pointDistanceSquared(p1, p2) {\n const dx = p2[0] - p1[0],\n dy = p2[1] - p1[1];\n\n return dx * dx + dy * dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"function segmentBoxContains(s1, s2, p) {\n const eps = 1e-9,\n [px, py] = p;\n\n return !(\n px < Math.min(s1[0], s2[0]) - eps ||\n px > Math.max(s1[0], s2[0]) + eps ||\n py < Math.min(s1[1], s2[1]) - eps ||\n py > Math.max(s1[1], s2[1]) + eps\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"function lineIntersection(p1, q1, p2, q2) {\n // allow for some margins due to numerical errors\n const eps = 1e-9;\n\n // find the intersection point between the two infinite lines\n const dx1 = p1[0] - q1[0],\n dx2 = p2[0] - q2[0],\n dy1 = p1[1] - q1[1],\n dy2 = p2[1] - q2[1];\n\n const denom = dx1 * dy2 - dy1 * dx2;\n\n if (Math.abs(denom) < eps) return null;\n\n const cross1 = p1[0] * q1[1] - p1[1] * q1[0],\n cross2 = p2[0] * q2[1] - p2[1] * q2[0];\n\n const px = (cross1 * dx2 - cross2 * dx1) / denom,\n py = (cross1 * dy2 - cross2 * dy1) / denom;\n\n return [px, py];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"