Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type10_circular_bar_chart/circular_bar_chart_icons_01.js

@@ -0,0 +1,599 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Circular Bar Chart",
+    "chart_name": "circular_bar_chart_icons_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 20], [0, "inf"]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke"],
+    "min_height": 500,
+    "min_width": 500,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const rows = (jsonData.data && jsonData.data.data ? jsonData.data.data : []).slice();
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const images = jsonData.images || { field: {}, other: {} };
+
+    d3.select(containerSelector).html("");
+
+    const rawWidth = +variables.width || 650;
+    const rawHeight = +variables.height || 975;
+    const width = Math.max(500, rawWidth);
+    const height = Math.max(width * 1.42, rawHeight);
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key || "category";
+    const valueField = chartUtils.schema.channel(jsonData, "y").key || "value";
+    const valueChannel = chartUtils.schema.channel(jsonData, "y");
+    const valueUnit = valueChannel && valueChannel.unit ? (valueChannel.unit === "B" ? " B" : valueChannel.unit) : "";
+    const fontFamily = (typography.label && typography.label.font_family) || "Arial, sans-serif";
+
+    if (!rows.length) return null;
+
+    const monthIndex = {
+        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
+    };
+    const seasonIndex = { winter: 1, spring: 2, summer: 3, fall: 4, autumn: 4 };
+
+    function temporalValue(value) {
+        if (value == null) return null;
+        const text = String(value).trim();
+        const lower = text.toLowerCase();
+        if (/^\d{4}$/.test(text)) return +text;
+        if (monthIndex[lower]) return monthIndex[lower];
+        if (seasonIndex[lower]) return seasonIndex[lower];
+        const parsed = Date.parse(text);
+        return Number.isNaN(parsed) ? null : parsed;
+    }
+
+    function isTemporalField(field, dataRows) {
+        const fieldName = String(field || "").toLowerCase();
+        if (/(year|date|month|season|time|quarter|week)/.test(fieldName)) return true;
+        const parsed = dataRows.map(d => temporalValue(d[field])).filter(v => v != null);
+        return parsed.length >= Math.max(3, Math.ceil(dataRows.length * 0.7));
+    }
+
+    const chartData = rows
+        .filter(d => Number.isFinite(+d[valueField]))
+        .sort((a, b) => {
+            if (isTemporalField(dimensionField, rows)) {
+                const ta = temporalValue(a[dimensionField]);
+                const tb = temporalValue(b[dimensionField]);
+                if (ta != null && tb != null) return ta - tb;
+            }
+            return +b[valueField] - +a[valueField];
+        });
+
+    const totalItems = chartData.length;
+    if (!totalItems) return null;
+
+    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")
+        .attr("data-chart-variation", "circular_bar_chart_icons_01");
+
+    const defs = svg.append("defs");
+
+    const bgGrad = defs.append("linearGradient")
+        .attr("id", "circular-icons-bg")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "0%").attr("y2", "100%");
+    bgGrad.append("stop").attr("offset", "0%").attr("stop-color", "#ffffff");
+    bgGrad.append("stop").attr("offset", "68%").attr("stop-color", "#fffdf8");
+    bgGrad.append("stop").attr("offset", "100%").attr("stop-color", "#f7efe3");
+
+    const markShadow = defs.append("filter")
+        .attr("id", "circular-icons-soft-shadow")
+        .attr("x", "-30%").attr("y", "-30%")
+        .attr("width", "160%").attr("height", "160%");
+    markShadow.append("feDropShadow")
+        .attr("dx", 0).attr("dy", 4).attr("stdDeviation", 5)
+        .attr("flood-color", "#8f4c34").attr("flood-opacity", 0.18);
+
+    const slotClipId = "circular-icons-header-slot-clip";
+    const headerSlotCx = width * 0.80;
+    const headerSlotCy = height * 0.185;
+    const headerSlotR = Math.min(width * 0.126, height * 0.086);
+    defs.append("clipPath")
+        .attr("id", slotClipId)
+        .append("circle")
+        .attr("cx", headerSlotCx)
+        .attr("cy", headerSlotCy)
+        .attr("r", headerSlotR);
+
+    svg.append("rect")
+        .attr("x", 0).attr("y", 0)
+        .attr("width", width).attr("height", height)
+        .attr("fill", "url(#circular-icons-bg)");
+
+    const titles = jsonData.titles || {};
+    const metadata = jsonData.metadata || {};
+    const rawTitle = String(titles.main_title || metadata.title || "Circular Bar Chart").trim();
+    const subtitle = String(
+        titles.sub_title ||
+        metadata.description ||
+        jsonData.description ||
+        ""
+    ).trim();
+    let headerLineOne = rawTitle;
+    let headerLineTwo = "";
+    const byMatch = rawTitle.match(/\s+by\s+/i);
+    if (byMatch) {
+        const splitAt = byMatch.index;
+        headerLineOne = rawTitle.slice(0, splitAt);
+        headerLineTwo = rawTitle.slice(splitAt).trim();
+    }
+    const headerX = width * 0.085;
+    const lineOneY = height * 0.085;
+    const lineTwoY = height * 0.165;
+    const lineOneFont = Math.min(30, Math.max(25, width * 0.044));
+    const lineTwoFont = Math.min(50, Math.max(40, width * 0.074));
+
+    function wrapWords(text, maxChars, maxLines) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const trial = current ? `${current} ${word}` : word;
+            if (current && trial.length > maxChars) {
+                lines.push(current);
+                current = word;
+            } else {
+                current = trial;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length > maxLines) {
+            const kept = lines.slice(0, maxLines);
+            kept[maxLines - 1] = `${kept[maxLines - 1].replace(/[.。]+$/, "")}...`;
+            return kept;
+        }
+        return lines.length ? lines : [""];
+    }
+
+    function fitHeaderText(text, maxWidth, fontSize, weight, letterSpacing) {
+        const clean = String(text || "");
+        const spacing = letterSpacing || 0;
+        const measuredWidth = value => chartUtils.text.measure(null, value, {
+            fontFamily: "Arial, Helvetica, sans-serif",
+            fontSize,
+            fontWeight: weight
+        }).width + Math.max(0, value.length - 1) * spacing;
+        if (measuredWidth(clean) <= maxWidth) return clean;
+        let out = clean;
+        while (out.length > 3 && measuredWidth(`${out}...`) > maxWidth) {
+            out = out.slice(0, -1);
+        }
+        return `${out.replace(/\s+$/, "")}...`;
+    }
+
+    const headerLayer = svg.append("g")
+        .attr("class", "circular-icons-reference-header")
+        .attr("data-role", "title-subtitle-header")
+        .attr("data-anchor", "upper-left-page-safe-area")
+        .attr("data-collision-rule", "reserve top band before chart and left of header illustration slot");
+
+    headerLayer.append("text")
+        .attr("class", "title-line title-line-kicker")
+        .attr("x", headerX)
+        .attr("y", lineOneY)
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", lineOneFont)
+        .attr("font-weight", 900)
+        .attr("letter-spacing", 0.4)
+        .attr("fill", "#F2A51A")
+        .text(fitHeaderText(headerLineOne.toUpperCase(), width - headerX - width * 0.065, lineOneFont, 900, 0.4));
+
+    if (headerLineTwo) {
+        headerLayer.append("text")
+            .attr("class", "title-line title-line-main")
+            .attr("x", headerX)
+            .attr("y", lineTwoY)
+            .attr("font-family", "Arial, Helvetica, sans-serif")
+            .attr("font-size", lineTwoFont)
+            .attr("font-weight", 900)
+            .attr("letter-spacing", 1)
+            .attr("fill", "#D95A46")
+            .text(fitHeaderText(
+                headerLineTwo.toUpperCase(),
+                headerSlotCx - headerSlotR - headerX - width * 0.03,
+                lineTwoFont,
+                900,
+                1
+            ));
+    }
+
+    const subtitleLines = wrapWords(subtitle, 42, 3);
+    const subtitleX = width * 0.115;
+    const subtitleY = height * 0.225;
+    const subtitleFont = Math.min(19, Math.max(15, width * 0.026));
+    headerLayer.append("rect")
+        .attr("class", "subtitle-accent")
+        .attr("x", headerX + 1)
+        .attr("y", subtitleY - subtitleFont * 0.92)
+        .attr("width", Math.max(4, width * 0.008))
+        .attr("height", subtitleLines.length * subtitleFont * 1.45 + 6)
+        .attr("fill", "#F2A51A");
+    const subtitleText = headerLayer.append("text")
+        .attr("class", "subtitle")
+        .attr("x", subtitleX)
+        .attr("y", subtitleY)
+        .attr("font-family", "Arial, Helvetica, sans-serif")
+        .attr("font-size", subtitleFont)
+        .attr("font-weight", 500)
+        .attr("fill", "#333333");
+    subtitleLines.forEach((line, index) => {
+        subtitleText.append("tspan")
+            .attr("x", subtitleX)
+            .attr("dy", index === 0 ? 0 : subtitleFont * 1.45)
+            .text(line);
+    });
+
+    const headerSlot = svg.append("g")
+        .attr("class", "asset-slot asset-slot-header-illustration")
+        .attr("data-asset-slot", "header-illustration")
+        .attr("data-bbox", `${headerSlotCx - headerSlotR},${headerSlotCy - headerSlotR},${headerSlotR * 2},${headerSlotR * 2}`)
+        .attr("data-anchor", "header-safe-area-upper-right")
+        .attr("data-collision-rule", "avoid-title-subtitle-chart-outer-labels-canvas-edge; downstream asset clipped to circular slot")
+        .attr("data-mask-rule", "circle-clip")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+
+    headerSlot.append("circle")
+        .attr("cx", headerSlotCx)
+        .attr("cy", headerSlotCy)
+        .attr("r", headerSlotR)
+        .attr("fill", "#F8F1E7")
+        .attr("fill-opacity", 0.82)
+        .attr("stroke", "#D9C9B7")
+        .attr("stroke-width", 1.8)
+        .attr("stroke-dasharray", "8 7");
+    headerSlot.append("circle")
+        .attr("cx", headerSlotCx)
+        .attr("cy", headerSlotCy)
+        .attr("r", headerSlotR * 0.34)
+        .attr("fill", "none")
+        .attr("stroke", "#D9C9B7")
+        .attr("stroke-width", 1.2)
+        .attr("opacity", 0.78);
+    headerSlot.append("line")
+        .attr("x1", headerSlotCx - headerSlotR * 0.52)
+        .attr("y1", headerSlotCy)
+        .attr("x2", headerSlotCx + headerSlotR * 0.52)
+        .attr("y2", headerSlotCy)
+        .attr("stroke", "#D9C9B7")
+        .attr("stroke-width", 1.1)
+        .attr("opacity", 0.66);
+    headerSlot.append("text")
+        .attr("x", headerSlotCx)
+        .attr("y", headerSlotCy + headerSlotR * 0.66)
+        .attr("text-anchor", "middle")
+        .attr("font-family", fontFamily)
+        .attr("font-size", Math.max(9, width * 0.017))
+        .attr("fill", "#9c8b7a")
+        .text("asset slot");
+
+    const centerX = width * 0.5;
+    const centerY = height * 0.625;
+    const radius = Math.min(width * 0.365, height * 0.245);
+    const innerRadius = radius * 0.39;
+    const maxValue = d3.max(chartData, d => +d[valueField]) || 1;
+    const radiusScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([innerRadius + radius * 0.14, radius]);
+    const anglePerItem = (2 * Math.PI) / totalItems;
+
+    const highColor = "#bc3f31";
+    const midColor = "#ef6d3f";
+    const lowColor = "#f6b64b";
+    const fillScale = d3.scaleLinear()
+        .domain([0, Math.max(1, totalItems / 2), Math.max(1, totalItems - 1)])
+        .range([highColor, midColor, lowColor]);
+
+    const leaderLayer = svg.append("g").attr("class", "leader-layer");
+    const chartLayer = svg.append("g")
+        .attr("class", "radial-chart-layer")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+    const leaderDotLayer = svg.append("g").attr("class", "leader-dot-layer");
+    const labelLayer = svg.append("g").attr("class", "outer-label-layer");
+    const valueLayer = svg.append("g")
+        .attr("class", "value-label-layer")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    const arcGenerator = d3.arc()
+        .innerRadius(innerRadius)
+        .padAngle(Math.min(0.025, 0.18 / totalItems))
+        .padRadius(innerRadius)
+        .cornerRadius(Math.max(4, width * 0.012));
+
+    const itemMeta = chartData.map((d, i) => {
+        const value = +d[valueField];
+        const startAngle = i * anglePerItem;
+        const endAngle = startAngle + anglePerItem;
+        const midAngle = startAngle + anglePerItem / 2;
+        const outerRadius = radiusScale(value);
+        const x = Math.sin(midAngle);
+        const y = -Math.cos(midAngle);
+        return {
+            d, i, value, startAngle, endAngle, midAngle, outerRadius,
+            side: x >= 0 ? "right" : "left",
+            markX: centerX + x * outerRadius,
+            markY: centerY + y * outerRadius,
+            rawLabelY: centerY + y * (radius + width * 0.09)
+        };
+    });
+
+    function resolveLabelPositions(side) {
+        const sideItems = itemMeta
+            .filter(m => m.side === side)
+            .sort((a, b) => a.rawLabelY - b.rawLabelY);
+        const minY = height * 0.36;
+        const maxY = height * 0.90;
+        const gap = Math.max(42, width * 0.072);
+        let y = minY;
+        sideItems.forEach(m => {
+            m.labelY = Math.max(m.rawLabelY, y);
+            y = m.labelY + gap;
+        });
+        const overflow = sideItems.length ? sideItems[sideItems.length - 1].labelY - maxY : 0;
+        if (overflow > 0) {
+            for (let i = sideItems.length - 1; i >= 0; i--) {
+                const nextY = i === sideItems.length - 1 ? maxY : sideItems[i + 1].labelY - gap;
+                sideItems[i].labelY = Math.min(sideItems[i].labelY - overflow, nextY);
+            }
+        }
+    }
+    resolveLabelPositions("left");
+    resolveLabelPositions("right");
+
+    chartLayer.selectAll("path.radial-bar")
+        .data(itemMeta)
+        .enter()
+        .append("path")
+        .attr("class", "radial-bar")
+        .attr("data-category", m => m.d[dimensionField])
+        .attr("data-value", m => m.value)
+        .attr("d", m => arcGenerator({
+            innerRadius,
+            outerRadius: m.outerRadius,
+            startAngle: m.startAngle,
+            endAngle: m.endAngle
+        }))
+        .attr("fill", m => fillScale(m.i))
+        .attr("stroke", "#fffaf1")
+        .attr("stroke-width", Math.max(3, width * 0.009))
+        .attr("filter", "url(#circular-icons-soft-shadow)");
+
+    itemMeta.forEach(m => {
+        const valueText = chartUtils.format.autoText(m.value, { unit: valueUnit });
+        const midRadius = Math.max(innerRadius + 18, Math.min(m.outerRadius - 18, (innerRadius + m.outerRadius) / 2 + 8));
+        const x = Math.sin(m.midAngle) * midRadius;
+        const y = -Math.cos(m.midAngle) * midRadius + 4;
+        const arcAvailable = Math.max(24, midRadius * anglePerItem * 0.64);
+        const radialAvailable = Math.max(30, (m.outerRadius - innerRadius) * 0.78);
+        const available = Math.min(arcAvailable, radialAvailable);
+        let fontSize = Math.min(27, Math.max(11, width * 0.043));
+        let measured = chartUtils.text.measure(null, valueText, {
+            fontFamily,
+            fontSize,
+            fontWeight: 800
+        }).width;
+        while (measured > available && fontSize > 8) {
+            fontSize -= 1;
+            measured = chartUtils.text.measure(null, valueText, {
+                fontFamily,
+                fontSize,
+                fontWeight: 800
+            }).width;
+        }
+        const fill = (m.outerRadius - innerRadius) < 42 && m.i > totalItems * 0.55 ? "#3f3b37" : "#ffffff";
+        valueLayer.append("text")
+            .attr("class", "value-label")
+            .attr("data-category", m.d[dimensionField])
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", fontFamily)
+            .attr("font-size", fontSize)
+            .attr("font-weight", 800)
+            .attr("fill", fill)
+            .text(valueText);
+    });
+
+    svg.append("circle")
+        .attr("class", "center-hub")
+        .attr("cx", centerX)
+        .attr("cy", centerY)
+        .attr("r", innerRadius + 4)
+        .attr("fill", "#fffdf8")
+        .attr("stroke", "#ead9c4")
+        .attr("stroke-width", 2)
+        .attr("filter", "url(#circular-icons-soft-shadow)");
+
+    const hub = svg.append("g")
+        .attr("class", "center-hub-neutral-glyph")
+        .attr("transform", `translate(${centerX}, ${centerY})`)
+        .attr("data-asset-policy", "reusable-chart-native-neutral-glyph");
+    const glyphColor = "#e6cba7";
+    hub.append("circle").attr("cx", 0).attr("cy", -14).attr("r", 10).attr("fill", glyphColor);
+    hub.append("circle").attr("cx", -20).attr("cy", -10).attr("r", 8).attr("fill", glyphColor).attr("opacity", 0.85);
+    hub.append("circle").attr("cx", 20).attr("cy", -10).attr("r", 8).attr("fill", glyphColor).attr("opacity", 0.85);
+    hub.append("path").attr("d", "M-22,28c0,-19 44,-19 44,0v7h-44z").attr("fill", glyphColor);
+    hub.append("path").attr("d", "M-43,30c1,-16 24,-18 32,-6v11h-32z").attr("fill", glyphColor).attr("opacity", 0.82);
+    hub.append("path").attr("d", "M11,24c8,-12 31,-10 32,6v5h-32z").attr("fill", glyphColor).attr("opacity", 0.82);
+
+    function textWidth(text, fontSize, weight) {
+        return chartUtils.text.measure(null, text, {
+            fontFamily,
+            fontSize,
+            fontWeight: weight || 500
+        }).width;
+    }
+
+    function truncateText(text, maxWidth, fontSize, weight) {
+        const clean = String(text == null ? "" : text);
+        if (textWidth(clean, fontSize, weight) <= maxWidth) return clean;
+        let out = clean;
+        while (out.length > 2 && textWidth(`${out}...`, fontSize, weight) > maxWidth) {
+            out = out.slice(0, -1);
+        }
+        return `${out}...`;
+    }
+
+    itemMeta.forEach((m, idx) => {
+        const category = String(m.d[dimensionField]);
+        const valueText = chartUtils.format.autoText(m.value, { unit: valueUnit });
+        const sideSign = m.side === "right" ? 1 : -1;
+        const iconSize = Math.max(24, Math.min(34, width * (totalItems > 12 ? 0.048 : 0.054)));
+        const topRightReferenceLabel = m.side === "right" && m.rawLabelY < centerY - radius * 0.9;
+        const radialIconX = centerX + Math.sin(m.midAngle) * (radius + width * 0.08);
+        const iconX = topRightReferenceLabel
+            ? Math.max(width * 0.28, Math.min(width * 0.42, radialIconX))
+            : (m.side === "right" ? width - Math.max(108, width * 0.17) : 48);
+        const endpointX = m.markX + Math.sin(m.midAngle) * 6;
+        const endpointY = m.markY - Math.cos(m.midAngle) * 6;
+        const iconY = m.labelY;
+        const textX = iconX + iconSize * 0.68;
+        const categoryFontSize = Math.max(10, Math.min(14, width * 0.023));
+        const valueFontSize = Math.max(10, Math.min(13, width * 0.021));
+        const localSafeGap = Math.max(16, iconSize * 0.52);
+        const sideColumnOuterGap = Math.max(10, width * 0.018);
+        const rightColumnMax = width - textX - sideColumnOuterGap;
+        const leftEndpointMax = endpointX - textX - localSafeGap;
+        const leftGlobalMax = centerX - radius * 0.58 - textX;
+        const maxTextWidth = m.side === "right"
+            ? Math.max(46, Math.min(132, rightColumnMax))
+            : Math.max(46, Math.min(116, leftEndpointMax, leftGlobalMax));
+        const categoryText = truncateText(category, maxTextWidth, categoryFontSize, 700);
+        const categoryTextWidth = Math.min(maxTextWidth, textWidth(categoryText, categoryFontSize, 700));
+        const labelBoxLeft = m.side === "right" ? iconX - iconSize / 2 - 4 : iconX - iconSize / 2 - 4;
+        const labelBoxRight = m.side === "right"
+            ? Math.min(width - sideColumnOuterGap, Math.max(textX + categoryTextWidth, textX + 24))
+            : Math.min(endpointX - localSafeGap, textX + categoryTextWidth);
+        const leaderEndX = m.side === "right"
+            ? Math.max(iconX - iconSize * 0.62, Math.min(labelBoxLeft, width - sideColumnOuterGap))
+            : Math.min(iconX + iconSize * 0.62, labelBoxRight);
+        const c1X = endpointX + sideSign * width * 0.05;
+        const c2X = leaderEndX - sideSign * width * 0.05;
+
+        leaderLayer.append("path")
+            .attr("class", "outer-label-leader")
+            .attr("data-category", category)
+            .attr("d", `M${endpointX},${endpointY} C${c1X},${endpointY} ${c2X},${iconY} ${leaderEndX},${iconY}`)
+            .attr("fill", "none")
+            .attr("stroke", "#b8afa5")
+            .attr("stroke-width", 1.5)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-dasharray", "2 5");
+        leaderDotLayer.append("circle")
+            .attr("cx", endpointX)
+            .attr("cy", endpointY)
+            .attr("r", 2.7)
+            .attr("fill", fillScale(idx))
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 1);
+
+        const labelGroup = labelLayer.append("g")
+            .attr("class", "outer-label")
+            .attr("data-category", category)
+            .attr("transform", `translate(${iconX}, ${iconY})`);
+
+        labelGroup.append("circle")
+            .attr("class", "icon-badge")
+            .attr("r", iconSize / 2 + 3)
+            .attr("fill", "#fffaf2")
+            .attr("stroke", "#ead8c4")
+            .attr("stroke-width", 1.2);
+
+        const iconUrl = images && images.field ? images.field[category] : null;
+        if (iconUrl) {
+            const clipId = `circular-icons-field-icon-${idx}`;
+            defs.append("clipPath")
+                .attr("id", clipId)
+                .append("circle")
+                .attr("cx", 0)
+                .attr("cy", 0)
+                .attr("r", iconSize / 2);
+            labelGroup.append("image")
+                .attr("class", "input-field-icon")
+                .attr("data-asset-source", "input-field-icon")
+                .attr("data-category", category)
+                .attr("data-no-copied-reference-art", "true")
+                .attr("xlink:href", iconUrl)
+                .attr("href", iconUrl)
+                .attr("x", -iconSize / 2)
+                .attr("y", -iconSize / 2)
+                .attr("width", iconSize)
+                .attr("height", iconSize)
+                .attr("clip-path", `url(#${clipId})`)
+                .attr("preserveAspectRatio", "xMidYMid slice");
+        } else {
+            labelGroup.append("text")
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("font-family", fontFamily)
+                .attr("font-size", iconSize * 0.44)
+                .attr("font-weight", 800)
+                .attr("fill", "#cc5a38")
+                .text(category.slice(0, 1).toUpperCase());
+        }
+
+        labelLayer.append("text")
+            .attr("class", "outer-category-label")
+            .attr("data-category", category)
+            .attr("x", textX)
+            .attr("y", iconY - 4)
+            .attr("text-anchor", "start")
+            .attr("font-family", fontFamily)
+            .attr("font-size", categoryFontSize)
+            .attr("font-weight", 700)
+            .attr("fill", "#2f2b28")
+            .attr("data-label-max-width", maxTextWidth.toFixed(1))
+            .attr("data-label-safe-boundary-x", (m.side === "right" ? width - sideColumnOuterGap : endpointX - localSafeGap).toFixed(1))
+            .text(categoryText);
+
+        labelLayer.append("text")
+            .attr("class", "outer-value-label")
+            .attr("data-category", category)
+            .attr("x", textX)
+            .attr("y", iconY + 14)
+            .attr("text-anchor", "start")
+            .attr("font-family", fontFamily)
+            .attr("font-size", valueFontSize)
+            .attr("font-weight", 800)
+            .attr("fill", fillScale(Math.max(0, idx - 1)))
+            .text(valueText);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type10_circular_bar_chart/circular_bar_chart_icons_02.js

@@ -0,0 +1,543 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Circular Bar Chart",
+    "chart_name": "circular_bar_chart_icons_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[15, 30], [0, 100]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity"],
+    "min_height": 600,
+    "min_width": 800,
+    "has_title": 1,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data;
+    const rows = (jsonData.data && jsonData.data.data ? jsonData.data.data : []).slice();
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const xField = chartUtils.schema.columnField(dataColumns, 0);
+    const yField = chartUtils.schema.columnField(dataColumns, 1);
+    const images = jsonData.images || { field: {}, other: {} };
+
+    d3.select(containerSelector).html("");
+    if (!rows.length) return null;
+
+    const monthIndex = {
+        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
+    };
+    const seasonIndex = { winter: 1, spring: 2, summer: 3, fall: 4, autumn: 4 };
+
+    function temporalValue(value) {
+        if (value == null) return null;
+        const text = String(value).trim();
+        const lower = text.toLowerCase();
+        if (/^\d{4}$/.test(text)) return +text;
+        if (monthIndex[lower]) return monthIndex[lower];
+        if (seasonIndex[lower]) return seasonIndex[lower];
+        const parsed = Date.parse(text);
+        return Number.isNaN(parsed) ? null : parsed;
+    }
+
+    function isTemporalField(field, dataRows) {
+        const fieldName = String(field || "").toLowerCase();
+        if (/(year|date|month|season|time|quarter|week)/.test(fieldName)) return true;
+        const parsed = dataRows.map(d => temporalValue(d[field])).filter(v => v != null);
+        return parsed.length >= Math.max(3, Math.ceil(dataRows.length * 0.7));
+    }
+
+    const isTemporal = isTemporalField(xField, rows);
+    const chartData = rows
+        .filter(d => Number.isFinite(+d[yField]))
+        .sort((a, b) => {
+            if (isTemporal) {
+                const ta = temporalValue(a[xField]);
+                const tb = temporalValue(b[xField]);
+                if (ta != null && tb != null) return ta - tb;
+            }
+            return +b[yField] - +a[yField];
+        });
+    if (!chartData.length) return null;
+
+    const width = Math.max(800, +variables.width || 800);
+    const height = Math.max(1200, +variables.height || 1200);
+    const fontFamily = (typography.label && typography.label.font_family) || "Arial, Helvetica, sans-serif";
+    const maxValue = d3.max(chartData, d => +d[yField]) || 1;
+
+    function fmtValue(value) {
+        return chartUtils.format.number(value).text;
+    }
+
+    function wrapWords(text, maxChars, maxLines) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            const trial = current ? `${current} ${word}` : word;
+            if (current && trial.length > maxChars) {
+                lines.push(current);
+                current = word;
+            } else {
+                current = trial;
+            }
+        });
+        if (current) lines.push(current);
+        if (lines.length > maxLines) {
+            const kept = lines.slice(0, maxLines);
+            kept[maxLines - 1] = `${kept[maxLines - 1].replace(/[.。]+$/, "")}...`;
+            return kept;
+        }
+        return lines;
+    }
+
+    function shorten(text, maxChars) {
+        const clean = String(text == null ? "" : text);
+        if (clean.length <= maxChars) return clean;
+        return `${clean.slice(0, Math.max(1, maxChars - 3)).replace(/\s+$/, "")}...`;
+    }
+
+    function compactCategory(text) {
+        const clean = String(text == null ? "" : text).trim();
+        const map = {
+            "Czech Republic": "Czech",
+            "United Kingdom": "UK",
+            "Netherlands": "Neth.",
+            "Germany": "Ger.",
+            "Denmark": "Den.",
+            "Belgium": "Bel.",
+            "France": "Fra.",
+            "Ireland": "Ire.",
+            "Romania": "Rom.",
+            "Greece": "Gre.",
+            "Hungary": "Hun.",
+            "Poland": "Pol.",
+            "Slovakia": "Svk.",
+            "Portugal": "Por.",
+            "Sweden": "Swe.",
+            "Spain": "Spa.",
+            "Italy": "Ita."
+        };
+        if (map[clean]) return map[clean];
+        return shorten(clean, 5);
+    }
+
+    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")
+        .attr("data-chart-variation", "circular_bar_chart_icons_02");
+
+    const defs = svg.append("defs");
+
+    const bgGradient = defs.append("linearGradient")
+        .attr("id", "cbc2-page-bg")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    bgGradient.append("stop").attr("offset", "0%").attr("stop-color", "#f8fbfb");
+    bgGradient.append("stop").attr("offset", "52%").attr("stop-color", "#eef8fb");
+    bgGradient.append("stop").attr("offset", "100%").attr("stop-color", "#d9f0f6");
+
+    const panelGradient = defs.append("linearGradient")
+        .attr("id", "cbc2-title-panel")
+        .attr("x1", "0%").attr("y1", "0%")
+        .attr("x2", "100%").attr("y2", "100%");
+    panelGradient.append("stop").attr("offset", "0%").attr("stop-color", "#0f8b6a");
+    panelGradient.append("stop").attr("offset", "58%").attr("stop-color", "#006e5d");
+    panelGradient.append("stop").attr("offset", "100%").attr("stop-color", "#004f47");
+
+    const softShadow = defs.append("filter")
+        .attr("id", "cbc2-soft-shadow")
+        .attr("x", "-30%").attr("y", "-30%")
+        .attr("width", "160%").attr("height", "160%");
+    softShadow.append("feDropShadow")
+        .attr("dx", 0).attr("dy", 5).attr("stdDeviation", 5)
+        .attr("flood-color", "#0a5146").attr("flood-opacity", 0.22);
+
+    svg.append("rect")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "url(#cbc2-page-bg)");
+
+    svg.append("circle")
+        .attr("cx", width * 0.45)
+        .attr("cy", height * 0.47)
+        .attr("r", height * 0.43)
+        .attr("fill", "#e6f3ea")
+        .attr("opacity", 0.56);
+
+    const assetSlot = svg.append("g")
+        .attr("class", "asset-slot asset-slot-bottom-vehicle-city")
+        .attr("data-asset-slot", "bottom-vehicle-city-illustration")
+        .attr("data-bbox", `${width * 0.02},${height * 0.835},${width * 0.36},${height * 0.085}`)
+        .attr("data-anchor", "lower-left-under-circular-bars")
+        .attr("data-collision-rule", "avoid-bars-icons-rank-badges-inline-labels-title-panel-footer-free-bottom")
+        .attr("data-mask-rule", "soft-landscape-rectangle")
+        .attr("data-no-embedded-raster", "true")
+        .attr("data-no-copied-reference-art", "true");
+    assetSlot.append("rect")
+        .attr("x", width * 0.02)
+        .attr("y", height * 0.835)
+        .attr("width", width * 0.36)
+        .attr("height", height * 0.085)
+        .attr("rx", 22)
+        .attr("fill", "#c8eadb")
+        .attr("opacity", 0.32);
+    assetSlot.append("path")
+        .attr("d", `M0,${height * 0.935} C${width * 0.12},${height * 0.89} ${width * 0.24},${height * 0.95} ${width * 0.39},${height * 0.90} L${width * 0.39},${height} L0,${height} Z`)
+        .attr("fill", "#8bcc9d")
+        .attr("opacity", 0.42);
+    assetSlot.append("text")
+        .attr("x", width * 0.13)
+        .attr("y", height * 0.89)
+        .attr("font-family", fontFamily)
+        .attr("font-size", 14)
+        .attr("fill", "#4f8f78")
+        .attr("opacity", 0.72)
+        .text("asset slot");
+
+    const centerX = width * 0.62;
+    const centerY = height * 0.515;
+    const backgroundRadius = height * 0.385;
+    const panelRadius = height * 0.18;
+    const panelRight = width * 1.04;
+    const panelTop = centerY - panelRadius;
+    const panelBottom = centerY + panelRadius;
+    const panelPath = `
+        M ${centerX},${panelTop}
+        L ${panelRight},${panelTop}
+        L ${panelRight},${panelBottom}
+        L ${centerX},${panelBottom}
+        A ${panelRadius},${panelRadius} 0 0,1 ${centerX},${panelTop}
+        Z
+    `;
+
+    svg.append("path")
+        .attr("class", "title-panel")
+        .attr("d", panelPath)
+        .attr("fill", "url(#cbc2-title-panel)")
+        .attr("filter", "url(#cbc2-soft-shadow)")
+        .attr("data-anchor", "right-panel-tangent-to-inner-rank-arc");
+
+    const startAngle = Math.PI / 2;
+    const endAngle = -Math.PI / 2;
+    const angleStep = chartData.length > 1 ? (startAngle - endAngle) / (chartData.length - 1) : 0;
+    const barWidth = Math.max(21, width * 0.036);
+    const innerRadius = panelRadius * 0.98;
+    const barScale = d3.scaleLinear()
+        .domain([0, maxValue])
+        .range([0, backgroundRadius - innerRadius - width * 0.09]);
+    const rankRadius = innerRadius + 12;
+
+    chartData.forEach((d, i) => {
+        const angle = startAngle - i * angleStep;
+        const gradientId = `cbc2-bar-gradient-${i}`;
+        const x1 = centerX - innerRadius * Math.cos(angle);
+        const y1 = centerY - innerRadius * Math.sin(angle);
+        const x2 = centerX - (innerRadius + barScale(+d[yField])) * Math.cos(angle);
+        const y2 = centerY - (innerRadius + barScale(+d[yField])) * Math.sin(angle);
+        const gradient = defs.append("linearGradient")
+            .attr("id", gradientId)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("x1", x1).attr("y1", y1)
+            .attr("x2", x2).attr("y2", y2);
+        gradient.append("stop").attr("offset", "0%").attr("stop-color", "#aee2b2");
+        gradient.append("stop").attr("offset", "48%").attr("stop-color", "#4cc481");
+        gradient.append("stop").attr("offset", "100%").attr("stop-color", i < 4 ? "#006e61" : "#0d9f70");
+    });
+
+    const chartLayer = svg.append("g").attr("class", "semicircular-bar-layer");
+
+    chartData.forEach((d, i) => {
+        const angle = startAngle - i * angleStep;
+        const trackStartX = centerX - innerRadius * Math.cos(angle);
+        const trackStartY = centerY - innerRadius * Math.sin(angle);
+        const trackEndX = centerX - (backgroundRadius - width * 0.04) * Math.cos(angle);
+        const trackEndY = centerY - (backgroundRadius - width * 0.04) * Math.sin(angle);
+        chartLayer.append("line")
+            .attr("class", "bar-track")
+            .attr("x1", trackStartX).attr("y1", trackStartY)
+            .attr("x2", trackEndX).attr("y2", trackEndY)
+            .attr("stroke", "#dfe8df")
+            .attr("stroke-width", barWidth)
+            .attr("stroke-linecap", "round")
+            .attr("opacity", 0.78);
+    });
+
+    chartData.forEach((d, i) => {
+        const angle = startAngle - i * angleStep;
+        const value = +d[yField];
+        const barLength = barScale(value);
+        const x1 = centerX - innerRadius * Math.cos(angle);
+        const y1 = centerY - innerRadius * Math.sin(angle);
+        const x2 = centerX - (innerRadius + barLength) * Math.cos(angle);
+        const y2 = centerY - (innerRadius + barLength) * Math.sin(angle);
+        const category = String(d[xField]);
+        const iconSize = Math.max(28, Math.min(39, barWidth * 1.15));
+
+        chartLayer.append("line")
+            .attr("class", "radial-bar")
+            .attr("data-category", category)
+            .attr("data-value", value)
+            .attr("x1", x1).attr("y1", y1)
+            .attr("x2", x2).attr("y2", y2)
+            .attr("stroke", `url(#cbc2-bar-gradient-${i})`)
+            .attr("stroke-width", barWidth)
+            .attr("stroke-linecap", "round")
+            .attr("filter", "url(#cbc2-soft-shadow)");
+
+        const rankX = centerX - rankRadius * Math.cos(angle);
+        const rankY = centerY - rankRadius * Math.sin(angle);
+        chartLayer.append("circle")
+            .attr("class", "rank-badge")
+            .attr("data-category", category)
+            .attr("cx", rankX).attr("cy", rankY)
+            .attr("r", 18)
+            .attr("fill", "#fffefa")
+            .attr("stroke", "#087464")
+            .attr("stroke-width", 2.2);
+        chartLayer.append("text")
+            .attr("class", "rank-label")
+            .attr("x", rankX).attr("y", rankY + 1)
+            .attr("font-family", fontFamily)
+            .attr("font-size", 20)
+            .attr("font-weight", 800)
+            .attr("fill", "#075f55")
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .text(i + 1);
+
+        const iconGroup = chartLayer.append("g")
+            .attr("class", "bar-end-icon")
+            .attr("data-category", category)
+            .attr("transform", `translate(${x2},${y2})`);
+        iconGroup.append("circle")
+            .attr("r", iconSize / 2 + 4)
+            .attr("fill", "#fffefa")
+            .attr("stroke", "#dfe8df")
+            .attr("stroke-width", 2)
+            .attr("filter", "url(#cbc2-soft-shadow)");
+        const iconUrl = images && images.field ? images.field[category] : null;
+        if (iconUrl) {
+            const clipId = `cbc2-icon-clip-${i}`;
+            defs.append("clipPath")
+                .attr("id", clipId)
+                .append("circle")
+                .attr("cx", 0).attr("cy", 0)
+                .attr("r", iconSize / 2);
+            iconGroup.append("image")
+                .attr("class", "input-field-icon")
+                .attr("data-asset-source", "input-field-icon")
+                .attr("data-category", category)
+                .attr("data-no-copied-reference-art", "true")
+                .attr("href", iconUrl)
+                .attr("xlink:href", iconUrl)
+                .attr("x", -iconSize / 2)
+                .attr("y", -iconSize / 2)
+                .attr("width", iconSize)
+                .attr("height", iconSize)
+                .attr("clip-path", `url(#${clipId})`)
+                .attr("preserveAspectRatio", "xMidYMid slice");
+        } else {
+            iconGroup.append("text")
+                .attr("text-anchor", "middle")
+                .attr("dominant-baseline", "middle")
+                .attr("font-family", fontFamily)
+                .attr("font-size", iconSize * 0.48)
+                .attr("font-weight", 800)
+                .attr("fill", "#087464")
+                .text(category.slice(0, 1).toUpperCase());
+        }
+
+        const rotation = angle * 180 / Math.PI;
+        const labelRadius = innerRadius + Math.max(barLength * 0.68, Math.min(barLength - iconSize * 1.55, width * 0.11));
+        const labelX = centerX - labelRadius * Math.cos(angle);
+        const labelY = centerY - labelRadius * Math.sin(angle);
+        const labelText = chartData.length > 14
+            ? `${compactCategory(category)} ${fmtValue(value)}`
+            : `${shorten(category, 13)}: ${fmtValue(value)}`;
+        const labelInside = barLength > width * 0.20;
+        const labelFill = labelInside ? "#073d39" : "#075f55";
+        const labelFont = Math.max(9, Math.min(12.5, width * 0.016));
+        chartLayer.append("text")
+            .attr("class", "inline-bar-label")
+            .attr("data-category", category)
+            .attr("x", labelX)
+            .attr("y", labelY + 1)
+            .attr("font-family", fontFamily)
+            .attr("font-size", labelFont)
+            .attr("font-weight", 800)
+            .attr("fill", labelFill)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("transform", `rotate(${rotation}, ${labelX}, ${labelY})`)
+            .text(labelText);
+    });
+
+    const scaleCard = svg.append("g")
+        .attr("class", "scale-card")
+        .attr("data-relationship", "independent-floating-upper-right");
+    const scaleX = width * 0.815;
+    const scaleY = height * 0.052;
+    const scaleW = width * 0.14;
+    const scaleH = height * 0.265;
+    scaleCard.append("rect")
+        .attr("x", scaleX)
+        .attr("y", scaleY)
+        .attr("width", scaleW)
+        .attr("height", scaleH)
+        .attr("rx", 16)
+        .attr("fill", "#ffffff")
+        .attr("fill-opacity", 0.78)
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 3);
+    scaleCard.append("text")
+        .attr("x", scaleX + scaleW * 0.16)
+        .attr("y", scaleY + 33)
+        .attr("font-family", fontFamily)
+        .attr("font-size", 16)
+        .attr("font-weight", 900)
+        .attr("fill", "#064942")
+        .text("AVERAGE");
+    scaleCard.append("text")
+        .attr("x", scaleX + scaleW * 0.16)
+        .attr("y", scaleY + 58)
+        .attr("font-family", fontFamily)
+        .attr("font-size", 16)
+        .attr("font-weight", 900)
+        .attr("fill", "#064942")
+        .text("AGE (YEARS)");
+    const tickValues = [16, 13, 10, 6, 3, 0];
+    const tickTop = scaleY + 93;
+    const tickBottom = scaleY + scaleH - 30;
+    scaleCard.append("line")
+        .attr("x1", scaleX + scaleW * 0.58)
+        .attr("y1", tickTop)
+        .attr("x2", scaleX + scaleW * 0.58)
+        .attr("y2", tickBottom)
+        .attr("stroke", "#087464")
+        .attr("stroke-width", 1.4)
+        .attr("stroke-dasharray", "2 8")
+        .attr("opacity", 0.85);
+    tickValues.forEach((tick, idx) => {
+        const y = tickTop + (tickBottom - tickTop) * idx / (tickValues.length - 1);
+        scaleCard.append("text")
+            .attr("x", scaleX + scaleW * 0.28)
+            .attr("y", y + 5)
+            .attr("font-family", fontFamily)
+            .attr("font-size", 18)
+            .attr("font-weight", 500)
+            .attr("fill", "#064942")
+            .attr("text-anchor", "end")
+            .text(tick);
+        scaleCard.append("line")
+            .attr("x1", scaleX + scaleW * 0.60)
+            .attr("x2", scaleX + scaleW * 0.79)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("stroke", "#087464")
+            .attr("stroke-width", 1.3);
+    });
+
+    const titleGroup = svg.append("g")
+        .attr("class", "title-panel-text")
+        .attr("data-role", "title-subtitle-panel")
+        .attr("data-collision-rule", "inside-title-panel-clear-of-rank-badges-and-bars");
+    const gaugeX = centerX + width * 0.12;
+    const gaugeY = centerY - panelRadius * 0.48;
+    titleGroup.append("path")
+        .attr("class", "chart-native-gauge-glyph")
+        .attr("data-asset-policy", "reusable-chart-native-svg")
+        .attr("d", `M${gaugeX - 42},${gaugeY + 22} A42,42 0 0,1 ${gaugeX + 42},${gaugeY + 22}`)
+        .attr("fill", "none")
+        .attr("stroke", "#a8e15f")
+        .attr("stroke-width", 8)
+        .attr("stroke-linecap", "round");
+    [-36, -18, 0, 18, 36].forEach(offset => {
+        const angle = (-120 + (offset + 36) / 72 * 120) * Math.PI / 180;
+        const x1 = gaugeX + Math.cos(angle) * 28;
+        const y1 = gaugeY + 22 + Math.sin(angle) * 28;
+        const x2 = gaugeX + Math.cos(angle) * 36;
+        const y2 = gaugeY + 22 + Math.sin(angle) * 36;
+        titleGroup.append("line")
+            .attr("x1", x1).attr("y1", y1)
+            .attr("x2", x2).attr("y2", y2)
+            .attr("stroke", "#dff3e4")
+            .attr("stroke-width", 2);
+    });
+    titleGroup.append("line")
+        .attr("x1", gaugeX)
+        .attr("y1", gaugeY + 22)
+        .attr("x2", gaugeX + 31)
+        .attr("y2", gaugeY + 2)
+        .attr("stroke", "#dff3e4")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    titleGroup.append("circle")
+        .attr("cx", gaugeX)
+        .attr("cy", gaugeY + 22)
+        .attr("r", 7)
+        .attr("fill", "#dff3e4");
+
+    const mainTitle = String((jsonData.titles && jsonData.titles.main_title) || "Average Age of Vehicle Fleets Varies by Country");
+    const subTitle = String((jsonData.titles && jsonData.titles.sub_title) || jsonData.description || "");
+    const titleLines = wrapWords(mainTitle, 18, 3);
+    const titleX = centerX + width * 0.075;
+    const titleY = centerY - panelRadius * 0.13;
+    const titleText = titleGroup.append("text")
+        .attr("x", titleX)
+        .attr("y", titleY)
+        .attr("font-family", fontFamily)
+        .attr("font-size", 29)
+        .attr("font-weight", 900)
+        .attr("fill", "#ffffff");
+    titleLines.forEach((line, idx) => {
+        titleText.append("tspan")
+            .attr("x", titleX)
+            .attr("dy", idx === 0 ? 0 : 37)
+            .text(line);
+    });
+    titleGroup.append("line")
+        .attr("x1", titleX)
+        .attr("x2", titleX + width * 0.15)
+        .attr("y1", titleY + titleLines.length * 37 + 8)
+        .attr("y2", titleY + titleLines.length * 37 + 8)
+        .attr("stroke", "#a8e15f")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round");
+    const subtitleLines = wrapWords(subTitle, 29, 3);
+    const subtitleText = titleGroup.append("text")
+        .attr("x", titleX)
+        .attr("y", titleY + titleLines.length * 37 + 40)
+        .attr("font-family", fontFamily)
+        .attr("font-size", 18)
+        .attr("font-weight", 500)
+        .attr("fill", "#e8fff3");
+    subtitleLines.forEach((line, idx) => {
+        subtitleText.append("tspan")
+            .attr("x", titleX)
+            .attr("dy", idx === 0 ? 0 : 30)
+            .text(line);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type10_circular_bar_chart/circular_bar_plain_chart_01.js

@@ -0,0 +1,255 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Circular Bar Chart",
+    "chart_name": "circular_bar_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 20], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["shadow", "radius_corner", "gradient", "stroke"],
+    "min_height": 500,
+    "min_width": 500,
+    "background": "no",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "no",
+    "has_y_axis": "no"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const colorResolver = chartUtils.color.resolver(data);
+    // ---------- 1. 数据准备阶段 ----------
+
+    const jsonData = data;
+    const chartData = jsonData.data.data;
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        title: { font_family: "Arial", font_size: "18px", font_weight: "bold" },
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        description: { font_family: "Arial", font_size: "14px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" }
+    };
+    const colors = jsonData.colors || {
+        text_color: "#333333",
+        other: { primary: "#084594" }
+    };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+
+    // 视觉效果默认值
+    variables.has_rounded_corners = variables.has_rounded_corners || false;
+    variables.has_shadow = variables.has_shadow || false;
+    variables.has_gradient = variables.has_gradient || false;
+    variables.has_stroke = variables.has_stroke || false;
+
+    // 清空容器
+    d3.select(containerSelector).html("");
+
+    // ---------- 2. 尺寸和布局设置 ----------
+
+    const width = variables.width || 800;
+    const height = variables.height || 800;
+    const size = Math.min(width, height);
+
+    const margin = {
+        top: 90,
+        right: 50,
+        bottom: 60,
+        left: 50
+    };
+
+    const innerWidth = size - margin.left - margin.right;
+    const innerHeight = size - margin.top - margin.bottom;
+
+    const centerX = margin.left + innerWidth / 2;
+    const centerY = margin.top + innerHeight / 2;
+    const radius = Math.min(innerWidth, innerHeight) / 2;
+
+    // ---------- 3. 提取字段名和单位 ----------
+
+    const dimensionField = chartUtils.schema.channel(jsonData, "x").key || "category";
+    const valueField = chartUtils.schema.channel(jsonData, "y").key || "value";
+
+    // 单位
+    let valueUnit = "";
+    const valueChannel = chartUtils.schema.channel(jsonData, "y");
+    if (valueChannel.unit) {
+        valueUnit = valueChannel.unit === "B" ? " B" : valueChannel.unit;
+    }
+
+    // ---------- 4. 数据处理 ----------
+
+    // 数值格式化函数
+
+    // 按值降序排序数据
+    chartData.sort((a, b) => +b[valueField] - +a[valueField]);
+
+    const totalItems = chartData.length;
+    if (totalItems === 0) return;
+
+    const anglePerItem = (2 * Math.PI) / totalItems;
+    const maxValue = d3.max(chartData, d => +d[valueField]);
+    const minValue = 0;
+
+    // ---------- 5. 创建SVG和效果定义 ----------
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", size)
+        .attr("viewBox", `0 0 ${size} ${size}`)
+        .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 defs = svg.append("defs");
+
+    // 阴影滤镜
+    if (variables.has_shadow) {
+        const filter = defs.append("filter")
+            .attr("id", "shadow")
+            .attr("filterUnits", "userSpaceOnUse")
+            .attr("x", -innerWidth/2).attr("y", -innerHeight/2)
+            .attr("width", innerWidth*2).attr("height", innerHeight*2);
+        filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 4);
+        filter.append("feOffset").attr("dx", 3).attr("dy", 3).attr("result", "offsetblur");
+        filter.append("feFlood").attr("flood-color", "#000").attr("flood-opacity", 0.3);
+        filter.append("feComposite").attr("in2", "offsetblur").attr("operator", "in");
+        const feMerge = filter.append("feMerge");
+        feMerge.append("feMergeNode");
+        feMerge.append("feMergeNode").attr("in", "SourceGraphic");
+    }
+
+    // 定义主颜色
+    const primaryColor = colorResolver.other("primary").value;
+
+    // ---------- 6. 创建比例尺 ----------
+
+    const centralCircleRadius = radius * 0.25;
+    const radiusScale = d3.scaleLinear()
+        .domain([minValue, maxValue])
+        .range([centralCircleRadius + 20, radius * 0.9]);
+
+    // 颜色比例尺 - 值越高颜色越深
+    const lightColor = colorResolver.variant(primaryColor, { mode: "brighter", amount: 0.5 });
+    const darkColor = colorResolver.variant(primaryColor, { mode: "darker", amount: 0.5 });
+    const colorInterpolator = d3.interpolateRgb(lightColor, darkColor);
+    const colorScale = d3.scaleSequential(colorInterpolator)
+        .domain([totalItems - 1, 0]);
+
+    // ---------- 7. 创建中心圆和背景 ----------
+
+    svg.append("circle")
+        .attr("class", "background")
+        .attr("cx", centerX)
+        .attr("cy", centerY)
+        .attr("r", centralCircleRadius)
+        .attr("fill", "#ffffff")
+        .attr("stroke", "#aaaaaa")
+        .attr("stroke-width", 1.5);
+
+    // ---------- 8. 创建扇形、端点圆和标签 ----------
+
+    const arcGenerator = d3.arc()
+        .innerRadius(centralCircleRadius)
+        .padAngle(0.02);
+
+    const sectorsGroup = svg.append("g")
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    const labelsGroup = svg.append("g")
+         .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    // 遍历排序后的数据来创建元素
+    chartData.forEach((d, i) => {
+        const value = +d[valueField];
+        const category = d[dimensionField];
+
+        const startAngle = (i * anglePerItem);
+        const endAngle = startAngle + anglePerItem;
+        const midAngle = startAngle + anglePerItem / 2;
+
+        const currentOuterRadius = radiusScale(value);
+
+        // --- 8a. 绘制扇形 ---
+        sectorsGroup.append("path")
+            .datum({
+                innerRadius: centralCircleRadius,
+                outerRadius: currentOuterRadius,
+                startAngle: startAngle,
+                endAngle: endAngle
+            })
+            .attr("class", "mark")
+            .attr("d", arcGenerator)
+            .attr("fill", colorScale(i)) 
+            .attr("stroke", variables.has_stroke ? colorResolver.variant(colorScale(i), { mode: "darker", amount: 0.5 }) : "none")
+            .attr("stroke-width", variables.has_stroke ? 1 : 0)
+            .attr("style", variables.has_shadow ? "filter: url(#shadow)" : null)
+            .on("mouseover", function() { d3.select(this).attr("opacity", 0.8); })
+            .on("mouseout", function() { d3.select(this).attr("opacity", 1); });
+
+        // --- 8b. 计算末端圆圈位置 ---
+        const endCircleX = Math.sin(midAngle) * currentOuterRadius;
+        const endCircleY = -Math.cos(midAngle) * currentOuterRadius;
+        const endCircleRadius = Math.max(12, Math.min(30, radius * 0.1 * (value / maxValue * 2 + 0.5)));
+
+        // --- 8c. 绘制末端圆圈 ---
+        sectorsGroup.append("circle")
+            .attr("class", "background")
+            .attr("cx", endCircleX)
+            .attr("cy", endCircleY)
+            .attr("r", endCircleRadius)
+            .attr("fill", colorScale(i))
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 1)
+            .attr("style", variables.has_shadow ? "filter: url(#shadow)" : null);
+
+        // --- 8d. 在末端圆圈内添加数值文本 ---
+        const valueText = chartUtils.format.autoText(value, { unit: valueUnit });
+        let valueFontSize = endCircleRadius * 0.9;
+        const maxValueTextWidth = endCircleRadius * 1.8;
+        const valueTextWidth = chartUtils.text.measure(null, valueText, { fontSize: valueFontSize }).width;
+        if (valueTextWidth > maxValueTextWidth) {
+            valueFontSize *= maxValueTextWidth / valueTextWidth;
+        }
+
+        sectorsGroup.append("text")
+            .attr("class", "value")
+            .attr("x", endCircleX)
+            .attr("y", endCircleY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", typography.annotation.font_family)
+            .attr("font-size", `${valueFontSize}px`)
+            .attr("font-weight", "bold")
+            .attr("fill", "#ffffff")
+            .text(valueText);
+
+        // --- 8e. 计算外部标签位置 ---
+        const labelPadding = 20;
+        const labelRadius = currentOuterRadius + endCircleRadius + labelPadding;
+        const labelX = Math.sin(midAngle) * labelRadius;
+        const labelY = -Math.cos(midAngle) * labelRadius;
+
+        // --- 8f. 添加类别文本标签 ---
+        labelsGroup.append("text")
+            .attr("class", "label")
+            .attr("x", labelX)
+            .attr("y", labelY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("font-family", typography.label.font_family)
+            .attr("font-size", typography.label.font_size)
+            .attr("font-weight", typography.label.font_weight)
+            .attr("fill", colorResolver.text({ fallback: "#333333" }).value)
+            .text(category);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type10_circular_bar_chart/circular_bar_plain_chart_02.js

@@ -0,0 +1,602 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Circular Bar Chart",
+    "chart_name": "circular_bar_plain_chart_02",
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[15, 30], [0, 100]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary", "secondary", "background"],
+    "supported_effects": ["gradient", "opacity", "shadow", "stroke"],
+    "min_height": 720,
+    "min_width": 560,
+    "has_title": 1,
+    "background": "light",
+    "icon_mark": "none",
+    "icon_label": "none",
+    "has_x_axis": "yes",
+    "has_y_axis": "yes"
+}
+REQUIREMENTS_END
+*/
+
+function makeChart(containerSelector, data) {
+    const jsonData = data || {};
+    const sourceData = jsonData.data?.data || [];
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {};
+    const sourceColors = jsonData.colors || {};
+    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 }
+    });
+
+    d3.select(containerSelector).html("");
+
+    const roleColumn = role => Array.from(dataColumns).find(col => col.role === role);
+    const xColumn = roleColumn("x") || dataColumns[0] || {};
+    const yColumn = roleColumn("y") || dataColumns[1] || {};
+    const xField = xColumn.name;
+    const yField = yColumn.name;
+    const valueUnit = (yColumn.unit || "").trim();
+
+    const width = Number(variables.width) || 600;
+    const height = Math.max(Number(variables.height) || 600, Math.round(width * 1.24));
+    const fontFamily = typography.label?.font_family || typography.title?.font_family || "Arial, sans-serif";
+    const textColor = sourceColors.text_color || "#0c2238";
+    const mutedText = "#64747c";
+    const primary = sourceColors.other?.primary || sourceColors.primary || "#0060d9";
+    const secondary = sourceColors.other?.secondary || chartUtils.color.variant(primary, { mode: "brighter", amount: 1.2 });
+    const canvasColor = "#fbf7f4";
+    const mintWash = "#e8f3ef";
+    const cardFill = "#ffffff";
+    const tealDark = d3.interpolateRgb(primary, "#006b55")(0.72);
+    const tealMid = d3.interpolateRgb(primary, "#1ea784")(0.72);
+    const tealLight = "#a8d7cb";
+    const lineColor = "#d7e3df";
+    const background = sourceColors.background_color || cardFill;
+
+    const readableName = value => String(value || "")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/\s+/g, " ")
+        .trim();
+
+    const compactNumber = value => {
+        const abs = Math.abs(value);
+        if (abs >= 1000000000) return `${d3.format(".2~f")(value / 1000000000)}B`;
+        if (abs >= 1000000) return `${d3.format(".2~f")(value / 1000000)}M`;
+        if (abs >= 1000) return `${d3.format(".2~f")(value / 1000)}K`;
+        if (abs >= 100) return d3.format(",.0f")(value);
+        if (abs >= 10) return d3.format(",.1f")(value).replace(/\.0$/, "");
+        if (abs >= 1) return d3.format(",.2f")(value).replace(/\.?0+$/, "");
+        return d3.format(",.3f")(value).replace(/\.?0+$/, "");
+    };
+
+    const formatLocalValue = value => {
+        const formatted = compactNumber(value);
+        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}`;
+        if (valueUnit) return `${formatted} ${valueUnit}`;
+        return formatted;
+    };
+
+    const labelTokens = value => String(value || "")
+        .replace(/[()[\]{}]/g, " ")
+        .replace(/[,:;/\\|_-]+/g, " ")
+        .split(/\s+/)
+        .map(token => token.trim())
+        .filter(Boolean);
+
+    const compactLabel = (value, maxTokens = 3) => {
+        const label = String(value || "").trim();
+        if (label.length <= 24) return label;
+        const parentheticalWithSuffix = label.match(/\(([^()]{2,})\)\s*[-–—]\s*(.{2,})$/);
+        if (parentheticalWithSuffix) return `${parentheticalWithSuffix[1].trim()} ${parentheticalWithSuffix[2].trim()}`;
+        const parenthetical = label.match(/\(([^()]{2,})\)\s*$/);
+        if (parenthetical) return parenthetical[1].trim();
+        const tokens = labelTokens(label);
+        if (tokens.length <= maxTokens) return tokens.join(" ");
+        return tokens.slice(0, maxTokens).join(" ");
+    };
+
+    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
+    };
+
+    const categoryRank = value => {
+        const label = String(value || "").trim();
+        const lower = label.toLowerCase();
+        if (monthOrder[lower] != null) return monthOrder[lower];
+        const year = label.match(/^\d{4}$/);
+        if (year) return Number(label);
+        const yearMonth = label.match(/^(\d{4})[-/](\d{1,2})$/);
+        if (yearMonth) return Number(yearMonth[1]) * 100 + Number(yearMonth[2]);
+        const quarter = lower.match(/^q([1-4])\s+(\d{4})$/);
+        if (quarter) return Number(quarter[2]) * 10 + Number(quarter[1]);
+        return null;
+    };
+
+    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")
+        .attr("class", "circular-bar-chart-root");
+
+    if (!xField || !yField) {
+        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 circular bar fields");
+        return svg.node();
+    }
+
+    const rows = sourceData
+        .map(row => ({
+            category: String(row[xField]),
+            value: Number(row[yField])
+        }))
+        .filter(row => row.category && Number.isFinite(row.value) && row.value >= 0);
+
+    if (rows.length === 0) {
+        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");
+        return svg.node();
+    }
+
+    const rankedRows = rows.map((row, index) => ({ ...row, index, rank: categoryRank(row.category) }));
+    const isTemporalOrder = rankedRows.every(row => row.rank != null);
+    const orderedData = rankedRows
+        .sort((a, b) => {
+            if (isTemporalOrder) return d3.ascending(a.rank, b.rank);
+            return d3.descending(a.value, b.value) || d3.ascending(a.index, b.index);
+        })
+        .map((row, index) => ({ ...row, displayIndex: index + 1 }));
+
+    const defs = svg.append("defs");
+    const barGradient = defs.append("linearGradient")
+        .attr("id", "circularBar02Gradient")
+        .attr("x1", "0%")
+        .attr("y1", "0%")
+        .attr("x2", "100%")
+        .attr("y2", "100%");
+    barGradient.append("stop").attr("offset", "0%").attr("stop-color", tealLight);
+    barGradient.append("stop").attr("offset", "58%").attr("stop-color", tealMid);
+    barGradient.append("stop").attr("offset", "100%").attr("stop-color", tealDark);
+
+    const cardShadow = defs.append("filter")
+        .attr("id", "circularBar02CardShadow")
+        .attr("x", "-16%")
+        .attr("y", "-16%")
+        .attr("width", "132%")
+        .attr("height", "132%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 4)
+        .attr("stdDeviation", 5)
+        .attr("flood-color", "#31504a")
+        .attr("flood-opacity", 0.16);
+
+    const measure = svg.append("g").attr("visibility", "hidden");
+    const measureLabelText = (text, fontSize, weight = 500) => {
+        const node = measure.append("text")
+            .style("font-family", fontFamily)
+            .style("font-size", `${fontSize}px`)
+            .style("font-weight", weight)
+            .text(String(text ?? ""))
+            .node();
+        const estimate = node ? node.textContent.length * 7 : 0;
+        measure.selectAll("text").remove();
+        return Math.max(estimate || 0, String(text ?? "").length * fontSize * 0.52);
+    };
+    const appendFittedText = (parent, text, options) => {
+        const {
+            x, y, maxWidth, fontSize, minFontSize = 6.5,
+            fill = textColor, anchor = "start", weight = 600,
+            className = "text", baseline = "middle"
+        } = options;
+        let size = fontSize;
+        while (size > minFontSize && measureLabelText(text, size, weight) > maxWidth) {
+            size -= 0.5;
+        }
+        const node = parent.append("text")
+            .attr("class", className)
+            .attr("x", x)
+            .attr("y", y)
+            .attr("text-anchor", anchor)
+            .attr("dominant-baseline", baseline)
+            .attr("fill", fill)
+            .style("font-family", fontFamily)
+            .style("font-size", `${size}px`)
+            .style("font-weight", weight)
+            .text(String(text ?? ""));
+        if (measureLabelText(text, size, weight) > maxWidth) {
+            node.attr("textLength", maxWidth).attr("lengthAdjust", "spacingAndGlyphs");
+        }
+        return node;
+    };
+
+    svg.append("rect")
+        .attr("class", "chart-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", canvasColor);
+
+    svg.append("circle")
+        .attr("class", "decorative-wash-circle")
+        .attr("cx", width * 0.25)
+        .attr("cy", height * 0.13)
+        .attr("r", Math.min(width, height) * 0.16)
+        .attr("fill", mintWash)
+        .attr("opacity", 0.86);
+
+    const dotArc = svg.append("g")
+        .attr("class", "decorative-dot-arc")
+        .attr("opacity", 0.26);
+    d3.range(32).forEach(i => {
+        const angle = -0.08 - i * 0.064;
+        const radius = Math.min(width, height) * 0.40;
+        dotArc.append("circle")
+            .attr("cx", width * 0.62 + Math.sin(angle) * radius)
+            .attr("cy", height * 0.59 - Math.cos(angle) * radius)
+            .attr("r", 1.25)
+            .attr("fill", "#96bdb4");
+    });
+
+    const maxValue = d3.max(orderedData, d => d.value) || 1;
+    const niceMax = d3.scaleLinear().domain([0, maxValue]).nice(4).domain()[1];
+    const itemCount = orderedData.length;
+    const sortMode = isTemporalOrder ? "temporal" : "value_desc";
+    const centerX = width * 0.62;
+    const centerY = height * 0.58;
+    const outerRadius = Math.min(width * 0.50, height * 0.43);
+    const innerRadius = Math.max(82, outerRadius * 0.36);
+    const angleStart = -0.22;
+    const angleEnd = -2.64;
+    const angleStep = itemCount > 1 ? (angleStart - angleEnd) / (itemCount - 1) : 0;
+    const barBandwidth = Math.max(0.035, Math.min(0.105, angleStep * 0.58 || 0.09));
+    const radiusScale = d3.scaleLinear()
+        .domain([0, niceMax])
+        .range([innerRadius + 12, outerRadius]);
+    const colorScale = d3.scaleLinear()
+        .domain([0, Math.max(1, itemCount - 1)])
+        .range([tealDark, tealLight]);
+    const arc = d3.arc();
+    const ticks = radiusScale.ticks(4).filter(tick => tick > 0);
+
+    const chartGroup = svg.append("g")
+        .attr("class", "circular-bar-plot")
+        .attr("data-sort-mode", sortMode)
+        .attr("data-count", itemCount)
+        .attr("data-max-value", maxValue)
+        .attr("transform", `translate(${centerX}, ${centerY})`);
+
+    ticks.forEach(tick => {
+        chartGroup.append("path")
+            .attr("class", "radial-grid-ring")
+            .attr("data-value", tick)
+            .attr("d", arc({
+                innerRadius: radiusScale(tick),
+                outerRadius: radiusScale(tick) + 0.6,
+                startAngle: angleEnd - 0.07,
+                endAngle: angleStart + 0.07
+            }))
+            .attr("fill", lineColor)
+            .attr("opacity", 0.82);
+
+        const labelAngle = angleStart + 0.1;
+        chartGroup.append("text")
+            .attr("class", "radial-grid-label")
+            .attr("x", Math.sin(labelAngle) * radiusScale(tick) + 4)
+            .attr("y", -Math.cos(labelAngle) * radiusScale(tick))
+            .attr("fill", mutedText)
+            .style("font-family", fontFamily)
+            .style("font-size", "8px")
+            .text(formatLocalValue(tick));
+    });
+
+    const calloutRadius = Math.max(62, innerRadius - 18);
+    chartGroup.append("circle")
+        .attr("class", "center-label-background")
+        .attr("r", calloutRadius)
+        .attr("fill", cardFill)
+        .attr("stroke", "#edf2ef")
+        .attr("stroke-width", 7)
+        .attr("filter", "url(#circularBar02CardShadow)");
+
+    chartGroup.append("path")
+        .attr("class", "center-icon-line")
+        .attr("d", `M${-22},${-32} H22 M${-22},${-10} H22 M${-22},12 H22 M${-7},-32 V34 M7,-32 V34`)
+        .attr("fill", "none")
+        .attr("stroke", tealDark)
+        .attr("stroke-width", 1.8)
+        .attr("stroke-linecap", "round")
+        .attr("opacity", 0.88);
+
+    const calloutTitle = readableName(yField);
+    appendFittedText(chartGroup, calloutTitle, {
+        x: 0,
+        y: 34,
+        maxWidth: calloutRadius * 1.36,
+        fontSize: 11.5,
+        minFontSize: 7,
+        fill: textColor,
+        anchor: "middle",
+        weight: 800,
+        className: "axis-title"
+    });
+    appendFittedText(chartGroup, isTemporalOrder ? "ordered by time" : "highest values lead", {
+        x: 0,
+        y: 50,
+        maxWidth: calloutRadius * 1.28,
+        fontSize: 8.5,
+        minFontSize: 6.5,
+        fill: mutedText,
+        anchor: "middle",
+        weight: 600,
+        className: "order-note"
+    });
+
+    orderedData.forEach((row, index) => {
+        const midAngle = angleStart - index * angleStep;
+        const startAngle = midAngle - barBandwidth / 2;
+        const endAngle = midAngle + barBandwidth / 2;
+        const outer = radiusScale(row.value);
+        const color = colorScale(index);
+        const labelRadius = outerRadius + 16;
+        const labelX = Math.sin(midAngle) * labelRadius;
+        const labelY = -Math.cos(midAngle) * labelRadius;
+        const valueRadius = Math.max(innerRadius + 22, outer - Math.max(16, (outer - innerRadius) * 0.30));
+        const valueX = Math.sin(midAngle) * valueRadius;
+        const valueY = -Math.cos(midAngle) * valueRadius;
+
+        chartGroup.append("path")
+            .attr("class", "bar-track")
+            .attr("data-category", row.category)
+            .attr("data-value", row.value)
+            .attr("data-index", row.index)
+            .attr("data-rank", row.displayIndex)
+            .attr("data-sort-mode", sortMode)
+            .attr("d", arc({
+                innerRadius,
+                outerRadius,
+                startAngle,
+                endAngle
+            }))
+            .attr("fill", "#e9efec")
+            .attr("opacity", 0.86);
+
+        chartGroup.append("path")
+            .attr("class", "mark circular-bar-mark")
+            .attr("data-tag", "mark")
+            .attr("data-category", row.category)
+            .attr("data-value", row.value)
+            .attr("data-index", row.index)
+            .attr("data-rank", row.displayIndex)
+            .attr("data-sort-mode", sortMode)
+            .attr("data-start-angle", startAngle)
+            .attr("data-end-angle", endAngle)
+            .attr("data-inner-radius", innerRadius)
+            .attr("data-outer-radius", outer)
+            .attr("d", arc({
+                innerRadius,
+                outerRadius: outer,
+                startAngle,
+                endAngle
+            }))
+            .attr("fill", variables.has_gradient ? "url(#circularBar02Gradient)" : color)
+            .attr("stroke", variables.has_stroke ? chartUtils.color.variant(tealDark, { mode: "darker", amount: 0.4 }) : "none")
+            .attr("stroke-width", variables.has_stroke ? 0.8 : 0)
+            .attr("opacity", variables.has_opacity ? 0.9 : 0.96);
+
+        chartGroup.append("circle")
+            .attr("class", "index-dot")
+            .attr("data-category", row.category)
+            .attr("data-value", row.value)
+            .attr("data-index", row.index)
+            .attr("data-rank", row.displayIndex)
+            .attr("cx", Math.sin(midAngle) * (innerRadius - 4))
+            .attr("cy", -Math.cos(midAngle) * (innerRadius - 4))
+            .attr("r", itemCount > 24 ? 6 : 7.5)
+            .attr("fill", cardFill)
+            .attr("stroke", color)
+            .attr("stroke-width", 1.35);
+
+        chartGroup.append("text")
+            .attr("class", "index-label")
+            .attr("x", Math.sin(midAngle) * (innerRadius - 4))
+            .attr("y", -Math.cos(midAngle) * (innerRadius - 4))
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", textColor)
+            .style("font-family", fontFamily)
+            .style("font-size", itemCount > 24 ? "6.2px" : "7.2px")
+            .style("font-weight", "800")
+            .text(row.displayIndex);
+
+        chartGroup.append("text")
+            .attr("class", "value-label")
+            .attr("data-category", row.category)
+            .attr("data-value", row.value)
+            .attr("data-index", row.index)
+            .attr("data-rank", row.displayIndex)
+            .attr("x", valueX)
+            .attr("y", valueY)
+            .attr("text-anchor", "middle")
+            .attr("dominant-baseline", "middle")
+            .attr("fill", tealDark)
+            .style("font-family", fontFamily)
+            .style("font-size", itemCount > 24 ? "7.2px" : "8.8px")
+            .style("font-weight", "800")
+            .text(formatLocalValue(row.value));
+
+        const legend = chartGroup.append("g")
+            .attr("class", "legend-row")
+            .attr("data-category", row.category)
+            .attr("data-value", row.value)
+            .attr("data-index", row.index)
+            .attr("data-rank", row.displayIndex)
+            .attr("data-sort-mode", sortMode);
+        legend.append("line")
+            .attr("class", "leader-line")
+            .attr("x1", labelX + 4)
+            .attr("y1", labelY)
+            .attr("x2", Math.sin(midAngle) * (outerRadius + 4))
+            .attr("y2", -Math.cos(midAngle) * (outerRadius + 4))
+            .attr("stroke", lineColor)
+            .attr("stroke-width", 1);
+        appendFittedText(legend, compactLabel(row.category, itemCount > 24 ? 2 : 3), {
+            x: labelX,
+            y: labelY,
+            maxWidth: Math.min(width * 0.31, Math.max(94, labelX + centerX - 14)),
+            fontSize: itemCount > 24 ? 7.2 : 8.8,
+            minFontSize: 5.8,
+            fill: textColor,
+            anchor: "end",
+            weight: 700,
+            className: "category-label"
+        });
+    });
+
+    const scaleGroup = svg.append("g")
+        .attr("class", "scale-ladder")
+        .attr("transform", `translate(${width - 58}, ${height * 0.27})`);
+    scaleGroup.append("line")
+        .attr("class", "scale-ladder-line")
+        .attr("x1", 0)
+        .attr("x2", 0)
+        .attr("y1", 0)
+        .attr("y2", height * 0.32)
+        .attr("stroke", "#a8bbb5")
+        .attr("stroke-width", 1);
+    const ladderTicks = d3.scaleLinear().domain([0, niceMax]).range([height * 0.32, 0]).ticks(4);
+    ladderTicks.forEach(tick => {
+        scaleGroup.append("circle")
+            .attr("class", "scale-ladder-dot")
+            .attr("cx", 0)
+            .attr("cy", d3.scaleLinear().domain([0, niceMax]).range([height * 0.32, 0])(tick))
+            .attr("r", 4.2)
+            .attr("fill", tealDark);
+        scaleGroup.append("text")
+            .attr("class", "scale-ladder-label")
+            .attr("x", 13)
+            .attr("y", d3.scaleLinear().domain([0, niceMax]).range([height * 0.32, 0])(tick))
+            .attr("dominant-baseline", "middle")
+            .attr("fill", tealDark)
+            .style("font-family", fontFamily)
+            .style("font-size", "9px")
+            .style("font-weight", "700")
+            .text(formatLocalValue(tick));
+    });
+    appendFittedText(scaleGroup, readableName(yField), {
+        x: -12,
+        y: -22,
+        maxWidth: Math.min(122, width * 0.23),
+        fontSize: 9.6,
+        minFontSize: 6.5,
+        fill: textColor,
+        anchor: "start",
+        weight: 800,
+        className: "scale-ladder-title"
+    });
+
+    const legendCard = svg.append("g")
+        .attr("class", "measure-legend-card")
+        .attr("transform", `translate(${width - 178}, ${height - 70})`);
+    legendCard.append("rect")
+        .attr("class", "measure-legend-bg")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", 154)
+        .attr("height", 44)
+        .attr("rx", 8)
+        .attr("fill", "rgba(255,255,255,0.82)")
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 1.2);
+    legendCard.append("rect")
+        .attr("class", "measure-legend-swatch")
+        .attr("x", 14)
+        .attr("y", 13)
+        .attr("width", 18)
+        .attr("height", 18)
+        .attr("rx", 4)
+        .attr("fill", "url(#circularBar02Gradient)");
+    appendFittedText(legendCard, readableName(yField), {
+        x: 42,
+        y: 21,
+        maxWidth: 96,
+        fontSize: 9.4,
+        minFontSize: 6.4,
+        fill: textColor,
+        anchor: "start",
+        weight: 700,
+        className: "legend-measure-label"
+    });
+
+    svg.append("text")
+        .attr("class", "scale-note")
+        .attr("x", 34)
+        .attr("y", height - 18)
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "8.8px")
+        .text(`${readableName(yField)} scale: 0-${formatLocalValue(niceMax)}`);
+
+    svg.append("text")
+        .attr("class", "category-note")
+        .attr("x", width - 34)
+        .attr("y", height - 18)
+        .attr("text-anchor", "end")
+        .attr("fill", mutedText)
+        .style("font-family", fontFamily)
+        .style("font-size", "8.8px")
+        .text(isTemporalOrder
+            ? `${readableName(xField)} order: ${orderedData[0].category} to ${orderedData[orderedData.length - 1].category}`
+            : `${readableName(xField)} order: highest to lowest`);
+
+    measure.remove();
+
+    return svg.node();
+}