Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type41_radial_layered_spline_ area_chart/radial_layered_spline_area_chart_grid_01.js

@@ -0,0 +1,264 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Layered Spline Area Chart",
+    "chart_name": "radial_layered_spline_area_chart_grid_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    // 提取数据
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables;
+    const typography = jsonData.typography;
+    const colors = jsonData.colors || {};
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const images = jsonData.images || {};
+    
+    // 清空容器
+    d3.select(containerSelector).html("");
+    
+    // 获取字段名
+    const categoryField = chartUtils.schema.columnField(dataColumns, 0);
+    const valueField = chartUtils.schema.columnField(dataColumns, 1);
+    const groupField = chartUtils.schema.columnField(dataColumns, 2);
+    
+    // 内联layoutLegend函数
+    const layoutLegend = (g, groups, colors, options = {}) => {
+        const defaults = {
+            maxWidth: 500, x: 0, y: 0, itemHeight: 20, itemSpacing: 20, rowSpacing: 10,
+            symbolSize: 10, textColor: "#333", fontSize: 12, fontWeight: "normal", align: "left", shape: "circle"
+        };
+        const opts = {...defaults, ...options};
+        
+        const itemWidths = groups.map(group => opts.symbolSize * 2 + chartUtils.text.measure(g, group, {
+            fontSize: opts.fontSize,
+            fontWeight: opts.fontWeight
+        }).width + 5);
+        
+        const rows = [];
+        let currentRow = [], currentRowWidth = 0;
+        itemWidths.forEach((width, i) => {
+            if (currentRow.length === 0 || currentRowWidth + width + opts.itemSpacing <= opts.maxWidth) {
+                currentRow.push(i);
+                currentRowWidth += width + (currentRow.length > 1 ? opts.itemSpacing : 0);
+            } else {
+                rows.push(currentRow);
+                currentRow = [i];
+                currentRowWidth = width;
+            }
+        });
+        if (currentRow.length > 0) rows.push(currentRow);
+        
+        const totalHeight = rows.length * opts.itemHeight + (rows.length - 1) * opts.rowSpacing;
+        const maxRowWidth = Math.max(...rows.map(row => row.reduce((sum, i, idx) => sum + itemWidths[i] + (idx > 0 ? opts.itemSpacing : 0), 0)));
+        
+        rows.forEach((row, rowIndex) => {
+            const rowWidth = row.reduce((sum, i, idx) => sum + itemWidths[i] + (idx > 0 ? opts.itemSpacing : 0), 0);
+            let rowStartX = opts.align === "center" ? opts.x + (opts.maxWidth - rowWidth) / 2 : opts.align === "right" ? opts.x + opts.maxWidth - rowWidth : opts.x;
+            
+            let currentX = rowStartX;
+            row.forEach(i => {
+                const group = groups[i];
+                const color = colorResolver.field(group, i, { palette: "category10" }).value;
+                const legendGroup = g.append("g").attr("transform", `translate(${currentX}, ${opts.y + rowIndex * (opts.itemHeight + opts.rowSpacing)})`);
+                
+                legendGroup.append("circle").attr("class", "mark").attr("cx", opts.symbolSize / 2).attr("cy", opts.itemHeight / 2).attr("r", opts.symbolSize / 2).attr("fill", color);
+                legendGroup.append("text").attr("class", "label").attr("x", opts.symbolSize * 1.5).attr("y", opts.itemHeight / 2).attr("dominant-baseline", "middle").attr("fill", opts.textColor).style("font-size", `${opts.fontSize}px`).style("font-weight", opts.fontWeight).text(group);
+                
+                currentX += itemWidths[i] + opts.itemSpacing;
+            });
+        });
+        
+        return { width: maxRowWidth, height: totalHeight };
+    };
+    
+    // 设置尺寸和边距
+    const width = variables.width;
+    const height = variables.height;
+    const margin = { top: 50, right: 50, bottom: 50, left: 50 };
+    
+    // 创建SVG
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    
+    // 创建图表区域
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+    const radius = Math.min(chartWidth, chartHeight) / 2;
+    
+    const g = svg.append("g")
+        .attr("transform", `translate(${width/2}, ${height/2})`);
+    
+    // 获取唯一类别和分组
+    const categories = [...new Set(chartData.map(d => d[categoryField]))];
+    const groupAvgs = [...new Set(chartData.map(d => d[groupField]))]
+        .map(group => ({
+            group,
+            avg: d3.mean(chartData.filter(d => d[groupField] === group), d => +d[valueField])
+        }))
+        .sort((a, b) => b.avg - a.avg);
+    
+    const groups = groupAvgs.map(d => d.group);
+    
+    // 创建颜色比例尺
+    const colorScale = d => colorResolver.field(d, groups.indexOf(d), { palette: "tableau10" }).value;
+    
+    // 创建角度比例尺
+    const angleScale = d3.scalePoint()
+        .domain(categories)
+        .range([0, 2 * Math.PI - (2 * Math.PI / categories.length)]);
+    
+    // 创建半径比例尺
+    const allValues = chartData.map(d => +d[valueField]);
+    const minValue = Math.min(0, d3.min(allValues));
+    const maxValue = d3.max(allValues);
+    
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue])
+        .range([0, radius])
+        .nice();
+    
+    // 绘制背景圆环
+    const ticks = radiusScale.ticks(5);
+    
+    // 绘制同心圆
+    g.selectAll(".circle-axis")
+        .data(ticks)
+        .enter()
+        .append("circle")
+        .attr("class", "gridline")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", d => radiusScale(d))
+        .attr("fill", "none")
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "4,4");
+    
+    // 绘制径向轴线
+    g.selectAll(".axis-line")
+        .data(categories)
+        .enter()
+        .append("line")
+        .attr("class", "axis")
+        .attr("x1", 0)
+        .attr("y1", 0)
+        .attr("x2", d => radius * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y2", d => radius * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("stroke", "#bbb")
+        .attr("stroke-width", 1);
+    
+    // 添加类别标签
+    g.selectAll(".category-label")
+        .data(categories)
+        .enter()
+        .append("text")
+        .attr("class", "label")
+        .attr("x", d => (radius + 20) * Math.cos(angleScale(d) - Math.PI/2))
+        .attr("y", d => (radius + 20) * Math.sin(angleScale(d) - Math.PI/2))
+        .attr("text-anchor", d => {
+            const angle = angleScale(d);
+            return angle > Math.PI ? "end" : "start";
+        })
+        .attr("dominant-baseline", "middle")
+        .attr("fill", "#333")
+        .attr("font-size", "16px")
+        .attr("font-weight", "bold")
+        .text(d => chartUtils.format.category(d).text);
+    
+    // 添加刻度值标签
+    g.selectAll(".tick-label")
+        .data(ticks.filter(d => d > 0))
+        .enter()
+        .append("text")
+        .attr("class", "value")
+        .attr("x", 5)
+        .attr("y", d => -radiusScale(d) + 5)
+        .attr("text-anchor", "start")
+        .attr("font-size", "14px")
+        .attr("fill", "#666")
+        .text(d => chartUtils.format.number(d).text);
+    
+    // 创建径向面积生成器 - 关键：所有面积都从中心点开始(innerRadius=0)
+    const areaRadial = d3.areaRadial()
+        .angle(d => angleScale(d[categoryField]))
+        .innerRadius(0) // 关键：所有系列共享零基线(中心点)
+        .outerRadius(d => radiusScale(+d[valueField]))
+        .curve(d3.curveCatmullRomClosed.alpha(0.5)); // 改回CatmullRom以确保经过数据点
+    
+    // 绘制每个组的径向分层面积 - 按平均值降序绘制，确保小的不被大的完全遮挡
+    [...groups].reverse().forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 为每个类别找到对应的数据点，如果没有则跳过该类别
+        const sortedData = categories
+            .map(cat => groupData.find(d => d[categoryField] === cat))
+            .filter(d => d !== undefined); // 只保留实际存在的数据点
+        
+        // 只有当有足够数据点时才绘制面积(至少3个点)
+        if (sortedData.length >= 3) {
+            // 绘制径向面积
+            g.append("path")
+                .datum(sortedData)
+                .attr("class", "mark")
+                .attr("d", areaRadial)
+                .attr("fill", colorScale(group))
+                .attr("fill-opacity", 0.3) // 半透明，便于看见被遮挡的层
+                .attr("stroke", colorScale(group))
+                .attr("stroke-width", 2)
+                .attr("stroke-opacity", 0.8);
+        }
+        
+        // 绘制数据点 - 始终绘制所有实际数据点
+        sortedData.forEach(point => {
+            const angle = angleScale(point[categoryField]) - Math.PI/2;
+            const distance = radiusScale(+point[valueField]);
+            
+            g.append("circle")
+                .attr("class", "mark")
+                .attr("cx", distance * Math.cos(angle))
+                .attr("cy", distance * Math.sin(angle))
+                .attr("r", 3)
+                .attr("fill", colorScale(group))
+                .attr("stroke", "#fff")
+                .attr("stroke-width", 1);
+        });
+    });
+    
+    // 添加图例
+    const legendGroup = svg.append("g");
+    const legendSize = chartUtils.legend.draw(legendGroup, groups, colors, {
+        x: 0, y: 0, fontSize: 14, fontWeight: "bold", align: "center",
+        maxWidth: chartWidth, shape: "circle", textColor: "#333"
+    });
+    
+    // 居中legend
+    legendGroup.attr("transform", `translate(${(width - legendSize.width) / 2}, ${height - margin.bottom + 10})`);
+    
+    return svg.node();
+} 

modules/chart_engine/template/d3-js/type41_radial_layered_spline_ area_chart/radial_layered_spline_area_plain_chart_01.js

@@ -0,0 +1,729 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Layered Spline Area Chart",
+    "chart_name": "radial_layered_spline_area_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 7], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 400,
+    "min_width": 400,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const sourceData = jsonData.data?.data || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+
+    d3.select(containerSelector).html("");
+
+    const roleColumn = role => Array.from(dataColumns).find(col => col.role === role);
+    const categoryColumn = roleColumn("x") || dataColumns[0] || {};
+    const valueColumn = roleColumn("y") || dataColumns[1] || {};
+    const groupColumn = roleColumn("group") || dataColumns[2] || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const groupField = groupColumn.name;
+    const valueUnit = (valueColumn.unit || "").trim();
+
+    const width = Math.max(720, Number(variables.width) || 720);
+    const height = Math.max(Math.round(width * 1.5), Number(variables.height) || 0, 1080);
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const annotationFamily = typography.annotation?.font_family || fontFamily;
+    const labelWeight = typography.label?.font_weight || "600";
+    const annotationWeight = typography.annotation?.font_weight || "600";
+    const baseLabelSize = parseFloat(typography.label?.font_size) || 12;
+    const baseValueSize = parseFloat(typography.annotation?.font_size) || 11;
+    const textColor = "#102766";
+    const mutedText = "#5f6f8a";
+    const gridColor = "rgba(78, 107, 157, 0.24)";
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", height)
+        .attr("viewBox", `0 0 ${width} ${height}`)
+        .attr("style", "max-width: 100%; height: auto;")
+        .attr("xmlns", "http://www.w3.org/2000/svg")
+        .attr("class", "radial-layered-spline-area-root");
+
+    const defs = svg.append("defs");
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "radial-layered-bg-gradient")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#fbfdff");
+    bgGradient.append("stop").attr("offset", "54%").attr("stop-color", "#f1f7ff");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#f9fbff");
+    const softShadow = defs.append("filter")
+        .attr("id", "radial-layered-soft-shadow")
+        .attr("x", "-25%")
+        .attr("y", "-25%")
+        .attr("width", "150%")
+        .attr("height", "150%");
+    softShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 10)
+        .attr("flood-color", "#164a86")
+        .attr("flood-opacity", 0.14);
+    defs.append("style")
+        .text(".text[data-type='title']{display:none;}");
+
+    svg.append("rect")
+        .attr("class", "poster-background")
+        .attr("x", -180)
+        .attr("y", -700)
+        .attr("width", width + 420)
+        .attr("height", height + 900)
+        .attr("fill", "url(#radial-layered-bg-gradient)");
+    svg.append("circle")
+        .attr("class", "header-background-wash")
+        .attr("cx", width * 0.82)
+        .attr("cy", -500)
+        .attr("r", width * 0.32)
+        .attr("fill", "rgba(199, 226, 250, 0.36)");
+
+    if (!categoryField || !valueField || !groupField) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Missing radial layered spline area fields");
+        return svg.node();
+    }
+
+    function cleanLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function compactNumber(value) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) return String(value ?? "");
+        const abs = Math.abs(numeric);
+        if (abs >= 1000000000) return `${d3.format(".3~g")(numeric / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".3~g")(numeric / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".3~g")(numeric / 1000)}K`;
+        return d3.format(",.4~g")(numeric);
+    }
+
+    function formatLocalValue(value, includeUnit = true) {
+        const formatted = compactNumber(value);
+        if (!includeUnit || !valueUnit || valueUnit === "none") return formatted;
+        if (valueUnit === "%") return `${formatted}%`;
+        if (valueUnit === "$") return `$${formatted}`;
+        return `${formatted} ${valueUnit}`;
+    }
+
+    function parseTemporalRank(value) {
+        const text = String(value ?? "").trim();
+        const lower = text.toLowerCase();
+        const monthOrder = {
+            jan: 1, january: 1, feb: 2, february: 2, mar: 3, march: 3, apr: 4, april: 4,
+            may: 5, jun: 6, june: 6, jul: 7, july: 7, aug: 8, august: 8,
+            sep: 9, sept: 9, september: 9, oct: 10, october: 10, nov: 11, november: 11, dec: 12, december: 12
+        };
+        if (monthOrder[lower] != null) return monthOrder[lower];
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return Number(match[1]) * 10000;
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return Number(match[1]) * 10000 + Number(match[2]) * 100 + Number(match[3] || 1);
+        match = text.match(/^q([1-4])\s*(-?\d{4})$/i) || text.match(/^(-?\d{4})\s*q([1-4])$/i);
+        if (match && match[1].length === 1) return Number(match[2]) * 10 + Number(match[1]);
+        if (match) return Number(match[1]) * 10 + Number(match[2]);
+        return NaN;
+    }
+
+    function parseOrdinalRank(value) {
+        const text = String(value ?? "").trim().toLowerCase();
+        let match = text.match(/^(\d+(?:\.\d+)?)\s*(?:-|to)\s*\d+(?:\.\d+)?/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(\d+(?:\.\d+)?)\s*\+$/);
+        if (match) return Number(match[1]);
+        match = text.match(/^(-?\d+(?:\.\d+)?)/);
+        if (match) return Number(match[1]);
+
+        const educationRanks = [
+            [/primary|elementary/, 1],
+            [/secondary|middle|high school/, 2],
+            [/undergraduate|bachelor|college/, 3],
+            [/graduate|master/, 4],
+            [/doctor|phd|postgraduate/, 5]
+        ];
+        for (const [pattern, rank] of educationRanks) {
+            if (pattern.test(text)) return rank;
+        }
+        return NaN;
+    }
+
+    const rows = sourceData
+        .map((d, index) => ({
+            index,
+            category: cleanLabel(d[categoryField]),
+            rawCategory: d[categoryField],
+            group: cleanLabel(d[groupField]),
+            rawGroup: d[groupField],
+            value: Number(d[valueField])
+        }))
+        .filter(d => d.category && d.group && Number.isFinite(d.value) && d.value >= 0);
+
+    const categoryLabels = Array.from(new Set(rows.map(d => d.category)));
+    const groupLabels = Array.from(new Set(rows.map(d => d.group)));
+    if (categoryLabels.length < 3 || groupLabels.length < 1) {
+        svg.append("text")
+            .attr("x", width / 2)
+            .attr("y", height / 2)
+            .attr("text-anchor", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", "16px")
+            .text("Not enough data for radial layered spline area");
+        return svg.node();
+    }
+
+    const categoryStats = categoryLabels.map(category => {
+        const categoryRows = rows.filter(d => d.category === category);
+        const rawCategory = categoryRows[0]?.rawCategory;
+        return {
+            category,
+            rawCategory,
+            meanValue: d3.mean(categoryRows, d => d.value) || 0,
+            temporalRank: parseTemporalRank(rawCategory),
+            ordinalRank: parseOrdinalRank(rawCategory)
+        };
+    });
+    const allTemporal = categoryStats.every(d => Number.isFinite(d.temporalRank));
+    const allOrdinal = !allTemporal && categoryStats.every(d => Number.isFinite(d.ordinalRank));
+    const sortMode = allTemporal ? "chronological" : (allOrdinal ? "ordered category" : "average value");
+    const orderedCategories = [...categoryStats].sort((a, b) => {
+        if (allTemporal) return d3.ascending(a.temporalRank, b.temporalRank);
+        if (allOrdinal) return d3.ascending(a.ordinalRank, b.ordinalRank);
+        return d3.descending(a.meanValue, b.meanValue) || d3.ascending(a.category, b.category);
+    }).map((d, index) => ({ ...d, rank: index + 1 }));
+
+    const groupStats = groupLabels.map(group => {
+        const groupRows = rows.filter(d => d.group === group);
+        return {
+            group,
+            meanValue: d3.mean(groupRows, d => d.value) || 0,
+            maxValue: d3.max(groupRows, d => d.value) || 0
+        };
+    }).sort((a, b) => d3.descending(a.meanValue, b.meanValue) || d3.ascending(a.group, b.group));
+    const groups = groupStats.map(d => d.group);
+
+    const measureGroup = svg.append("g").attr("visibility", "hidden");
+    function measureLabelText(text, fontSize, family = fontFamily, weight = labelWeight) {
+        const node = measureGroup.append("text")
+            .style("font-family", family)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(String(text ?? ""))
+            .node();
+        const measured = node ? node.textContent.length * 7 : 0;
+        measureGroup.selectAll("text").remove();
+        return Math.max(measured || 0, String(text ?? "").length * fontSize * 0.52);
+    }
+
+    function truncateText(text, maxWidth, fontSize, family = fontFamily, weight = labelWeight) {
+        const full = String(text ?? "");
+        if (measureLabelText(full, fontSize, family, weight) <= maxWidth) return full;
+        let lo = 1;
+        let hi = full.length;
+        let best = full.slice(0, 1);
+        while (lo <= hi) {
+            const mid = Math.floor((lo + hi) / 2);
+            const candidate = `${full.slice(0, mid).trim()}...`;
+            if (measureLabelText(candidate, fontSize, family, weight) <= maxWidth) {
+                best = candidate;
+                lo = mid + 1;
+            } else {
+                hi = mid - 1;
+            }
+        }
+        return best;
+    }
+
+    function wrapTextLines(text, maxWidth, fontSize, family = fontFamily, weight = labelWeight, maxLines = 3) {
+        const words = String(text ?? "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const candidate = current ? `${current} ${word}` : word;
+            if (measureLabelText(candidate, fontSize, family, weight) <= maxWidth || !current) {
+                current = candidate;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length > maxLines) {
+            const kept = lines.slice(0, maxLines);
+            kept[maxLines - 1] = truncateText(lines.slice(maxLines - 1).join(" "), maxWidth, fontSize, family, weight);
+            return kept;
+        }
+        return lines;
+    }
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    const mainTitle = cleanLabel(jsonData.titles?.main_title || jsonData.metadata?.title || variables.title || "Layered Spline Area");
+    const titleSplit = mainTitle.match(/^(.+?)\s+in\s+(.+)$/i);
+    const heroTitle = titleSplit ? titleSplit[1] : mainTitle;
+    const kickerTitle = titleSplit ? `IN ${titleSplit[2].toUpperCase()}` : cleanLabel(valueField).toUpperCase();
+    const subtitle = cleanLabel(jsonData.titles?.sub_title || jsonData.metadata?.description || jsonData.description || "");
+    const headerX = -width * 0.06;
+    const headerTop = -620;
+    const headerMaxWidth = width * 0.43;
+    const longHeroTitle = measureLabelText(heroTitle, width * 0.052, fontFamily, "800") > headerMaxWidth * 2.1;
+    const heroFontSize = longHeroTitle ? Math.max(28, Math.min(34, width * 0.046)) : Math.max(36, Math.min(54, width * 0.072));
+    const heroLineHeight = heroFontSize * (longHeroTitle ? 1.03 : 1.06);
+    const heroLines = wrapTextLines(heroTitle, headerMaxWidth, heroFontSize, fontFamily, "800", longHeroTitle ? 4 : 2);
+    heroLines.forEach((lineText, index) => {
+        svg.append("text")
+            .attr("class", "chart-title hero-title")
+            .attr("x", headerX)
+            .attr("y", headerTop + index * heroLineHeight)
+            .attr("fill", "#102766")
+            .style("font-family", fontFamily)
+            .style("font-size", `${heroFontSize}px`)
+            .style("font-weight", "800")
+            .style("letter-spacing", "0")
+            .text(lineText);
+    });
+    const kickerY = headerTop + heroLines.length * heroLineHeight + 22;
+    svg.append("text")
+        .attr("class", "chart-subtitle-kicker")
+        .attr("x", headerX)
+        .attr("y", kickerY)
+        .attr("fill", "#109184")
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(15, width * 0.024)}px`)
+        .style("font-weight", "800")
+        .style("letter-spacing", "0")
+        .text(truncateText(kickerTitle, headerMaxWidth + 54, Math.max(15, width * 0.024), fontFamily, "800"));
+    svg.append("line")
+        .attr("class", "header-accent-rule")
+        .attr("x1", headerX)
+        .attr("x2", headerX + 54)
+        .attr("y1", kickerY + 26)
+        .attr("y2", kickerY + 26)
+        .attr("stroke", "#12a494")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    wrapTextLines(subtitle, headerMaxWidth, Math.max(16, width * 0.026), fontFamily, "500", 3)
+        .forEach((lineText, index) => {
+            svg.append("text")
+                .attr("class", "chart-subtitle-body")
+                .attr("x", headerX)
+                .attr("y", kickerY + 58 + index * 28)
+                .attr("fill", "#20325a")
+                .style("font-family", fontFamily)
+                .style("font-size", `${Math.max(16, width * 0.026)}px`)
+                .style("font-weight", "500")
+                .text(lineText);
+        });
+
+    const slotCx = width * 0.72;
+    const slotCy = -510;
+    const slotR = Math.min(width * 0.16, height * 0.108);
+    const headerSlot = svg.append("g")
+        .attr("class", "reserved-asset-slot header-topic-image-slot")
+        .attr("data-asset-slot", "header_topic_image")
+        .attr("data-asset-source-policy", "image2_asset")
+        .attr("data-anchor", "top-right-header-safe-area")
+        .attr("data-collision-rule", "keep 24px from title/subtitle and 28px from chart labels")
+        .attr("transform", `translate(${slotCx}, ${slotCy})`);
+    headerSlot.append("circle")
+        .attr("class", "header-topic-image-slot-mask")
+        .attr("r", slotR)
+        .attr("fill", "#c9f4f6")
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 12)
+        .attr("filter", "url(#radial-layered-soft-shadow)");
+    headerSlot.append("circle")
+        .attr("class", "header-topic-image-slot-glow")
+        .attr("r", slotR * 0.86)
+        .attr("fill", "rgba(255, 255, 255, 0.22)");
+    headerSlot.append("circle")
+        .attr("class", "header-topic-image-slot-inner")
+        .attr("r", slotR * 0.66)
+        .attr("fill", "none")
+        .attr("stroke", "rgba(16, 39, 102, 0.18)")
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", "6,9");
+    headerSlot.append("text")
+        .attr("class", "header-topic-image-slot-label")
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "central")
+        .attr("fill", "rgba(16, 39, 102, 0.30)")
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(11, width * 0.017)}px`)
+        .style("font-weight", "700")
+        .text("IMAGE");
+
+    const centerX = width * 0.5;
+    const centerY = height * 0.152;
+    const radius = Math.max(220, Math.min(width * 0.412, height * 0.275));
+    const labelRadius = radius + 30;
+    const maxValue = Math.max(1, d3.max(rows, d => d.value) || 1);
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue * 1.04])
+        .range([0, radius]);
+    const domainMax = radiusScale.domain()[1];
+    const ticks = d3.range(1, 5).map(step => domainMax * step / 4);
+    const angleForIndex = index => (index / orderedCategories.length) * Math.PI * 2 - Math.PI / 2;
+
+    const referencePalette = ["#2364d8", "#8665dc", "#18a8a3", "#f59e0b", "#ef476f", "#2a9d8f"];
+    const colorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, index) => referencePalette[index % referencePalette.length]));
+
+    const valueByGroupCategory = new Map();
+    rows.forEach(d => {
+        valueByGroupCategory.set(`${d.group}|||${d.category}`, d.value);
+    });
+
+    const seriesData = groupStats.map(groupInfo => {
+        const values = orderedCategories.map((categoryInfo, index) => {
+            const value = valueByGroupCategory.get(`${groupInfo.group}|||${categoryInfo.category}`) ?? 0;
+            const angle = angleForIndex(index);
+            const distance = radiusScale(value);
+            return {
+                group: groupInfo.group,
+                category: categoryInfo.category,
+                rank: categoryInfo.rank,
+                value,
+                angle,
+                x: distance * Math.cos(angle),
+                y: distance * Math.sin(angle)
+            };
+        });
+        return {
+            group: groupInfo.group,
+            meanValue: groupInfo.meanValue,
+            values
+        };
+    });
+
+    const plot = svg.append("g")
+        .attr("class", "radial-layered-spline-area-plot")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    const ringLine = d3.line()
+        .x(d => d.x)
+        .y(d => d.y)
+        .curve(d3.curveLinearClosed);
+
+    ticks.forEach(tick => {
+        const tickRadius = radiusScale(tick);
+        const ringPoints = orderedCategories.map((categoryInfo, index) => {
+            const angle = angleForIndex(index);
+            return {
+                x: tickRadius * Math.cos(angle),
+                y: tickRadius * Math.sin(angle)
+            };
+        });
+        plot.append("path")
+            .attr("class", "radial-grid-ring gridline")
+            .attr("d", ringLine(ringPoints))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,4");
+
+    });
+
+    orderedCategories.forEach((categoryInfo, index) => {
+        const angle = angleForIndex(index);
+        const axisX = radius * Math.cos(angle);
+        const axisY = radius * Math.sin(angle);
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const iconR = Math.max(18, Math.min(26, width * 0.034));
+        let labelX = labelRadius * cos;
+        let labelY = labelRadius * sin;
+        if (sin < -0.78) {
+            labelY = -radius - iconR * 3.25;
+        }
+
+        plot.append("line")
+            .attr("class", "category-axis-line")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", axisX)
+            .attr("y2", axisY)
+            .attr("stroke", rgba(textColor, 0.12))
+            .attr("stroke-width", 1);
+
+        plot.append("circle")
+            .attr("class", "category-index-dot")
+            .attr("cx", axisX)
+            .attr("cy", axisY)
+            .attr("r", 4.5)
+            .attr("fill", "#ffffff")
+            .attr("stroke", "#2364d8")
+            .attr("stroke-width", 2);
+
+        plot.append("text")
+            .attr("class", "category-label")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", Math.abs(cos) < 0.25 ? "middle" : (cos > 0 ? "start" : "end"))
+            .attr("dominant-baseline", "central")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", `${Math.max(16, Math.min(22, baseLabelSize * 1.3))}px`)
+            .style("font-weight", "800")
+            .text(truncateText(categoryInfo.category, width * 0.16, Math.max(16, Math.min(22, baseLabelSize * 1.3)), fontFamily, "800"));
+
+        let iconX = labelX;
+        let iconY = labelY;
+        if (sin < -0.78) {
+            iconY = -radius - iconR - 8;
+        } else if (sin > 0.58) {
+            iconY = Math.min(labelY + iconR * 1.65, radius + 86 - iconR - 18);
+            iconX = labelX + (cos >= 0 ? iconR * 1.1 : -iconR * 1.1);
+        } else {
+            iconY = labelY + iconR * 1.35;
+            iconX = labelX + (cos >= 0 ? iconR * 1.85 : -iconR * 1.85);
+        }
+        const edgePad = iconR + 8;
+        iconX = Math.max(-centerX + edgePad, Math.min(centerX - edgePad, iconX));
+        iconY = Math.max(-radius - iconR - 24, Math.min(height - centerY - 250, iconY));
+        const iconSlot = plot.append("g")
+            .attr("class", "reserved-asset-slot category-icon-slot")
+            .attr("data-asset-slot", `category_icon_${categoryInfo.rank}`)
+            .attr("data-category", categoryInfo.category)
+            .attr("data-asset-source-policy", "image2_asset")
+            .attr("data-anchor", "category-axis-label-floating-offset")
+            .attr("data-collision-rule", "avoid category label, radial mark, legend card, and canvas edge")
+            .attr("transform", `translate(${iconX}, ${iconY})`);
+        iconSlot.append("circle")
+            .attr("class", "category-icon-slot-mask")
+            .attr("r", iconR)
+            .attr("fill", "#ffffff")
+            .attr("stroke", rgba(colorScale(groups[index % groups.length] || groups[0]), 0.55))
+            .attr("stroke-width", 1.6)
+            .attr("filter", "url(#radial-layered-soft-shadow)");
+        iconSlot.append("circle")
+            .attr("class", "category-icon-slot-placeholder")
+            .attr("r", iconR * 0.32)
+            .attr("fill", rgba(colorScale(groups[index % groups.length] || groups[0]), 0.18))
+            .attr("stroke", rgba(textColor, 0.14))
+            .attr("stroke-width", 1);
+    });
+
+    const line = d3.line()
+        .x(d => d.x)
+        .y(d => d.y)
+        .curve(d3.curveCatmullRomClosed.alpha(0.5));
+
+    [...seriesData].reverse().forEach(series => {
+        const color = colorScale(series.group);
+        plot.append("path")
+            .datum(series.values)
+            .attr("class", "mark radial-layered-spline-area")
+            .attr("data-tag", "mark")
+            .attr("data-group", series.group)
+            .attr("d", line)
+            .attr("fill", color)
+            .attr("fill-opacity", 0.18)
+            .attr("stroke", color)
+            .attr("stroke-width", 3)
+            .attr("stroke-opacity", 0.9)
+            .attr("stroke-linejoin", "round");
+    });
+
+    const pointRows = seriesData.flatMap(series => series.values.map(d => ({ ...d, color: colorScale(series.group) })));
+    plot.selectAll(".radial-area-point")
+        .data(pointRows)
+        .enter()
+        .append("circle")
+        .attr("class", "mark data-point radial-area-point")
+        .attr("data-tag", "mark")
+        .attr("data-group", d => d.group)
+        .attr("data-category", d => d.category)
+        .attr("cx", d => d.x)
+        .attr("cy", d => d.y)
+        .attr("r", 5.2)
+        .attr("fill", d => d.color)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 2.4);
+
+    plot.append("circle")
+        .attr("class", "radial-origin")
+        .attr("r", 2.2)
+        .attr("fill", rgba(textColor, 0.45))
+        .attr("opacity", 0.65);
+
+    const legendColumns = Math.max(1, Math.min(groups.length, groups.length <= 3 ? groups.length : 3));
+    const legendRows = Math.max(1, Math.ceil(groups.length / legendColumns));
+    const legendPadX = 28;
+    const legendPadTop = 28;
+    const legendPadBottom = 24;
+    const legendRowGap = 74;
+    const legendWidth = Math.min(width * 0.88, Math.max(width * 0.72, legendColumns * 176 + legendPadX * 2));
+    const legendColumnWidth = (legendWidth - legendPadX * 2) / legendColumns;
+    const legendItemTextWidth = Math.max(82, legendColumnWidth - 46);
+    const legendHeight = legendPadTop + legendPadBottom + legendRows * 56 + (legendRows - 1) * 18;
+    const legendX = (width - legendWidth) / 2;
+    const legendY = centerY + radius + 86;
+    const legend = svg.append("g")
+        .attr("class", "group-legend-card radial-layered-spline-key")
+        .attr("transform", `translate(${legendX}, ${legendY})`);
+
+    legend.append("rect")
+        .attr("class", "legend-card-background")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", legendWidth)
+        .attr("height", legendHeight)
+        .attr("rx", 18)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "rgba(118, 152, 190, 0.22)")
+        .attr("filter", "url(#radial-layered-soft-shadow)");
+
+    function legendDescription(group) {
+        const lower = String(group).toLowerCase();
+        if (/pro|positive|support|yes|agree/.test(lower)) return "Users expressing pro-climate views.";
+        if (/con|negative|oppose|deny|skeptic/.test(lower)) return "Users expressing skeptical views.";
+        if (/neutral|mixed|other/.test(lower)) return "Users with neutral or mixed views.";
+        const stat = groupStats.find(d => d.group === group);
+        if (stat && Number.isFinite(stat.meanValue)) {
+            return `Mean ${formatLocalValue(stat.meanValue)} across categories.`;
+        }
+        return "Data-bound series in this radial layer.";
+    }
+
+    const groupLegend = legend.selectAll(".group-legend-row")
+        .data(groups)
+        .enter()
+        .append("g")
+        .attr("class", "group-legend-row")
+        .attr("transform", (d, i) => {
+            const col = i % legendColumns;
+            const row = Math.floor(i / legendColumns);
+            return `translate(${legendPadX + col * legendColumnWidth}, ${legendPadTop + row * legendRowGap})`;
+        });
+
+    legend.selectAll(".legend-divider")
+        .data(d3.range(1, legendColumns))
+        .enter()
+        .append("line")
+        .attr("class", "legend-divider")
+        .attr("x1", d => legendPadX - 14 + d * legendColumnWidth)
+        .attr("x2", d => legendPadX - 14 + d * legendColumnWidth)
+        .attr("y1", 20)
+        .attr("y2", legendHeight - 20)
+        .attr("stroke", "rgba(16, 39, 102, 0.12)")
+        .attr("stroke-width", 1);
+
+    legend.selectAll(".legend-row-divider")
+        .data(d3.range(1, legendRows))
+        .enter()
+        .append("line")
+        .attr("class", "legend-row-divider")
+        .attr("x1", legendPadX)
+        .attr("x2", legendWidth - legendPadX)
+        .attr("y1", d => legendPadTop + d * legendRowGap - 19)
+        .attr("y2", d => legendPadTop + d * legendRowGap - 19)
+        .attr("stroke", "rgba(16, 39, 102, 0.09)")
+        .attr("stroke-width", 1);
+
+    groupLegend.append("circle")
+        .attr("class", "group-swatch")
+        .attr("cx", 0)
+        .attr("cy", 0)
+        .attr("r", 8)
+        .attr("fill", d => colorScale(d))
+        .attr("fill-opacity", 0.95);
+
+    groupLegend.append("text")
+        .attr("class", "group-label")
+        .attr("x", 20)
+        .attr("y", 0)
+        .attr("dominant-baseline", "middle")
+        .attr("fill", textColor)
+        .style("font-family", fontFamily)
+        .style("font-size", `${Math.max(16, baseValueSize * 1.45)}px`)
+        .style("font-weight", "800")
+        .text(d => truncateText(d, legendItemTextWidth, Math.max(16, baseValueSize * 1.45), fontFamily, "800"));
+
+    groupLegend.each(function(d) {
+        const row = d3.select(this);
+        wrapTextLines(legendDescription(d), legendItemTextWidth, Math.max(11, baseValueSize * 1.02), fontFamily, "500", 2)
+            .forEach((lineText, index) => {
+                row.append("text")
+                    .attr("class", "group-legend-description")
+                    .attr("x", 20)
+                    .attr("y", 28 + index * 18)
+                    .attr("fill", "#536274")
+                    .style("font-family", fontFamily)
+                    .style("font-size", `${Math.max(11, baseValueSize * 1.02)}px`)
+                    .style("font-weight", "500")
+                    .text(lineText);
+            });
+    });
+
+    svg.append("rect")
+        .attr("class", "layout-extent-anchor")
+        .attr("x", width / 2)
+        .attr("y", legendY + legendHeight + 24)
+        .attr("width", 1)
+        .attr("height", 1)
+        .attr("fill", "transparent")
+        .attr("opacity", 0);
+
+    measureGroup.remove();
+    return svg.node();
+}