40:null 41:["$","title",null,{"children":"1. Treemap for the consolidation paper | treemap | Observable"}] 47:T86c5,function createChart(hierarchies, index, options = {}) { const { // width = 485, // height = 625, width= 830, height= 500, fontSize = 16, formatValue = (v) => (typeof v === "number" ? v.toFixed(1) : String(v)), formatCountryName = (v, i) => String(v), showEllipsis = false, fontFamily = "sans-serif", // New padding options for the SVG container itself outerPaddingLeft = 0, outerPaddingTop = 0, outerPaddingRight = 0, // Default to a small padding on the right outerPaddingBottom = 0, // headingText = "", // New option for the heading // headingFontSize = 14, // New option for heading font size // headingTextColor = "#333", // New option for heading text color strokeWidth = 1, // You can set your desired default uniform stroke width here, e.g., 1, 1.5, 2 etc. } = options; // --- NEW DEBUGGING LOGS --- console.log("--- createChart Start ---"); console.log("Effective width:", width); console.log("Effective height:", height); console.log("Effective fontSize:", fontSize); console.log("Input 'hierarchies':", hierarchies); console.log("Input 'index':", index); if (!hierarchies || !Array.isArray(hierarchies)) { console.error("Error: 'hierarchies' is not a valid array."); return null; // Stop execution if input is bad } if (!hierarchies[0]) { console.error("Error: hierarchies[0] (layout data) is undefined or null."); return null; } if (!hierarchies[index]) { console.error(`Error: hierarchies[${index}] (actual data) is undefined or null.`); return null; } // --- END NEW DEBUGGING LOGS --- const actualDataHierarchyInput = hierarchies[index]; const actualDataRoot = d3.hierarchy( actualDataHierarchyInput, (data) => data.children ); const actualDataLeavesArray = actualDataRoot.leaves(); const actualValuesDataMap = new Map(); actualDataLeavesArray.forEach((leaf) => { if (leaf.data.name && typeof leaf.data.value !== "undefined") { actualValuesDataMap.set(leaf.data.name, { value: parseFloat(leaf.data.value), color: leaf.data.color, ...leaf.data, }); } }); const layoutHierarchy = d3 // .hierarchy(hierarchies[index - 1], (data) => data.children) //messes up the layout for the second graph .hierarchy(hierarchies[0], (data) => data.children) .sum((data) => data.value) .sort((a, b) => b.value - a.value); // --- NEW DEBUGGING LOGS --- console.log("layoutHierarchy after d3.hierarchy, sum, sort:", layoutHierarchy); if (!layoutHierarchy || typeof layoutHierarchy.leaves !== 'function') { console.error("Error: layoutHierarchy is not a valid D3 hierarchy object."); return null; } // --- END NEW DEBUGGING LOGS --- const treemapLayout = d3 .treemap() .tile(d3.treemapBinary) .size([width - 40, height - 40]) .paddingInner(1) // Keep a small inner padding // --- START: ADDED paddingTop for group labels --- .paddingTop((d) => d.depth === 0 ? 0 : 20) // 20px space at top of parent nodes (not root) // --- END: ADDED paddingTop for group labels --- .paddingRight(0) .paddingBottom(0) .paddingLeft(0) .round(true); treemapLayout(layoutHierarchy); const layoutLeaves = layoutHierarchy.leaves(); // --- NEW DEBUGGING LOGS --- console.log("layoutLeaves after treemapLayout and leaves():", layoutLeaves); if (layoutLeaves.length === 0) { console.error("Error: No leaves found after treemap layout. Treemap will be empty."); // Continue to return svg.node() which will be empty, or you could return null here } // Debugging d.x0, d.y0 for a sample leaf if (layoutLeaves.length > 0) { const firstLeaf = layoutLeaves[0]; console.log("First leaf (d_node) coordinates:", { x0: firstLeaf.x0, y0: firstLeaf.y0, x1: firstLeaf.x1, y1: firstLeaf.y1 }); } // --- END NEW DEBUGGING LOGS --- const svg = d3 .create("svg") .attr("viewBox", [-20, -20, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", fontSize); const defs = svg.append("defs"); // --- LOG GROUP A: Initial check of the SVG and its contents (should be empty here for parents) --- console.log("LOG A1: svg variable immediately after creation:", svg); console.log("LOG A2: g.leaf-node elements in document (before all rendering):", d3.select("svg").selectAll("g.leaf-node")); // Might be empty or previous render console.log("LOG A3: g.parent-group elements in document (before all rendering):", d3.select("svg").selectAll("g.parent-group")); // Should be empty // --- END LOG GROUP A --- // --- START: Setup for accurate text measurement --- const svgForMeasurement = d3.create("svg"); const tempTextElement = svgForMeasurement.append("text") .attr("font-family", "sans-serif") .style("visibility", "hidden") .style("position", "absolute") .style("top", "-9999px") .style("left", "-9999px"); if (typeof document !== 'undefined' && document.body) { document.body.appendChild(svgForMeasurement.node()); } else { console.warn("Cannot append measurement SVG to document.body. Text measurement might be inaccurate."); } const measureTextForAttemptRender = (text, fontSizeToMeasure) => { if (!text) return 0; tempTextElement .attr("font-size", `${fontSizeToMeasure}px`) .text(text); try { return tempTextElement.node().getBBox().width; } catch (e) { console.warn("Error measuring text with getBBox, falling back to approximation:", e); return text.length * (fontSizeToMeasure * 0.6); } }; // --- END: Setup for accurate text measurement --- const uid = `O-${Math.random().toString(16).slice(2)}`; const lineHeightFactor = 1; // ADJUSTED: Made tighter const minFontSize = 10; // Smallest font size for any label // --- Helper function to determine text color based on background luminance --- function getTextColor(bgColor) { if (!bgColor || bgColor === "transparent") return "#333"; const color = d3.color(bgColor); if (!color) return "#333"; const luminance = color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722; return luminance > 180 ? "#333" : "#f8f8f8"; } // --- Helper function to wrap text with ellipsis (used by attemptRender) --- const wrapTextForAttemptRender = (text, maxWidth, fsForMeasurement, maxLines, allowEllipsis = false) => { if (!text) return { lines: [], contentLost: false }; const words = text.split(" "); let lines = []; let currentLine = ""; let contentWasLost = false; // NEW FLAG const minCharsPart1 = 3; const minCharsPart2 = 5; for (const word of words) { const testLine = currentLine === "" ? word : currentLine + " " + word; if (measureTextForAttemptRender(testLine, fsForMeasurement) <= maxWidth) { currentLine = testLine; } else { if (currentLine !== "") { lines.push(currentLine); currentLine = word; } else { // Handle single word too long for a line let tempWordPart = ""; let lastValidBreakPoint = -1; let partBeforeBreak = ""; for (let j = 0; j < word.length; j++) { const char = word[j]; const testPart = tempWordPart + char; if (measureTextForAttemptRender(testPart, fsForMeasurement) <= maxWidth) { tempWordPart = testPart; if (tempWordPart.length >= minCharsPart1 && (word.length - (j + 1)) >= minCharsPart2) { lastValidBreakPoint = j; partBeforeBreak = tempWordPart; } } else { if (lastValidBreakPoint !== -1) { lines.push(partBeforeBreak + "-"); currentLine = word.slice(lastValidBreakPoint + 1); // If we broke the word but couldn't fit the rest, content was lost if (word.slice(lastValidBreakPoint + 1).length < (word.length - (lastValidBreakPoint + 1))) { contentWasLost = true; } } else { currentLine = word; } break; } } // If after attempting hyphenation, the currentLine is still the original word or empty, // and it didn't fit, mark content lost. if (currentLine === word && measureTextForAttemptRender(currentLine, fsForMeasurement) > maxWidth) { contentWasLost = true; } if (currentLine === "" && word.length > 0) { // If nothing fit, and it's not empty string contentWasLost = true; currentLine = word; // Keep trying with the original word, will be handled by final `singleWord` fallback } } } } // This catches if a word is too long and can't be hyphenated, then subsequent logic might drop it. // For now, if currentLine remains empty and word itself doesn't fit, assume content lost. if (currentLine === "" && words.length > 0 && measureTextForAttemptRender(words[0], fsForMeasurement) > maxWidth) { // Check first word if currentLine is empty contentWasLost = true; } if (currentLine.length > 0) { lines.push(currentLine); } // Handle ellipsis and maxLines if (allowEllipsis && maxLines > 0 && lines.length > maxLines) { const lastLineIndex = maxLines - 1; let lastLineContent = lines[lastLineIndex]; let trimmedLine = String(lastLineContent || ""); const ellipsisText = "..."; while (trimmedLine.length > 0 && measureTextForAttemptRender(trimmedLine + ellipsisText, fsForMeasurement) > maxWidth) { trimmedLine = trimmedLine.slice(0, -1); } lines = lines.slice(0, lastLineIndex).concat([trimmedLine + ellipsisText]); contentWasLost = true; // Ellipsis explicitly means content was lost/truncated } else if (lines.length > maxLines) { // If ellipsis is NOT allowed but lines exceed maxLines, truncate lines = lines.slice(0, maxLines); contentWasLost = true; // Content was implicitly discarded due to maxLines } // Final single word fallback (if entire original text couldn't produce any line) if (lines.length === 0 && words.length > 0) { let singleWord = words[0]; if (measureTextForAttemptRender(singleWord, fsForMeasurement) > maxWidth) { while (singleWord.length > 0 && measureTextForAttemptRender(singleWord + (allowEllipsis ? "..." : ""), fsForMeasurement) > maxWidth) { singleWord = singleWord.slice(0, -1); } if (singleWord.length > 0) { lines.push(singleWord + (allowEllipsis && singleWord.length < words[0].length ? "..." : "")); if (singleWord.length < words[0].length || measureTextForAttemptRender(singleWord, fsForMeasurement) > maxWidth) { contentWasLost = true; // If single word was truncated or still didn't fit } } else { // Single word became empty, meaning no content could fit contentWasLost = true; } } else { lines.push(singleWord); } } // Final check for overall content loss by comparing original text to final lines // Normalize both strings to remove spaces, hyphens, and ellipsis for comparison const originalNormalized = text.replace(/[\s-]/g, ''); // REMOVED: spaces and hyphens const finalNormalized = lines.map(line => line.replace(/[\s-.]/g, '')).join(''); // REMOVED: spaces, hyphens, and periods (for ellipsis) // This handles cases where words might have been dropped implicitly without `maxLines` being the sole cause // Only set contentWasLost if there's a mismatch AND ellipsis was NOT allowed to cover it if (originalNormalized !== finalNormalized && !allowEllipsis) { contentWasLost = true; } // Also, if ellipsis IS allowed, but `finalNormalized` is shorter than `originalNormalized`, // it means content *was* lost and covered by ellipsis. // This is important because the problem states "fits=true, lines=Fruit" but `Fruit products` was desired. // In this case, `contentWasLost` should be true so that `perfectFit` becomes false in `attemptRender`. if (allowEllipsis && originalNormalized.length > finalNormalized.length) { contentWasLost = true; } return { lines, contentLost: contentWasLost }; // CORRECTED: Return object here }; // This is the correct closing brace for the function // --- Helper function to attempt rendering text (for both leaves and groups) --- const attemptRender = (d_node_arg, w, h, fs, ellipsisAllowed = false) => { const name = d_node_arg && d_node_arg.data ? d_node_arg.data.name : ""; // console.log(`attemptRender for "${name}" (w:${w}, h:${h}, fs:${fs}, ellipsis:${ellipsisAllowed})`); // Keep this for debugging if needed const namePadding = 3; const minAvailableTextDim = 5; let availableTextWidth = Math.max(minAvailableTextDim, w - 2 * namePadding); let availableTextHeight = Math.max(minAvailableTextDim, h); // let availableTextHeight = Math.max(minAvailableTextDim, h - 2 * namePadding); const lineHeightPx = fs; const valueLineHeightPx = fs * 0.8; // totalMaxLines is the absolute maximum number of lines that can physically fit const totalMaxLines = Math.floor(availableTextHeight / lineHeightPx); if (availableTextWidth <= 0 || availableTextHeight <= 0 || totalMaxLines < 1) { return { fits: false, lines: [] }; } const isVisible = w > 20 && h > 20; if (!isVisible) { return { fits: false, lines: [] }; } let displayValue = null; // Only get display value for leaf nodes that have a name if (d_node_arg.children === undefined && name) { const actualItem = actualValuesDataMap.get(name); if (actualItem && typeof actualItem.value !== 'undefined') { displayValue = actualItem.value; } } const formattedValue = (displayValue !== null && typeof displayValue !== 'undefined') ? formatValue(displayValue) : ""; const nameWrapResult = wrapTextForAttemptRender(name, availableTextWidth, fs, totalMaxLines, ellipsisAllowed); const nameLines = nameWrapResult.lines; let anyContentWasLost = nameWrapResult.contentLost; let finalLines = []; nameLines.forEach(line => finalLines.push(line)); // --- Ensure valueTextLines is declared here in the function's scope --- let valueTextLines = []; // <--- THIS LINE IS CRUCIAL AND MUST BE HERE! // --- End of crucial declaration --- if (d_node_arg.children === undefined && formattedValue) { const valueMaxLines = 1; // Value should always try to be on a single line const valueWrapResult = wrapTextForAttemptRender(formattedValue, availableTextWidth, fs * 0.8, valueMaxLines, ellipsisAllowed); valueTextLines = valueWrapResult.lines; // Assign actual lines from wrapping if (valueWrapResult.contentLost) { anyContentWasLost = true; } // Removed: finalLines.push(""); for separator line as requested valueTextLines.forEach(line => finalLines.push(line)); } // Filter out any empty lines that might have been added or resulted from filtering finalLines = finalLines.filter(line => line !== null && line !== undefined && line.trim() !== ""); let perfectFit = true; // Assume perfect fit initially // --- Start of Calculated Content Height and Fit Check --- let calculatedContentHeight = 0; // Height for name lines calculatedContentHeight += nameLines.length * lineHeightPx; // Removed: adding namePadding for a separator line // Height for value lines, if present (ensure valueTextLines is used here) if (d_node_arg.children === undefined && formattedValue) { calculatedContentHeight += valueTextLines.length * valueLineHeightPx; } // If the calculated height exceeds available height, it doesn't fit if (calculatedContentHeight > availableTextHeight + 2) { // Adding a small tolerance perfectFit = false; } // --- End of Calculated Content Height and Fit Check --- // expectedTotalLines: This is the number of logical lines (name lines + value line if present) // Modified to remove the separator line count (+1) const expectedTotalLines = nameLines.length + (d_node_arg.children === undefined && formattedValue ? 1 : 0); // Check if the actual number of lines generated exceeds the logical expectation if (finalLines.length > expectedTotalLines) { perfectFit = false; } // --- NEW: Direct physical line count check --- // If the number of lines we generated (finalLines) exceeds the maximum physical lines // that can fit in the available height at the current font size, then it doesn't fit. // This is crucial for situations like "Other sauces" where 3 lines are needed but only 2 fit vertically at a large font size. if (finalLines.length > totalMaxLines && totalMaxLines > 0) { perfectFit = false; } // --- END NEW --- // If content was lost during wrapping (e.g., words discarded) AND ellipsis was NOT allowed, // then it's not a perfect fit. This will force the font size reduction loop. if (anyContentWasLost && !ellipsisAllowed) { perfectFit = false; } // Existing ellipsis check (if ellipsis IS allowed but applied, it's not a "perfect" fit for max font size) // Ensure this check correctly references valueTextLines for its ellipsis check if (ellipsisAllowed && (nameLines.some(line => line.endsWith("...")) || (formattedValue && valueTextLines.some(line => line.endsWith("..."))))) { // Use valueTextLines here perfectFit = false; } // Debugging logs (uncomment if you need to see the exact decision points) /* console.log(`--- Debugging Fit for "${name}" (fs:${fs}) ---`); console.log(` calculatedContentHeight: ${calculatedContentHeight}`); console.log(` availableTextHeight + 2: ${availableTextHeight + 2}`); console.log(` calculatedContentHeight > availableTextHeight + 2: ${calculatedContentHeight > availableTextHeight + 2}`); console.log(` finalLines.length: ${finalLines.length}`); console.log(` expectedTotalLines: ${expectedTotalLines}`); console.log(` finalLines.length > expectedTotalLines: ${finalLines.length > expectedTotalLines}`); console.log(` totalMaxLines: ${totalMaxLines}`); console.log(` finalLines.length > totalMaxLines: ${finalLines.length > totalMaxLines}`); console.log(` anyContentWasLost: ${anyContentWasLost}`); console.log(` ellipsisAllowed: ${ellipsisAllowed}`); console.log(` (anyContentWasLost && !ellipsisAllowed): ${anyContentWasLost && !ellipsisAllowed}`); console.log(` perfectFit (before final log): ${perfectFit}`); console.log(`--- End Debugging Fit ---`); */ // Final result log console.log(`attemptRender result for "${name}": fits=${perfectFit}, lines=${finalLines.length > 0 ? finalLines : '[]'}, contentLost=${anyContentWasLost}`); return { fits: perfectFit, lines: finalLines }; }; // --- START: Group Name Logic --- // Select all nodes that are parents (have children) and are not the root const groupNodes = layoutHierarchy.descendants().filter(d => d.children && d.depth > 0); console.log("Group Nodes for Labels:", groupNodes); // <-- Make sure this line is here if (groupNodes.length === 0) { console.warn("No group nodes found for labels. Check hierarchy data and depth filter."); } // Create a group for parent labels. const parentGroupSelection = svg.selectAll("g.parent-group") .data(groupNodes) .join("g") .attr("class", "parent-group") // Add class for styling/selection // The transform places the group at the parent's top-left corner .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // --- LOG GROUP B: Check parentGroupSelection immediately after .join('g') --- console.log("LOG B1: parentGroupSelection immediately after .join('g'):", parentGroupSelection); // SHOULD show 17 'g' elements here // --- END LOG GROUP B --- // Optional: Draw a subtle border for parent groups parentGroupSelection.append("rect") .attr("fill", "none") // .attr("stroke", "#ddd") // Lighter stroke for parent borders // .attr("stroke-width", strokeWidth * 1) // Example: if you want parent borders to be half the uniform stroke, or just strokeWidth for same thickness .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // Add parent labels parentGroupSelection.each(function(d_parent_node) { console.log("DEBUG: Entering parent each() for node:", d_parent_node.data.name); console.log("Processing parent node for label:", d_parent_node.data.name, d_parent_node); const groupEl = d3.select(this); // --- NEW: Remove any existing parent labels before adding new ones to prevent duplicates --- groupEl.selectAll("text.parent-label").remove(); // ----------------------------------------------------------------------------------------- const parentW = d_parent_node.x1 - d_parent_node.x0; const parentLabelReservedHeight = 25; // Ensure this matches paddingTop in your treemapLayout const groupLabelPadding = 1; const groupLabelFontSize = 13; const groupLabelMinFontSize = 12.5; const groupLabelTextColor = "#444"; const groupAvailableTextWidth = parentW - 2 * groupLabelPadding; const groupAvailableTextHeight = parentLabelReservedHeight - 2 * groupLabelPadding; console.log(`DEBUG Parent Text Space for "${d_parent_node.data.name}": Width=${groupAvailableTextWidth}, Height=${groupAvailableTextHeight}`); console.log(`Parent: ${d_parent_node.data.name}, Total Width: ${parentW}, Total Height: ${d_parent_node.y1 - d_parent_node.y0}, Reserved Label Height: ${parentLabelReservedHeight}, Available Text W: ${groupAvailableTextWidth}, Available Text H: ${groupAvailableTextHeight}`); // Skip rendering if the space for the label is too small to begin with if (groupAvailableTextWidth <= 0 || groupAvailableTextHeight <= 0 || parentW < 30 || parentLabelReservedHeight < 10) { console.warn(`Skipping label for ${d_parent_node.data.name} due to insufficient space.`); return; } let parentNameLines = []; let parentCurrentFontSize = groupLabelFontSize; // --- NEW: Vertical offset for parent label within its reserved height --- // Adjust this value to move the label up/down. // A larger value pushes the label further down (more top padding, closer to rectangles). const parentLabelOffsetY = 7; // Experiment with this value (e.g., 5, 10, 15, 20...) // --------------------------------------------------------------------- // Pass a minimal object to attemptRender for parent labels (only name, no value) const pseudoNodeForParent = { data: { name: d_parent_node.data.name }, children: true }; // children: true indicates it's a parent let parentResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, groupLabelFontSize, false); if (parentResult.fits) { parentNameLines = parentResult.lines; parentCurrentFontSize = groupLabelFontSize; } else { for (let fs_loop = groupLabelFontSize - 1; fs_loop >= groupLabelMinFontSize; fs_loop--) { const attemptResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, fs_loop, false); if (attemptResult.fits) { parentNameLines = attemptResult.lines; parentCurrentFontSize = fs_loop; break; } } } if (parentNameLines.length === 0) { // Fallback to ellipsis if no fit without ellipsis const finalEllipsisResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, groupLabelMinFontSize, true); parentNameLines = finalEllipsisResult.lines; parentCurrentFontSize = groupLabelMinFontSize; } // --- MODIFIED CONDITION FOR DRAWING PARENT LABEL --- // Draw the parent name only if lines are available AND it has more than one child if (parentNameLines.length > 0 && d_parent_node.children && d_parent_node.children.length > 1) { const parentTextElement = groupEl .append("text") .attr("class", "parent-label") // IMPORTANT: Ensure this class is set .attr("fill", groupLabelTextColor) .attr("text-anchor", "start") .style("pointer-events", "none") .style("font-size", `${parentCurrentFontSize}px`); // Assuming lineHeightFactor is defined elsewhere, e.g., const lineHeightFactor = 1.05; const textYStart = parentLabelOffsetY + (parentCurrentFontSize * (lineHeightFactor || 1.05) * 0.7); parentNameLines.forEach((line, j) => { parentTextElement .append("tspan") .attr("x", groupLabelPadding) .attr("y", textYStart + j * parentCurrentFontSize * (lineHeightFactor || 1.05)) .text(line); }); console.log("LOG C1: Text appended within groupEl for:", d_parent_node.data.name, groupEl.node()); } // --- END CONSOLIDATED BLOCK --- }); // --- END: Group Name Logic --- // --- START: Existing Leaf Node Drawing Logic --- // This part remains largely the same, but now `node` selection is AFTER parentGroupSelection const node = svg .selectAll("g.leaf") // Use a distinct class for leaf nodes .data(layoutLeaves) .join("g") .attr("class", "leaf") // Add class .attr("transform", (d) => `translate(${d.x0},${d.y0})`); node .append("rect") // Background Rectangle (Max Value) .attr("class", "background-rect") // .style("stroke-width", strokeWidth) // .attr("stroke", "white") .attr("fill", (d) => d.data.background || "#eeeeee") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); // 7. Append Foreground Rectangles (representing the Actual Value, CENTERED) node .append("rect") .attr("class", "foreground-rect") .attr("fill", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); return actualItem ? actualItem.color : "transparent"; }) .attr("width", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellWidth = d.x1 - d.x0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return 0; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); return cellWidth * scaleFactor; }) .attr("height", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellHeight = d.y1 - d.y0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return 0; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); return cellHeight * scaleFactor; }) .attr("x", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellWidth = d.x1 - d.x0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return cellWidth / 2; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); const innerWidth = cellWidth * scaleFactor; return (cellWidth - innerWidth) / 2; }) .attr("y", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellHeight = d.y1 - d.y0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return cellHeight / 2; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); const innerHeight = cellHeight * scaleFactor; return (cellHeight - innerHeight) / 2; }); node.append("title").text((d) => { const actualItem = actualValuesDataMap.get(d.data.name); const val = actualItem ? actualItem.value : null; let titleText = formatCountryName(d.data.name, actualItem); if (val !== null && typeof val !== "undefined") { titleText += `\nValue: ${formatValue(val)}`; } return titleText; }); // Main drawing logic for each leaf node node.each(function (d_node, i_node) { const group = d3.select(this); const cellW = d_node.x1 - d_node.x0; const cellH = d_node.y1 - d_node.y0; const clipId = `${uid}-clip-${i_node}`; group .append("clipPath") .attr("id", clipId) .append("rect") // .attr("width", cellW) // .attr("height", cellH); .attr("x", strokeWidth / 2) // Shift x to account for stroke .attr("y", strokeWidth / 2) // Shift y to account for stroke .attr("width", cellW - strokeWidth) // Subtract full stroke width .attr("height", cellH - strokeWidth); // Subtract full stroke width const rawName = d_node.data.name; const actualItem = actualValuesDataMap.get(d_node.data.name); const rawValue = actualItem ? actualItem.value : null; let fgWidth = 0, fgHeight = 0; const fgColor = actualItem?.color || "transparent"; if (actualItem && d_node.value > 0 && actualItem.value >= 0) { const scaleFactor = Math.sqrt(actualItem.value / d_node.value); fgWidth = cellW * scaleFactor; fgHeight = cellH * scaleFactor; } let proposedTextColor; const fgArea = fgWidth * fgHeight; const cellArea = cellW * cellH; const fgAreaRatio = cellArea > 0 ? fgArea / cellArea : 0; const significantFgAreaThreshold = 0.25; if (actualItem && fgAreaRatio > significantFgAreaThreshold) { proposedTextColor = getTextColor(fgColor); } else { proposedTextColor = getTextColor(d_node.data.background || "#eeeeee"); } let linesToDraw = []; let currentFontSize = fontSize; const minCellDimForText = 20; const isTextVisibleInCell = cellW > minCellDimForText && cellH > minCellDimForText; // 1. Try background rectangle with full font size, no ellipsis. let result = attemptRender(d_node, cellW, cellH, fontSize, false); if (result.fits) { linesToDraw = result.lines; currentFontSize = fontSize; } else { // 2. If no perfect fit at full font size, try reducing font size (without ellipsis). for (let fs_loop = fontSize - 1; fs_loop >= minFontSize; fs_loop--) { const attemptResult = attemptRender(d_node, cellW, cellH, fs_loop, false); if (attemptResult.fits) { linesToDraw = attemptResult.lines; currentFontSize = fs_loop; break; } } } // 3. Final fallback: If still no perfect fit found (linesToDraw is empty after attempts 1 & 2), // then apply ellipsis on background rectangle with minFontSize. if (linesToDraw.length === 0 && isTextVisibleInCell) { const finalEllipsisResult = attemptRender(d_node, cellW, cellH, minFontSize, true); linesToDraw = finalEllipsisResult.lines; currentFontSize = minFontSize; } else if (!isTextVisibleInCell) { linesToDraw = []; } // Draw the final text based on the determined lines and font size if (linesToDraw.length > 0) { const totalTextHeight = linesToDraw.length * currentFontSize * lineHeightFactor; const baseX = cellW / 2; const baseY = cellH / 2; // Adjust startY to account for paddingTop in the cell const startY = baseY - totalTextHeight / 2 + (currentFontSize * lineHeightFactor) / 2; const textElement = group .append("text") .attr("fill", proposedTextColor) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") // ADD THIS LINE for vertical centering .style("pointer-events", "none") .style("font-size", `${currentFontSize}px`) // .attr("clip-path", `url(${new URL(`#${clipId}`, location.href)})`); .attr("clip-path", `url(#${clipId})`) linesToDraw.forEach((line, i) => { textElement .append("tspan") .attr("x", baseX) .attr("y", startY + i * currentFontSize * lineHeightFactor) .text(line); }); } }); // --- LOG GROUP D: Final check of the SVG and its contents (after all rendering) --- // These are the most important logs to see the final state of the DOM. console.log("LOG D1: svg variable (final check):", svg); console.log("LOG D2: g.leaf-node elements in document (final check):", svg.selectAll("g.leaf-node")); // Changed from d3.select("svg") console.log("LOG D3: g.parent-group elements in document (final check):", svg.selectAll("g.parent-group")); // Changed from d3.select("svg") // --- END LOG GROUP D --- // --- END: Existing Leaf Node Drawing Logic --- // --- Cleanup the temporary measurement SVG --- if (svgForMeasurement.node() && svgForMeasurement.node().parentNode) { svgForMeasurement.node().parentNode.removeChild(svgForMeasurement.node()); } return svg.node(); }48:T7a3,function createHierarchyForYears(data, options = {}) { const { yearCol = "year", groupCol = "color", nameCol = "country", valueCol = "value", name = "" } = options; const years = [...new Set(data.map((d) => d[yearCol]))]; const groups = d3.groups(data, (d) => d[groupCol]).map((d) => d[0]); let hierarchies = []; // create hierarchy of maximum values const hierarchyMax = { name: `${name} Max.`, children: [] }; for (let group of groups) { const child = { name: group, children: [] }; const subGroup = data.filter((d) => d[groupCol] === group); const uniqueNames = [...new Set(subGroup.map((s) => s[nameCol]))]; for (let itemName of uniqueNames) { const allItems = data.filter((s) => s[nameCol] === itemName); child.children.push({ name: itemName, category: group, value: d3.max(allItems.map((d) => +d[valueCol])), color: allItems[0].color, background: allItems[0].background }); } hierarchyMax.children.push(child); } hierarchies.push(hierarchyMax); // create hierarchies for years for (let year of years) { const sub = data.filter((d) => d[yearCol] === year); const hierarchy = { name: `${name} ${year}`, children: [] }; for (let group of groups) { const child = { name: group, children: [] }; const subGroup = sub.filter((d) => d[groupCol] === group); for (let item of subGroup) { const allItems = data.filter((s) => s[nameCol] === item[nameCol]); child.children.push({ name: item[nameCol], category: group, value: item[valueCol], maxValue: d3.max(allItems.map((d) => +d[valueCol])), color: item.color, background: item.background }); } hierarchy.children.push(child); } hierarchies.push(hierarchy); } return hierarchies; }49:T7f9,food_data = d3 .tsvParse( `group name prior estimate Alcohol Wine, red 18 26 Alcohol Beer, regular 52 105 Alcohol Other alcohol 51 61 Vegetable products Vegetable products 25 36 Fish products Salmons 4 28 Fish products Other fish products 20 32 Composite dishes Mixed vegetable salad 7 31 Composite dishes Composite dishes 95 94 Coffee, cocoa, tea Coffee, cocoa, tea 64 52 Dairy products Ice cream, milk-based 15 0,1 Dairy products Starchy pudding 0,1 90 Dairy products Cheese, Gouda 29 118 Dairy products Yoghurt, cow milk, flavoured 26 30 Dairy products Cow milk, semi skimmed 22 26 Dairy products Cow milk, whole 27 33 Dairy products Other dairy products 109 122 Fruit products Apples 46 0,1 Fruit products Bananas and similar- 16 32 Fruit products Other fruit products 53 23 Egg products Boiled eggs 8 13 Egg products Other egg products 9 15 Juices Juice, apple 58 0,1 Juices Other juices 37 24 Grain-based products Mixed wheat and rye bread and rolls 55 0,1 Grain-based products Leavened bread and similar 37 22 Grain-based products Multigrain (not only rye-wheat) bread and rolls 71 275 Grain-based products Rye bread and rolls, refined flour 21 0,1 Grain-based products Rye bread and rolls, wholemeal 15 59 Grain-based products Wheat bread and rolls, white (refined flour) 101 0 Grain-based products Cakes 23 14 Grain-based products Shortcrust 23 5 Grain-based products Brioche type products 11 211 Grain-based products Other grain-based products 206 208 Legumes, nuts, oilseeds Legumes, nuts, oilseeds 32 36 Meat products Pig fresh meat 46 75 Meat products Other meat products 196 217 Sauces Salad dressing 21 49 Sauces Other sauces 37 25 Sugar products Milk chocolate 11 37 Sugar products Jelly candies 9 132 Sugar products Other sugar products 68 53 Beverages Beverages 25 11 Fats & oils Butter 56 17 Fats & oils Traditional margarine 44 180 Fats & oils Other fats & oils 37 33` ) .filter((d) => d.group) .map((r) => ({ ...r, prior: +r.prior.replace(",", "."), estimate: +r.estimate.replace(",", ".") }))4a:T7c8,/*color_lookup = Object.fromEntries( [...new Set(food_data.map((d) => d.group))].map((g, i) => [ g, { color: colors[i], background: lightenHexColor(colors[i], 0.8) } ]) )*/ color_lookup = ({ Alcohol: { color: "#02B6A5", background: lightenHexColor("#02B6A5", 0.6) }, "Vegetable products": { color: "#548235", background: lightenHexColor("#548235", 0.6) }, "Fish products": { color: "#1e4e79", background: lightenHexColor("#1e4e79", 0.4) }, "Composite dishes": { color: "#595959", background: lightenHexColor("#595959", 0.6) }, "Coffee, cocoa, tea": { color: "#542A00", background: lightenHexColor("#542A00", 0.6) }, "Dairy products": { color: "#3886CC", background: lightenHexColor("#3886CC", 0.4) }, "Fruit products": { color: "#C00000", background: lightenHexColor("#C00000", 0.6) }, "Egg products": { color: "#9DC3E6", background: lightenHexColor("#9DC3E6", 0.6) }, // "Products for non-standard diets": { // color: "#001E1B", // background: lightenHexColor("#001E1B", 0.6) // }, "Juices": { color: "#FF6600", background: lightenHexColor("#FF6600", 0.6) }, "Grain-based products": { color: "#997427", background: lightenHexColor("#997427", 0.3) }, "Legumes, nuts, oilseeds": { color: "#C24F2A", background: lightenHexColor("#C24F2A", 0.6) }, "Meat products": { color: "#661427", background: lightenHexColor("#661427", 0.6) }, Sauces: { color: "#82261C", background: lightenHexColor("#82261C", 0.6) }, // "Starchy root products": { // color: "#DFCF69", // background: lightenHexColor("#DFCF69", 0.6) // }, "Sugar products": { color: "#B40085", background: lightenHexColor("#B40085", 0.4) }, Beverages: { color: "#005654", background: lightenHexColor("#005654", 0.6) }, "Fats & oils": { color: "#FAC312", background: lightenHexColor("#FAC312", 0.6) } }) 4b:T4fe,// Helper function to determine if text should be black or white based on background color function getTextColor(bgColor) { if (!bgColor || bgColor === "transparent") { return "#000000"; // Default to black for transparent or undefined backgrounds } let color = bgColor.toLowerCase(); if (color.startsWith("#")) { color = color.slice(1); } if (color.length === 3) { color = color .split("") .map((char) => char + char) .join(""); } if (color.length !== 6) { // Check for named colors or other formats if necessary, or default if ( color === "white" || color === "yellow" || color === "aqua" || color === "lime" ) return "#000000"; if (color === "black" || color === "blue" || color === "maroon") return "#FFFFFF"; return "#000000"; // Default for unknown formats } const r = parseInt(color.substring(0, 2), 16); const g = parseInt(color.substring(2, 4), 16); const b = parseInt(color.substring(4, 6), 16); // Calculate luminance (standard formula for sRGB) const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; // Threshold can be adjusted (0.5 is common, higher means more colors get black text) return luminance > 0.8 ? "#000000" : "#FFFFFF"; }4c:T8b9,food_data1 = d3 .tsvParse( `group name prior estimate Alcohol Wine, red 17,7 28,6 Alcohol Beer, regular 52,1 78,1 Alcohol Other alcohol 51,4 60,5 Vegetable products Vegetable products 24,7 35,5 Fish products Fish products 23,8 50,5 Composite dishes Composite dishes 101,7 166,4 Coffee, cocoa, tea Coffee, cocoa, tea 64,2 51,1 Dairy products Cheese, Gouda 29,0 68,1 Dairy products Yoghurt, cow milk, flavoured 25,7 43,4 Dairy products Cream, plain 9,4 34,8 Dairy products Cow milk, semi skimmed (half fat) 21,6 29,9 Dairy products Cow milk, whole 27,1 41,6 Dairy products Other dairy products 114,1 140,6 Fruit products Apples 46,4 20,7 Fruit products Other fruit products 69,3 40,8 Egg products Egg products 17,3 28,2 Juices Juice, apple 58,2 0,01 Juices Other juices 37,0 25,9 Grain-based products Mixed wheat and rye bread and rolls 55,1 0,01 Grain-based products Cereal bars 2,3 40,9 Grain-based products Pretzels 13,0 42,2 Grain-based products Sponge cake 10,9 30,2 Grain-based products Pancakes 9,4 44,2 Grain-based products Sticks, salty 4,2 41,1 Grain-based products Leavened bread and similar 36,7 85,7 Grain-based products Multigrain (not only rye-wheat) bread and rolls 71,0 146,1 Grain-based products Rye bread and rolls, refined flour 20,9 0,01 Grain-based products Rye bread and rolls, wholemeal 15,2 51,1 Grain-based products Wheat bread and rolls, white (refined flour) 101,5 239,8 Grain-based products Cake 23,2 0,9 Grain-based products Shortcrust (pies -tarts) 22,6 0,01 Grain-based products Cake mixes/ batter 17,0 31,2 Grain-based products Other grain-based products 160,3 192,8 Legumes, nuts, oilseeds Legumes, nuts, oilseeds 32,0 48,6 Meat products Pig fresh meat 45,5 51,0 Meat products Other meat products 196,1 174,3 Sauces Salad dressing 20,7 35,6 Sauces Other sauces 37,2 31,4 Sugar products Filled chocolate 9,6 119,6 Sugar products Jelly candies 9,1 60,1 Sugar products Other sugar products 69,4 41,7 Beverages Beverages 24,8 34,3 Fats and oils Butter 56,3 25,2 Fats and oils Traditional margarine 44,5 111,6 Fats and oils Other fats and oils 36,5 47,7` ) .filter((d) => d.group) .map((r) => ({ ...r, prior: +r.prior.replace(",", "."), estimate: +r.estimate.replace(",", ".") }))4d:T7ba,{ // Define total width and height for the combined SVG const combinedWidth = 485 * 2 + 50; // Two charts of width 485 + some space in between (e.g., 50px) const combinedHeight = 1000; // Assuming both charts have the same height const svg = d3.create("svg") .attr("width", combinedWidth) .attr("height", combinedHeight) .attr("viewBox", `0 0 ${combinedWidth} ${combinedHeight}`) .style("display", "block"); // Ensure it's a block element // Append the first chart (as a element) const chart1 = createChart1(hierarchies, 1, { width: 485, height: 1000, fontSize: 10, formatValue: (value) => `${Math.round(value)} kcal`, showEllipsis: true, }); svg.append(() => chart1) // Append the DOM node returned by createChart .attr("transform", `translate(0, 0)`); // Position the first chart at (0,0) // Append the second chart (as a element) const chart2 = createChart1(hierarchies, 2, { width: 485, height: 1000, fontSize: 10, formatValue: (value) => `${Math.round(value)} kcal`, showEllipsis: true, }); svg.append(() => chart2) // Append the DOM node returned by createChart .attr("transform", `translate(${485 + 25}, 0)`); // Position the second chart next to the first with a gap (e.g., 25px gap) // You can also add the titles as SVG elements if you want them part of the SVG svg.append("text") .attr("x", 25) .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Prior intake: 1,938 kcal"); svg.append("text") .attr("x", 485 + 25 + 25) // X for second title: (width of first chart + gap + margin) .attr("y", 20) .attr("font-family", "sans-serif") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Consolidated intake: 2,683 kcal"); // Return the single SVG element for Observable to display and allow download return svg.node(); }4e:T6058,function createChart1(hierarchies, index, options = {}) { const { width = 485, height = 625, fontSize = 14, formatValue = (v) => (typeof v === "number" ? v.toFixed(1) : String(v)), formatCountryName = (v, i) => String(v), showEllipsis = true, fontFamily = "sans-serif", } = options; if (!hierarchies || !Array.isArray(hierarchies)) { console.error("Error: 'hierarchies' is not a valid array."); return null; // Stop execution if input is bad } if (!hierarchies[0]) { console.error("Error: hierarchies[0] (layout data) is undefined or null."); return null; } if (!hierarchies[index]) { console.error(`Error: hierarchies[${index}] (actual data) is undefined or null.`); return null; } const actualDataHierarchyInput = hierarchies[index]; const actualDataRoot = d3.hierarchy( actualDataHierarchyInput, (data) => data.children ); const actualDataLeavesArray = actualDataRoot.leaves(); const actualValuesDataMap = new Map(); actualDataLeavesArray.forEach((leaf) => { if (leaf.data.name && typeof leaf.data.value !== "undefined") { actualValuesDataMap.set(leaf.data.name, { value: parseFloat(leaf.data.value), color: leaf.data.color, ...leaf.data, }); } }); const layoutHierarchy = d3 .hierarchy(hierarchies[0], (data) => data.children) .sum((data) => data.value) .sort((a, b) => b.value - a.value); if (!layoutHierarchy || typeof layoutHierarchy.leaves !== 'function') { console.error("Error: layoutHierarchy is not a valid D3 hierarchy object."); return null; } const treemapLayout = d3 .treemap() .tile(d3.treemapBinary) .size([width - 40, height - 40]) .paddingInner(1) // Keep a small inner padding .paddingTop((d) => d.depth === 0 ? 0 : 20) // 20px space at top of parent nodes (not root) .paddingRight(0) .paddingBottom(0) .paddingLeft(0) .round(true); treemapLayout(layoutHierarchy); const root = treemapLayout(layoutHierarchy); const layoutLeaves = layoutHierarchy.leaves(); if (layoutLeaves.length === 0) { console.error("Error: No leaves found after treemap layout. Treemap will be empty."); } // --- MODIFICATION START --- // This is the correct temporary SVG to host the chart elements before moving them const tempSvg = d3.create("svg"); // Create an SVG in memory // Append a group 'g' element to this temporary SVG const g = tempSvg.append("g") .attr("font-family", fontFamily) .attr("font-size", fontSize); // You will now append all treemap elements (rects, text, etc.) to this 'g' element // instead of a direct 'svg' element. // --- MODIFICATION END --- const leafSelection = g .selectAll("g.leaf") .data(root.leaves()) .join("g") .attr("class", "leaf") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // --- START: Setup for accurate text measurement --- const svgForMeasurement = d3.create("svg"); const tempTextElement = svgForMeasurement.append("text") .attr("font-family", "sans-serif") .style("visibility", "hidden") .style("position", "absolute") .style("top", "-9999px") .style("left", "-9999px"); if (typeof document !== 'undefined' && document.body) { document.body.appendChild(svgForMeasurement.node()); } else { console.warn("Cannot append measurement SVG to document.body. Text measurement might be inaccurate."); } const measureTextForAttemptRender = (text, fontSizeToMeasure) => { if (!text) return 0; tempTextElement .attr("font-size", `${fontSizeToMeasure}px`) .text(text); try { return tempTextElement.node().getBBox().width; } catch (e) { console.warn("Error measuring text with getBBox, falling back to approximation:", e); return text.length * (fontSizeToMeasure * 0.6); } }; // --- END: Setup for accurate text measurement --- const uid = `O-${Math.random().toString(16).slice(2)}`; const lineHeightFactor = 1.05; // ADJUSTED: Made tighter const minFontSize = 10; // Smallest font size for any label // --- Helper function to determine text color based on background luminance --- function getTextColor(bgColor) { if (!bgColor || bgColor === "transparent") return "#333"; const color = d3.color(bgColor); if (!color) return "#333"; const luminance = color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722; return luminance > 180 ? "#333" : "#f8f8f8"; } // --- Helper function to wrap text with ellipsis (used by attemptRender) --- const wrapTextForAttemptRender = (text, maxWidth, fsForMeasurement, maxLines, allowEllipsis = false) => { if (!text) return []; const words = text.split(" "); let lines = []; let currentLine = ""; const minCharsPart1 = 3; const minCharsPart2 = 5; for (const word of words) { const testLine = currentLine === "" ? word : currentLine + " " + word; if (measureTextForAttemptRender(testLine, fsForMeasurement) <= maxWidth) { currentLine = testLine; } else { if (currentLine !== "") { lines.push(currentLine); currentLine = word; } else { let tempWordPart = ""; let lastValidBreakPoint = -1; let partBeforeBreak = ""; for (let j = 0; j < word.length; j++) { const char = word[j]; const testPart = tempWordPart + char; if (measureTextForAttemptRender(testPart, fsForMeasurement) <= maxWidth) { tempWordPart = testPart; if (tempWordPart.length >= minCharsPart1 && (word.length - (j + 1)) >= minCharsPart2) { lastValidBreakPoint = j; partBeforeBreak = tempWordPart; } } else { if (lastValidBreakPoint !== -1) { lines.push(partBeforeBreak + "-"); currentLine = word.slice(lastValidBreakPoint + 1); } else { currentLine = word; } break; } } if (currentLine === "" && word.length > 0) { currentLine = word; } } } } if (currentLine.length > 0) { lines.push(currentLine); } if (allowEllipsis && maxLines > 0 && lines.length > maxLines) { const lastLineIndex = maxLines - 1; let lastLineContent = lines[lastLineIndex]; let trimmedLine = String(lastLineContent || ""); const ellipsisText = "..."; while (trimmedLine.length > 0 && measureTextForAttemptRender(trimmedLine + ellipsisText, fsForMeasurement) > maxWidth) { trimmedLine = trimmedLine.slice(0, -1); } lines = lines.slice(0, lastLineIndex).concat([trimmedLine + ellipsisText]); } else if (lines.length > maxLines) { lines = lines.slice(0, maxLines); } if (lines.length === 0 && words.length > 0) { let singleWord = words[0]; if (measureTextForAttemptRender(singleWord, fsForMeasurement) > maxWidth) { while (singleWord.length > 0 && measureTextForAttemptRender(singleWord + (allowEllipsis ? "..." : ""), fsForMeasurement) > maxWidth) { singleWord = singleWord.slice(0, -1); } if (singleWord.length > 0) { lines.push(singleWord + (allowEllipsis && singleWord.length < words[0].length ? "..." : "")); } } else { lines.push(singleWord); } } return lines; }; // --- Helper function to attempt rendering text (for both leaves and groups) --- const attemptRender = (d_node_arg, w, h, fs, ellipsisAllowed = false) => { const name = d_node_arg && d_node_arg.data ? d_node_arg.data.name : ""; const namePadding = 1; const minAvailableTextDim = 5; let availableTextWidth = Math.max(minAvailableTextDim, w - 2 * namePadding); let availableTextHeight = Math.max(minAvailableTextDim, h - 2 * namePadding); const lineHeightPx = fs; const valueLineHeightPx = fs * 0.8; // Value font size is typically smaller const totalMaxLines = Math.floor(availableTextHeight / lineHeightPx); if (availableTextWidth <= 0 || availableTextHeight <= 0 || totalMaxLines < 1) { return { fits: false, lines: [] }; } // We'll define minCellDimForText for the overall group/leaf later // For now, let's just use the provided w, h for the `isVisible` check const isVisible = w > 20 && h > 20; // Re-use the existing overall visibility threshold if (!isVisible) { return { fits: false, lines: [] }; } let displayValue = null; // Check if it's a leaf node AND has a name if (d_node_arg.children === undefined && name) { const actualItem = actualValuesDataMap.get(name); if (actualItem && typeof actualItem.value !== 'undefined') { displayValue = actualItem.value; // Get the actual value from the map } } // If it's a parent node, we don't display a value in the label here // (This part is used for both group and leaf labels) // For group labels, d_node_arg.children is true, so displayValue will be null. const formattedValue = (displayValue !== null && typeof displayValue !== 'undefined') ? formatValue(displayValue) : ""; const nameLines = wrapTextForAttemptRender(name, availableTextWidth, fs, totalMaxLines, ellipsisAllowed); let finalLines = []; nameLines.forEach(line => finalLines.push(line)); // Only add value lines if it's a leaf node (no children) and a formatted value exists if (d_node_arg.children === undefined && formattedValue) { const valueMaxLines = 1; // You want value on a single line const valueTextLines = wrapTextForAttemptRender(formattedValue, availableTextWidth, fs * 0.8, valueMaxLines, ellipsisAllowed); // Add a blank line if there's both name and value and space allows if (nameLines.length > 0 && valueTextLines.length > 0 && (nameLines.length + valueTextLines.length < totalMaxLines)) { finalLines.push(""); } valueTextLines.forEach(line => finalLines.push(line)); } finalLines = finalLines.filter(line => line !== null && line !== undefined && line.trim() !== ""); let perfectFit = true; let calculatedContentHeight = 0; if (nameLines.length > 0) calculatedContentHeight += nameLines.length * lineHeightPx; if (nameLines.length > 0 && formattedValue && finalLines.includes("")) calculatedContentHeight += namePadding; if (formattedValue) calculatedContentHeight += finalLines.filter(l => l !== "").length * valueLineHeightPx; // Count actual value lines if (calculatedContentHeight > availableTextHeight + 2) perfectFit = false; // Adjusted totalMaxLines check for leaf nodes vs. group nodes // For group nodes, totalMaxLines is strict based on `availableTextHeight` // For leaf nodes, it also accounts for the separator. const expectedTotalLines = nameLines.length + (d_node_arg.children === undefined && formattedValue && nameLines.length > 0 ? 1 : 0) + (d_node_arg.children === undefined && formattedValue ? 1 : 0); if (finalLines.length > expectedTotalLines) perfectFit = false; if (ellipsisAllowed && (nameLines.some(line => line.endsWith("...")) || (formattedValue && finalLines.some(line => line.endsWith("..."))))) { perfectFit = false; } return { fits: perfectFit, lines: finalLines }; }; // --- START: Group Name Logic --- // Select all nodes that are parents (have children) and are not the root const groupNodes = layoutHierarchy.descendants().filter(d => d.children && d.depth > 0); if (groupNodes.length === 0) { console.warn("No group nodes found for labels. Check hierarchy data and depth filter."); } const parentGroupSelection = g // <--- Ensure this 'g' is the new one .selectAll("g.parent-group") .data(root.descendants().filter((d) => d.children && d.depth > 0)) // Only non-root parents .join("g") .attr("class", "parent-group") .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // Optional: Draw a subtle border for parent groups parentGroupSelection.append("rect") .attr("fill", "none") .attr("stroke", "#ddd") // Lighter stroke for parent borders // .attr("stroke-width", 0.5) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); // Add parent labels parentGroupSelection.each(function(d_parent_node) { const groupEl = d3.select(this); // Remove any existing parent labels before adding new ones to prevent duplicates groupEl.selectAll("text.parent-label").remove(); const parentW = d_parent_node.x1 - d_parent_node.x0; const parentLabelReservedHeight = 30; // Ensure this matches paddingTop in your treemapLayout const groupLabelPadding = 1; const groupLabelFontSize = 13; const groupLabelMinFontSize = 11; const groupLabelTextColor = "#444"; const groupAvailableTextWidth = parentW - 2 * groupLabelPadding; const groupAvailableTextHeight = parentLabelReservedHeight - 2 * groupLabelPadding; // Skip rendering if the space for the label is too small to begin with if (groupAvailableTextWidth <= 0 || groupAvailableTextHeight <= 0 || parentW < 30 || parentLabelReservedHeight < 10) { console.warn(`Skipping label for ${d_parent_node.data.name} due to insufficient space.`); return; } let parentNameLines = []; let parentCurrentFontSize = groupLabelFontSize; // Vertical offset for parent label within its reserved height --- // Adjust this value to move the label up/down. // A larger value pushes the label further down (more top padding, closer to rectangles). const parentLabelOffsetY = 7; // Pass a minimal object to attemptRender for parent labels (only name, no value) const pseudoNodeForParent = { data: { name: d_parent_node.data.name }, children: true }; // children: true indicates it's a parent let parentResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, groupLabelFontSize, false); if (parentResult.fits) { parentNameLines = parentResult.lines; parentCurrentFontSize = groupLabelFontSize; } else { for (let fs_loop = groupLabelFontSize - 1; fs_loop >= groupLabelMinFontSize; fs_loop--) { const attemptResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, fs_loop, false); if (attemptResult.fits) { parentNameLines = attemptResult.lines; parentCurrentFontSize = fs_loop; break; } } } if (parentNameLines.length === 0) { // Fallback to ellipsis if no fit without ellipsis const finalEllipsisResult = attemptRender(pseudoNodeForParent, groupAvailableTextWidth, groupAvailableTextHeight, groupLabelMinFontSize, true); parentNameLines = finalEllipsisResult.lines; parentCurrentFontSize = groupLabelMinFontSize; } // Draw the parent name only if lines are available AND it has more than one child if (parentNameLines.length > 0 && d_parent_node.children && d_parent_node.children.length > 1) { const parentTextElement = groupEl .append("text") .attr("class", "parent-label") // IMPORTANT: Ensure this class is set .attr("fill", groupLabelTextColor) .attr("text-anchor", "start") .style("pointer-events", "none") .style("font-size", `${parentCurrentFontSize}px`); // Assuming lineHeightFactor is defined elsewhere, e.g., const lineHeightFactor = 1.1; const textYStart = parentLabelOffsetY + (parentCurrentFontSize * (lineHeightFactor || 1.1) * 0.7); parentNameLines.forEach((line, j) => { parentTextElement .append("tspan") .attr("x", groupLabelPadding) .attr("y", textYStart + j * parentCurrentFontSize * (lineHeightFactor || 1.1)) .text(line); }); } }); // --- END: Group Name Logic --- // --- START: Existing Leaf Node Drawing Logic --- // This part remains largely the same, but now `node` selection is AFTER parentGroupSelection const node = g .selectAll("g.leaf") // Use a distinct class for leaf nodes .data(layoutLeaves) .join("g") .attr("class", "leaf") // Add class .attr("transform", (d) => `translate(${d.x0},${d.y0})`); node .append("rect") // Background Rectangle (Max Value) .attr("class", "background-rect") .style("stroke-width", 2) .attr("stroke", "white") .attr("fill", (d) => d.data.background || "#eeeeee") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0); // 7. Append Foreground Rectangles (representing the Actual Value, CENTERED) node .append("rect") .attr("class", "foreground-rect") .attr("fill", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); return actualItem ? actualItem.color : "transparent"; }) .attr("width", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellWidth = d.x1 - d.x0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return 0; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); return cellWidth * scaleFactor; }) .attr("height", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellHeight = d.y1 - d.y0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return 0; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); return cellHeight * scaleFactor; }) .attr("x", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellWidth = d.x1 - d.x0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return cellWidth / 2; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); const innerWidth = cellWidth * scaleFactor; return (cellWidth - innerWidth) / 2; }) .attr("y", (d) => { const actualItem = actualValuesDataMap.get(d.data.name); const cellHeight = d.y1 - d.y0; if ( !actualItem || !d.value || d.value <= 0 || typeof actualItem.value === "undefined" || actualItem.value < 0 ) return cellHeight / 2; const actualValue = actualItem.value; const maxValue = d.value; const scaleFactor = Math.sqrt(Math.max(0, actualValue) / maxValue); const innerHeight = cellHeight * scaleFactor; return (cellHeight - innerHeight) / 2; }); node.append("title").text((d) => { const actualItem = actualValuesDataMap.get(d.data.name); const val = actualItem ? actualItem.value : null; let titleText = formatCountryName(d.data.name, actualItem); if (val !== null && typeof val !== "undefined") { titleText += `\nValue: ${formatValue(val)}`; } return titleText; }); // Main drawing logic for each leaf node node.each(function (d_node, i_node) { const group = d3.select(this); const cellW = d_node.x1 - d_node.x0; const cellH = d_node.y1 - d_node.y0; const clipId = `${uid}-clip-${i_node}`; defs .append("clipPath") // Append to defs .attr("id", clipId) .append("rect") .attr("x", currentStrokeWidth / 2) .attr("y", currentStrokeWidth / 2) .attr("width", cellW - currentStrokeWidth) .attr("height", cellH - currentStrokeWidth); // group // .append("clipPath") // .attr("id", clipId) // .append("rect") // .attr("width", cellW) // .attr("height", cellH); const rawName = d_node.data.name; const actualItem = actualValuesDataMap.get(d_node.data.name); const rawValue = actualItem ? actualItem.value : null; let fgWidth = 0, fgHeight = 0; const fgColor = actualItem?.color || "transparent"; if (actualItem && d_node.value > 0 && actualItem.value >= 0) { const scaleFactor = Math.sqrt(actualItem.value / d_node.value); fgWidth = cellW * scaleFactor; fgHeight = cellH * scaleFactor; } let proposedTextColor; const fgArea = fgWidth * fgHeight; const cellArea = cellW * cellH; const fgAreaRatio = cellArea > 0 ? fgArea / cellArea : 0; const significantFgAreaThreshold = 0.25; if (actualItem && fgAreaRatio > significantFgAreaThreshold) { proposedTextColor = getTextColor(fgColor); } else { proposedTextColor = getTextColor(d_node.data.background || "#eeeeee"); } let linesToDraw = []; let currentFontSize = fontSize; const minCellDimForText = 25; const isTextVisibleInCell = cellW > minCellDimForText && cellH > minCellDimForText; // 1. Try background rectangle with full font size, no ellipsis. let result = attemptRender(d_node, cellW, cellH, fontSize, false); if (result.fits) { linesToDraw = result.lines; currentFontSize = fontSize; } else { // 2. If no perfect fit at full font size, try reducing font size (without ellipsis). for (let fs_loop = fontSize - 1; fs_loop >= minFontSize; fs_loop--) { const attemptResult = attemptRender(d_node, cellW, cellH, fs_loop, false); if (attemptResult.fits) { linesToDraw = attemptResult.lines; currentFontSize = fs_loop; break; } } } // 3. Final fallback: If still no perfect fit found (linesToDraw is empty after attempts 1 & 2), // then apply ellipsis on background rectangle with minFontSize. if (linesToDraw.length === 0 && isTextVisibleInCell) { const finalEllipsisResult = attemptRender(d_node, cellW, cellH, minFontSize, true); linesToDraw = finalEllipsisResult.lines; currentFontSize = minFontSize; } else if (!isTextVisibleInCell) { linesToDraw = []; } // Draw the final text based on the determined lines and font size if (linesToDraw.length > 0) { const totalTextHeight = linesToDraw.length * currentFontSize * lineHeightFactor; const baseX = cellW / 2; const baseY = cellH / 2; // Adjust startY to account for paddingTop in the cell const startY = baseY - totalTextHeight / 2 + (currentFontSize * lineHeightFactor) / 2; const textElement = group .append("text") .attr("fill", proposedTextColor) .attr("text-anchor", "middle") .style("pointer-events", "none") .style("font-size", `${currentFontSize}px`) .attr("clip-path", `url(${new URL(`#${clipId}`, location.href)})`); linesToDraw.forEach((line, i) => { textElement .append("tspan") .attr("x", baseX) .attr("y", startY + i * currentFontSize * lineHeightFactor) .text(line); }); } }); // --- END: Existing Leaf Node Drawing Logic --- // --- Cleanup the temporary measurement SVG --- if (svgForMeasurement.node() && svgForMeasurement.node().parentNode) { svgForMeasurement.node().parentNode.removeChild(svgForMeasurement.node()); } return g.node(); // Return the raw DOM node of the group }4f:[] 45:{"id":"91bcaefac949b458","slug":null,"title":"1. Treemap for the consolidation paper","thumbnail":"ffc7823da923d7df38a057da63c84c79d78796078505a0761dac848bdefc7dcf","access_level":"public","create_time":"$D2025-07-17T13:57:27.082Z","update_time":"$D2025-07-17T14:05:35.691Z","view_time":null,"first_public_time":"$D2025-07-17T13:57:27.082Z","has_unpublished_edits":null,"fork":{"id":"99e9a5433bf9598b","slug":null,"title":"1. Treemap for the consolidation paper","owner":{"id":"01976a9d9c587391","login":"treemap2","name":"treemap"}},"stars":0,"starred":false,"owner":{"type":"team","id":"01976a9d9c587391","login":"treemap2","name":"treemap","avatar_url":"https://avatars-next.observableusercontent.com/0f670cdbe5e222e26c62037a3f9966b7e79db38d29eeb1a31a1ec064a695f886","tier":"starter_2024","bio":"","following":false},"version":1162,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"072cc9572322224d","login":"ekiref","name":"Ekiref","avatar_url":"https://avatars-next.observableusercontent.com/712f650d873eb2067a7aaec3939d8fa6bf1464c616933aeba22a42d6b28981ff","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"072cc9572322224d","login":"ekiref","name":"Ekiref","avatar_url":"https://avatars-next.observableusercontent.com/712f650d873eb2067a7aaec3939d8fa6bf1464c616933aeba22a42d6b28981ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"1. Treemap for the consolidation paper","cells":[{"id":848,"value":"# 1. Treemap for the consolidation paper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":568,"value":" Uses all of the below. Doesn't use anything from later sections (unsure for colors and color-fct though).\n\nStructure:\n- creating the chart with commands right below the chart: this calls **createChart** and **hierarchies**\n \n- **createChart** is the main file for the chart setup, calling **d3.groups (the Array)**, which calls **food_data**.\n- **createChart** also calls **getTextColor**\n \n- **hierarchies** calls **createHierarchiesFoYears** which calls **data** which calls **food_data** and **color_lookup**, the latter calling **lightenHexColors**\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"

Prior intake: 1,938 kcal

\n ${createChart(hierarchies, 1, {\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true,\n outerPaddingLeft: 0,\n outerPaddingTop: 20,\n outerPaddingRight: 0,\n outerPaddingBottom: 0\n })}\n

Consolidated intake: 2,663 kcal

\n ${createChart(hierarchies, 2, {\n fontsize: 10,\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true,\n outerPaddingLeft: 0,\n outerPaddingTop: 20,\n outerPaddingRight: 0,\n outerPaddingBottom: 0\n })}\n

Prior intake: 1,938 kcal

\n ${createChart(hierarchies, 1, {\n fontsize: 10,\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true,\n outerPaddingLeft: 0,\n outerPaddingTop: 20,\n outerPaddingRight: 0,\n outerPaddingBottom: 0\n })}\n

Consolidated intake: 2,663 kcal

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"hierarchies = createHierarchyForYears(data, { \n groupCol: \"group\", \n nameCol: \"name\", \n name: \"Food consumption\" \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = food_data\n .filter((r) => r.prior > filter && r.estimate > filter)\n .reduce((arr, r) => {\n arr.push({\n group: r.group,\n name: r.name,\n year: \"prior\",\n value: r.prior,\n color: color_lookup[r.group].color,\n background: color_lookup[r.group].background\n });\n arr.push({\n group: r.group,\n name: r.name,\n year: \"estimate\",\n value: r.estimate,\n color: color_lookup[r.group].color,\n background: color_lookup[r.group].background\n });\n return arr;\n }, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"d3.groups(food_data, (d) => d.group)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function lightenHexColor(hex, amount = 0.9) {\n // Remove the '#' if present\n hex = hex.replace(/^#/, \"\");\n\n // Parse the hex color\n let r = parseInt(hex.substring(0, 2), 16);\n let g = parseInt(hex.substring(2, 4), 16);\n let b = parseInt(hex.substring(4, 6), 16);\n\n // Blend each component with white (255)\n r = Math.round(r + (255 - r) * amount);\n g = Math.round(g + (255 - g) * amount);\n b = Math.round(b + (255 - b) * amount);\n\n // Convert back to hex and return\n const toHex = (c) => c.toString(16).padStart(2, \"0\");\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# 2. Treemap with the function by Christoph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"uses: \n- Christoph's createTreemapComparisonChart instead of my createChart (above)\n- Swatches (for color import?)\n\nalso uses (from above): \n- hierarchies hierarchies (above)\n- data (above) \n- food_data (above) through data (above)\n- color_lookup (above) \n- createHierarchyForYears (through hierarchies)\n- lightenHexColor (through food_data2)\n\nnot sure about colors and color-function (see below)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"

\n${Swatches(\n d3.scaleOrdinal(\n Object.keys(color_lookup),\n Object.entries(color_lookup).map(([key, value]) => value.color)\n ),\n {\n columns: \"180px\"\n }\n)}\n

Prior intake: 1,938 kcal

\n ${createTreemapComparisonChart(hierarchies, 1, {\n width: 485,\n height: 800,\n fontsize: 16,\n fontfamily: \"sans-serif\",\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true\n })}\n

Consolidated intake: 2,683 kcal

\n ${createTreemapComparisonChart(hierarchies, 2, {\n width: 485,\n height: 800,\n fontsize: 10,\n formatValue: value => `${Math.round(value)} kcal`,\n showEllipsis: true\n })}

\n${Swatches(\n d3.scaleOrdinal(\n group_sums.map(g => g[0]),\n group_sums.map(g => color_lookup2[g[0]].color)\n ),\n {\n columns: \"180px\"\n }\n)}\n

Prior

\n ${createTreemapComparisonChart(hierarchies2, 1, {\n formatValue: value => `${Math.round(value)} kcal`,\n formatCountryName: name => name.split(/\\s/)[0] // split food name at first whitespace, then take first portion\n })}\n

Estimate

\n ${createTreemapComparisonChart(hierarchies2, 2, {\n formatValue: value => `${Math.round(value)} kcal`,\n formatCountryName: name => name.split(/\\s/)[0]\n })}