29:null 2a:["$","title",null,{"children":"Label Endpoints | Lao | Observable"}] 2f:T3dfe,viewof graph = { //const width = width const height = 500 const margin = {top: 5, right: 105, bottom: 19, left: 40} const labelOffset = 12 // Custom color scheme const customColors = [ "#eb6c48", "#50227a", "#4ca1c5", "#3bb46b", "#c058ca", "#3178ba", "#2d815d", "#f48f46", "#eabe3a", "#00c1a7", "#006d81", "#67cfde", "#1b9294", "#274fb7", "#b46523", "#b9945d", "#b482e6", "#dd7d8e", "#90aae5", "#7478e9", "#804abb", "#a34480", ] // Create scales const xScale = d3.scaleLinear() .domain([0, points - 1]) .range([margin.left, width - margin.right]) const yScale = d3.scaleLinear() .domain([0, 10]) // Since we scaled to 0-10 .range([height - margin.bottom, margin.top]) // Create line generator that only draws up to the range value const line = d3.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) .defined(d => d.x <= range) // Only include points up to range // Create SVG const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style('border', '1px dashed #EEEEEE') //.style('overflow', 'visible') // Create crosshair lines (initially hidden) const crosshairV = svg.append("line") .attr("class", "crosshair-v") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "grey") .attr("stroke-width", 0.5) .style("display", "none") .style("pointer-events", "none") const crosshairH = svg.append("line") .attr("class", "crosshair-h") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("stroke", "grey") .attr("stroke-width", 0.5) .style("display", "none") .style("pointer-events", "none") // Add X axis (without label) const xAxisGroup = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) .style("font-family", "Inter, sans-serif") .style("font-size", "12px") // Add a vertical line at the range position svg.append("line") .attr("x1", xScale(range)) .attr("y1", margin.top) .attr("x2", xScale(range)) .attr("y2", height - margin.bottom) .attr("stroke", "#ddd") .attr("stroke-dasharray", "3,3") .attr("opacity", 0.5) // Add Y axis (without label) const yAxisGroup = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) .style("font-family", "Inter, sans-serif") .style("font-size", "12px") // Add lines (only showing up to range) const lines = svg.selectAll("path.line") .data(randomWalk) .join("path") .attr("class", "line") .attr("data-series-index", (d, i) => i) // Add index for easy selection .attr("d", d => line(d.filter(point => point.x <= range))) .attr("fill", "none") .attr("stroke", (d, i) => customColors[i % customColors.length]) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") // Prepare data for labels - wrap text first const labelXPosition = xScale(range) + labelOffset; const availableWidth = width - labelXPosition; // First, get the filtered series data const filteredSeries = randomWalk.map(series => series.filter(point => point.x <= range)); // Add wrapped text to the last point of each series filteredSeries.forEach((series, index) => { if (series.length > 0) { const lastPoint = series[series.length - 1]; // Wrap the text const wrappedLines = wrapText({ text: lastPoint.name, width: availableWidth, family: 'Inter', size: 14 }); // Add lines to the last point lastPoint.lines = wrappedLines; lastPoint.index = index; } }); // Apply label optimization with multi-line support const optimizedLabels = optimizeLabels(filteredSeries.filter(s => s.length > 0), { minY: margin.top, maxY: height - margin.bottom, yScale: yScale, space: space, lineHeight: lineHeight }) // Add connection lines from endpoints to average label position (drawn first so they appear behind) const connectionLines = svg.selectAll("line.connection-line") .data(optimizedLabels) .join("line") .attr("class", "connection-line") .attr("data-series-index", d => d.index) .attr("x1", d => xScale(d.x)) .attr("y1", d => {d.y1 = yScale(d.y); return d.y1}) .attr("x2", labelXPosition) .attr("y2", d => { // Calculate average y position of all lines const avgY = d.linePositions.reduce((sum, line) => sum + line.dy, 0) / d.linePositions.length; d.y2 = avgY return avgY; }) .attr("stroke", d => customColors[d.index % customColors.length]) .attr("stroke-width", 0.5) .attr("opacity", d => d.y1 == d.y2 ? 0 : 1) // Create label groups const labelGroups = svg.selectAll("g.label-group") .data(optimizedLabels) .join("g") .attr("class", "label-group") .attr("data-series-index", d => d.index) // Add multi-line labels labelGroups.each(function(d) { const group = d3.select(this); // Add each line of text d.linePositions.forEach((lineData, lineIndex) => { const text = group.append("text") .attr("class", "end-label") .attr("x", labelXPosition) .attr("y", lineData.dy) .attr("text-anchor", "start") .attr("dominant-baseline", "central") .attr("font-family", "Inter, sans-serif") .attr("font-size", "14px") .attr("font-weight", "700") .attr("fill", customColors[d.index % customColors.length]) .attr("stroke", "white") .attr("stroke-width", "3px") .attr("stroke-linejoin", "round") .attr("paint-order", "stroke") .style("cursor", "default") .text(lineData.text); }); }); // Add dots at endpoints for clarity const endPoints = svg.selectAll("circle.end-point") .data(optimizedLabels) .join("circle") .attr("class", "end-point") .attr("data-series-index", d => d.index) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 4) .attr("fill", d => customColors[d.index % customColors.length]) // Add hover effects to label groups labelGroups .on("mouseover", function(event, d) { const hoveredIndex = d.index; // Fade out other lines lines.interrupt() .style("stroke", (lineData, i) => i === hoveredIndex ? customColors[i % customColors.length] : "#ddd") .style("opacity", (lineData, i) => i === hoveredIndex ? 1 : 0.2); // Fade out other connection lines connectionLines.interrupt() .style("stroke", lineData => lineData.index === hoveredIndex ? customColors[lineData.index % customColors.length] : "#ddd") // Fade out other label groups labelGroups.interrupt() .style("opacity", labelData => labelData.index === hoveredIndex ? 1 : 0.2); // Update text fill for all labels in groups labelGroups.selectAll("text") .interrupt() .style("fill", function() { const parentData = d3.select(this.parentNode).datum(); return parentData.index === hoveredIndex ? customColors[parentData.index % customColors.length] : "#999"; }); // Fade out other end points endPoints.interrupt() .style("opacity", pointData => pointData.index === hoveredIndex ? 1 : 0.2) .style("fill", pointData => pointData.index === hoveredIndex ? customColors[pointData.index % customColors.length] : "#ddd"); }) .on("mouseout", function() { // Restore all elements to original state lines.interrupt() .transition() .duration(500) .ease(d3.easeLinear) .style("stroke", (d, i) => customColors[i % customColors.length]) .style("opacity", 1); connectionLines.interrupt() .transition() .duration(500) .ease(d3.easeLinear) .style("stroke", d => customColors[d.index % customColors.length]) labelGroups.interrupt() .transition() .duration(500) .ease(d3.easeLinear) .style("opacity", 1); labelGroups.selectAll("text") .interrupt() .transition() .duration(500) .ease(d3.easeLinear) .style("fill", function() { const parentData = d3.select(this.parentNode).datum(); return customColors[parentData.index % customColors.length]; }); endPoints.interrupt() .transition() .duration(500) .ease(d3.easeLinear) .style("opacity", 1) .style("fill", d => customColors[d.index % customColors.length]); }); // Add bold range value on x-axis xAxisGroup.append("line") .attr("x1", xScale(range)) .attr("y1", 0) .attr("x2", xScale(range)) .attr("y2", 6) .attr("stroke", "black") xAxisGroup.append("text") .attr("x", xScale(range)) .attr("y", 9) .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-family", "Inter, sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", "3px") .attr("paint-order", "stroke") .text(range) // Create hover circle (initially hidden) const hoverCircle = svg.append("circle") .attr("class", "hover-circle") .attr("r", 6) .attr("fill", "none") .attr("stroke-width", 2) .style("display", "none") .style("pointer-events", "none") // Create axis ticks for crosshair (initially hidden) const xAxisTick = xAxisGroup.append("line") .attr("class", "x-axis-tick") .attr("y1", 0) .attr("y2", 6) .attr("stroke", "black") .attr("stroke-width", 1) .style("display", "none") const yAxisTick = yAxisGroup.append("line") .attr("class", "y-axis-tick") .attr("x1", 0) .attr("x2", -6) .attr("stroke", "black") .attr("stroke-width", 1) .style("display", "none") // Create axis value labels for hover (initially hidden) const xHoverLabel = xAxisGroup.append("text") .attr("class", "x-hover-label") .attr("y", 9) .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-family", "Inter, sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("stroke", "white") .attr("stroke-width", "3px") .attr("paint-order", "stroke") .style("display", "none") const yHoverLabel = yAxisGroup.append("text") .attr("class", "y-hover-label") .attr("x", -9) .attr("dy", "0.32em") .attr("text-anchor", "end") .attr("font-family", "Inter, sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("stroke", "white") .attr("stroke-width", "3px") .attr("paint-order", "stroke") .style("display", "none") // Flatten all points for easier searching const allPoints = randomWalk.flatMap((series, seriesIndex) => series.filter(d => d.x <= range).map(d => ({ ...d, seriesIndex, color: customColors[seriesIndex % customColors.length] })) ) // Create array of all unique x values and sort them const uniqueXValues = [...new Set(allPoints.map(p => p.x))].sort((a, b) => a - b) // Add invisible rect for mouse tracking (only up to range position) const mouseTracker = svg.append("rect") .attr("class", "mouse-tracker") .attr("x", margin.left) .attr("y", margin.top) .attr("width", xScale(range) - margin.left) .attr("height", height - margin.top - margin.bottom) .attr("fill", "none") .style("pointer-events", "all") function updateHover(mouseX, mouseY) { // First, find the closest x value to the mouse position let closestX = null let minXDistance = Infinity uniqueXValues.forEach(xValue => { const screenX = xScale(xValue) const distance = Math.abs(mouseX - screenX) if (distance < minXDistance) { minXDistance = distance closestX = xValue } }) if (closestX === null) { // Hide all hover elements hoverCircle.style("display", "none") crosshairV.style("display", "none") crosshairH.style("display", "none") xAxisTick.style("display", "none") yAxisTick.style("display", "none") xHoverLabel.style("display", "none") yHoverLabel.style("display", "none") return } // Filter points to only those with the closest x value const pointsAtX = allPoints.filter(p => p.x === closestX) // Among points at this x value, find the one with y closest to mouse let nearestPoint = null let minYDistance = Infinity pointsAtX.forEach(point => { const screenY = yScale(point.y) const distance = Math.abs(mouseY - screenY) if (distance < minYDistance) { minYDistance = distance nearestPoint = point } }) if (nearestPoint) { hoverCircle .attr("cx", xScale(nearestPoint.x)) .attr("cy", yScale(nearestPoint.y)) .attr("stroke", nearestPoint.color) .style("display", null) // Show crosshairs crosshairV .attr("x1", xScale(nearestPoint.x)) .attr("x2", xScale(nearestPoint.x)) .style("display", null) crosshairH .attr("y1", yScale(nearestPoint.y)) .attr("y2", yScale(nearestPoint.y)) .style("display", null) // Show axis ticks xAxisTick .attr("x1", xScale(nearestPoint.x)) .attr("x2", xScale(nearestPoint.x)) .style("display", null) yAxisTick .attr("y1", yScale(nearestPoint.y)) .attr("y2", yScale(nearestPoint.y)) .style("display", null) xHoverLabel .attr("x", xScale(nearestPoint.x)) .attr("fill", nearestPoint.color) .text(nearestPoint.x) .style("display", null) yHoverLabel .attr("y", yScale(nearestPoint.y)) .attr("fill", nearestPoint.color) .text(nearestPoint.y) .style("display", null) } else { hoverCircle.style("display", "none") crosshairV.style("display", "none") crosshairH.style("display", "none") xAxisTick.style("display", "none") yAxisTick.style("display", "none") xHoverLabel.style("display", "none") yHoverLabel.style("display", "none") } } mouseTracker .on("mousemove", function(event) { const [mouseX, mouseY] = d3.pointer(event, svg.node()) updateHover(mouseX, mouseY) }) .on("mouseleave", function() { hoverCircle.style("display", "none") crosshairV.style("display", "none") crosshairH.style("display", "none") xAxisTick.style("display", "none") yAxisTick.style("display", "none") xHoverLabel.style("display", "none") yHoverLabel.style("display", "none") }) // Check for existing mouse position after a brief delay requestAnimationFrame(() => { // Dispatch a synthetic mouse event to check current position const rect = mouseTracker.node().getBoundingClientRect() const syntheticEvent = new MouseEvent('mousemove', { clientX: window.mouseX || 0, clientY: window.mouseY || 0, bubbles: true }) // Track global mouse position if (!window.mouseX) { document.addEventListener('mousemove', e => { window.mouseX = e.clientX window.mouseY = e.clientY }) } // If mouse is within bounds, trigger hover if (window.mouseX && window.mouseY) { if (window.mouseX >= rect.left && window.mouseX <= rect.right && window.mouseY >= rect.top && window.mouseY <= rect.bottom) { mouseTracker.node().dispatchEvent(syntheticEvent) } } }) // Return the SVG node return svg.node() }30:T327e,optimizeLabels = function(series, options = {}) { const { space = 15, // Minimum distance between labels in pixels minY, // Minimum y position (top of chart - padding) maxY, // Maximum y position (bottom of chart + padding) yScale, // Y scale function lineHeight = 15, // Height of each line in pixels } = options // Helper function to calculate center based on selected method function calculateCenter(values) { // Mean (average of all values) return values.reduce((sum, val) => sum + val, 0) / values.length; } // Enhanced sort function that checks previous points on ties series.sort((a, b) => { // Determine the minimum length to avoid out-of-bounds access const minLength = Math.min(a.length, b.length); // Start from the last point and work backwards for (let i = 1; i <= minLength; i++) { const pa = a[a.length - i]; const pb = b[b.length - i]; if (pa.y > pb.y) return -1; else if (pa.y < pb.y) return 1; // If equal, continue to the next iteration to check previous points } // If all compared points are equal, maintain original order (return 0) // or sort by series length if they differ if (a.length !== b.length) { return b.length - a.length; // Longer series comes first } return 0; }); // Deep copy endpoints let points = series.map(s => ({...s[s.length-1]})); points.forEach((e,i) => { e.rank = i e.dy = options.yScale(e.y) }) // Create virtual points for each line of multi-line labels let virtualPoints = []; points.forEach((point, pointIndex) => { const lines = point.lines || [point.name]; // Use provided lines or default to name const numLines = lines.length; // Create a virtual point for each line lines.forEach((line, lineIndex) => { virtualPoints.push({ ...point, lineText: line, lineIndex: lineIndex, totalLines: numLines, originalPointIndex: pointIndex, isFirstLine: lineIndex === 0, isLastLine: lineIndex === lines.length - 1, // Initial position - center the group around the original y position dy: yScale(point.y) - (numLines - 1) * lineHeight / 2 + lineIndex * lineHeight, originalDy: yScale(point.y) - (numLines - 1) * lineHeight / 2 + lineIndex * lineHeight }); }); }); // Check if we need to use even spacing const totalRequiredSpace = virtualPoints.length * space; if (totalRequiredSpace > (maxY - minY)) { // Even spacing mode const availableSpace = maxY - minY; // Group virtual points by their original point index const groupedByPoint = new Map(); virtualPoints.forEach(vp => { if (!groupedByPoint.has(vp.originalPointIndex)) { groupedByPoint.set(vp.originalPointIndex, []); } groupedByPoint.get(vp.originalPointIndex).push(vp); }); // Sort groups by rank const sortedGroups = Array.from(groupedByPoint.entries()) .sort((a, b) => points[a[0]].rank - points[b[0]].rank); const numLabels = sortedGroups.length; // Decide between sparse and dense spacing const maxPossibleLabels = availableSpace / lineHeight; const useSparseSpacing = maxPossibleLabels >= numLabels; if (useSparseSpacing) { // SPARSE SPACING // Calculate total space needed for multi-line labels const totalInternalSpace = sortedGroups.reduce((sum, [_, group]) => sum + (group.length - 1) * lineHeight, 0); // Available space for distributing between groups const availableForBetweenGroups = availableSpace - totalInternalSpace; const spaceBetweenGroups = numLabels > 1 ? availableForBetweenGroups / (numLabels - 1) : 0; // Position each group let currentY = minY; sortedGroups.forEach(([pointIndex, group], groupIndex) => { // Sort by line index group.sort((a, b) => a.lineIndex - b.lineIndex); // Position lines within the group group.forEach((vp, lineIdx) => { vp.dy = currentY + lineIdx * lineHeight; }); // Move to next group position if (groupIndex < sortedGroups.length - 1) { currentY += (group.length - 1) * lineHeight + spaceBetweenGroups; } }); } else { // DENSE SPACING // Calculate how much extra space the last label needs for its additional lines const lastGroup = sortedGroups[sortedGroups.length - 1][1]; const lastLabelExtraSpace = (lastGroup.length - 1) * lineHeight; // The effective range for positioning first lines is from minY to (maxY - lastLabelExtraSpace) const effectiveRange = availableSpace - lastLabelExtraSpace; // Calculate even spacing between first lines within the effective range const spacingBetweenFirstLines = numLabels > 1 ? effectiveRange / (numLabels - 1) : 0; // Position each group sortedGroups.forEach(([pointIndex, group], groupIndex) => { // Sort by line index group.sort((a, b) => a.lineIndex - b.lineIndex); // Calculate position of first line const firstLineY = minY + groupIndex * spacingBetweenFirstLines; // Position all lines in the group group.forEach((vp, lineIdx) => { vp.dy = firstLineY + lineIdx * lineHeight; }); }); } } else { // Clustering algorithm with multi-line support // Binary search function to find insertion point (from repel function) function bisectLeft(groups, value) { let left = 0; let right = groups.length; while (left < right) { const mid = Math.floor((left + right) / 2); if (groups[mid].lo < value) { left = mid + 1; } else { right = mid; } } return left; } // First, create initial groups for ALL labels (both single-line and multi-line) const initialGroups = []; // Group virtual points by their original point index const pointGroups = new Map(); virtualPoints.forEach(vp => { if (!pointGroups.has(vp.originalPointIndex)) { pointGroups.set(vp.originalPointIndex, []); } pointGroups.get(vp.originalPointIndex).push(vp); }); // Create a group for each original point (both single-line and multi-line labels) pointGroups.forEach((virtualPointsForLabel, originalPointIndex) => { // Sort by line index to maintain order virtualPointsForLabel.sort((a, b) => a.lineIndex - b.lineIndex); const originalPositions = virtualPointsForLabel.map(vp => vp.originalDy); const center = calculateCenter(originalPositions); // Calculate the proper range for this group const numLines = virtualPointsForLabel.length; const rangeSize = (numLines - 1) * lineHeight; // Use lineHeight for spacing within a label // For single-line labels, the range is just the point itself // For multi-line labels, we need space between lines let lo, hi; if (numLines === 1) { // Single line - no range needed, just the point lo = center; hi = center; virtualPointsForLabel[0].dy = center; virtualPointsForLabel[0].originalDy = center; } else { // Multi-line - position lines evenly within the range centered on the calculated center lo = center - rangeSize / 2; hi = center + rangeSize / 2; // Adjust if bounds are exceeded if (lo < minY) { const shift = minY - lo; lo = minY; hi = lo + rangeSize; } else if (hi > maxY) { const shift = hi - maxY; hi = maxY; lo = hi - rangeSize; } // Update the actual positions of the virtual points in this group // Use lineHeight for spacing between lines of the same label virtualPointsForLabel.forEach((vp, idx) => { vp.dy = lo + idx * lineHeight; vp.originalDy = vp.dy; // Update original position for merging calculations }); } initialGroups.push({ center: (lo + hi) / 2, lo: lo, hi: hi, items: virtualPointsForLabel }); }); // Now use the repel-style merging algorithm const groups = []; // Sort initial groups by their center position initialGroups.sort((a, b) => a.center - b.center); // Insert each group and merge overlapping ones (adapted from repel function) for (const group of initialGroups) { let j = bisectLeft(groups, group.lo); groups.splice(j, 0, group); // Merge overlapping groups (adapted from repel function logic) while ( (groups[j + 1]?.lo < groups[j].hi + space) || (groups[j - 1]?.hi > groups[j].lo - space && (--j, true)) ) { const items = groups[j].items.concat(groups[j + 1].items); // Calculate the new center based on the average of all original positions const allOriginalPositions = items.map(item => item.originalDy); const newCenter = calculateCenter(allOriginalPositions); // Calculate the range needed for all items // Count how many distinct series (original points) are in the merged group const distinctSeries = new Set(items.map(item => item.originalPointIndex)); const numSeries = distinctSeries.size; // Group items by their original point const itemsByPoint = new Map(); items.forEach(item => { if (!itemsByPoint.has(item.originalPointIndex)) { itemsByPoint.set(item.originalPointIndex, []); } itemsByPoint.get(item.originalPointIndex).push(item); }); // Calculate total range needed: // - lineHeight between lines of same series // - space between different series let totalRangeNeeded = 0; itemsByPoint.forEach(pointItems => { totalRangeNeeded += (pointItems.length - 1) * lineHeight; }); totalRangeNeeded += (numSeries - 1) * space; // Position the group centered on the new average center let newLo = newCenter - totalRangeNeeded / 2; let newHi = newCenter + totalRangeNeeded / 2; // Adjust if bounds are exceeded if (newLo < minY) { const shift = minY - newLo; newLo = minY; newHi = newLo + totalRangeNeeded; // Recalculate center after shifting } else if (newHi > maxY) { const shift = newHi - maxY; newHi = maxY; newLo = newHi - totalRangeNeeded; // Recalculate center after shifting } groups.splice(j, 2, { lo: newLo, hi: newHi, items: items, center: (newLo + newHi) / 2 }); } } // Position each group for (const group of groups) { let start = group.lo; let end = group.hi; // Group items by their original point index const itemsByPoint = new Map(); group.items.forEach(item => { if (!itemsByPoint.has(item.originalPointIndex)) { itemsByPoint.set(item.originalPointIndex, []); } itemsByPoint.get(item.originalPointIndex).push(item); }); // Sort the groups by rank const sortedPointGroups = Array.from(itemsByPoint.entries()) .sort((a, b) => points[a[0]].rank - points[b[0]].rank); // Calculate positions let currentY = start; sortedPointGroups.forEach(([pointIndex, pointItems], groupIdx) => { // Sort items within the point by line index pointItems.sort((a, b) => a.lineIndex - b.lineIndex); // Position each line within this series pointItems.forEach((item, lineIdx) => { item.dy = currentY + lineIdx * lineHeight; }); // Move to next series position if (groupIdx < sortedPointGroups.length - 1) { currentY += (pointItems.length - 1) * lineHeight + space; } }); } } // Reconstruct the original points with line positions const resultPoints = []; for (let i = 0; i < points.length; i++) { const point = {...points[i]}; const pointVirtualLines = virtualPoints.filter(vp => vp.originalPointIndex === i); // Sort by line index to maintain order pointVirtualLines.sort((a, b) => a.lineIndex - b.lineIndex); // Store line positions point.linePositions = pointVirtualLines.map(vp => ({ text: vp.lineText, dy: vp.dy })); // Set the main dy to the position of the first line point.dy = pointVirtualLines[0].dy; resultPoints.push(point); } return resultPoints; }31:Tbca,wrapText = function({text, width, family = 'Arial', size = 14}) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.font = `${size}px ${family}`; function getWidth(str) { return context.measureText(str).width; } // If text fits on one line, return as single element array if (getWidth(text) <= width) { return [text]; } const lines = []; const words = text.split(' '); let currentLine = ''; for (let i = 0; i < words.length; i++) { let word = words[i]; const testLine = currentLine + (currentLine ? ' ' : '') + word; if (getWidth(testLine) <= width) { currentLine = testLine; } else { // Line would be too long if (currentLine) { // Save current line and start new line with current word lines.push(currentLine); currentLine = word; // Check if the new word itself needs breaking while (getWidth(currentLine) > width) { const broken = breakLongWord(currentLine, width, getWidth); lines.push(broken.line); currentLine = broken.remainder; } } else { // Single word is too long, need to break it while (getWidth(word) > width) { const broken = breakLongWord(word, width, getWidth); lines.push(broken.line); word = broken.remainder; } currentLine = word; } } } // Add the last line if there's content if (currentLine) { lines.push(currentLine); } return lines; function breakLongWord(word, maxWidth, getWidth) { // First try to break at existing hyphens if (word.includes('-')) { const parts = word.split('-'); let accumulated = ''; for (let i = 0; i < parts.length; i++) { const testPart = accumulated + (accumulated ? '-' : '') + parts[i]; if (getWidth(testPart) <= maxWidth) { accumulated = testPart; } else { if (accumulated) { return { line: accumulated, remainder: parts.slice(i).join('-') }; } else { // Even the first part is too long, hyphenate it return hyphenateWord(parts[i], maxWidth, getWidth); } } } // All parts fit return { line: accumulated, remainder: '' }; } // No existing hyphens, add hyphenation return hyphenateWord(word, maxWidth, getWidth); } function hyphenateWord(word, maxWidth, getWidth) { // Find the longest prefix that fits with a hyphen for (let i = word.length - 1; i > 0; i--) { const part = word.substring(0, i) + '-'; if (getWidth(part) <= maxWidth) { return { line: part, remainder: word.substring(i) }; } } // If even one character plus hyphen doesn't fit, just take one character return { line: word[0], remainder: word.substring(1) }; } } 32:Tc62,randomWalk = { // Function to generate Excel-style column names (A, B, C, ... Z, AA, AB, ...) function alphaName(index) { let name = ''; while (index >= 0) { name = String.fromCharCode(65 + (index % 26)) + name; index = Math.floor(index / 26) - 1; } return name; } // Function to sort country names by length (longest to shortest) function sortByLength(array) { const sorted = [...array]; // Create a copy to avoid modifying original return sorted.sort((a, b) => b.length - a.length); } // Function to interleave longest and shortest country names function interleaveByLength(array) { const sorted = sortByLength(array); // First sort by length const interleaved = []; let start = 0; let end = sorted.length - 1; while (start <= end) { // Add longest remaining interleaved.push(sorted[start]); start++; // Add shortest remaining (if there's still one) if (start <= end) { interleaved.push(sorted[end]); end--; } } return interleaved; } // Function to shuffle an array using Fisher-Yates algorithm (kept for reference) function shuffleArray(array) { const shuffled = [...array]; // Create a copy to avoid modifying original for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } return shuffled; } let data = [] let min, max, d, walk, velocity, rand1, rand2 // Interleave the country names by length (longest, shortest, second longest, second shortest, etc.) const interleavedCountries = interleaveByLength(countryNames); for(let i = 0; i < series; i++){ d = [] walk = 0 velocity = 0 // Use countries sequentially from the interleaved array // If we run out of countries, cycle back to the beginning const seriesName = interleavedCountries[i % interleavedCountries.length]; // Generate the random walk for(let j = 0; j < points; j++){ velocity = (Math.random() - 0.5) + .75*Math.min(1, Math.max(-1, velocity + .5 * (Math.random() - 0.5) )) walk += velocity d.push({ name: seriesName, x: j, y: walk, index:i }) } // Find min and max values of the walk min = Math.min(...d.map(point => point.y)) max = Math.max(...d.map(point => point.y)) rand1 = Math.random() ** 2 rand2 = Math.random() // Scale the walk to be between 0 and 10, and round to nearest 0.01 const range = max - min if(range > 0) { // Avoid division by zero d = d.map(point => ({ name: point.name, x: point.x, y: Math.round(( ((point.y - min) / range * 10) / (1+rand1) + rand1*rand2*5 ) * 100) / 100, index: point.index })) } else { // If all values are the same, set them to 5 (middle of 0-10 range) d = d.map(point => ({ name: point.name, x: point.x, y: 5, index: point.index })) } data.push(d) } return data }33:T974,countryNames = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo", "Costa Rica", "Côte d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Democratic Republic of the Congo", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan", "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", "Tajikistan", "Tanzania", "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"];34:[{"id":"9eae943a4aff55ee78362020f649f8b87d6f20aac5576e06ce8d4af894dd14aaedade6e662c39a20dbef856bd2a288c9c323f68c7b4c376a29fe7221de8dc8d2","href":"https://static.observableusercontent.com/files/9eae943a4aff55ee78362020f649f8b87d6f20aac5576e06ce8d4af894dd14aaedade6e662c39a20dbef856bd2a288c9c323f68c7b4c376a29fe7221de8dc8d2","name":"cancer.csv","type":"text/csv","lastModified":1749402649056.673,"size":2315}] 2d:{"id":"09bc6dde0874a6ce","slug":null,"title":"Label Endpoints","thumbnail":"355a3d6ee9ec1a8beef6e004836f9ce94a775c508b010d7f72537b467b83da61","access_level":"public","create_time":"$D2025-06-02T14:40:28.526Z","update_time":"$D2025-06-25T19:57:41.469Z","view_time":null,"first_public_time":"$D2025-06-04T17:08:39.164Z","fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":546,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[{"id":"f8abae198d9ca5c8","reply_to_id":null,"content":"I have a similar algorithm here\nhttps://github.com/observablehq/plot/pull/1957","create_time":"$D2025-06-05T21:18:27.126Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"47c8f0b04eee6d16","reply_to_id":"f8abae198d9ca5c8","content":"Thank you! I was having trouble with large groups overlapping, your implementation solved that issue.","create_time":"$D2025-06-08T22:56:49.505Z","update_time":"$D2025-06-10T16:28:50.075Z","resolved":false,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Label Endpoints","cells":[{"id":0,"value":"# Label Endpoints","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"viewof points = Inputs.range([0, 100], {label: \"Number of points\", step: 1, value:51})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof series = Inputs.range([0, 50], {label: \"Number of series\", step: 1, value:15})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viewof range = Scrubber(d3.range(0, points, 1), {\n loopDelay: 1000,\n delay:500,\n label: \"Unfold:\",\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"space = 18 // the minimum distance between series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"lineHeight = 12 // distance between lines that wrap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"Inspo: [Our World in Data](https://ourworldindata.org/grapher/child-mortality?time=1871..latest)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":113,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"optimizedLabelsExample = {\n const yScale = d3.scaleLinear()\n .domain([0, 10])\n .range([100, 0])\n \n return optimizeLabels(randomWalk, {\n minY: 0,\n maxY: 100,\n yScale: yScale,\n space: space,\n lineHeight: lineHeight\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"load Inter\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"hpColors = [ \"#F3734F\", \"#342c87\", \"#09a2db\", \"#33bc74\", \"#c058ca\", \"#006068\", \"#3175ca\", \"#009ca7\", \"#f9a453\", \"#f0c440\", \"#66c4ca\" ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"