Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type40_radial_layered_area_chart/radial_layered_area_chart_grid_01.js

@@ -0,0 +1,265 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Layered Area Chart",
+    "chart_name": "radial_layered_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.curveLinearClosed);
+    
+    // 绘制每个组的径向分层面积 - 按平均值降序绘制，确保小的不被大的完全遮挡
+    [...groups].reverse().forEach(group => {
+        const groupData = chartData.filter(d => d[groupField] === group);
+        
+        // 确保数据按角度排序，形成完整的径向面积
+        const sortedData = categories.map(cat => {
+            const point = groupData.find(d => d[categoryField] === cat);
+            return point || { [categoryField]: cat, [valueField]: 0, [groupField]: group };
+        });
+        
+        // 绘制径向面积
+        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);
+        
+        // 绘制数据点
+        categories.forEach(cat => {
+            const point = groupData.find(item => item[categoryField] === cat);
+            if (point) {
+                const angle = angleScale(cat) - 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/type40_radial_layered_area_chart/radial_layered_area_plain_chart_01.js

@@ -0,0 +1,440 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Radial Layered Area Chart",
+    "chart_name": "radial_layered_area_plain_chart_01",
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[3, 30], [0, "inf"], [1, 6]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": [],
+    "supported_effects": [],
+    "min_height": 520,
+    "min_width": 520,
+    "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 && 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 || {};
+    const fieldColors = sourceColors.field || {};
+
+    d3.select(containerSelector).html("");
+
+    const categoryColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const valueColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const groupColumn = chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || {};
+    const categoryField = categoryColumn.name;
+    const valueField = valueColumn.name;
+    const groupField = groupColumn.name;
+    const valueUnit = (valueColumn.unit || "").trim();
+
+    const width = Math.max(520, Number(variables.width) || 600);
+    const height = Math.max(520, Number(variables.height) || 600);
+    const textColor = sourceColors.text_color || "#263244";
+    const mutedText = "#64748b";
+    const gridColor = "rgba(100, 116, 139, 0.24)";
+    const axisColor = "rgba(38, 50, 68, 0.34)";
+    const fontFamily = (typography.label && typography.label.font_family) ||
+        (typography.title && typography.title.font_family) ||
+        "Arial, sans-serif";
+    const annotationFamily = (typography.annotation && typography.annotation.font_family) || fontFamily;
+    const labelWeight = (typography.label && typography.label.font_weight) || "700";
+    const valueWeight = (typography.annotation && typography.annotation.font_weight) || "600";
+    const baseLabelSize = parseFloat(typography.label && typography.label.font_size) || 11;
+    const baseValueSize = parseFloat(typography.annotation && typography.annotation.font_size) || 10;
+
+    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-area-root");
+
+    function showMessage(message) {
+        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(message);
+        return svg.node();
+    }
+
+    if (!categoryField || !valueField || !groupField) {
+        return showMessage("Missing radial layered area fields");
+    }
+
+    function cleanLabel(value) {
+        return String(value ?? "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function readableName(value) {
+        return cleanLabel(value).replace(/\b\w/g, letter => letter.toUpperCase());
+    }
+
+    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;
+        const currencyWithSuffix = valueUnit.match(/^([£$€¥])\s*([A-Za-z]+)$/);
+        if (valueUnit === "%") return `${formatted}%`;
+        if (currencyWithSuffix) return `${currencyWithSuffix[1]}${formatted}${currencyWithSuffix[2]}`;
+        if (/^[£$€¥]$/.test(valueUnit)) return `${valueUnit}${formatted}`;
+        return `${formatted} ${valueUnit}`;
+    }
+
+    function parseTemporalRank(value) {
+        const text = String(value ?? "").trim();
+        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]);
+        const parsed = new Date(text);
+        return Number.isNaN(+parsed) ? NaN : +parsed;
+    }
+
+    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+)?)(?:st|nd|rd|th)?\b/);
+        if (match) return Number(match[1]);
+        return NaN;
+    }
+
+    function shortenLabel(value, maxChars) {
+        const clean = cleanLabel(value);
+        if (clean.length <= maxChars) return clean;
+        const words = clean.split(" ").filter(Boolean);
+        if (words.length > 1) {
+            const firstLast = `${words[0]} ${words[words.length - 1]}`;
+            if (firstLast.length <= maxChars) return firstLast;
+        }
+        return `${clean.slice(0, Math.max(4, maxChars - 3))}...`;
+    }
+
+    const aggregated = new Map();
+    sourceData.forEach((row, index) => {
+        const category = cleanLabel(row[categoryField]);
+        const group = cleanLabel(row[groupField]);
+        const value = Number(row[valueField]);
+        if (!category || !group || !Number.isFinite(value) || value < 0) return;
+        const key = `${category}|||${group}`;
+        if (!aggregated.has(key)) {
+            aggregated.set(key, {
+                category,
+                rawCategory: row[categoryField],
+                group,
+                rawGroup: row[groupField],
+                value: 0,
+                firstIndex: index
+            });
+        }
+        aggregated.get(key).value += value;
+    });
+
+    const rows = Array.from(aggregated.values());
+    const categories = Array.from(new Set(rows.map(d => d.category)));
+    const groups = Array.from(new Set(rows.map(d => d.group)));
+    if (categories.length < 3 || groups.length < 1) {
+        return showMessage("Not enough data for radial layered area");
+    }
+
+    const valueByCategoryGroup = new Map(rows.map(d => [`${d.category}|||${d.group}`, d.value]));
+    const categoryStats = categories.map(category => {
+        const categoryRows = rows.filter(d => d.category === category);
+        const rawCategory = categoryRows[0]?.rawCategory;
+        return {
+            category,
+            rawCategory,
+            firstIndex: d3.min(categoryRows, d => d.firstIndex) ?? 0,
+            total: d3.sum(categoryRows, d => d.value),
+            temporalRank: parseTemporalRank(rawCategory),
+            ordinalRank: parseOrdinalRank(rawCategory)
+        };
+    });
+    const categoriesAreTemporal = categoryStats.every(d => Number.isFinite(d.temporalRank));
+    const categoriesAreOrdinal = !categoriesAreTemporal && categoryStats.every(d => Number.isFinite(d.ordinalRank));
+    const sortMode = categoriesAreTemporal ? "chronological" : (categoriesAreOrdinal ? "ordered category" : "ranked by total");
+    const orderedCategories = categoryStats.slice().sort((a, b) => {
+        if (categoriesAreTemporal) return d3.ascending(a.temporalRank, b.temporalRank) || d3.ascending(a.firstIndex, b.firstIndex);
+        if (categoriesAreOrdinal) return d3.ascending(a.ordinalRank, b.ordinalRank) || d3.ascending(a.firstIndex, b.firstIndex);
+        return d3.descending(a.total, b.total) || d3.ascending(a.category, b.category);
+    }).map(d => d.category);
+
+    const groupStats = groups.map(group => {
+        const groupRows = rows.filter(d => d.group === group);
+        return {
+            group,
+            rawGroup: groupRows[0]?.rawGroup,
+            firstIndex: d3.min(groupRows, d => d.firstIndex) ?? 0,
+            mean: d3.mean(groupRows, d => d.value) || 0,
+            max: d3.max(groupRows, d => d.value) || 0
+        };
+    });
+    const orderedGroups = groupStats.slice()
+        .sort((a, b) => d3.descending(a.mean, b.mean) || d3.ascending(a.firstIndex, b.firstIndex))
+        .map(d => d.group);
+    const rawGroupByClean = new Map(groupStats.map(d => [d.group, d.rawGroup]));
+
+    const maxValue = Math.max(1e-9, d3.max(rows, d => d.value) || 0);
+    const margin = { top: 32, right: 34, bottom: 68, left: 34 };
+    const legendHeight = Math.min(70, 18 * Math.ceil(orderedGroups.length / 3));
+    const centerX = width / 2;
+    const centerY = (height - margin.bottom + margin.top - legendHeight) / 2 + 12;
+    const labelReserve = orderedCategories.length > 8 ? 42 : 52;
+    const radius = Math.max(92, Math.min(width - margin.left - margin.right, height - margin.top - margin.bottom - legendHeight) / 2 - labelReserve);
+    const angleStep = (2 * Math.PI) / orderedCategories.length;
+    const angleScale = d3.scalePoint()
+        .domain(orderedCategories)
+        .range([0, 2 * Math.PI - angleStep])
+        .padding(0);
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .nice(4)
+        .range([0, radius]);
+    const domainMax = radiusScale.domain()[1];
+    const ticks = radiusScale.ticks(4).filter(tick => tick > 0);
+
+    const palette = d3.schemeTableau10 || d3.schemeCategory10;
+    const colorScale = d3.scaleOrdinal()
+        .domain(orderedGroups)
+        .range(orderedGroups.map((group, index) => {
+            const rawGroup = rawGroupByClean.get(group);
+            return fieldColors[group] || fieldColors[rawGroup] || palette[index % palette.length];
+        }));
+
+    function pointFor(category, value) {
+        const angle = (angleScale(category) || 0) - Math.PI / 2;
+        const distance = radiusScale(value);
+        return {
+            angle,
+            distance,
+            x: distance * Math.cos(angle),
+            y: distance * Math.sin(angle)
+        };
+    }
+
+    const chart = svg.append("g")
+        .attr("class", "radial-layered-area-chart")
+        .attr("data-tag", "chart")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    ticks.forEach(tick => {
+        chart.append("circle")
+            .attr("class", "radial-grid")
+            .attr("r", radiusScale(tick))
+            .attr("fill", "none")
+            .attr("stroke", gridColor)
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "3,4");
+        chart.append("text")
+            .attr("class", "ring-label axis-tick")
+            .attr("x", 4)
+            .attr("y", -radiusScale(tick) - 3)
+            .attr("fill", mutedText)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(7.2, baseValueSize * 0.72)}px`)
+            .style("font-weight", valueWeight)
+            .text(formatLocalValue(tick, false));
+    });
+
+    orderedCategories.forEach(category => {
+        const angle = (angleScale(category) || 0) - Math.PI / 2;
+        const x = radius * Math.cos(angle);
+        const y = radius * Math.sin(angle);
+        chart.append("line")
+            .attr("class", "radial-axis")
+            .attr("x1", 0)
+            .attr("y1", 0)
+            .attr("x2", x)
+            .attr("y2", y)
+            .attr("stroke", axisColor)
+            .attr("stroke-width", 1);
+
+        const labelDistance = radius + (orderedCategories.length > 8 ? 15 : 20);
+        const labelX = labelDistance * Math.cos(angle);
+        const labelY = labelDistance * Math.sin(angle);
+        const normalizedAngle = (angle + Math.PI * 2) % (Math.PI * 2);
+        const anchor = Math.abs(Math.cos(angle)) < 0.25 ? "middle" : (normalizedAngle > Math.PI / 2 && normalizedAngle < Math.PI * 1.5 ? "end" : "start");
+        chart.append("text")
+            .attr("class", "category-label")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", anchor)
+            .attr("dominant-baseline", "middle")
+            .attr("fill", textColor)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(7.6, Math.min(baseLabelSize, orderedCategories.length > 8 ? 8.4 : 9.6))}px`)
+            .style("font-weight", labelWeight)
+            .text(shortenLabel(category, orderedCategories.length > 8 ? 9 : 13));
+    });
+
+    const areaRadial = d3.areaRadial()
+        .angle(d => angleScale(d.category))
+        .innerRadius(0)
+        .outerRadius(d => radiusScale(d.value))
+        .curve(d3.curveLinearClosed);
+
+    const lineRadial = d3.lineRadial()
+        .angle(d => angleScale(d.category))
+        .radius(d => radiusScale(d.value))
+        .curve(d3.curveLinearClosed);
+
+    orderedGroups.slice().reverse().forEach(group => {
+        const series = orderedCategories.map(category => ({
+            category,
+            group,
+            value: valueByCategoryGroup.get(`${category}|||${group}`) ?? 0
+        }));
+        const color = colorScale(group);
+        chart.append("path")
+            .datum(series)
+            .attr("class", "radial-layered-area mark")
+            .attr("data-tag", "mark")
+            .attr("data-group", group)
+            .attr("d", areaRadial)
+            .attr("fill", color)
+            .attr("fill-opacity", 0.24)
+            .attr("stroke", "none");
+        chart.append("path")
+            .datum(series)
+            .attr("class", "radial-layered-area-line")
+            .attr("data-group", group)
+            .attr("d", lineRadial)
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 1.8)
+            .attr("stroke-linejoin", "round")
+            .attr("stroke-opacity", 0.9);
+
+        series.forEach(d => {
+            const point = pointFor(d.category, d.value);
+            chart.append("circle")
+                .attr("class", "radial-area-point data-point")
+                .attr("data-tag", "mark")
+                .attr("data-group", group)
+                .attr("data-category", d.category)
+                .attr("data-value", d.value)
+                .attr("cx", point.x)
+                .attr("cy", point.y)
+                .attr("r", 2.3)
+                .attr("fill", color)
+                .attr("stroke", "#ffffff")
+                .attr("stroke-width", 0.7);
+        });
+    });
+
+    const legend = svg.append("g")
+        .attr("class", "radial-layered-area-legend")
+        .attr("transform", `translate(${margin.left}, ${height - margin.bottom + 16})`);
+    const legendFont = Math.max(8.2, Math.min(baseValueSize, 10.2));
+    const maxLegendWidth = width - margin.left - margin.right;
+    let currentX = 0;
+    let currentY = 0;
+    orderedGroups.forEach((group, index) => {
+        const label = shortenLabel(group, 18);
+        const itemWidth = Math.min(160, 16 + label.length * legendFont * 0.55 + 18);
+        if (currentX > 0 && currentX + itemWidth > maxLegendWidth) {
+            currentX = 0;
+            currentY += 17;
+        }
+        const item = legend.append("g")
+            .attr("class", "legend-item")
+            .attr("transform", `translate(${currentX}, ${currentY})`);
+        item.append("circle")
+            .attr("class", "legend-swatch")
+            .attr("cx", 5)
+            .attr("cy", 5)
+            .attr("r", 5)
+            .attr("fill", colorScale(group));
+        item.append("text")
+            .attr("class", "legend-label")
+            .attr("x", 14)
+            .attr("y", 8)
+            .attr("fill", textColor)
+            .style("font-family", annotationFamily)
+            .style("font-size", `${legendFont}px`)
+            .style("font-weight", valueWeight)
+            .text(label);
+        currentX += itemWidth;
+    });
+
+    const valueName = readableName(valueColumn.label || valueColumn.name || valueField);
+    const categoryName = readableName(categoryColumn.label || categoryColumn.name || categoryField);
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", 24)
+        .attr("y", height - 18)
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, baseValueSize * 0.82)}px`)
+        .text(`Radius shows ${valueName}${valueUnit && valueUnit !== "none" ? ` (${valueUnit})` : ""}; shared radial scale 0-${formatLocalValue(domainMax, true)}.`);
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", width - 24)
+        .attr("y", height - 18)
+        .attr("text-anchor", "end")
+        .attr("fill", mutedText)
+        .style("font-family", annotationFamily)
+        .style("font-size", `${Math.max(8, baseValueSize * 0.82)}px`)
+        .text(`${categoryName} order: ${sortMode}`);
+
+    return svg.node();
+}