Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type20_vertical_dot_bar_chart/vertical_dot_bar_plain_chart_01.js

@@ -0,0 +1,537 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Dot Bar Chart",
+    "chart_name": "vertical_dot_bar_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical", "temporal"], ["numerical"]],
+    "required_fields_range": [[2, "inf"], [0, "inf"]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["gradient"],
+    "min_height": 400,
+    "min_width": 400,
+    "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 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 sourceColors = jsonData.colors || {
+        text_color: "#13233A",
+        other: { primary: "#0B8F86", secondary: "#61C7BD" }
+    };
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    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 fontFamily = typography.label.font_family || "Arial";
+    const annotationFamily = typography.annotation.font_family || fontFamily;
+    const primaryInput = sourceColors.other?.primary || "#09B8AE";
+    const primaryColor = d3.interpolateRgb(primaryInput, "#078B84")(0.72);
+    const primaryDark = d3.interpolateRgb(primaryColor, "#004F55")(0.55);
+    const primaryLight = d3.interpolateRgb(primaryColor, "#9FDCD6")(0.68);
+    const referencePalette = [
+        "#0A8C96", "#4D8E38", "#176FBE", "#6F55B8", "#168E93", "#E58200",
+        "#1768A9", "#D89A00", "#E45D2A", "#D83F62", "#15858A", "#8EA42A"
+    ];
+    const textColor = "#061B38";
+    const mutedText = "#45617F";
+    const panelStroke = "#D7E7EF";
+    const lineColor = "#B9CCDE";
+    const warmAccent = sourceColors.other?.secondary || "#E7BF63";
+
+    const measureLabelText = (text, fontSize, fontWeight = "500", family = fontFamily) => {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        ctx.font = `${fontWeight} ${fontSize}px ${family}`;
+        return chartUtils.text.contextWidth(ctx, String(text));
+    };
+
+    const fittedFontSize = (text, maxWidth, baseFontSize, minFontSize = 5.6, fontWeight = "500", family = fontFamily) => {
+        let size = baseFontSize;
+        while (size > minFontSize && measureLabelText(text, size, fontWeight, family) > maxWidth) {
+            size -= 0.4;
+        }
+        return Math.max(minFontSize, size);
+    };
+
+    const applyTextFit = (selection, text, maxWidth, fontSize, fontWeight = "500", family = fontFamily) => {
+        selection.text(text);
+        if (measureLabelText(text, fontSize, fontWeight, family) > maxWidth) {
+            selection
+                .attr("textLength", maxWidth)
+                .attr("lengthAdjust", "spacingAndGlyphs");
+        }
+    };
+
+    const formatLocalValue = (value) => {
+        if (Math.abs(value) >= 1000000000) return d3.format("~g")(value / 1000000000) + "B";
+        if (Math.abs(value) >= 1000000) return d3.format("~g")(value / 1000000) + "M";
+        if (Math.abs(value) >= 1000) return d3.format("~g")(value / 1000) + "K";
+        return d3.format("~g")(value);
+    };
+
+    const formatValueWithUnit = (value, unit) => {
+        const formatted = formatLocalValue(value);
+        const trimmedUnit = String(unit || "").trim();
+        if (!trimmedUnit) return formatted;
+        if (trimmedUnit === "$") return `$${formatted}`;
+        if (trimmedUnit === "%") return `${formatted}%`;
+        return `${formatted} ${trimmedUnit}`;
+    };
+
+    const splitFormattedValue = (value, unit) => {
+        const trimmedUnit = String(unit || "").trim();
+        const formatted = formatLocalValue(value);
+        if (!trimmedUnit) return { main: formatted, unit: "" };
+        if (trimmedUnit === "$") return { main: `$${formatted}`, unit: "" };
+        if (trimmedUnit === "%") return { main: `${formatted}%`, unit: "" };
+        return { main: formatted, unit: trimmedUnit };
+    };
+
+    const labelTokens = (text) => String(text)
+        .replace(/[()[\]{}]/g, " ")
+        .replace(/[,:;/\\|_-]+/g, " ")
+        .split(/\s+/)
+        .map(token => token.trim())
+        .filter(Boolean);
+
+    const splitCategoryLines = (text, maxWidth, fontSize) => {
+        const str = String(text).trim();
+        const parenthetical = str.match(/^(.+?)\s*\(([^()]+)\)\s*$/);
+        if (parenthetical) {
+            const first = parenthetical[1].trim();
+            const second = `(${parenthetical[2].trim()})`;
+            return [first, second];
+        }
+        const tokens = labelTokens(str);
+        if (tokens.length <= 1) return [str];
+
+        const lines = [];
+        let current = "";
+        tokens.forEach(token => {
+            const next = current ? `${current} ${token}` : token;
+            if (lines.length < 1 && measureLabelText(next, fontSize, "600") <= maxWidth) {
+                current = next;
+            } else if (lines.length < 1) {
+                lines.push(current || token);
+                current = current ? token : "";
+            } else {
+                current = current ? `${current} ${token}` : token;
+            }
+        });
+        if (current) lines.push(current);
+        return lines.slice(0, 2);
+    };
+
+    const compactCategory = (text, isTemporalLabel) => {
+        const str = String(text).trim();
+        if (isTemporalLabel) return str;
+        const tokens = labelTokens(str);
+        if (tokens.length > 5) {
+            return `${tokens[0]} ${tokens[tokens.length - 1]}`;
+        }
+        return str;
+    };
+
+    const buildDisplayLabels = (values, isTemporalLabel) => {
+        const labels = values.map(value => compactCategory(value, isTemporalLabel));
+        const seen = new Map();
+        labels.forEach(label => {
+            const key = label.toLowerCase();
+            seen.set(key, (seen.get(key) || 0) + 1);
+        });
+
+        return labels.map((label, index) => {
+            if ((seen.get(label.toLowerCase()) || 0) === 1) return label;
+            const sourceTokens = labelTokens(values[index]);
+            if (sourceTokens.length <= 2) return String(values[index]);
+            for (let tokenCount = 2; tokenCount <= Math.min(4, sourceTokens.length); tokenCount++) {
+                const candidate = sourceTokens.slice(sourceTokens.length - tokenCount).join(" ");
+                const duplicate = values.some((other, otherIndex) => {
+                    if (otherIndex === index) return false;
+                    const otherTokens = labelTokens(other);
+                    return otherTokens.slice(Math.max(0, otherTokens.length - tokenCount)).join(" ").toLowerCase()
+                        === candidate.toLowerCase();
+                });
+                if (!duplicate) return candidate;
+            }
+            return String(values[index]);
+        });
+    };
+
+    const temporalKey = (value) => {
+        if (value instanceof Date) return value.getTime();
+        if (typeof value === "number") return value;
+        const str = String(value).trim();
+        if (/^-?\d+(\.\d+)?$/.test(str)) return +str;
+        const seasonOrder = { winter: 0, spring: 1, summer: 2, fall: 3, autumn: 3 };
+        const seasonYear = str.match(/^(winter|spring|summer|fall|autumn)\s+(-?\d{1,4})$/i);
+        if (seasonYear) return (+seasonYear[2]) * 10 + seasonOrder[seasonYear[1].toLowerCase()];
+        const yearSeason = str.match(/^(-?\d{1,4})\s+(winter|spring|summer|fall|autumn)$/i);
+        if (yearSeason) return (+yearSeason[1]) * 10 + seasonOrder[yearSeason[2].toLowerCase()];
+        const parsed = Date.parse(str);
+        if (!Number.isNaN(parsed)) return parsed;
+        const yearMatch = str.match(/^-?\d{1,4}/);
+        if (yearMatch) return +yearMatch[0];
+        return null;
+    };
+
+    const wrapTextLines = (text, maxWidth, fontSize, maxLines, fontWeight = "500", family = fontFamily) => {
+        const words = String(text || "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            if (lines.length >= maxLines) return;
+            const next = current ? `${current} ${word}` : word;
+            if (measureLabelText(next, fontSize, fontWeight, family) <= maxWidth || !current) {
+                current = next;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current && lines.length < maxLines) lines.push(current);
+        return lines;
+    };
+
+    d3.select(containerSelector).html("");
+
+    const width = Math.max(1360, variables.width || 1360);
+    const chartCardX = 18;
+    const chartCardY = 18;
+    const chartCardWidth = width - chartCardX * 2;
+    const chartCardHeight = 548;
+    const height = chartCardY + chartCardHeight + 28;
+
+    const dimensionField = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw?.name || "dimension";
+    const valueField = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw?.name || "value";
+    const valueColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const dimensionColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const valueUnit = valueColumn.unit && valueColumn.unit !== "none" ? valueColumn.unit : "";
+
+    const normalizedData = chartData.map((d, index) => ({
+        ...d,
+        __index: index,
+        __dimension: d[dimensionField],
+        __rawValue: Math.max(0, +d[valueField] || 0),
+        __temporalKey: temporalKey(d[dimensionField])
+    }));
+    const validTemporalKeys = normalizedData.filter(d => d.__temporalKey !== null).length;
+    const isTemporal = dimensionColumn.data_type === "temporal" || validTemporalKeys === normalizedData.length;
+    const sortedData = [...normalizedData].sort((a, b) => {
+        if (isTemporal) {
+            return d3.ascending(a.__temporalKey, b.__temporalKey) || d3.ascending(a.__index, b.__index);
+        }
+        return d3.descending(a.__rawValue, b.__rawValue) || d3.ascending(a.__index, b.__index);
+    }).slice(0, 12);
+    const sortedDimensions = sortedData.map(d => d.__dimension);
+    const displayDimensions = buildDisplayLabels(sortedDimensions, isTemporal);
+
+    const maxValue = d3.max(sortedData, d => d.__rawValue) || 0;
+    const maxDisplayDots = 22;
+    const useDirectCounts = maxValue <= maxDisplayDots && Number.isInteger(maxValue);
+    sortedData.forEach(d => {
+        if (d.__rawValue <= 0 || maxValue <= 0) {
+            d.__dotCount = 0;
+        } else if (useDirectCounts) {
+            d.__dotCount = Math.round(d.__rawValue);
+        } else {
+            d.__dotCount = Math.max(1, Math.round((d.__rawValue / maxValue) * maxDisplayDots));
+        }
+    });
+    sortedData.forEach((d, index) => {
+        const baseColor = referencePalette[index % referencePalette.length];
+        d.__baseColor = baseColor;
+        d.__darkColor = chartUtils.color.variant(baseColor, { mode: "darker", amount: 0.24 });
+        d.__lightColor = chartUtils.color.variant(baseColor, { mode: "brighter", amount: 0.48 });
+        d.__paleColor = d3.interpolateRgb("#FFFFFF", baseColor)(0.18);
+    });
+
+    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;");
+
+    const defs = svg.append("defs");
+    const shadow = defs.append("filter")
+        .attr("id", "vertical-dot-reference-shadow")
+        .attr("x", "-7%")
+        .attr("y", "-7%")
+        .attr("width", "114%")
+        .attr("height", "114%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 7)
+        .attr("stdDeviation", 8)
+        .attr("flood-color", "#5A7D94")
+        .attr("flood-opacity", 0.16);
+
+    for (let index = 0; index < sortedData.length; index++) {
+        const iconGrad = defs.append("radialGradient")
+            .attr("id", `vertical-dot-icon-gradient-${index}`)
+            .attr("cx", "38%")
+            .attr("cy", "34%")
+            .attr("r", "72%");
+        iconGrad.append("stop").attr("offset", "0%").attr("stop-color", sortedData[index].__lightColor);
+        iconGrad.append("stop").attr("offset", "100%").attr("stop-color", sortedData[index].__darkColor);
+
+        const grad = defs.append("linearGradient")
+            .attr("id", `vertical-dot-pill-gradient-${index}`)
+            .attr("x1", "0%")
+            .attr("x2", "100%")
+            .attr("y1", "0%")
+            .attr("y2", "0%");
+        grad.append("stop").attr("offset", "0%").attr("stop-color", sortedData[index].__darkColor);
+        grad.append("stop").attr("offset", "100%").attr("stop-color", sortedData[index].__lightColor);
+    }
+
+    svg.append("rect")
+        .attr("class", "chart-canvas-bg")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "#F7FBFC");
+
+    svg.append("rect")
+        .attr("class", "chart-style-panel")
+        .attr("x", chartCardX)
+        .attr("y", chartCardY)
+        .attr("width", chartCardWidth)
+        .attr("height", chartCardHeight)
+        .attr("rx", 14)
+        .attr("ry", 14)
+        .attr("fill", "#FFFFFF")
+        .attr("stroke", panelStroke)
+        .attr("stroke-width", 1.1)
+        .attr("filter", "url(#vertical-dot-reference-shadow)");
+
+    const innerX = chartCardX + 26;
+    const innerWidth = chartCardWidth - 52;
+    const iconY = chartCardY + 62;
+    const labelTopY = chartCardY + 112;
+    const plotTop = chartCardY + 176;
+    const plotBottom = chartCardY + 438;
+    const valueTopY = chartCardY + 486;
+    const axisY = chartCardY + 524;
+    const xScale = d3.scaleBand()
+        .domain(sortedDimensions)
+        .range([innerX, innerX + innerWidth])
+        .padding(sortedData.length > 10 ? 0.18 : 0.24);
+
+    const axisLabel = `${String(valueColumn.description || valueColumn.name || valueField).replace(/\s*\([^)]*\)\s*$/, "")}${valueUnit ? ` (${valueUnit})` : ""}`;
+    const axisText = axisLabel.toUpperCase();
+    const axisTextWidth = Math.min(270, Math.max(145, measureLabelText(axisText, 13, "700", annotationFamily) + 18));
+    svg.append("line")
+        .attr("class", "reference-axis-line axis-left")
+        .attr("x1", innerX + 6)
+        .attr("x2", width / 2 - axisTextWidth / 2 - 18)
+        .attr("y1", axisY)
+        .attr("y2", axisY)
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 1.1);
+    svg.append("line")
+        .attr("class", "reference-axis-line axis-right")
+        .attr("x1", width / 2 + axisTextWidth / 2 + 18)
+        .attr("x2", innerX + innerWidth - 6)
+        .attr("y1", axisY)
+        .attr("y2", axisY)
+        .attr("stroke", lineColor)
+        .attr("stroke-width", 1.1);
+    svg.append("text")
+        .attr("class", "axis-title")
+        .attr("x", width / 2)
+        .attr("y", axisY + 5)
+        .attr("text-anchor", "middle")
+        .style("font-family", annotationFamily)
+        .style("font-size", "13px")
+        .style("font-weight", "750")
+        .style("letter-spacing", "0")
+        .style("fill", "#49688B")
+        .text(axisText);
+
+    const dotHeight = 8.4;
+    const dotGap = 5.0;
+    const plotHeight = plotBottom - plotTop;
+    const iconRadius = Math.max(20, Math.min(31, xScale.bandwidth() * 0.34));
+    const labelMaxWidth = Math.max(72, xScale.bandwidth() * 1.18);
+    const labelBaseSize = Math.max(9.2, Math.min(13.5, xScale.bandwidth() / 6.4));
+
+    for (let i = 1; i < sortedDimensions.length; i++) {
+        const prevCenter = xScale(sortedDimensions[i - 1]) + xScale.bandwidth() / 2;
+        const nextCenter = xScale(sortedDimensions[i]) + xScale.bandwidth() / 2;
+        svg.append("line")
+            .attr("class", "column-separator")
+            .attr("x1", (prevCenter + nextCenter) / 2)
+            .attr("x2", (prevCenter + nextCenter) / 2)
+            .attr("y1", chartCardY + 42)
+            .attr("y2", valueTopY + 22)
+            .attr("stroke", "#DDE7EF")
+            .attr("stroke-width", 1.1);
+    }
+
+    sortedData.forEach((dataPoint, dataIndex) => {
+        const dimension = dataPoint.__dimension;
+        const centerX = xScale(dimension) + xScale.bandwidth() / 2;
+        const columnWidth = xScale.bandwidth();
+        const barWidth = Math.max(38, Math.min(74, columnWidth * 0.58));
+        const barX = centerX - barWidth / 2;
+        const displayLabel = displayDimensions[dataIndex] || String(dimension);
+        const categoryLines = splitCategoryLines(displayLabel, labelMaxWidth, labelBaseSize);
+        const iconLetter = String(displayLabel).trim().charAt(0).toUpperCase() || "?";
+        const formattedValue = formatValueWithUnit(dataPoint.__rawValue, valueUnit);
+        const valueParts = splitFormattedValue(dataPoint.__rawValue, valueUnit);
+
+        svg.append("circle")
+            .attr("class", "category-icon-slot reference-icon-slot")
+            .attr("data-asset-slot", "category-icon")
+            .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-anchor", "category-column-centerline")
+            .attr("data-collision-rule", "shrink-radius-before-overlap-with-neighboring-icon-or-category-label")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("cx", centerX)
+            .attr("cy", iconY)
+            .attr("r", iconRadius)
+            .attr("fill", `url(#vertical-dot-icon-gradient-${dataIndex})`)
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 1.4);
+
+        svg.append("text")
+            .attr("class", "category-icon-glyph")
+            .attr("x", centerX)
+            .attr("y", iconY + 5)
+            .attr("text-anchor", "middle")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(12, iconRadius * 0.78)}px`)
+            .style("font-weight", "800")
+            .style("fill", "#FFFFFF")
+            .text(iconLetter);
+
+        const labelGroup = svg.append("text")
+            .attr("class", "label category-label")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", centerX)
+            .attr("y", labelTopY)
+            .attr("text-anchor", "middle")
+            .style("font-family", fontFamily)
+            .style("font-weight", "650")
+            .style("fill", textColor);
+        categoryLines.forEach((line, lineIndex) => {
+            const lineSize = fittedFontSize(line, labelMaxWidth, labelBaseSize, 5.6, "650", fontFamily);
+            const tspan = labelGroup.append("tspan")
+                .attr("x", centerX)
+                .attr("dy", lineIndex === 0 ? 0 : `${lineSize + 2}px`)
+                .style("font-size", `${lineSize}px`);
+            applyTextFit(tspan, line, labelMaxWidth, lineSize, "650", fontFamily);
+        });
+
+        svg.append("rect")
+            .attr("class", "dot-bar-track")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", barX - 2)
+            .attr("y", plotTop)
+            .attr("width", barWidth + 4)
+            .attr("height", plotHeight)
+            .attr("rx", (barWidth + 4) / 2)
+            .attr("fill", "#FFFFFF")
+            .attr("fill-opacity", 0.01);
+
+        for (let dotIndex = 0; dotIndex < dataPoint.__dotCount; dotIndex++) {
+            const y = plotBottom - dotHeight - dotIndex * (dotHeight + dotGap);
+            if (y < plotTop) break;
+            svg.append("rect")
+                .attr("class", "mark dot-pill")
+                .attr("data-source-index", dataPoint.__index)
+                .attr("data-category", String(dimension))
+                .attr("data-value", dataPoint.__rawValue)
+                .attr("data-dot-index", dotIndex)
+                .attr("x", barX)
+                .attr("y", y)
+                .attr("width", barWidth)
+                .attr("height", dotHeight)
+                .attr("rx", dotHeight / 2)
+                .attr("ry", dotHeight / 2)
+                .attr("fill", `url(#vertical-dot-pill-gradient-${dataIndex})`);
+        }
+
+        const valueSize = fittedFontSize(valueParts.main, Math.max(32, columnWidth * 0.98), 18, 9.5, "800", annotationFamily);
+        const valueText = svg.append("text")
+            .attr("class", "value value-number")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", centerX)
+            .attr("y", valueTopY)
+            .attr("text-anchor", "middle")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${valueSize}px`)
+            .style("font-weight", "800")
+            .style("fill", dataPoint.__darkColor);
+        applyTextFit(valueText, valueParts.main, Math.max(32, columnWidth * 0.98), valueSize, "800", annotationFamily);
+
+        if (valueParts.unit) {
+            const unitText = svg.append("text")
+                .attr("class", "value-unit")
+                .attr("data-source-index", dataPoint.__index)
+                .attr("data-category", String(dimension))
+                .attr("data-value", dataPoint.__rawValue)
+                .attr("x", centerX)
+                .attr("y", valueTopY + 19)
+                .attr("text-anchor", "middle")
+                .style("font-family", annotationFamily)
+                .style("font-size", "12px")
+                .style("font-weight", "500")
+                .style("fill", "#3D5C82");
+            applyTextFit(unitText, valueParts.unit, Math.max(30, columnWidth * 0.92), 12, "500", annotationFamily);
+        }
+
+        svg.append("title").text(`${displayLabel}: ${formattedValue}`);
+    });
+
+    return svg.node();
+}

modules/chart_engine/template/d3-js/type20_vertical_dot_bar_chart/vertical_dot_bar_plain_chart_02.js

@@ -0,0 +1,532 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "Vertical Dot Bar Chart",
+    "chart_name": "vertical_dot_bar_plain_chart_02",
+    "is_composite": false,
+    "required_fields": ["x", "y"],
+    "required_fields_type": [["categorical"], ["numerical"]],
+    "required_fields_range": [[2, 6], [3, 20]],
+    "required_fields_icons": ["x"],
+    "required_other_icons": [],
+    "required_fields_colors": [],
+    "required_other_colors": [],
+    "supported_effects": ["shadow", "gradient", "stroke", "spacing"],
+    "min_height": 400,
+    "min_width": 400,
+    "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 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 sourceColors = jsonData.colors || {
+        text_color: "#17324F",
+        other: { primary: "#174EA6", secondary: "#E95A4E" }
+    };
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const fontFamily = typography.label.font_family || "Arial";
+    const annotationFamily = typography.annotation.font_family || fontFamily;
+
+    const measureLabelText = (text, fontSize, fontWeight = "500", family = fontFamily) => {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        ctx.font = `${fontWeight} ${fontSize}px ${family}`;
+        return chartUtils.text.contextWidth(ctx, String(text));
+    };
+
+    const fittedFontSize = (text, maxWidth, baseFontSize, minFontSize = 7, fontWeight = "500", family = fontFamily) => {
+        let size = baseFontSize;
+        while (size > minFontSize && measureLabelText(text, size, fontWeight, family) > maxWidth) {
+            size -= 0.4;
+        }
+        return Math.max(minFontSize, size);
+    };
+
+    const applyTextFit = (selection, text, maxWidth, fontSize, fontWeight = "500", family = fontFamily) => {
+        selection.text(text);
+        if (measureLabelText(text, fontSize, fontWeight, family) > maxWidth) {
+            selection
+                .attr("textLength", maxWidth)
+                .attr("lengthAdjust", "spacingAndGlyphs");
+        }
+    };
+
+    const labelTokens = (text) => String(text)
+        .replace(/[()[\]{}]/g, " ")
+        .replace(/[,:;/\\|_-]+/g, " ")
+        .split(/\s+/)
+        .map(token => token.trim())
+        .filter(Boolean);
+
+    const compactCategory = (text, isTemporalLabel) => {
+        const str = String(text).trim();
+        if (isTemporalLabel) return str;
+        const tokens = labelTokens(str);
+        if (tokens.length > 4) return `${tokens[0]} ${tokens[tokens.length - 1]}`;
+        return str;
+    };
+
+    const splitCategoryLines = (text, maxWidth, fontSize) => {
+        const str = String(text).trim();
+        if (measureLabelText(str, fontSize, "750", fontFamily) <= maxWidth) return [str];
+        const tokens = labelTokens(str);
+        if (tokens.length <= 1) return [str];
+        const lines = [];
+        let current = "";
+        tokens.forEach(token => {
+            const next = current ? `${current} ${token}` : token;
+            if (lines.length < 1 && measureLabelText(next, fontSize, "750", fontFamily) <= maxWidth) {
+                current = next;
+            } else if (lines.length < 1) {
+                lines.push(current || token);
+                current = current ? token : "";
+            } else {
+                current = current ? `${current} ${token}` : token;
+            }
+        });
+        if (current) lines.push(current);
+        return lines.slice(0, 2);
+    };
+
+    const temporalKey = (value) => {
+        if (value instanceof Date) return value.getTime();
+        if (typeof value === "number") return value;
+        const str = String(value).trim();
+        if (/^-?\d+(\.\d+)?$/.test(str)) return +str;
+        const seasonOrder = { winter: 0, spring: 1, summer: 2, fall: 3, autumn: 3 };
+        const seasonYear = str.match(/^(winter|spring|summer|fall|autumn)\s+(-?\d{1,4})$/i);
+        if (seasonYear) return (+seasonYear[2]) * 10 + seasonOrder[seasonYear[1].toLowerCase()];
+        const yearSeason = str.match(/^(-?\d{1,4})\s+(winter|spring|summer|fall|autumn)$/i);
+        if (yearSeason) return (+yearSeason[1]) * 10 + seasonOrder[yearSeason[2].toLowerCase()];
+        const parsed = Date.parse(str);
+        if (!Number.isNaN(parsed)) return parsed;
+        const yearMatch = str.match(/^-?\d{1,4}/);
+        if (yearMatch) return +yearMatch[0];
+        return null;
+    };
+
+    const formatLocalValue = (value) => {
+        if (Math.abs(value) >= 1000000000) return d3.format("~g")(value / 1000000000) + "B";
+        if (Math.abs(value) >= 1000000) return d3.format("~g")(value / 1000000) + "M";
+        if (Math.abs(value) >= 1000) return d3.format("~g")(value / 1000) + "K";
+        return d3.format("~g")(value);
+    };
+
+    const formatValueWithUnit = (value, unit) => {
+        const formatted = formatLocalValue(value);
+        const trimmedUnit = String(unit || "").trim();
+        if (!trimmedUnit) return formatted;
+        if (trimmedUnit === "$") return `$${formatted}`;
+        if (trimmedUnit === "%") return `${formatted}%`;
+        return `${formatted} ${trimmedUnit}`;
+    };
+
+    const wrapTextLines = (text, maxWidth, fontSize, maxLines, fontWeight = "500", family = fontFamily) => {
+        const words = String(text || "").replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            if (lines.length >= maxLines) return;
+            const next = current ? `${current} ${word}` : word;
+            if (measureLabelText(next, fontSize, fontWeight, family) <= maxWidth || !current) {
+                current = next;
+            } else {
+                lines.push(current);
+                current = word;
+            }
+        });
+        if (current && lines.length < maxLines) lines.push(current);
+        return lines;
+    };
+
+    d3.select(containerSelector).html("");
+
+    const width = Math.max(1000, variables.width || 1000);
+    const cardX = 28;
+    const cardY = 22;
+    const cardWidth = width - cardX * 2;
+    const cardHeight = 720;
+    const legendHeight = 86;
+    const height = cardY + cardHeight + legendHeight + 34;
+
+    const dimensionChannel = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 });
+    const valueChannel = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 });
+    const dimensionField = dimensionChannel.raw?.name || dimensionChannel.key || "dimension";
+    const valueField = valueChannel.raw?.name || valueChannel.key || "value";
+    const dimensionColumn = dimensionChannel.raw || {};
+    const valueColumn = valueChannel.raw || {};
+    const valueUnit = valueColumn.unit && valueColumn.unit !== "none" ? valueColumn.unit : "";
+    const valueCaption = String(valueColumn.name || valueField)
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .replace(/\s*\([^)]*\)\s*$/, "")
+        .trim() || valueField;
+
+    const normalizedData = chartData.map((d, index) => ({
+        ...d,
+        __index: index,
+        __dimension: d[dimensionField],
+        __rawValue: Math.max(0, +d[valueField] || 0),
+        __temporalKey: temporalKey(d[dimensionField])
+    }));
+    const validTemporalKeys = normalizedData.filter(d => d.__temporalKey !== null).length;
+    const isTemporal = dimensionColumn.data_type === "temporal" || validTemporalKeys === normalizedData.length;
+    const sortedData = [...normalizedData].sort((a, b) => {
+        if (isTemporal) {
+            return d3.ascending(a.__temporalKey, b.__temporalKey) || d3.ascending(a.__index, b.__index);
+        }
+        return d3.descending(a.__rawValue, b.__rawValue) || d3.ascending(a.__index, b.__index);
+    }).slice(0, 6);
+
+    const sourcePalette = [
+        "#0E55C7", "#0A9F9A", "#67B343", "#F68A13", "#7351C7", "#D94A4A"
+    ];
+    sortedData.forEach((d, index) => {
+        const baseColor = sourcePalette[index % sourcePalette.length];
+        d.__baseColor = baseColor;
+        d.__darkColor = chartUtils.color.variant(baseColor, { mode: "darker", amount: 0.20 });
+        d.__lightColor = chartUtils.color.variant(baseColor, { mode: "brighter", amount: 0.52 });
+        d.__paleColor = d3.interpolateRgb("#FFFFFF", baseColor)(0.10);
+        d.__activeUnits = Math.max(0, Math.min(10, Math.round(d.__rawValue)));
+    });
+
+    const displayLabels = sortedData.map(d => compactCategory(d.__dimension, isTemporal));
+    const textColor = "#092B62";
+    const mutedText = "#536579";
+    const panelStroke = "#D9E8F1";
+    const inactiveColor = "#D9E3EA";
+
+    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 defs = svg.append("defs");
+    const cardShadow = defs.append("filter")
+        .attr("id", "vertical-dot-card-shadow-02")
+        .attr("x", "-10%")
+        .attr("y", "-10%")
+        .attr("width", "120%")
+        .attr("height", "125%");
+    cardShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 8)
+        .attr("stdDeviation", 9)
+        .attr("flood-color", "#6D879E")
+        .attr("flood-opacity", 0.18);
+
+    const legendShadow = defs.append("filter")
+        .attr("id", "vertical-dot-legend-shadow-02")
+        .attr("x", "-8%")
+        .attr("y", "-20%")
+        .attr("width", "116%")
+        .attr("height", "150%");
+    legendShadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 5)
+        .attr("stdDeviation", 5)
+        .attr("flood-color", "#A8BECC")
+        .attr("flood-opacity", 0.18);
+
+    sortedData.forEach((d, index) => {
+        const headerGrad = defs.append("linearGradient")
+            .attr("id", `vertical-dot-card-header-gradient-02-${index}`)
+            .attr("x1", "0%")
+            .attr("x2", "100%")
+            .attr("y1", "0%")
+            .attr("y2", "0%");
+        headerGrad.append("stop").attr("offset", "0%").attr("stop-color", d.__darkColor);
+        headerGrad.append("stop").attr("offset", "100%").attr("stop-color", d.__lightColor);
+
+        const iconGrad = defs.append("radialGradient")
+            .attr("id", `vertical-dot-icon-gradient-02-${index}`)
+            .attr("cx", "38%")
+            .attr("cy", "33%")
+            .attr("r", "72%");
+        iconGrad.append("stop").attr("offset", "0%").attr("stop-color", d.__paleColor);
+        iconGrad.append("stop").attr("offset", "100%").attr("stop-color", d3.interpolateRgb("#FFFFFF", d.__baseColor)(0.22));
+    });
+
+    svg.append("rect")
+        .attr("class", "chart-canvas-bg")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("fill", "none");
+
+    const cardGap = Math.max(10, sortedData.length > 5 ? 10 : 13);
+    const categoryCardWidth = (cardWidth - cardGap * (sortedData.length - 1)) / sortedData.length;
+    const categoryCardHeight = cardHeight;
+    const headerHeight = 78;
+    const categorySlotY = cardY + headerHeight + 86;
+    const unitGridTop = cardY + headerHeight + 194;
+    const valueY = cardY + cardHeight - 124;
+    const captionY = cardY + cardHeight - 75;
+    const underlineY = cardY + cardHeight - 38;
+
+    const drawPerson = (parent, cx, cy, scale, fill, opacity, className, datum, unitIndex) => {
+        const group = parent.append("g")
+            .attr("class", className)
+            .attr("data-source-index", datum.__index)
+            .attr("data-category", String(datum.__dimension))
+            .attr("data-value", datum.__rawValue)
+            .attr("data-unit-index", unitIndex)
+            .attr("transform", `translate(${cx},${cy}) scale(${scale})`)
+            .attr("opacity", opacity);
+        group.append("circle")
+            .attr("cx", 0)
+            .attr("cy", -10)
+            .attr("r", 8.2)
+            .attr("fill", fill);
+        group.append("path")
+            .attr("d", "M -14 14 C -13 2 -7 -2 0 -2 C 7 -2 13 2 14 14 Z")
+            .attr("fill", fill);
+        return group;
+    };
+
+    sortedData.forEach((dataPoint, dataIndex) => {
+        const x = cardX + dataIndex * (categoryCardWidth + cardGap);
+        const centerX = x + categoryCardWidth / 2;
+        const cardRadius = 16;
+        const headerRadius = 16;
+        const labelText = displayLabels[dataIndex] || String(dataPoint.__dimension);
+        const labelLines = splitCategoryLines(labelText, categoryCardWidth - 22, 21);
+        const iconRadius = Math.max(37, Math.min(56, categoryCardWidth * 0.30));
+        const unitScale = Math.max(1.02, Math.min(1.38, categoryCardWidth / 142));
+        const unitColGap = Math.max(36, Math.min(54, categoryCardWidth * 0.30));
+        const unitRowGap = 49;
+        const gridCenterX = centerX;
+        const gridLeft = gridCenterX - unitColGap / 2;
+        const gridRight = gridCenterX + unitColGap / 2;
+        const formattedValue = formatValueWithUnit(dataPoint.__rawValue, valueUnit);
+        const iconLetter = String(labelText).trim().charAt(0).toUpperCase() || "?";
+
+        svg.append("rect")
+            .attr("class", "category-card")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dataPoint.__dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", x)
+            .attr("y", cardY)
+            .attr("width", categoryCardWidth)
+            .attr("height", categoryCardHeight)
+            .attr("rx", cardRadius)
+            .attr("ry", cardRadius)
+            .attr("fill", "#FFFFFF")
+            .attr("stroke", panelStroke)
+            .attr("stroke-width", 1.2)
+            .attr("filter", "url(#vertical-dot-card-shadow-02)");
+
+        svg.append("path")
+            .attr("class", "category-card-header")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dataPoint.__dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("d", [
+                `M ${x} ${cardY + headerRadius}`,
+                `Q ${x} ${cardY} ${x + headerRadius} ${cardY}`,
+                `L ${x + categoryCardWidth - headerRadius} ${cardY}`,
+                `Q ${x + categoryCardWidth} ${cardY} ${x + categoryCardWidth} ${cardY + headerRadius}`,
+                `L ${x + categoryCardWidth} ${cardY + headerHeight}`,
+                `L ${x} ${cardY + headerHeight}`,
+                "Z"
+            ].join(" "))
+            .attr("fill", `url(#vertical-dot-card-header-gradient-02-${dataIndex})`);
+
+        const headerLabel = svg.append("text")
+            .attr("class", "category-header-label")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dataPoint.__dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", centerX)
+            .attr("y", cardY + 33)
+            .attr("text-anchor", "middle")
+            .style("font-family", fontFamily)
+            .style("font-weight", "800")
+            .style("fill", "#FFFFFF");
+        const headerFont = fittedFontSize(labelLines.join(" "), categoryCardWidth - 22, labelLines.length > 1 ? 17 : 21, 10, "800", fontFamily);
+        labelLines.forEach((line, lineIndex) => {
+            const tspan = headerLabel.append("tspan")
+                .attr("x", centerX)
+                .attr("dy", lineIndex === 0 ? 0 : `${headerFont + 2}px`)
+                .style("font-size", `${headerFont}px`);
+            applyTextFit(tspan, line, categoryCardWidth - 22, headerFont, "800", fontFamily);
+        });
+
+        svg.append("circle")
+            .attr("class", "reserved-asset-slot category-map-icon-slot")
+            .attr("data-asset-slot", "category-map-icon")
+            .attr("data-slot-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-asset-source-policy", "image2_asset_or_neutral_placeholder")
+            .attr("data-anchor", "category-card-centerline")
+            .attr("data-collision-rule", "stay-between-card-header-and-person-unit-grid; shrink-before-overlap")
+            .attr("data-bbox", `${(centerX - iconRadius).toFixed(1)},${(categorySlotY - iconRadius).toFixed(1)},${(iconRadius * 2).toFixed(1)},${(iconRadius * 2).toFixed(1)}`)
+            .attr("data-mask-policy", "circular mask; downstream asset may replace only inside this circle")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dataPoint.__dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("cx", centerX)
+            .attr("cy", categorySlotY)
+            .attr("r", iconRadius)
+            .attr("fill", `url(#vertical-dot-icon-gradient-02-${dataIndex})`)
+            .attr("stroke", "#D6E7F1")
+            .attr("stroke-width", 2.4);
+
+        svg.append("text")
+            .attr("class", "category-map-icon-neutral-glyph")
+            .attr("x", centerX)
+            .attr("y", categorySlotY + iconRadius * 0.22)
+            .attr("text-anchor", "middle")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${Math.max(20, iconRadius * 0.72)}px`)
+            .style("font-weight", "850")
+            .style("fill", d3.interpolateRgb(dataPoint.__baseColor, "#13304E")(0.44))
+            .text(iconLetter);
+
+        for (let unitIndex = 0; unitIndex < 10; unitIndex++) {
+            const col = unitIndex % 2;
+            const row = Math.floor(unitIndex / 2);
+            const unitCx = col === 0 ? gridLeft : gridRight;
+            const unitCy = unitGridTop + row * unitRowGap;
+            const isActive = unitIndex < dataPoint.__activeUnits;
+            drawPerson(
+                svg,
+                unitCx,
+                unitCy,
+                unitScale,
+                isActive ? dataPoint.__baseColor : inactiveColor,
+                isActive ? 1 : 0.78,
+                isActive ? "mark person-unit active-unit" : "mark person-unit inactive-unit",
+                dataPoint,
+                unitIndex
+            );
+        }
+
+        const valueSize = fittedFontSize(formattedValue, categoryCardWidth - 26, 45, 23, "850", annotationFamily);
+        const valueText = svg.append("text")
+            .attr("class", "value value-label")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dataPoint.__dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", centerX)
+            .attr("y", valueY)
+            .attr("text-anchor", "middle")
+            .style("font-family", annotationFamily)
+            .style("font-size", `${valueSize}px`)
+            .style("font-weight", "850")
+            .style("fill", dataPoint.__baseColor);
+        applyTextFit(valueText, formattedValue, categoryCardWidth - 26, valueSize, "850", annotationFamily);
+
+        const captionLines = wrapTextLines(valueCaption, categoryCardWidth - 24, 13, 2, "500", annotationFamily);
+        const captionText = svg.append("text")
+            .attr("class", "value-caption")
+            .attr("data-source-index", dataPoint.__index)
+            .attr("data-category", String(dataPoint.__dimension))
+            .attr("data-value", dataPoint.__rawValue)
+            .attr("x", centerX)
+            .attr("y", captionY)
+            .attr("text-anchor", "middle")
+            .style("font-family", annotationFamily)
+            .style("font-size", "13px")
+            .style("font-weight", "500")
+            .style("fill", mutedText);
+        captionLines.forEach((line, lineIndex) => {
+            const tspan = captionText.append("tspan")
+                .attr("x", centerX)
+                .attr("dy", lineIndex === 0 ? 0 : "17px");
+            applyTextFit(tspan, line, categoryCardWidth - 24, 13, "500", annotationFamily);
+        });
+
+        svg.append("line")
+            .attr("class", "card-bottom-accent")
+            .attr("x1", centerX - categoryCardWidth * 0.22)
+            .attr("x2", centerX + categoryCardWidth * 0.22)
+            .attr("y1", underlineY)
+            .attr("y2", underlineY)
+            .attr("stroke", dataPoint.__baseColor)
+            .attr("stroke-width", 4)
+            .attr("stroke-linecap", "round");
+
+        svg.append("title").text(`${labelText}: ${formattedValue}`);
+    });
+
+    const legendX = Math.max(74, width * 0.10);
+    const legendY = cardY + cardHeight + 38;
+    const legendWidth = width - legendX * 2;
+    const legendCenterY = legendY + legendHeight / 2;
+    svg.append("rect")
+        .attr("class", "unit-legend-strip")
+        .attr("data-legend-role", "chart-owned-unit-encoding")
+        .attr("data-collision-rule", "stay-below-category-cards; no-source-footer-or-takeaway-prose")
+        .attr("x", legendX)
+        .attr("y", legendY)
+        .attr("width", legendWidth)
+        .attr("height", legendHeight)
+        .attr("rx", 12)
+        .attr("ry", 12)
+        .attr("fill", "#F3FAFE")
+        .attr("stroke", "#CFE2EE")
+        .attr("stroke-width", 1.4)
+        .attr("filter", "url(#vertical-dot-legend-shadow-02)");
+
+    drawPerson(svg, legendX + 68, legendCenterY + 7, 1.15, "#1556B7", 1, "legend-person-unit", { __index: -1, __dimension: "legend", __rawValue: 1 }, 0);
+
+    svg.append("text")
+        .attr("class", "legend-equals")
+        .attr("x", legendX + 120)
+        .attr("y", legendCenterY + 10)
+        .attr("text-anchor", "middle")
+        .style("font-family", annotationFamily)
+        .style("font-size", "24px")
+        .style("font-weight", "750")
+        .style("fill", "#33485B")
+        .text("= 1%");
+
+    svg.append("line")
+        .attr("class", "legend-divider")
+        .attr("x1", legendX + 210)
+        .attr("x2", legendX + 210)
+        .attr("y1", legendY + 20)
+        .attr("y2", legendY + legendHeight - 20)
+        .attr("stroke", "#9FB5C7")
+        .attr("stroke-width", 1.2);
+
+    const legendText = `Each person icon represents 1% of ${valueCaption.toLowerCase()}.`;
+    const legendLines = wrapTextLines(legendText, legendWidth - 265, 18, 2, "500", annotationFamily);
+    const legendTextNode = svg.append("text")
+        .attr("class", "unit-legend-text")
+        .attr("x", legendX + 250)
+        .attr("y", legendCenterY - (legendLines.length > 1 ? 11 : 0))
+        .attr("text-anchor", "start")
+        .style("font-family", annotationFamily)
+        .style("font-size", "18px")
+        .style("font-weight", "500")
+        .style("fill", "#33485B");
+    legendLines.forEach((line, index) => {
+        legendTextNode.append("tspan")
+            .attr("x", legendX + 250)
+            .attr("dy", index === 0 ? 0 : "24px")
+            .text(line);
+    });
+
+    return svg.node();
+}