Upload folder using huggingface_hub

modules/chart_engine/template/d3-js/type29_small_multiples_line_graphs/small_multiples_line_graphs_plain_chart_01.js

@@ -0,0 +1,1017 @@
+/*
+REQUIREMENTS_BEGIN
+{
+    "chart_type": "small multiples of line graphs",
+    "chart_name": "small_multiples_line_graphs_plain_chart_01",
+    "is_composite": false,
+    "required_fields": ["x", "y", "group"],
+    "required_fields_type": [["temporal"], ["numerical"], ["categorical"]],
+    "required_fields_range": [[5, 30], ["-inf", "inf"], [2, 8]],
+    "required_fields_icons": [],
+    "required_other_icons": [],
+    "required_fields_colors": ["group"],
+    "required_other_colors": ["primary"],
+    "supported_effects": ["stroke", "spacing"],
+    "min_height": 1000,
+    "min_width": 760,
+    "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 chartData = (jsonData.data && jsonData.data.data) || [];
+    const dataColumns = chartUtils.schema.columns(jsonData);
+    const colorResolver = chartUtils.color.resolver(jsonData);
+    const chartUtilsFormatSample = chartUtils.format.autoText;
+    const chartUtilsTextSample = chartUtils.text.estimate;
+    const chartUtilsStandard = {
+        schema: chartUtils.schema,
+        format: chartUtils.format,
+        text: chartUtils.text,
+        color: chartUtils.color,
+        legendLayout: chartUtils.legend.layout,
+        legendDraw: chartUtils.legend.draw,
+        random: chartUtils.random.generator(jsonData, "dev-wz-style")
+    };
+    const standardChannels = chartUtils.schema.channels(jsonData, {
+        x: { fallbackIndex: 0 },
+        y: { fallbackIndex: 1 },
+        y2: { fallbackIndex: 2 },
+        y3: { fallbackIndex: 3 },
+        size: { fallbackIndex: 2 },
+        group: { fallbackIndex: 2 },
+        group2: { fallbackIndex: 3 },
+        group3: { fallbackIndex: 4 }
+    });
+    const variables = jsonData.variables || {};
+    const typography = jsonData.typography || {
+        label: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        annotation: { font_family: "Arial", font_size: "12px", font_weight: "normal" },
+        title: { font_family: "Georgia", font_size: "16px", font_weight: "bold" }
+    };
+    const sourceColors = jsonData.colors || {};
+    const colorField = sourceColors.field || {};
+    const colorOther = sourceColors.other || {};
+
+    d3.select(containerSelector).html("");
+
+    const xColumn = chartUtils.schema.channel(jsonData, "x", { fallbackIndex: 0 }).raw || {};
+    const yColumn = chartUtils.schema.channel(jsonData, "y", { fallbackIndex: 1 }).raw || {};
+    const groupColumn = chartUtils.schema.channel(jsonData, "group", { fallbackIndex: 2 }).raw || {};
+    const xField = xColumn.name || "date";
+    const yField = yColumn.name || "value";
+    const groupField = groupColumn.name || "group";
+    const yUnit = yColumn.unit && yColumn.unit !== "none" ? yColumn.unit : "";
+
+    const width = Math.max(760, Number(variables.width) || 760);
+    const navy = "#111a42";
+    const accentBlue = colorOther.primary || "#1287c9";
+    const mutedText = "#4a5568";
+    const axisText = "#26334f";
+    const canvasColor = "#f7fbff";
+    const cardFill = "#ffffff";
+    const linePalette = ["#1287c9", "#d79b00", "#7444c6", "#329546", "#e65a45", "#2763c9", "#089a9c", "#af5b28"];
+    const headerPalette = ["#eaf7ff", "#fff7dc", "#f4ecff", "#eef8ee", "#fff0ec", "#edf2ff", "#e9faf8", "#fff3e8"];
+    const labelTypography = typography.label || {};
+    const titleTypography = typography.title || labelTypography;
+    const valueTypography = typography.annotation || labelTypography;
+    const labelFamily = labelTypography.font_family || "Arial";
+    const titleFamily = titleTypography.font_family || "Georgia";
+    const valueFamily = valueTypography.font_family || labelFamily;
+    const labelWeight = labelTypography.font_weight || "normal";
+    const titleWeight = titleTypography.font_weight || "700";
+    const valueWeight = valueTypography.font_weight || "600";
+    const baseLabelSize = parseFloat(labelTypography.font_size) || 11;
+    const baseValueSize = parseFloat(valueTypography.font_size) || 11;
+
+    function rgba(color, opacity) {
+        const c = d3.rgb(color);
+        return `rgba(${c.r}, ${c.g}, ${c.b}, ${opacity})`;
+    }
+
+    function readableName(value) {
+        return String(value || "")
+            .replace(/_/g, " ")
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function cleanText(value) {
+        return String(value || "")
+            .replace(/\*\*/g, "")
+            .replace(/\s+/g, " ")
+            .trim();
+    }
+
+    function parseTemporalDate(value) {
+        if (value instanceof Date && Number.isFinite(value.getTime())) return value;
+        const text = String(value ?? "").trim();
+        if (!text) return null;
+
+        let match = text.match(/^(-?\d{4})$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), 0, 1));
+
+        match = text.match(/^(-?\d{4})[-/.](\d{1,2})(?:[-/.](\d{1,2}))?$/);
+        if (match) return new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3] || 1)));
+
+        match = text.match(/^Q([1-4])\s+(-?\d{4})$/i) || text.match(/^(-?\d{4})\s+Q([1-4])$/i);
+        if (match) {
+            const year = match[1].length === 4 ? Number(match[1]) : Number(match[2]);
+            const quarter = match[1].length === 4 ? Number(match[2]) : Number(match[1]);
+            return new Date(Date.UTC(year, (quarter - 1) * 3, 1));
+        }
+
+        const season = text.match(/^(spring|summer|fall|autumn|winter)\s+(-?\d{4})$/i);
+        if (season) {
+            const monthBySeason = { spring: 2, summer: 5, fall: 8, autumn: 8, winter: 11 };
+            return new Date(Date.UTC(Number(season[2]), monthBySeason[season[1].toLowerCase()], 1));
+        }
+
+        const parsed = new Date(text);
+        if (Number.isFinite(parsed.getTime())) {
+            return new Date(Date.UTC(parsed.getUTCFullYear(), parsed.getUTCMonth(), parsed.getUTCDate()));
+        }
+        return null;
+    }
+
+    function formatNumber(value) {
+        const numericValue = Number(value);
+        if (!Number.isFinite(numericValue)) return String(value ?? "");
+        const absValue = Math.abs(numericValue);
+        if (absValue >= 1000000000) return `${d3.format(".3~g")(numericValue / 1000000000)}B`;
+        if (absValue >= 1000000) return `${d3.format(".3~g")(numericValue / 1000000)}M`;
+        if (absValue >= 1000) return `${d3.format(".3~g")(numericValue / 1000)}k`;
+        return d3.format(",.4~g")(numericValue);
+    }
+
+    function formatWithUnit(value, unit) {
+        const formatted = formatNumber(value);
+        if (!unit) return formatted;
+        if (unit === "$") return `$${formatted}`;
+        if (unit === "%") return `${formatted}%`;
+        return `${formatted} ${unit}`;
+    }
+
+    function wrapText(text, maxChars, maxLines) {
+        const words = String(text || "").split(/\s+/).filter(Boolean);
+        if (!words.length) return [String(text || "")];
+        const lines = [];
+        let current = "";
+        words.forEach(word => {
+            if (lines.length >= maxLines) return;
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= maxChars) {
+                current = next;
+                return;
+            }
+            if (current) lines.push(current);
+            if (lines.length >= maxLines) return;
+            current = word;
+        });
+        if (current && lines.length < maxLines) lines.push(current);
+        return lines.length ? lines : [String(text || "")];
+    }
+
+    function selectEvenTicks(values, maxTicks) {
+        if (values.length <= maxTicks) return values;
+        const selected = [];
+        for (let i = 0; i < maxTicks; i += 1) {
+            const index = Math.round(i * (values.length - 1) / (maxTicks - 1));
+            const value = values[index];
+            if (!selected.includes(value)) selected.push(value);
+        }
+        return selected;
+    }
+
+    function splitTitle(title, maxChars) {
+        const clean = cleanText(title);
+        const words = clean.split(/\s+/).filter(Boolean);
+        if (!words.length) return ["", ""];
+        if (clean.length <= maxChars || words.length === 1) return [clean, ""];
+
+        const prepositions = new Set(["per", "in", "with", "of", "by", "from", "across", "for", "after", "before"]);
+        let semanticSplit = -1;
+        let bestDistance = Infinity;
+        const midpoint = clean.length / 2;
+        for (let i = 2; i < words.length - 1; i += 1) {
+            const first = words.slice(0, i).join(" ");
+            const secondFirst = words[i].toLowerCase();
+            const second = words.slice(i).join(" ");
+            if (!prepositions.has(secondFirst) || second.length < 9 || first.length > maxChars + 8) continue;
+            const distance = Math.abs(first.length - midpoint);
+            if (distance < bestDistance) {
+                semanticSplit = i;
+                bestDistance = distance;
+            }
+        }
+        if (semanticSplit > 0) return [words.slice(0, semanticSplit).join(" "), words.slice(semanticSplit).join(" ")];
+
+        let best = null;
+        let bestScore = Infinity;
+        for (let i = 1; i < words.length; i += 1) {
+            const first = words.slice(0, i).join(" ");
+            const second = words.slice(i).join(" ");
+            const longest = Math.max(first.length, second.length);
+            const overrun = Math.max(0, longest - maxChars);
+            const balance = Math.abs(first.length - second.length);
+            const tinySecondLinePenalty = second.length < 9 ? 24 : 0;
+            const score = balance + overrun * 5 + tinySecondLinePenalty;
+            if (score < bestScore) {
+                best = [first, second];
+                bestScore = score;
+            }
+        }
+        return best || [clean, ""];
+    }
+
+    function groupInitial(group) {
+        const words = String(group || "").trim().split(/\s+/).filter(Boolean);
+        if (!words.length) return "";
+        if (words.length === 1) return words[0].slice(0, 1).toUpperCase();
+        return words.slice(0, 2).map(word => word.slice(0, 1).toUpperCase()).join("");
+    }
+
+    function fitFont(text, desiredSize, maxWidth, minSize) {
+        const estimated = String(text || "").length * desiredSize * 0.56;
+        if (estimated <= maxWidth) return desiredSize;
+        return Math.max(minSize, Math.floor(desiredSize * maxWidth / Math.max(1, estimated)));
+    }
+
+    function semanticKey(group) {
+        const text = String(group || "").toLowerCase();
+        if (/\bcar\b|auto|vehicle|driving/.test(text)) return "car";
+        if (/transit|bus|rail|train|metro/.test(text)) return "transit";
+        if (/bicycle|bike|cycling/.test(text)) return "bicycle";
+        if (/walk|foot|pedestrian/.test(text)) return "walking";
+        return "";
+    }
+
+    function semanticColor(group, index) {
+        const key = semanticKey(group);
+        const semantic = {
+            car: "#1086c8",
+            transit: "#d99a00",
+            bicycle: "#7742c2",
+            walking: "#3c9a43"
+        };
+        if (semantic[key]) return semantic[key];
+        if (colorField[group]) return colorField[group];
+        return linePalette[index % linePalette.length];
+    }
+
+    function drawTransportIcon(parent, kind, color, size, initial) {
+        const s = size / 40;
+        const g = parent.append("g")
+            .attr("class", `reference-icon-mark reference-icon-${kind || "generic"}`)
+            .attr("transform", `scale(${s})`);
+
+        if (kind === "car") {
+            g.append("path")
+                .attr("d", "M -14 5 L -10 -5 C -9 -8 -6 -10 -2 -10 L 6 -10 C 9 -10 12 -8 13 -5 L 16 5 Z")
+                .attr("fill", "none").attr("stroke", color).attr("stroke-width", 3).attr("stroke-linejoin", "round");
+            g.append("line").attr("x1", -7).attr("x2", 9).attr("y1", -2).attr("y2", -2).attr("stroke", color).attr("stroke-width", 3).attr("stroke-linecap", "round");
+            [-9, 10].forEach(x => g.append("circle").attr("cx", x).attr("cy", 7).attr("r", 4).attr("fill", "none").attr("stroke", color).attr("stroke-width", 3));
+            return;
+        }
+        if (kind === "transit") {
+            g.append("rect").attr("x", -12).attr("y", -13).attr("width", 24).attr("height", 27).attr("rx", 4)
+                .attr("fill", "none").attr("stroke", color).attr("stroke-width", 3);
+            g.append("line").attr("x1", -7).attr("x2", 7).attr("y1", -3).attr("y2", -3).attr("stroke", color).attr("stroke-width", 3).attr("stroke-linecap", "round");
+            g.append("line").attr("x1", -8).attr("x2", 8).attr("y1", 12).attr("y2", 12).attr("stroke", color).attr("stroke-width", 3).attr("stroke-linecap", "round");
+            [-7, 7].forEach(x => g.append("circle").attr("cx", x).attr("cy", 6).attr("r", 2.3).attr("fill", color));
+            return;
+        }
+        if (kind === "bicycle") {
+            [-10, 10].forEach(x => g.append("circle").attr("cx", x).attr("cy", 8).attr("r", 7).attr("fill", "none").attr("stroke", color).attr("stroke-width", 3));
+            g.append("path").attr("d", "M -10 8 L -2 -4 L 5 8 L -10 8 M -2 -4 L 6 -4 L 10 8")
+                .attr("fill", "none").attr("stroke", color).attr("stroke-width", 3).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+            g.append("line").attr("x1", -2).attr("x2", -4).attr("y1", -4).attr("y2", -10).attr("stroke", color).attr("stroke-width", 3).attr("stroke-linecap", "round");
+            return;
+        }
+        if (kind === "walking") {
+            g.append("circle").attr("cx", 0).attr("cy", -13).attr("r", 3.2).attr("fill", color);
+            g.append("path").attr("d", "M 0 -8 L -3 1 L -8 9 M -2 0 L 7 2 M 1 -5 L 6 -11 M 1 0 L 7 10")
+                .attr("fill", "none").attr("stroke", color).attr("stroke-width", 3.4).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+            return;
+        }
+
+        g.append("polyline")
+            .attr("points", "-13,8 -6,2 -1,5 5,-5 13,-10")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 3.2)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round");
+        g.append("polyline")
+            .attr("points", "6,-10 13,-10 13,-3")
+            .attr("fill", "none")
+            .attr("stroke", color)
+            .attr("stroke-width", 3.2)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round");
+        if (initial) {
+            g.append("text")
+                .attr("x", 0)
+                .attr("y", 18)
+                .attr("text-anchor", "middle")
+                .style("font-family", labelFamily)
+                .style("font-size", "9px")
+                .style("font-weight", 800)
+                .style("fill", color)
+                .text(initial.slice(0, 2));
+        }
+    }
+
+    function drawIconSlot(parent, group, color, x, y, radius) {
+        const kind = semanticKey(group);
+        const slot = parent.append("g")
+            .attr("class", "reference-card-icon-slot")
+            .attr("data-group", group)
+            .attr("data-icon-kind", kind || "generic")
+            .attr("transform", `translate(${x}, ${y})`);
+        slot.append("circle").attr("r", radius).attr("fill", color);
+        slot.append("circle").attr("r", radius - 3).attr("fill", "none").attr("stroke", "#ffffff").attr("stroke-opacity", 0.35).attr("stroke-width", 1.2);
+        const mark = slot.append("g").attr("transform", "translate(0, 0)");
+        if (kind) {
+            drawTransportIcon(mark, kind, "#ffffff", radius * 1.45, "");
+        } else {
+            mark.append("text")
+                .attr("class", "reference-card-icon-text")
+                .attr("x", 0)
+                .attr("y", 7)
+                .attr("text-anchor", "middle")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(13, Math.min(18, radius * 0.78))}px`)
+                .style("font-weight", 800)
+                .style("fill", "#ffffff")
+                .text(groupInitial(group));
+        }
+        return slot;
+    }
+
+    function drawHeroDivider(svg, centerX, y) {
+        const hero = svg.append("g")
+            .attr("class", "reference-hero-icon-slot")
+            .attr("data-slot", "title-divider")
+            .attr("transform", `translate(${centerX}, ${y})`);
+        hero.append("line")
+            .attr("class", "reference-hero-rule")
+            .attr("x1", -122)
+            .attr("x2", -30)
+            .attr("y1", 0)
+            .attr("y2", 0)
+            .attr("stroke", accentBlue)
+            .attr("stroke-width", 2)
+            .attr("stroke-opacity", 0.72);
+        hero.append("line")
+            .attr("class", "reference-hero-rule")
+            .attr("x1", 30)
+            .attr("x2", 122)
+            .attr("y1", 0)
+            .attr("y2", 0)
+            .attr("stroke", accentBlue)
+            .attr("stroke-width", 2)
+            .attr("stroke-opacity", 0.72);
+        drawTransportIcon(hero, "car", accentBlue, 34, "");
+    }
+
+    function drawTrendArrow(parent, delta, color, x, y, size) {
+        const g = parent.append("g")
+            .attr("class", "reference-trend-arrow-icon-slot")
+            .attr("transform", `translate(${x}, ${y})`);
+        g.append("circle").attr("r", size / 2).attr("fill", color);
+        const path = delta < 0 ? "M -7 -5 L 0 2 L 6 -4 M 0 2 L 0 -7" : "M -7 5 L 0 -2 L 6 4 M 0 -2 L 0 7";
+        g.append("path")
+            .attr("d", path)
+            .attr("transform", "rotate(45)")
+            .attr("fill", "none")
+            .attr("stroke", "#ffffff")
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round");
+    }
+
+    function drawFooterDecoration(parent, x, y, widthValue, heightValue, color) {
+        const decor = parent.append("g")
+            .attr("class", "reference-footer-decorative-image-slot")
+            .attr("data-slot", "footer-city-motion")
+            .attr("transform", `translate(${x}, ${y})`);
+        decor.append("line")
+            .attr("x1", 0)
+            .attr("x2", widthValue)
+            .attr("y1", heightValue - 14)
+            .attr("y2", heightValue - 14)
+            .attr("stroke", rgba(color, 0.32))
+            .attr("stroke-width", 2);
+        const buildings = [
+            [8, 25, 20, 48], [34, 10, 16, 63], [58, 31, 18, 42],
+            [84, 18, 22, 55], [114, 29, 16, 44], [136, 8, 24, 65]
+        ];
+        buildings.forEach(([bx, by, bw, bh], i) => {
+            decor.append("rect")
+                .attr("x", bx)
+                .attr("y", by)
+                .attr("width", bw)
+                .attr("height", bh)
+                .attr("rx", 2)
+                .attr("fill", rgba(color, i % 2 ? 0.12 : 0.18));
+            [0, 1, 2].forEach(row => {
+                decor.append("line")
+                    .attr("x1", bx + 4)
+                    .attr("x2", bx + bw - 4)
+                    .attr("y1", by + 8 + row * 11)
+                    .attr("y2", by + 8 + row * 11)
+                    .attr("stroke", rgba(color, 0.18))
+                    .attr("stroke-width", 1);
+            });
+        });
+        const car = decor.append("g")
+            .attr("class", "reference-footer-car-slot")
+            .attr("transform", `translate(${widthValue - 78}, ${heightValue - 23})`);
+        car.append("path")
+            .attr("d", "M 0 6 L 8 -8 C 10 -12 15 -14 23 -14 L 47 -14 C 55 -14 61 -10 64 -3 L 70 6 Z")
+            .attr("fill", color);
+        car.append("rect").attr("x", 6).attr("y", 0).attr("width", 62).attr("height", 14).attr("rx", 5).attr("fill", color);
+        [-1, 58].forEach(cx => {
+            car.append("circle").attr("cx", cx + 12).attr("cy", 15).attr("r", 8).attr("fill", "#243044");
+            car.append("circle").attr("cx", cx + 12).attr("cy", 15).attr("r", 4).attr("fill", "#d9edfa");
+        });
+        car.append("path").attr("d", "M 24 -10 L 36 -10 L 42 0 L 17 0 Z").attr("fill", "#bfe6fb");
+        [0, 1, 2].forEach(i => {
+            decor.append("line")
+                .attr("x1", widthValue - 150 - i * 18)
+                .attr("x2", widthValue - 98 - i * 8)
+                .attr("y1", heightValue - 34 + i * 10)
+                .attr("y2", heightValue - 34 + i * 10)
+                .attr("stroke", rgba(color, 0.35))
+                .attr("stroke-width", 2)
+                .attr("stroke-linecap", "round");
+        });
+    }
+
+    function percentChange(firstValue, lastValue) {
+        if (!Number.isFinite(firstValue) || !Number.isFinite(lastValue)) return null;
+        if (firstValue === 0) return null;
+        return (lastValue - firstValue) / Math.abs(firstValue) * 100;
+    }
+
+    const parsedRows = chartData.map((d, index) => {
+        const date = parseTemporalDate(d[xField]);
+        const value = Number(d[yField]);
+        const group = String(d[groupField] ?? "");
+        return {
+            ...d,
+            __index: index,
+            __date: date,
+            __time: date ? date.getTime() : NaN,
+            __xLabel: String(d[xField] ?? ""),
+            __value: value,
+            __group: group
+        };
+    }).filter(d => d.__date && Number.isFinite(d.__time) && Number.isFinite(d.__value) && d.__group !== "");
+
+    if (!parsedRows.length) return;
+
+    const groups = [];
+    parsedRows.forEach(d => {
+        if (!groups.includes(d.__group)) groups.push(d.__group);
+    });
+    if (!groups.length) return;
+
+    const xLabelByTime = new Map();
+    parsedRows.forEach(d => {
+        if (!xLabelByTime.has(d.__time)) xLabelByTime.set(d.__time, d.__xLabel);
+    });
+
+    const groupSeries = groups.map(group => {
+        const byTime = new Map();
+        parsedRows.filter(d => d.__group === group).forEach(d => {
+            if (!byTime.has(d.__time)) {
+                byTime.set(d.__time, { date: d.__date, time: d.__time, label: d.__xLabel, valueSum: 0, count: 0 });
+            }
+            const entry = byTime.get(d.__time);
+            entry.valueSum += d.__value;
+            entry.count += 1;
+        });
+        const values = Array.from(byTime.values())
+            .map(d => ({ date: d.date, time: d.time, label: d.label, value: d.valueSum / d.count }))
+            .sort((a, b) => a.time - b.time);
+        return { group, values };
+    }).filter(d => d.values.length);
+
+    if (!groupSeries.length) return;
+
+    const xValues = Array.from(new Set(parsedRows.map(d => d.__time)))
+        .sort((a, b) => a - b)
+        .map(time => new Date(time));
+    const allValues = groupSeries.flatMap(series => series.values.map(d => d.value));
+    let yMin = d3.min(allValues);
+    let yMax = d3.max(allValues);
+    if (!Number.isFinite(yMin) || !Number.isFinite(yMax)) return;
+    const rawYMin = yMin;
+    const rawYMax = yMax;
+    const scaleText = `${yField} ${yColumn.description || ""} ${yUnit}`.toLowerCase();
+    const boundedScore = rawYMin >= 0 && rawYMax <= 10 && /(rating|score|index|scale|rate)/.test(scaleText);
+    if (boundedScore) {
+        yMin = Math.max(0, Math.floor(rawYMin));
+        yMax = Math.min(100, Math.ceil(rawYMax));
+        if (rawYMax <= 10) yMax = Math.min(10, yMax);
+        if (yMax - yMin < 4) {
+            const mid = (yMin + yMax) / 2;
+            yMin = Math.max(0, Math.floor(mid - 2));
+            yMax = Math.ceil(mid + 2);
+        }
+    } else if (yMin === yMax) {
+        const pad = Math.max(1, Math.abs(yMin) * 0.1);
+        yMin -= pad;
+        yMax += pad;
+    } else {
+        const pad = (yMax - yMin) * 0.1;
+        yMin -= pad;
+        yMax += pad;
+        if (rawYMin >= 0) yMin = Math.max(0, yMin);
+        if (rawYMax <= 0) yMax = Math.min(0, yMax);
+        if (yMin > 0 && (yMax - yMin) / Math.max(1, Math.abs(yMax)) > 0.55) yMin = 0;
+    }
+
+    const cols = groupSeries.length <= 1 ? 1 : 2;
+    const rows = Math.ceil(groupSeries.length / cols);
+    const sidePad = 44;
+    const gapX = variables.has_spacing === false ? 20 : 28;
+    const gapY = variables.has_spacing === false ? 24 : 30;
+    const cardWidth = (width - sidePad * 2 - gapX * (cols - 1)) / cols;
+    const cardHeight = Math.max(340, Math.min(380, cardWidth * 1.02));
+    const titleText = cleanText(jsonData.titles?.main_title || jsonData.metadata?.title || jsonData.title || `${readableName(yField)} by ${readableName(groupField)}`);
+    const subtitleText = cleanText(jsonData.titles?.sub_title || jsonData.metadata?.description || jsonData.metadata?.main_insight || yColumn.description || `${readableName(yField)} across ${readableName(groupField)} over time.`);
+    const titleParts = splitTitle(titleText || `${readableName(yField)} by ${readableName(groupField)}`, Math.max(22, Math.floor(width / 21)));
+    const titleTopFont = fitFont(titleParts[0], Math.max(24, Math.min(34, width * 0.044)), width - 120, 19);
+    const titleMainFont = fitFont(titleParts[1] || titleParts[0], Math.max(38, Math.min(58, width * 0.074)), width - 110, 28);
+    const subtitleLines = wrapText(subtitleText, Math.max(38, Math.floor((width - 170) / 10.6)), 3);
+    const heroTop = 52;
+    const titleTopY = heroTop + 28;
+    const titleMainY = titleTopY + titleTopFont + 42;
+    const dividerY = titleMainY + 36;
+    const subtitleY = dividerY + 50;
+    const cardTop = subtitleY + Math.max(56, subtitleLines.length * 28 + 40);
+    const footerH = 116;
+    const footerY = cardTop + rows * cardHeight + Math.max(0, rows - 1) * gapY + 34;
+    const height = Math.ceil(footerY + footerH + 34);
+    const plot = { left: 52, right: 26, top: 120, bottom: 88 };
+    const innerWidth = Math.max(160, cardWidth - plot.left - plot.right);
+    const innerHeight = Math.max(130, cardHeight - plot.top - plot.bottom);
+    const tickCount = innerWidth < 210 ? 3 : 4;
+    const xTicks = selectEvenTicks(xValues, tickCount);
+
+    const xScale = d3.scaleUtc().domain(d3.extent(xValues)).range([0, innerWidth]);
+    const yScale = d3.scaleLinear().domain([yMin, yMax]).range([innerHeight, 0]);
+    const yTicks = yScale.ticks(innerHeight < 145 ? 4 : 5);
+
+    const colorScale = d3.scaleOrdinal()
+        .domain(groups)
+        .range(groups.map((group, index) => semanticColor(group, index)));
+
+    function formatXTick(date) {
+        const label = xLabelByTime.get(date.getTime());
+        if (label) return label;
+        return d3.utcFormat("%Y")(date);
+    }
+
+    const scaleNote = rawYMin >= 0
+        ? "All panels use a shared y-scale starting at zero where the source values allow."
+        : "All panels use a shared y-scale from the source values.";
+
+    const line = d3.line()
+        .defined(d => Number.isFinite(d.value))
+        .x(d => xScale(d.date))
+        .y(d => yScale(d.value))
+        .curve(d3.curveMonotoneX);
+
+    const strongestSeries = groupSeries.reduce((best, series) => {
+        const first = series.values[0];
+        const last = series.values[series.values.length - 1];
+        const delta = first && last ? Math.abs(last.value - first.value) : 0;
+        if (!best || delta > best.delta) return { series, delta };
+        return best;
+    }, null)?.series || groupSeries[0];
+    const strongestFirst = strongestSeries.values[0];
+    const strongestLast = strongestSeries.values[strongestSeries.values.length - 1];
+    const strongestDelta = strongestFirst && strongestLast ? strongestLast.value - strongestFirst.value : 0;
+    const strongestDirection = strongestDelta < 0 ? "declined the most" : strongestDelta > 0 ? "changed upward the most" : "remained the most stable";
+    const takeaway = `${readableName(strongestSeries.group)} ${strongestDirection} from ${strongestFirst?.label || ""} to ${strongestLast?.label || ""}.`;
+
+    const svg = d3.select(containerSelector)
+        .append("svg")
+        .attr("width", width)
+        .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 shadow = defs.append("filter")
+        .attr("id", "small_multiples_line_01_card_shadow")
+        .attr("x", "-15%")
+        .attr("y", "-13%")
+        .attr("width", "130%")
+        .attr("height", "132%");
+    shadow.append("feDropShadow")
+        .attr("dx", 0)
+        .attr("dy", 5)
+        .attr("stdDeviation", 6)
+        .attr("flood-color", "#15345a")
+        .attr("flood-opacity", 0.12);
+
+    const cardGradient = defs.append("linearGradient")
+        .attr("id", "small_multiples_line_01_card_soft_gradient")
+        .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%");
+    cardGradient.append("stop").attr("offset", "0%").attr("stop-color", "#ffffff");
+    cardGradient.append("stop").attr("offset", "100%").attr("stop-color", "#f8fbff");
+
+    svg.append("rect")
+        .attr("class", "chart-canvas reference-layout-canvas")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width)
+        .attr("height", height)
+        .attr("rx", 16)
+        .attr("ry", 16)
+        .attr("fill", canvasColor);
+
+    svg.append("text")
+        .attr("class", "reference-title-kicker")
+        .attr("x", width / 2)
+        .attr("y", titleTopY)
+        .attr("text-anchor", "middle")
+        .style("font-family", titleFamily)
+        .style("font-size", `${titleTopFont}px`)
+        .style("font-weight", 800)
+        .style("letter-spacing", "0px")
+        .style("fill", navy)
+        .text(titleParts[0]);
+
+    if (titleParts[1]) {
+        svg.append("text")
+            .attr("class", "reference-title-main")
+            .attr("x", width / 2)
+            .attr("y", titleMainY)
+            .attr("text-anchor", "middle")
+            .style("font-family", titleFamily)
+            .style("font-size", `${titleMainFont}px`)
+            .style("font-weight", titleWeight)
+            .style("letter-spacing", "0px")
+            .style("fill", accentBlue)
+            .text(titleParts[1]);
+    }
+
+    drawHeroDivider(svg, width / 2, dividerY);
+
+    const subtitle = svg.append("text")
+        .attr("class", "reference-subtitle")
+        .attr("x", width / 2)
+        .attr("y", subtitleY)
+        .attr("text-anchor", "middle")
+        .style("font-family", labelFamily)
+        .style("font-size", `${Math.max(17, Math.min(23, baseLabelSize * 1.7))}px`)
+        .style("font-weight", 400)
+        .style("font-style", "italic")
+        .style("fill", mutedText);
+    subtitleLines.forEach((lineText, lineIndex) => {
+        subtitle.append("tspan")
+            .attr("x", width / 2)
+            .attr("dy", lineIndex === 0 ? 0 : 28)
+            .text(lineText);
+    });
+
+    groupSeries.forEach((series, index) => {
+        const row = Math.floor(index / cols);
+        const col = index % cols;
+        const panelX = cols === 1
+            ? (width - cardWidth) / 2
+            : sidePad + col * (cardWidth + gapX);
+        const panelY = cardTop + row * (cardHeight + gapY);
+        const seriesColor = colorScale(series.group);
+        const headerFill = headerPalette[index % headerPalette.length];
+        const panel = svg.append("g")
+            .attr("class", "subplot reference-card")
+            .attr("data-group", series.group)
+            .attr("data-row", row)
+            .attr("data-col", col)
+            .attr("transform", `translate(${panelX}, ${panelY})`);
+
+        panel.append("rect")
+            .attr("class", "subplot-background subplot-card reference-card-shell")
+            .attr("width", cardWidth)
+            .attr("height", cardHeight)
+            .attr("rx", 18)
+            .attr("ry", 18)
+            .attr("fill", "url(#small_multiples_line_01_card_soft_gradient)")
+            .attr("stroke", rgba(seriesColor, 0.2))
+            .attr("stroke-width", 1.2)
+            .style("filter", "url(#small_multiples_line_01_card_shadow)");
+
+        panel.append("rect")
+            .attr("class", "reference-card-color-wash")
+            .attr("x", 1)
+            .attr("y", 1)
+            .attr("width", cardWidth - 2)
+            .attr("height", cardHeight - 2)
+            .attr("rx", 17)
+            .attr("ry", 17)
+            .attr("fill", headerFill)
+            .attr("opacity", 0.48);
+
+        drawIconSlot(panel, series.group, seriesColor, 46, 48, 28);
+
+        const titleLines = wrapText(readableName(series.group), Math.max(11, Math.floor((cardWidth - 110) / 8.2)), 2);
+        const title = panel.append("text")
+            .attr("class", "label group-label reference-card-title")
+            .attr("data-group", series.group)
+            .attr("x", 88)
+            .attr("y", 42)
+            .attr("text-anchor", "start")
+            .style("font-family", titleFamily)
+            .style("font-size", `${Math.max(18, Math.min(26, baseLabelSize * 2.0))}px`)
+            .style("font-weight", 800)
+            .style("fill", navy);
+        titleLines.forEach((lineText, lineIndex) => {
+            title.append("tspan")
+                .attr("x", 88)
+                .attr("dy", lineIndex === 0 ? 0 : 25)
+                .text(lineText);
+        });
+
+        panel.append("line")
+            .attr("class", "reference-series-key")
+            .attr("x1", 88)
+            .attr("x2", 122)
+            .attr("y1", 78)
+            .attr("y2", 78)
+            .attr("stroke", seriesColor)
+            .attr("stroke-width", 3)
+            .attr("stroke-linecap", "round");
+        const unitLabel = `${readableName(yField)}${yUnit ? ` (${yUnit})` : ""}`;
+        const unitText = panel.append("text")
+            .attr("class", "reference-unit-label")
+            .attr("x", 132)
+            .attr("y", 82)
+            .style("font-family", labelFamily)
+            .style("font-size", `${Math.max(10, Math.min(13, baseLabelSize * 1.05))}px`)
+            .style("font-weight", 400)
+            .style("fill", mutedText);
+        wrapText(unitLabel, Math.max(20, Math.floor((cardWidth - 142) / 6.1)), 2).forEach((lineText, lineIndex) => {
+            unitText.append("tspan")
+                .attr("x", 132)
+                .attr("dy", lineIndex === 0 ? 0 : 14)
+                .text(lineText);
+        });
+
+        const chart = panel.append("g")
+            .attr("class", "panel-plot reference-card-plot")
+            .attr("transform", `translate(${plot.left}, ${plot.top})`);
+
+        yTicks.forEach(tick => {
+            chart.append("line")
+                .attr("class", "gridline")
+                .attr("x1", 0)
+                .attr("x2", innerWidth)
+                .attr("y1", yScale(tick))
+                .attr("y2", yScale(tick))
+                .attr("stroke", "#d7dde7")
+                .attr("stroke-dasharray", "5 4")
+                .attr("stroke-width", 1);
+            chart.append("text")
+                .attr("class", "axis-tick y-axis-tick")
+                .attr("x", -9)
+                .attr("y", yScale(tick))
+                .attr("text-anchor", "end")
+                .attr("dominant-baseline", "middle")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(10, Math.min(baseLabelSize, 12))}px`)
+                .style("font-weight", labelWeight)
+                .style("fill", axisText)
+                .text(formatNumber(tick));
+        });
+
+        chart.append("line")
+            .attr("class", "axis-line x-axis-line")
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", innerHeight)
+            .attr("y2", innerHeight)
+            .attr("stroke", "#23324c")
+            .attr("stroke-width", 1.2);
+
+        xTicks.forEach(tick => {
+            chart.append("line")
+                .attr("class", "axis-tick-line")
+                .attr("x1", xScale(tick))
+                .attr("x2", xScale(tick))
+                .attr("y1", innerHeight)
+                .attr("y2", innerHeight + 5)
+                .attr("stroke", "#23324c")
+                .attr("stroke-width", 1);
+            chart.append("text")
+                .attr("class", "axis-tick x-axis-tick")
+                .attr("x", xScale(tick))
+                .attr("y", innerHeight + 24)
+                .attr("text-anchor", "middle")
+                .style("font-family", labelFamily)
+                .style("font-size", `${Math.max(10, Math.min(baseLabelSize, 12))}px`)
+                .style("font-weight", labelWeight)
+                .style("fill", axisText)
+                .text(formatXTick(tick));
+        });
+
+        chart.append("path")
+            .datum(series.values)
+            .attr("class", "line mark")
+            .attr("data-group", series.group)
+            .attr("data-count", series.values.length)
+            .attr("data-latest-value", series.values[series.values.length - 1]?.value ?? "")
+            .attr("fill", "none")
+            .attr("stroke", seriesColor)
+            .attr("stroke-width", variables.has_stroke === false ? 3.0 : 3.8)
+            .attr("stroke-linecap", "round")
+            .attr("stroke-linejoin", "round")
+            .attr("d", line);
+
+        chart.selectAll(".point")
+            .data(series.values)
+            .enter()
+            .append("circle")
+            .attr("class", "point mark")
+            .attr("data-group", series.group)
+            .attr("data-time", d => d.time)
+            .attr("data-label", d => d.label)
+            .attr("data-value", d => d.value)
+            .attr("cx", d => xScale(d.date))
+            .attr("cy", d => yScale(d.value))
+            .attr("r", 4.6)
+            .attr("fill", cardFill)
+            .attr("stroke", seriesColor)
+            .attr("stroke-width", 2.4);
+
+        const firstPoint = series.values[0];
+        const lastPoint = series.values[series.values.length - 1];
+        const delta = lastPoint && firstPoint ? lastPoint.value - firstPoint.value : 0;
+        const latestText = lastPoint ? formatWithUnit(lastPoint.value, yUnit) : "";
+        if (lastPoint) {
+            const latestFontSize = Math.max(12, Math.min(baseValueSize * 1.25, 16));
+            const pillWidth = Math.max(54, latestText.length * latestFontSize * 0.62 + 18);
+            const labelX = Math.max(pillWidth / 2, Math.min(innerWidth - pillWidth / 2, xScale(lastPoint.date)));
+            const labelY = Math.max(16, Math.min(innerHeight - 20, yScale(lastPoint.value) - 18));
+            chart.append("rect")
+                .attr("class", "latest-value-pill reference-latest-value-pill")
+                .attr("data-group", series.group)
+                .attr("x", labelX - pillWidth / 2)
+                .attr("y", labelY - latestFontSize)
+                .attr("width", pillWidth)
+                .attr("height", latestFontSize + 10)
+                .attr("rx", 8)
+                .attr("ry", 8)
+                .attr("fill", seriesColor);
+            chart.append("path")
+                .attr("class", "reference-latest-value-pointer")
+                .attr("d", `M ${labelX - 5},${labelY + 9} L ${labelX + 5},${labelY + 9} L ${labelX},${labelY + 17} Z`)
+                .attr("fill", seriesColor);
+            chart.append("text")
+                .attr("class", "value latest-value reference-latest-value")
+                .attr("data-group", series.group)
+                .attr("data-time", lastPoint.time)
+                .attr("data-label", lastPoint.label)
+                .attr("data-value", lastPoint.value)
+                .attr("x", labelX)
+                .attr("y", labelY)
+                .attr("text-anchor", "middle")
+                .style("font-family", valueFamily)
+                .style("font-size", `${latestFontSize}px`)
+                .style("font-weight", 800)
+                .style("fill", "#ffffff")
+                .text(latestText);
+        }
+
+        const percent = firstPoint && lastPoint ? percentChange(firstPoint.value, lastPoint.value) : null;
+        const trendText = percent === null
+            ? `${delta >= 0 ? "+" : "-"}${formatNumber(Math.abs(delta))}`
+            : `${percent >= 0 ? "+" : ""}${d3.format(".0f")(percent)}%`;
+        const trendX = cardWidth - 142;
+        const trendY = cardHeight - 76;
+        panel.append("rect")
+            .attr("class", "reference-trend-badge")
+            .attr("data-group", series.group)
+            .attr("x", trendX)
+            .attr("y", trendY)
+            .attr("width", 118)
+            .attr("height", 52)
+            .attr("rx", 10)
+            .attr("ry", 10)
+            .attr("fill", rgba(seriesColor, 0.12))
+            .attr("stroke", rgba(seriesColor, 0.26))
+            .attr("stroke-width", 1);
+        drawTrendArrow(panel, delta, seriesColor, trendX + 26, trendY + 25, 29);
+        panel.append("text")
+            .attr("class", "reference-trend-percent")
+            .attr("data-group", series.group)
+            .attr("data-first-value", firstPoint?.value ?? "")
+            .attr("data-last-value", lastPoint?.value ?? "")
+            .attr("x", trendX + 49)
+            .attr("y", trendY + 23)
+            .style("font-family", valueFamily)
+            .style("font-size", `${Math.max(17, Math.min(baseValueSize * 1.9, 22))}px`)
+            .style("font-weight", 800)
+            .style("fill", seriesColor)
+            .text(trendText);
+        panel.append("text")
+            .attr("class", "reference-trend-period")
+            .attr("x", trendX + 49)
+            .attr("y", trendY + 42)
+            .style("font-family", labelFamily)
+            .style("font-size", `${Math.max(10, Math.min(baseLabelSize, 12))}px`)
+            .style("font-weight", labelWeight)
+            .style("fill", navy)
+            .text(`${firstPoint?.label || ""}-${lastPoint?.label || ""}`);
+    });
+
+    const footer = svg.append("g")
+        .attr("class", "reference-footer-note")
+        .attr("transform", `translate(${sidePad}, ${footerY})`);
+    footer.append("rect")
+        .attr("class", "reference-footer-box")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", width - sidePad * 2)
+        .attr("height", footerH)
+        .attr("rx", 14)
+        .attr("ry", 14)
+        .attr("fill", "#ffffff")
+        .attr("stroke", rgba(accentBlue, 0.28))
+        .attr("stroke-width", 1.2);
+
+    const footerIcon = footer.append("g")
+        .attr("class", "reference-footer-icon-slot")
+        .attr("data-slot", "takeaway-chart-icon")
+        .attr("transform", `translate(48, ${footerH / 2})`);
+    footerIcon.append("circle").attr("r", 35).attr("fill", accentBlue);
+    [0, 1, 2].forEach(i => {
+        footerIcon.append("rect")
+            .attr("x", -16 + i * 12)
+            .attr("y", 12 - i * 9)
+            .attr("width", 8)
+            .attr("height", 16 + i * 9)
+            .attr("fill", "#ffffff")
+            .attr("opacity", 0.94);
+    });
+    footerIcon.append("path")
+        .attr("d", "M -18 0 L -3 -12 L 7 -4 L 20 -22")
+        .attr("fill", "none")
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+    footerIcon.append("path")
+        .attr("d", "M 20 -22 L 10 -20 L 20 -22 L 19 -12")
+        .attr("fill", "none")
+        .attr("stroke", "#ffffff")
+        .attr("stroke-width", 4)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-linejoin", "round");
+
+    footer.append("text")
+        .attr("class", "reference-footer-title")
+        .attr("x", 98)
+        .attr("y", 36)
+        .style("font-family", titleFamily)
+        .style("font-size", `${Math.max(18, Math.min(24, baseLabelSize * 2))}px`)
+        .style("font-weight", 800)
+        .style("fill", navy)
+        .text("Key Takeaway");
+
+    const footerLines = wrapText(`${takeaway} ${scaleNote}`, Math.max(38, Math.floor((width - 360) / 7.5)), 3);
+    const footerText = footer.append("text")
+        .attr("class", "scale-note reference-scale-note")
+        .attr("x", 98)
+        .attr("y", 62)
+        .style("font-family", labelFamily)
+        .style("font-size", `${Math.max(12, Math.min(baseLabelSize * 1.18, 15))}px`)
+        .style("font-weight", 400)
+        .style("fill", mutedText);
+    footerLines.forEach((lineText, lineIndex) => {
+        footerText.append("tspan")
+            .attr("x", 98)
+            .attr("dy", lineIndex === 0 ? 0 : 19)
+            .text(lineText);
+    });
+
+    drawFooterDecoration(footer, width - sidePad * 2 - 242, 18, 216, 82, accentBlue);
+
+    return svg.node();
+}