25:["$","title",null,{"children":"Tekoälykyselyn vastaukset | HealthDataVisualization | Observable"}] 49:T263b,chart1 = { const BRAND = { accent: "#7549f9", accent2: "#926efb", accent3: "#af94fc", bg: "#f5f5f5", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const w = Math.min(width, 800); const isTiny = w < 420; // Responsive type sizes const titleSize = Math.max(15, Math.min(18, w / 45)); const uiSize = Math.max(11, Math.min(12.5, w / 70)); const sourceSize = Math.max(10, Math.min(11, w / 80)); // Responsive vertical spacing const titleY = isTiny ? 32 : 38; // ✅ Legend is ALWAYS below the pie now const margin = { top: isTiny ? 30 : 70, right: 30, bottom: 30, left: 30 }; const chartLegendGap = isTiny ? 4 : 14; const plotW = w - margin.left - margin.right; // Keep plot height responsive (same rule you used) const plotH = Math.round(Math.min(460, Math.max(300, plotW * 1.10))); const palette = [ BRAND.accent, "#4E79A7", "#59A14F", "#F28E2B", "#E15759", "#76B7B2", "#EDC948", "#B07AA1" ]; const color = d3 .scaleOrdinal() .domain(q1Data.map(d => d.age)) .range(palette); // ---------- Legend layout pre-pass (wrap + center rows ALWAYS) ---------- const legendTitleH = 26; const rowH = 24; const itemGap = 18; const swatch = 12; const swatchTextGap = 8; const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); ctx.font = `${uiSize}px ${fontFamily}`; return (s) => ctx.measureText(String(s)).width; })(); const availableLegendW = w - margin.left - margin.right; let legendPositions = []; let legendHeight = 0; { let x = 0; let y = 0; let rowIndex = 0; const rows = [[]]; const itemWidths = []; legendPositions = q1Data.map((d, i) => { const label = `${d.age}`; const textW = measureText(label); const itemW = swatch + swatchTextGap + textW + itemGap; itemWidths[i] = itemW; if (x > 0 && x + itemW > availableLegendW) { x = 0; y += rowH; rowIndex += 1; rows[rowIndex] = []; } rows[rowIndex].push(i); const pos = { x, y, label, w: itemW }; x += itemW; return pos; }); // Center each row within availableLegendW rows.forEach((idxs) => { if (!idxs || idxs.length === 0) return; let rowW = 0; idxs.forEach((i) => { rowW += itemWidths[i]; }); rowW = Math.max(0, rowW - itemGap); const offset = Math.max(0, (availableLegendW - rowW) / 2); idxs.forEach((i) => { legendPositions[i].x += offset; }); }); const lastY = legendPositions.length ? legendPositions[legendPositions.length - 1].y : 0; legendHeight = legendTitleH + lastY + rowH + 10; } // Overall height: always includes legend below const h = margin.top + plotH + chartLegendGap + legendHeight + margin.bottom; // Pie geometry const radius = Math.min(plotW, plotH) / 2; const pie = d3.pie().sort(null).value(d => d.pct); const arc = d3.arc().innerRadius(0).outerRadius(radius - 2); const arcHover = d3.arc().innerRadius(0).outerRadius(radius + 6); const labelArc = d3.arc().innerRadius(radius * 0.62).outerRadius(radius * 0.62); const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); // Card background svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", 16) .attr("fill", BRAND.surface); // ✅ Title centered across the whole card svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text("Respondents, by age group"); // Chart group const chartG = svg.append("g") .attr("transform", `translate(${margin.left + plotW / 2},${margin.top + plotH / 2})`); // ---------- Tooltip ---------- const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let x = event.clientX + pad; let y = event.clientY + pad; if (x + rect.width + pad > window.innerWidth) x = event.clientX - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = event.clientY - rect.height - pad; tooltip.style("left", `${x}px`).style("top", `${y}px`); }; const showTooltip = (event, d) => { tooltip.html(`

Age group: ${d.data.age}

${d.data.pct}% of respondents

${d.data.occupation}

${d.data.pct}% of respondents

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const moveTooltip = (event) => setTooltipPosition(event); const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const filter = defs.append("filter") .attr("id", "shadow-hover-2") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); filter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.18)"); const slices = chartG .selectAll("g") .data(pie(q2Data)) .join("g"); const paths = slices .append("path") .attr("d", arc) .attr("fill", d => color(d.data.occupation)) .attr("stroke", BRAND.surface) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .style("cursor", "pointer"); slices .filter(d => d.data.pct >= 1) .append("text") .attr("transform", d => `translate(${labelArc.centroid(d)})`) .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-weight", 600) .style("font-size", "12px") .style("fill", "#ffffff") .style("pointer-events", "none") .text(d => `${d.data.pct}%`); // Hover let activeNode = null; const hardResetVisuals = () => { paths.interrupt(); paths .attr("d", arc) .attr("filter", null) .attr("stroke-width", 2) .style("opacity", 1); }; const applyHover = (node, d) => { if (activeNode === node) return false; activeNode = node; hardResetVisuals(); paths .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", p => (p === d ? 1 : 0.65)); d3.select(node.parentNode).raise(); d3.select(node) .transition() .duration(160) .ease(d3.easeCubicOut) .attr("d", arcHover(d)) .attr("filter", "url(#shadow-hover-2)") .attr("stroke-width", 3); return true; }; chartG .on("pointermove", (event) => { const target = event.target; if (!target || target.tagName !== "path") return; const d = d3.select(target).datum(); const changed = applyHover(target, d); if (changed) showTooltip(event, d); moveTooltip(event); }) .on("pointerleave", () => { activeNode = null; hardResetVisuals(); hideTooltip(); }); invalidation.then(() => { chartG.on("pointermove", null).on("pointerleave", null); }); // ---------- Legend (below; packed order for neat wrapping) ---------- const legendX = margin.left; const legendY = margin.top + plotH + chartLegendGap; const legend = svg .append("g") .attr("transform", `translate(${legendX},${legendY})`) .style("font-size", `${uiSize}px`); legend.append("text") .attr("x", availableLegendW / 2) .attr("y", 0) .attr("dy", "0.9em") .attr("text-anchor", "middle") .style("font-weight", 600) .style("fill", BRAND.textHigh) .text("Occupation"); // ✅ draw in packed order (but colors still correct) const legendData = legendItemsPackedOrder.map(it => it.d); const item = legend .selectAll("g") .data(legendData) .join("g") .attr("transform", (d) => { const p = legendPos.get(d.occupation); return `translate(${p.x},${legendTitleH + p.y})`; }); item.append("rect") .attr("x", 0) .attr("y", 2) .attr("width", swatch) .attr("height", swatch) .attr("rx", 3) .attr("fill", d => color(d.occupation)) .attr("stroke", "rgba(18,18,16,0.12)") .attr("stroke-width", 1); const text = item.append("text") .attr("x", swatch + swatchTextGap) .attr("y", 0) .style("fill", BRAND.textBase) .style("font-weight", 300); text.each(function (d) { const p = legendPos.get(d.occupation); const lines = (p && p.lines) ? p.lines : [`${d.occupation}`]; const t = d3.select(this); t.append("tspan") .attr("x", swatch + swatchTextGap) .attr("dy", "0.9em") .text(lines[0]); if (lines.length > 1) { t.append("tspan") .attr("x", swatch + swatchTextGap) .attr("dy", "1.2em") .text(lines[1]); } }); // Source svg.append("text") .attr("x", margin.left) .attr("y", h - 10) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300) .text("Source: SoteDataLab November 2025 Survey"); return svg.node(); } 4b:T4c82,chart3 = { // ------------------------------------------------------------ // Brand + key chart configuration (adjust here) // ------------------------------------------------------------ const BRAND = { accent: "#7549f9", accent2: "#2A9D8F", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const CFG = { maxWidth: 900, title: "AI usage, by age group", source: "Source: SoteDataLab November 2025 Survey", yDomain: [0, 100], barRadius: 4, x0PaddingInner: 0.18, x1Padding: 0.12, // Layout constants (base values; these will be responsively scaled) base: { plotH: 300, marginLeft: 55, marginRight: 30, marginTop: 70, axisBottomPad: 0, // keep 0 unless you want extra inside-plot padding cardRadius: 16 }, // Responsive “shrinks on narrow screens” values responsive: { titleYWide: 38, titleYNarrow: 32, titleSizeWide: 16, titleSizeNarrow: 14, legendSizeWide: 12, legendSizeNarrow: 11, sourceSizeWide: 11, sourceSizeNarrow: 10, gapTitleToPlotWide: 32, gapTitleToPlotNarrow: 18, gapPlotToLegendWide: 52, gapPlotToLegendNarrow: 44, gapLegendToSourceWide: 18, gapLegendToSourceNarrow: 12, bottomPadWide: 12, bottomPadNarrow: 10 } }; // ------------------------------------------------------------ // Helpers // ------------------------------------------------------------ const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); const lerp = (a, b, t) => a + (b - a) * t; const w = Math.min(width, CFG.maxWidth); const isNarrow = w < 720; const isTiny = w < 420; // Smooth “responsiveness factor”: 0 (tiny) -> 1 (wide) const t = clamp((w - 360) / (CFG.maxWidth - 360), 0, 1); const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const titleY = Math.round(lerp(CFG.responsive.titleYNarrow, CFG.responsive.titleYWide, t)); const titleSize = lerp(CFG.responsive.titleSizeNarrow, CFG.responsive.titleSizeWide, t); const legendSize = lerp(CFG.responsive.legendSizeNarrow, CFG.responsive.legendSizeWide, t); const sourceSize = lerp(CFG.responsive.sourceSizeNarrow, CFG.responsive.sourceSizeWide, t); const gapTitleToPlot = Math.round(lerp(CFG.responsive.gapTitleToPlotNarrow, CFG.responsive.gapTitleToPlotWide, t)); const gapPlotToLegend = Math.round(lerp(CFG.responsive.gapPlotToLegendNarrow, CFG.responsive.gapPlotToLegendWide, t)); const gapLegendToSource = Math.round(lerp(CFG.responsive.gapLegendToSourceNarrow, CFG.responsive.gapLegendToSourceWide, t)); const bottomPad = Math.round(lerp(CFG.responsive.bottomPadNarrow, CFG.responsive.bottomPadWide, t)); // Plot sizing (keep stable but allow modest shrink) const plotH = Math.round(clamp(lerp(320, CFG.base.plotH, t), 320, CFG.base.plotH)); const margin = { left: isTiny ? 50 : CFG.base.marginLeft, right: isTiny ? 24 : CFG.base.marginRight, // top is computed from title placement + desired gap top: Math.round(titleY + gapTitleToPlot), bottom: 0 // computed later after legend/source layout }; embedResize = { const send = () => { // documentElement is usually the most reliable for full-page height const h = Math.ceil(document.documentElement.scrollHeight); parent.postMessage({ type: "obs-embed-resize", height: h }, "*"); }; const ro = new ResizeObserver(() => send()); ro.observe(document.documentElement); // send once immediately (prevents initial wrong height) send(); invalidation.then(() => ro.disconnect()); } // Text measurement (reliable pre-mount) const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); return (s, sizePx, weight = 300) => { ctx.font = `${weight} ${sizePx}px ${fontFamily}`; return ctx.measureText(String(s)).width; }; })(); // Prefer splitting long words at vowel boundaries; fall back to any split. const splitLongWordWithHyphen = (word, maxW, sizePx, weight = 300) => { if (measureText(word, sizePx, weight) <= maxW) return [word]; const vowels = new Set(["a","e","i","o","u","y","å","ä","ö","A","E","I","O","U","Y","Å","Ä","Ö"]); const candidateCuts = []; for (let i = 3; i <= word.length - 2; i++) { // Prefer vowel-consonant boundary (…vowel | consonant…) const prev = word[i - 1]; const next = word[i]; const score = (vowels.has(prev) && !vowels.has(next)) ? 2 : 1; candidateCuts.push({ i, score }); } // Try best cuts first (higher score, then later cuts) candidateCuts.sort((a, b) => (b.score - a.score) || (b.i - a.i)); for (const cut of candidateCuts) { const left = word.slice(0, cut.i) + "-"; if (measureText(left, sizePx, weight) <= maxW) { return [left, word.slice(cut.i)]; } } // Fallback: brute-force from end for (let i = word.length - 2; i >= 3; i--) { const left = word.slice(0, i) + "-"; if (measureText(left, sizePx, weight) <= maxW) { return [left, word.slice(i)]; } } // Absolute fallback (shouldn’t happen): hard cut return [word.slice(0, 3) + "-", word.slice(3)]; }; // Wrap into up to maxLines with no ellipsis; hyphenate only when needed. const wrapToLines = (text, maxW, sizePx, maxLines = 2, weight = 300) => { const words = String(text).split(/\s+/).filter(Boolean); if (!words.length) return [""]; const lines = []; let line = ""; const pushLine = (s) => { if (s != null && String(s).length) lines.push(String(s)); }; for (let wi = 0; wi < words.length; wi++) { let word = words[wi]; // If word itself is too wide, split with hyphen if (measureText(word, sizePx, weight) > maxW) { const parts = splitLongWordWithHyphen(word, maxW, sizePx, weight); // Place first part on current line if possible for (let pi = 0; pi < parts.length; pi++) { const part = parts[pi]; const candidate = line ? `${line} ${part}` : part; if (measureText(candidate, sizePx, weight) <= maxW) { line = candidate; } else { pushLine(line); line = part; if (lines.length >= maxLines) { // continue placing remaining parts in the last line if possible (no truncation) // best effort: just append (may overflow only in extreme cases) if (pi + 1 < parts.length) line = `${line}${parts.slice(pi + 1).join("")}`; break; } } } continue; } const candidate = line ? `${line} ${word}` : word; if (measureText(candidate, sizePx, weight) <= maxW || !line) { line = candidate; } else { pushLine(line); line = word; if (lines.length >= maxLines) break; } } if (lines.length < maxLines) pushLine(line); return lines.length ? lines : [String(text)]; }; // ------------------------------------------------------------ // Data + scales // ------------------------------------------------------------ const series = [ { key: "used", label: "Has used", color: BRAND.accent }, { key: "never", label: "Has never used", color: BRAND.accent2 } ]; const innerW = w - margin.left - margin.right; const x0 = d3.scaleBand() .domain(q3Data.map(d => d.age)) .range([0, innerW]) .paddingInner(CFG.x0PaddingInner); const x1 = d3.scaleBand() .domain(series.map(d => d.key)) .range([0, x0.bandwidth()]) .padding(CFG.x1Padding); // We'll finalize height after legend + source are laid out. // For now, plot uses fixed plotH. const y = d3.scaleLinear() .domain(CFG.yDomain) .nice() .range([plotH, 0]); // ------------------------------------------------------------ // Legend layout (wrap rows, keep within container) // ------------------------------------------------------------ const swatch = 12; const swatchGap = 8; const legendItemGap = 18; const legendRowH = Math.round(legendSize * 2.0); // enough for 2-line labels const availableLegendW = innerW; // Pre-wrap legend labels (2 lines on tiny screens, or if needed by width) const legendItems = series.map(s => { const maxLabelW = Math.max(80, Math.floor((availableLegendW - swatch - swatchGap - legendItemGap) / 2)); const lines = isTiny ? wrapToLines(s.label, maxLabelW, legendSize, 2, 300) : [s.label]; // If not tiny but label still too wide, wrap it as well const widest = Math.max(...lines.map(line => measureText(line, legendSize, 300))); const itemW = swatch + swatchGap + widest + legendItemGap; return { ...s, lines, itemW }; }); // If any item still exceeds half width, allow wrapping even on non-tiny if (!isTiny) { const maxLabelW = Math.max(80, Math.floor((availableLegendW - swatch - swatchGap - legendItemGap) / 2)); legendItems.forEach((it, i) => { if (it.itemW > availableLegendW) { const lines = wrapToLines(it.label, maxLabelW, legendSize, 2, 300); const widest = Math.max(...lines.map(line => measureText(line, legendSize, 300))); legendItems[i] = { ...it, lines, itemW: swatch + swatchGap + widest + legendItemGap }; } }); } // Row packing const legendPositions = []; const rows = []; let xCursor = 0; let row = []; let rowW = 0; const commitRow = () => { if (!row.length) return; rows.push({ idxs: row.slice(), rowW: Math.max(0, rowW - legendItemGap) }); row = []; rowW = 0; xCursor = 0; }; legendItems.forEach((it, i) => { const iw = it.itemW; if (xCursor > 0 && xCursor + iw > availableLegendW) commitRow(); legendPositions[i] = { x: xCursor, y: rows.length * legendRowH }; row.push(i); rowW += iw; xCursor += iw; }); commitRow(); // Center each row rows.forEach((r, ri) => { const offset = Math.max(0, (availableLegendW - r.rowW) / 2); r.idxs.forEach(i => { legendPositions[i].x += offset; legendPositions[i].y = ri * legendRowH; }); }); const legendH = rows.length * legendRowH; // ------------------------------------------------------------ // Source layout (wrap into up to 2 lines to prevent overflow) // ------------------------------------------------------------ const sourceMaxW = innerW; const sourceLines = wrapToLines(CFG.source, sourceMaxW, sourceSize, 2, 300); const sourceLineH = Math.round(sourceSize * 1.35); const sourceH = sourceLines.length * sourceLineH; // ------------------------------------------------------------ // Final height (guaranteed no overlaps) // ------------------------------------------------------------ const legendTop = margin.top + plotH + gapPlotToLegend; const sourceTop = legendTop + legendH + gapLegendToSource; margin.bottom = (h) => h - sourceTop - sourceH - bottomPad; // helper (not used directly) const h = sourceTop + sourceH + bottomPad; // ------------------------------------------------------------ // SVG + card container // ------------------------------------------------------------ const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", CFG.base.cardRadius) .attr("fill", BRAND.surface); // Title (always centered across the whole card) svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text(CFG.title); // Plot group const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Gridlines g.append("g") .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat("")) .call(s => s.selectAll(".tick line").attr("stroke", "rgba(0,0,0,0.08)")) .call(s => s.select(".domain").remove()); // Tooltip (info box) const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let x = event.clientX + pad; let y = event.clientY + pad; if (x + rect.width + pad > window.innerWidth) x = event.clientX - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = event.clientY - rect.height - pad; tooltip.style("left", `${x}px`).style("top", `${y}px`); }; const showTooltip = (event, d) => { const seriesName = series.find(s => s.key === d.key)?.label ?? d.key; tooltip.html(`

Age group: ${d.age}

${seriesName}: ${d.value}%

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const hoverFilter = defs.append("filter") .attr("id", "shadow-hover-3") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); hoverFilter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.16)"); // Bars (grouped) const ageG = g.selectAll("g.age") .data(q3Data) .join("g") .attr("class", "age") .attr("transform", d => `translate(${x0(d.age)},0)`); const bars = ageG.selectAll("rect") .data(d => series.map(s => ({ key: s.key, age: d.age, value: d[s.key] }))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => plotH - y(d.value)) .attr("rx", CFG.barRadius) .attr("fill", d => (d.key === "used" ? BRAND.accent : BRAND.accent2)) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("cursor", "pointer"); const labels = ageG.selectAll("text.val") .data(d => series.map(s => ({ key: s.key, age: d.age, value: d[s.key] }))) .join("text") .attr("class", "val") .attr("x", d => x1(d.key) + x1.bandwidth() / 2) .attr("y", d => y(d.value) - 6) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", 600) .style("fill", BRAND.textMed) .style("opacity", 0) .style("pointer-events", "none") .text(d => `${d.value}%`); // Hover interaction (same behavior as before) let activeKey = null; const resetBars = () => { bars.interrupt(); labels.interrupt(); bars .attr("filter", null) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("opacity", 1); labels.style("opacity", 0); activeKey = null; }; const applyHover = (d) => { const key = `${d.age}__${d.key}`; if (activeKey === key) return false; activeKey = key; bars.interrupt(); labels.interrupt(); bars .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", b => (b.age === d.age && b.key === d.key ? 1 : 0.65)); bars .filter(b => b.age === d.age && b.key === d.key) .raise() .transition() .duration(160) .ease(d3.easeCubicOut) .attr("filter", "url(#shadow-hover-3)") .attr("stroke", "rgba(18,18,16,0.18)") .attr("stroke-width", 1.5); labels.style("opacity", 0); labels .filter(b => b.age === d.age && b.key === d.key) .raise() .transition() .duration(140) .ease(d3.easeCubicOut) .style("opacity", 1); return true; }; g.on("pointermove", (event) => { const t = event.target; if (!t || t.tagName !== "rect") return; const d = d3.select(t).datum(); const changed = applyHover(d); if (changed) showTooltip(event, d); setTooltipPosition(event); }).on("pointerleave", () => { resetBars(); hideTooltip(); }); invalidation.then(() => { g.on("pointermove", null).on("pointerleave", null); }); // Axes const xAxis = g.append("g") .attr("transform", `translate(0,${plotH + CFG.base.axisBottomPad})`) .call(d3.axisBottom(x0)); xAxis.selectAll(".tick text") .style("fill", BRAND.textBase) .style("font-weight", 300) .style("font-size", isTiny ? "11px" : "12px") .attr("y", 10) .attr("dy", 0) .attr("dominant-baseline", "hanging"); xAxis.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)"); g.append("g") .call(d3.axisLeft(y).ticks(5).tickFormat(d => `${d}%`)) .call(s => s.selectAll("text").style("fill", BRAND.textBase)) .call(s => s.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)")); // ------------------------------------------------------------ // Legend (below plot, wraps into rows, stays inside card) // ------------------------------------------------------------ const legend = svg.append("g") .attr("transform", `translate(${margin.left},${legendTop})`) .style("font-size", `${legendSize}px`); const lg = legend.selectAll("g") .data(legendItems) .join("g") .attr("transform", (d, i) => `translate(${legendPositions[i].x},${legendPositions[i].y})`); lg.append("rect") .attr("width", swatch) .attr("height", swatch) .attr("rx", 3) .attr("y", -swatch) .attr("fill", d => d.color) .attr("stroke", "rgba(18,18,16,0.12)"); const lt = lg.append("text") .attr("x", swatch + swatchGap) .attr("y", -2) .style("fill", BRAND.textBase) .style("font-weight", 300); lt.each(function (d) { const t = d3.select(this); t.text(null); d.lines.forEach((line, idx) => { t.append("tspan") .attr("x", swatch + swatchGap) .attr("dy", idx === 0 ? "0em" : "1.15em") .text(line); }); }); // ------------------------------------------------------------ // Source (wrapped, guaranteed to stay inside card) // ------------------------------------------------------------ const sourceText = svg.append("text") .attr("x", margin.left) .attr("y", sourceTop) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300); // Keep last line aligned visually near the bottom; place from top with tspans sourceText.text(null); sourceLines.forEach((line, i) => { sourceText.append("tspan") .attr("x", margin.left) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); return svg.node(); }; 4c:T4abd,chart4 = { // ------------------------------------------------------------ // Brand + key chart configuration (adjust here) // ------------------------------------------------------------ const BRAND = { accent: "#7549f9", accent2: "#2A9D8F", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const CFG = { maxWidth: 900, title: "Reasons for using AI, by gender", source: "Source: SoteDataLab November 2025 Survey", yDomain: [0, 100], // Data keys + labels (match q4Data columns) reasons: [ { key: "ease", label: "Ease / convenience" }, { key: "quick", label: "Quick access to information" }, { key: "stigma", label: "My issue was personal / involved stigma" } ], // Layout constants (base values; these will be responsively scaled) base: { plotH: 300, marginLeft: 55, marginRight: 30, cardRadius: 16, x0PaddingInner: 0.22, x1Padding: 0.12, barRadius: 4 }, // Responsive “shrinks on narrow screens” values responsive: { titleYWide: 38, titleYNarrow: 32, titleSizeWide: 16, titleSizeNarrow: 14, tickSizeWide: 12, tickSizeNarrow: 11, legendSizeWide: 12, legendSizeNarrow: 11, sourceSizeWide: 11, sourceSizeNarrow: 10, gapTitleToPlotWide: 32, gapTitleToPlotNarrow: 18, gapPlotToLegendWide: 18, gapPlotToLegendNarrow: 12, gapLegendToSourceWide: 18, gapLegendToSourceNarrow: 12, bottomPadWide: 12, bottomPadNarrow: 10, xTickTextYWide: 14, xTickTextYNarrow: 12 } }; // ------------------------------------------------------------ // Helpers // ------------------------------------------------------------ const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); const lerp = (a, b, t) => a + (b - a) * t; const w = Math.min(width, CFG.maxWidth); const isNarrow = w < 720; const isTiny = w < 420; // Smooth “responsiveness factor”: 0 (tiny) -> 1 (wide) const t = clamp((w - 360) / (CFG.maxWidth - 360), 0, 1); const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const titleY = Math.round(lerp(CFG.responsive.titleYNarrow, CFG.responsive.titleYWide, t)); const titleSize = lerp(CFG.responsive.titleSizeNarrow, CFG.responsive.titleSizeWide, t); const tickSize = lerp(CFG.responsive.tickSizeNarrow, CFG.responsive.tickSizeWide, t); const legendSize = lerp(CFG.responsive.legendSizeNarrow, CFG.responsive.legendSizeWide, t); const sourceSize = lerp(CFG.responsive.sourceSizeNarrow, CFG.responsive.sourceSizeWide, t); const gapTitleToPlot = Math.round(lerp(CFG.responsive.gapTitleToPlotNarrow, CFG.responsive.gapTitleToPlotWide, t)); const gapPlotToLegend = Math.round(lerp(CFG.responsive.gapPlotToLegendNarrow, CFG.responsive.gapPlotToLegendWide, t)); const gapLegendToSource = Math.round(lerp(CFG.responsive.gapLegendToSourceNarrow, CFG.responsive.gapLegendToSourceWide, t)); const bottomPad = Math.round(lerp(CFG.responsive.bottomPadNarrow, CFG.responsive.bottomPadWide, t)); const xTickTextY = Math.round(lerp(CFG.responsive.xTickTextYNarrow, CFG.responsive.xTickTextYWide, t)); // Plot sizing (keep stable but allow modest shrink) const plotH = Math.round(clamp(lerp(320, CFG.base.plotH, t), 320, CFG.base.plotH)); const margin = { left: isTiny ? 50 : CFG.base.marginLeft, right: isTiny ? 24 : CFG.base.marginRight, top: Math.round(titleY + gapTitleToPlot) }; // Text measurement (reliable pre-mount) const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); return (s, sizePx, weight = 300) => { ctx.font = `${weight} ${sizePx}px ${fontFamily}`; return ctx.measureText(String(s)).width; }; })(); // Prefer splitting long words at vowel boundaries; fall back to any split. const splitLongWordWithHyphen = (word, maxW, sizePx, weight = 300) => { if (measureText(word, sizePx, weight) <= maxW) return [word]; const vowels = new Set(["a","e","i","o","u","y","å","ä","ö","A","E","I","O","U","Y","Å","Ä","Ö"]); const candidateCuts = []; for (let i = 3; i <= word.length - 2; i++) { const prev = word[i - 1]; const next = word[i]; const score = (vowels.has(prev) && !vowels.has(next)) ? 2 : 1; candidateCuts.push({ i, score }); } candidateCuts.sort((a, b) => (b.score - a.score) || (b.i - a.i)); for (const cut of candidateCuts) { const left = word.slice(0, cut.i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(cut.i)]; } for (let i = word.length - 2; i >= 3; i--) { const left = word.slice(0, i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(i)]; } return [word.slice(0, 3) + "-", word.slice(3)]; }; // Wrap into up to maxLines with no ellipsis; hyphenate only when needed. const wrapToLines = (text, maxW, sizePx, maxLines = 3, weight = 300) => { const words = String(text).split(/\s+/).filter(Boolean); if (!words.length) return [""]; const lines = []; let line = ""; const pushLine = (s) => { if (s != null && String(s).length) lines.push(String(s)); }; for (let wi = 0; wi < words.length; wi++) { let word = words[wi]; if (measureText(word, sizePx, weight) > maxW) { const parts = splitLongWordWithHyphen(word, maxW, sizePx, weight); for (let pi = 0; pi < parts.length; pi++) { const part = parts[pi]; const candidate = line ? `${line} ${part}` : part; if (measureText(candidate, sizePx, weight) <= maxW) { line = candidate; } else { pushLine(line); line = part; if (lines.length >= maxLines) { if (pi + 1 < parts.length) line = `${line}${parts.slice(pi + 1).join("")}`; break; } } } continue; } const candidate = line ? `${line} ${word}` : word; if (measureText(candidate, sizePx, weight) <= maxW || !line) { line = candidate; } else { pushLine(line); line = word; if (lines.length >= maxLines) break; } } if (lines.length < maxLines) pushLine(line); return lines.length ? lines : [String(text)]; }; // ------------------------------------------------------------ // Data + scales // ------------------------------------------------------------ const reasons = CFG.reasons; const genders = Array.from(new Set(q4Data.map(d => d.gender))); const color = d3.scaleOrdinal() .domain(genders) .range([BRAND.accent, BRAND.accent2]); const innerW = w - margin.left - margin.right; const x0 = d3.scaleBand() .domain(reasons.map(d => d.key)) .range([0, innerW]) .paddingInner(CFG.base.x0PaddingInner); const x1 = d3.scaleBand() .domain(genders) .range([0, x0.bandwidth()]) .padding(CFG.base.x1Padding); const y = d3.scaleLinear() .domain(CFG.yDomain) .nice() .range([plotH, 0]); // ------------------------------------------------------------ // X-axis label block sizing (to prevent overlap with legend) // ------------------------------------------------------------ const maxTickW = Math.max( 60, x0.bandwidth() * (isTiny ? 0.62 : isNarrow ? 0.75 : 0.90) ); const tickLinesByKey = new Map( trustLevels.map(k => [k, wrapToLines(String(k), maxTickW, tickSize, 4, 300)]) ); // Space needed below the x-axis baseline for multi-line tick labels const xAxisLabelBlockH = xTickTextY + (maxTickLines * tickLineHpx) + 8; // breathing room // ------------------------------------------------------------ // Legend layout (below axis labels, wraps rows, stays inside card) // ------------------------------------------------------------ const swatch = 12; const swatchGap = 8; const legendItemGap = 18; const legendRowH = Math.round(legendSize * 2.0); // enough for 2-line labels const availableLegendW = innerW; const legendItems = genders.map(g => { // Wrap gender labels on tiny screens if needed (rare, but safe) const maxLabelW = Math.max(80, Math.floor((availableLegendW - swatch - swatchGap - legendItemGap) / 2)); const lines = isTiny ? wrapToLines(g, maxLabelW, legendSize, 2, 300) : [g]; const widest = Math.max(...lines.map(line => measureText(line, legendSize, 300))); return { key: g, label: g, lines, itemW: swatch + swatchGap + widest + legendItemGap }; }); const legendPositions = []; const rows = []; let xCursor = 0; let row = []; let rowW = 0; const commitRow = () => { if (!row.length) return; rows.push({ idxs: row.slice(), rowW: Math.max(0, rowW - legendItemGap) }); row = []; rowW = 0; xCursor = 0; }; legendItems.forEach((it, i) => { const iw = it.itemW; if (xCursor > 0 && xCursor + iw > availableLegendW) commitRow(); legendPositions[i] = { x: xCursor, y: rows.length * legendRowH }; row.push(i); rowW += iw; xCursor += iw; }); commitRow(); rows.forEach((r, ri) => { const offset = Math.max(0, (availableLegendW - r.rowW) / 2); r.idxs.forEach(i => { legendPositions[i].x += offset; legendPositions[i].y = ri * legendRowH; }); }); const legendH = rows.length * legendRowH; // ------------------------------------------------------------ // Source layout (wrap to prevent overflow) // ------------------------------------------------------------ const sourceMaxW = innerW; const sourceLines = wrapToLines(CFG.source, sourceMaxW, sourceSize, 2, 300); const sourceLineH = Math.round(sourceSize * 1.35); const sourceH = sourceLines.length * sourceLineH; // ------------------------------------------------------------ // Final height (guaranteed no overlaps) // ------------------------------------------------------------ const legendTop = margin.top + plotH + xAxisLabelBlockH + gapPlotToLegend; const sourceTop = legendTop + legendH + gapLegendToSource; const h = sourceTop + sourceH + bottomPad; // ------------------------------------------------------------ // SVG + card container // ------------------------------------------------------------ const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", CFG.base.cardRadius) .attr("fill", BRAND.surface); // Title (centered across the whole card) svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text(CFG.title); // Plot group const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Gridlines g.append("g") .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat("")) .call(s => s.selectAll(".tick line").attr("stroke", "rgba(0,0,0,0.08)")) .call(s => s.select(".domain").remove()); // Tooltip const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let x = event.clientX + pad; let y = event.clientY + pad; if (x + rect.width + pad > window.innerWidth) x = event.clientX - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = event.clientY - rect.height - pad; tooltip.style("left", `${x}px`).style("top", `${y}px`); }; const showTooltip = (event, d) => { tooltip.html(`

${d.gender}

${d.reasonLabel}: ${d.value}%

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const filter = defs.append("filter") .attr("id", "shadow-hover-4") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); filter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.16)"); // Bars (grouped by reason, split by gender) const reasonGroups = g.selectAll("g.reason") .data(reasons) .join("g") .attr("class", "reason") .attr("transform", d => `translate(${x0(d.key)},0)`); const bars = reasonGroups.selectAll("rect") .data(r => q4Data.map(row => ({ reasonKey: r.key, reasonLabel: r.label, gender: row.gender, value: row[r.key] }))) .join("rect") .attr("x", d => x1(d.gender)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => plotH - y(d.value)) .attr("rx", CFG.base.barRadius) .attr("fill", d => color(d.gender)) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("cursor", "pointer"); const labels = reasonGroups.selectAll("text.val") .data(r => q4Data.map(row => ({ reasonKey: r.key, reasonLabel: r.label, gender: row.gender, value: row[r.key] }))) .join("text") .attr("class", "val") .attr("x", d => x1(d.gender) + x1.bandwidth() / 2) .attr("y", d => y(d.value) - 6) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", 600) .style("fill", BRAND.textMed) .style("opacity", 0) .style("pointer-events", "none") .text(d => `${d.value}%`); // Hover behavior let activeKey = null; const resetBars = () => { bars.interrupt(); labels.interrupt(); bars .attr("filter", null) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("opacity", 1); labels.style("opacity", 0); activeKey = null; }; const applyHover = (d) => { const key = `${d.reasonKey}__${d.gender}`; if (activeKey === key) return false; activeKey = key; bars.interrupt(); labels.interrupt(); bars .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", b => (b.reasonKey === d.reasonKey && b.gender === d.gender ? 1 : 0.65)); bars .filter(b => b.reasonKey === d.reasonKey && b.gender === d.gender) .raise() .transition() .duration(160) .ease(d3.easeCubicOut) .attr("filter", "url(#shadow-hover-4)") .attr("stroke", "rgba(18,18,16,0.18)") .attr("stroke-width", 1.5); labels.style("opacity", 0); labels .filter(b => b.reasonKey === d.reasonKey && b.gender === d.gender) .raise() .transition() .duration(140) .ease(d3.easeCubicOut) .style("opacity", 1); return true; }; // Drive hover from plotting area g.on("pointermove", (event) => { const t = event.target; if (!t || t.tagName !== "rect") return; const d = d3.select(t).datum(); const changed = applyHover(d); if (changed) showTooltip(event, d); setTooltipPosition(event); }).on("pointerleave", () => { resetBars(); hideTooltip(); }); invalidation.then(() => { g.on("pointermove", null).on("pointerleave", null); }); // X-axis (wrapped labels, no ellipsis) const xAxis = g.append("g") .attr("transform", `translate(0,${plotH})`) .call(d3.axisBottom(x0)); xAxis.selectAll(".tick text") .style("fill", BRAND.textBase) .style("font-weight", 300) .style("font-size", `${tickSize}px`) .attr("y", xTickTextY) .attr("dy", 0) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .each(function (k) { const text = d3.select(this); const lines = tickLinesByKey.get(k) || [String(k)]; text.text(null); lines.forEach((ln, i) => { text.append("tspan") .attr("x", 0) .attr("dy", i === 0 ? "0em" : "1.15em") .text(ln); }); }); xAxis.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)"); // Y-axis g.append("g") .call(d3.axisLeft(y).ticks(5).tickFormat(d => `${d}%`)) .call(s => s.selectAll("text").style("fill", BRAND.textBase)) .call(s => s.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)")); // ------------------------------------------------------------ // Legend (below axis labels; wraps into rows; stays inside card) // ------------------------------------------------------------ const legend = svg.append("g") .attr("transform", `translate(${margin.left},${legendTop})`) .style("font-size", `${legendSize}px`); const lg = legend.selectAll("g") .data(legendItems) .join("g") .attr("transform", (d, i) => `translate(${legendPositions[i].x},${legendPositions[i].y})`); lg.append("rect") .attr("width", swatch) .attr("height", swatch) .attr("rx", 3) .attr("y", -swatch) .attr("fill", d => color(d.key)) .attr("stroke", "rgba(18,18,16,0.12)"); const lt = lg.append("text") .attr("x", swatch + swatchGap) .attr("y", -2) .style("fill", BRAND.textBase) .style("font-weight", 300); lt.each(function (d) { const tSel = d3.select(this); tSel.text(null); d.lines.forEach((line, idx) => { tSel.append("tspan") .attr("x", swatch + swatchGap) .attr("dy", idx === 0 ? "0em" : "1.15em") .text(line); }); }); // ------------------------------------------------------------ // Source (wrapped, guaranteed to stay inside card) // ------------------------------------------------------------ const sourceText = svg.append("text") .attr("x", margin.left) .attr("y", sourceTop) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300); sourceText.text(null); sourceLines.forEach((line, i) => { sourceText.append("tspan") .attr("x", margin.left) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); return svg.node(); }; 4d:T4dde,chart5 = { // ------------------------------------------------------------ // Brand + key chart configuration (adjust here) // ------------------------------------------------------------ const BRAND = { accent: "#7549f9", accent2: "#2A9D8F", accent3: "#E69F00", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const CFG = { maxWidth: 900, title: "Reasons for using AI, by age group", source: "Source: SoteDataLab November 2025 Survey", yDomain: [0, 100], // Data keys + labels (match q5Data columns) reasons: [ { key: "ease", label: "Ease / convenience" }, { key: "quick", label: "Quick access to information" }, { key: "stigma", label: "Issue was personal / involved stigma" } ], // Layout constants (base values; these will be responsively scaled) base: { plotH: 300, marginLeft: 55, marginRight: 30, cardRadius: 16, x0PaddingInner: 0.16, x0PaddingOuter: 0.08, x1Padding: 0.10, barRadius: 4 }, // Responsive “shrinks on narrow screens” values responsive: { titleYWide: 38, titleYNarrow: 32, titleSizeWide: 16, titleSizeNarrow: 14, tickSizeWide: 12, tickSizeNarrow: 11, legendSizeWide: 12, legendSizeNarrow: 11, sourceSizeWide: 11, sourceSizeNarrow: 10, gapTitleToPlotWide: 32, gapTitleToPlotNarrow: 18, gapPlotToLegendWide: 18, gapPlotToLegendNarrow: 12, gapLegendToSourceWide: 18, gapLegendToSourceNarrow: 12, bottomPadWide: 12, bottomPadNarrow: 10, xTickTextYWide: 14, xTickTextYNarrow: 16 } }; // ------------------------------------------------------------ // Helpers // ------------------------------------------------------------ const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); const lerp = (a, b, t) => a + (b - a) * t; const w = Math.min(width, CFG.maxWidth); const isNarrow = w < 720; const isTiny = w < 420; // Smooth “responsiveness factor”: 0 (tiny) -> 1 (wide) const t = clamp((w - 360) / (CFG.maxWidth - 360), 0, 1); const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const titleY = Math.round(lerp(CFG.responsive.titleYNarrow, CFG.responsive.titleYWide, t)); const titleSize = lerp(CFG.responsive.titleSizeNarrow, CFG.responsive.titleSizeWide, t); const tickSize = lerp(CFG.responsive.tickSizeNarrow, CFG.responsive.tickSizeWide, t); const legendSize = lerp(CFG.responsive.legendSizeNarrow, CFG.responsive.legendSizeWide, t); const sourceSize = lerp(CFG.responsive.sourceSizeNarrow, CFG.responsive.sourceSizeWide, t); const gapTitleToPlot = Math.round(lerp(CFG.responsive.gapTitleToPlotNarrow, CFG.responsive.gapTitleToPlotWide, t)); const gapPlotToLegend = Math.round(lerp(CFG.responsive.gapPlotToLegendNarrow, CFG.responsive.gapPlotToLegendWide, t)); const gapLegendToSource = Math.round(lerp(CFG.responsive.gapLegendToSourceNarrow, CFG.responsive.gapLegendToSourceWide, t)); const bottomPad = Math.round(lerp(CFG.responsive.bottomPadNarrow, CFG.responsive.bottomPadWide, t)); const xTickTextY = Math.round(lerp(CFG.responsive.xTickTextYNarrow, CFG.responsive.xTickTextYWide, t)); // Plot sizing (keep stable but allow modest shrink) const plotH = Math.round(clamp(lerp(320, CFG.base.plotH, t), 320, CFG.base.plotH)); const margin = { left: isTiny ? 50 : CFG.base.marginLeft, right: isTiny ? 24 : CFG.base.marginRight, top: Math.round(titleY + gapTitleToPlot) }; // Text measurement (reliable pre-mount) const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); return (s, sizePx, weight = 300) => { ctx.font = `${weight} ${sizePx}px ${fontFamily}`; return ctx.measureText(String(s)).width; }; })(); // Prefer splitting long words at vowel boundaries; fall back to any split. const splitLongWordWithHyphen = (word, maxW, sizePx, weight = 300) => { if (measureText(word, sizePx, weight) <= maxW) return [word]; const vowels = new Set(["a","e","i","o","u","y","å","ä","ö","A","E","I","O","U","Y","Å","Ä","Ö"]); const candidateCuts = []; for (let i = 3; i <= word.length - 2; i++) { const prev = word[i - 1]; const next = word[i]; const score = (vowels.has(prev) && !vowels.has(next)) ? 2 : 1; candidateCuts.push({ i, score }); } candidateCuts.sort((a, b) => (b.score - a.score) || (b.i - a.i)); for (const cut of candidateCuts) { const left = word.slice(0, cut.i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(cut.i)]; } for (let i = word.length - 2; i >= 3; i--) { const left = word.slice(0, i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(i)]; } return [word.slice(0, 3) + "-", word.slice(3)]; }; // Wrap into up to maxLines with no ellipsis; hyphenate only when needed. const wrapToLines = (text, maxW, sizePx, maxLines = 3, weight = 300) => { const words = String(text).split(/\s+/).filter(Boolean); if (!words.length) return [""]; const lines = []; let line = ""; const pushLine = (s) => { if (s != null && String(s).length) lines.push(String(s)); }; for (let wi = 0; wi < words.length; wi++) { let word = words[wi]; if (measureText(word, sizePx, weight) > maxW) { const parts = splitLongWordWithHyphen(word, maxW, sizePx, weight); for (let pi = 0; pi < parts.length; pi++) { const part = parts[pi]; const candidate = line ? `${line} ${part}` : part; if (measureText(candidate, sizePx, weight) <= maxW) { line = candidate; } else { pushLine(line); line = part; if (lines.length >= maxLines) { if (pi + 1 < parts.length) line = `${line}${parts.slice(pi + 1).join("")}`; break; } } } continue; } const candidate = line ? `${line} ${word}` : word; if (measureText(candidate, sizePx, weight) <= maxW || !line) { line = candidate; } else { pushLine(line); line = word; if (lines.length >= maxLines) break; } } if (lines.length < maxLines) pushLine(line); return lines.length ? lines : [String(text)]; }; // ------------------------------------------------------------ // Data + scales // ------------------------------------------------------------ const reasons = CFG.reasons; const ageGroups = Array.from(new Set(q5Data.map(d => d.age))); const color = d3.scaleOrdinal() .domain(reasons.map(d => d.key)) .range([BRAND.accent, BRAND.accent2, BRAND.accent3]); const innerW = w - margin.left - margin.right; const x0 = d3.scaleBand() .domain(ageGroups) .range([0, innerW]) .paddingInner(CFG.base.x0PaddingInner) .paddingOuter(CFG.base.x0PaddingOuter); const x1 = d3.scaleBand() .domain(reasons.map(d => d.key)) .range([0, x0.bandwidth()]) .padding(CFG.base.x1Padding); const y = d3.scaleLinear() .domain(CFG.yDomain) .nice() .range([plotH, 0]); // ------------------------------------------------------------ // X-axis label block sizing (to prevent overlap with legend) // ------------------------------------------------------------ const maxTickW = Math.max( 60, x0.bandwidth() * (isTiny ? 0.62 : isNarrow ? 0.75 : 0.90) ); const tickLinesByKey = new Map( trustLevels.map(k => [k, wrapToLines(String(k), maxTickW, tickSize, 4, 300)]) ); const maxTickLines = d3.max(ageGroups, a => (tickLinesByKey.get(a) || [String(a)]).length) || 1; const tickLineHpx = Math.round(tickSize * 1.15); const xAxisLabelBlockH = xTickTextY + (maxTickLines * tickLineHpx) + 8; // ------------------------------------------------------------ // Legend layout (below axis labels, wraps rows, stays inside card) // ------------------------------------------------------------ const swatch = 12; const swatchGap = 8; const legendItemGap = 18; const availableLegendW = innerW; const legendItems = reasons.map(r => { // On small screens, allow 2-line legend labels so they don't become too wide. const maxLabelW = Math.max( 120, Math.floor((availableLegendW - swatch - swatchGap - legendItemGap) / (isTiny ? 1.15 : 1.6)) ); const lines = (isNarrow || isTiny) ? wrapToLines(r.label, maxLabelW, legendSize, 2, 300) : [r.label]; const widest = Math.max(...lines.map(line => measureText(line, legendSize, 300))); const itemW = swatch + swatchGap + widest + legendItemGap; return { key: r.key, label: r.label, lines, itemW }; }); // Build rows first (indices), then size each row by its tallest item (line count) const rows = []; let row = []; let rowW = 0; const commitRow = () => { if (!row.length) return; const rowWNoGap = Math.max(0, rowW - legendItemGap); const maxLines = Math.max(...row.map(i => legendItems[i].lines.length)); rows.push({ idxs: row.slice(), rowW: rowWNoGap, maxLines }); row = []; rowW = 0; }; legendItems.forEach((it, i) => { if (row.length && rowW + it.itemW > availableLegendW) commitRow(); row.push(i); rowW += it.itemW; }); commitRow(); // Now compute positions with variable row heights const lineH = 1.15; // em, matches tspans const rowPadPx = Math.round(legendSize * 0.55); // consistent breathing room between rows const legendPositions = new Array(legendItems.length); let yCursor = 0; rows.forEach((r) => { const offset = Math.max(0, (availableLegendW - r.rowW) / 2); let xCursor = offset; r.idxs.forEach((i) => { legendPositions[i] = { x: xCursor, y: yCursor }; xCursor += legendItems[i].itemW; }); // Height of this row = swatch + text block height + padding // (text block height depends on maxLines in the row) const rowTextPx = Math.round(legendSize * lineH * r.maxLines); const rowH = Math.max(swatch, rowTextPx) + rowPadPx; yCursor += rowH; }); const legendH = yCursor; // total legend height // ------------------------------------------------------------ // Source layout (wrap to prevent overflow) // ------------------------------------------------------------ const sourceMaxW = innerW; const sourceLines = wrapToLines(CFG.source, sourceMaxW, sourceSize, 2, 300); const sourceLineH = Math.round(sourceSize * 1.35); const sourceH = sourceLines.length * sourceLineH; // ------------------------------------------------------------ // Final height (guaranteed no overlaps) // ------------------------------------------------------------ const legendTop = margin.top + plotH + xAxisLabelBlockH + gapPlotToLegend; const sourceTop = legendTop + legendH + gapLegendToSource; const h = sourceTop + sourceH + bottomPad; // ------------------------------------------------------------ // SVG + card container // ------------------------------------------------------------ const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", CFG.base.cardRadius) .attr("fill", BRAND.surface); // Title (centered across the whole card) svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text(CFG.title); // Plot group const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Gridlines g.append("g") .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat("")) .call(s => s.selectAll(".tick line").attr("stroke", "rgba(0,0,0,0.08)")) .call(s => s.select(".domain").remove()); // Tooltip const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let x = event.clientX + pad; let y = event.clientY + pad; if (x + rect.width + pad > window.innerWidth) x = event.clientX - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = event.clientY - rect.height - pad; tooltip.style("left", `${x}px`).style("top", `${y}px`); }; const showTooltip = (event, d) => { tooltip.html(`

${d.age}

${d.reasonLabel}: ${d.value}%

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const filter = defs.append("filter") .attr("id", "shadow-hover-5") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); filter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.16)"); // Bars (grouped by age group, split by reason) const ageGroupsG = g.selectAll("g.age") .data(q5Data) .join("g") .attr("class", "age") .attr("transform", d => `translate(${x0(d.age)},0)`); const bars = ageGroupsG.selectAll("rect") .data(d => reasons.map(r => ({ age: d.age, reasonKey: r.key, reasonLabel: r.label, value: d[r.key] }))) .join("rect") .attr("x", d => x1(d.reasonKey)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => plotH - y(d.value)) .attr("rx", CFG.base.barRadius) .attr("fill", d => color(d.reasonKey)) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("cursor", "pointer"); const labels = ageGroupsG.selectAll("text.val") .data(d => reasons.map(r => ({ age: d.age, reasonKey: r.key, reasonLabel: r.label, value: d[r.key] }))) .join("text") .attr("class", "val") .attr("x", d => x1(d.reasonKey) + x1.bandwidth() / 2) .attr("y", d => y(d.value) - 6) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", 600) .style("fill", BRAND.textMed) .style("opacity", 0) .style("pointer-events", "none") .text(d => `${d.value}%`); // Hover behavior let activeKey = null; const resetBars = () => { bars.interrupt(); labels.interrupt(); bars .attr("filter", null) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("opacity", 1); labels.style("opacity", 0); activeKey = null; }; const applyHover = (d) => { const key = `${d.age}__${d.reasonKey}`; if (activeKey === key) return false; activeKey = key; bars.interrupt(); labels.interrupt(); bars .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", b => (b.age === d.age && b.reasonKey === d.reasonKey ? 1 : 0.65)); bars .filter(b => b.age === d.age && b.reasonKey === d.reasonKey) .raise() .transition() .duration(160) .ease(d3.easeCubicOut) .attr("filter", "url(#shadow-hover-5)") .attr("stroke", "rgba(18,18,16,0.18)") .attr("stroke-width", 1.5); labels.style("opacity", 0); labels .filter(b => b.age === d.age && b.reasonKey === d.reasonKey) .raise() .transition() .duration(140) .ease(d3.easeCubicOut) .style("opacity", 1); return true; }; // Drive hover from plotting area g.on("pointermove", (event) => { const t = event.target; if (!t || t.tagName !== "rect") return; const d = d3.select(t).datum(); const changed = applyHover(d); if (changed) showTooltip(event, d); setTooltipPosition(event); }).on("pointerleave", () => { resetBars(); hideTooltip(); }); invalidation.then(() => { g.on("pointermove", null).on("pointerleave", null); }); // X-axis (wrapped labels, no ellipsis) const xAxis = g.append("g") .attr("transform", `translate(0,${plotH})`) .call(d3.axisBottom(x0)); xAxis.selectAll(".tick text") .style("fill", BRAND.textBase) .style("font-weight", 300) .style("font-size", `${tickSize}px`) .attr("y", xTickTextY) .attr("dy", 0) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .each(function (k) { const text = d3.select(this); const lines = tickLinesByKey.get(k) || [String(k)]; text.text(null); lines.forEach((ln, i) => { text.append("tspan") .attr("x", 0) .attr("dy", i === 0 ? "0em" : "1.15em") .text(ln); }); }); xAxis.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)"); // Y-axis g.append("g") .call(d3.axisLeft(y).ticks(5).tickFormat(d => `${d}%`)) .call(s => s.selectAll("text").style("fill", BRAND.textBase)) .call(s => s.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)")); // ------------------------------------------------------------ // Legend (below axis labels; wraps into rows; stays inside card) // ------------------------------------------------------------ const legend = svg.append("g") .attr("transform", `translate(${margin.left},${legendTop})`) .style("font-size", `${legendSize}px`); const lg = legend.selectAll("g") .data(legendItems) .join("g") .attr("transform", (d, i) => `translate(${legendPositions[i].x},${legendPositions[i].y})`); lg.append("rect") .attr("width", swatch) .attr("height", swatch) .attr("rx", 3) .attr("y", -swatch) .attr("fill", d => color(d.key)) .attr("stroke", "rgba(18,18,16,0.12)"); const lt = lg.append("text") .attr("x", swatch + swatchGap) .attr("y", -2) .style("fill", BRAND.textBase) .style("font-weight", 300); lt.each(function (d) { const tSel = d3.select(this); tSel.text(null); d.lines.forEach((line, idx) => { tSel.append("tspan") .attr("x", swatch + swatchGap) .attr("dy", idx === 0 ? "0em" : "1.15em") .text(line); }); }); // ------------------------------------------------------------ // Source (wrapped, guaranteed to stay inside card) // ------------------------------------------------------------ const sourceText = svg.append("text") .attr("x", margin.left) .attr("y", sourceTop) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300); sourceText.text(null); sourceLines.forEach((line, i) => { sourceText.append("tspan") .attr("x", margin.left) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); return svg.node(); }; 4e:T4af6,chart6 = { // ------------------------------------------------------------ // Brand + key chart configuration (adjust here) // ------------------------------------------------------------ const BRAND = { accent: "#7549f9", accent2: "#2A9D8F", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const CFG = { maxWidth: 900, title: "Trust in AI, by age group", source: "Source: SoteDataLab November 2025 Survey", yDomain: [0, 40], // Data keys + labels (match q6Data columns) series: [ { key: "trust", label: "Trusts fairly or very much" }, { key: "notTrust", label: "Does not trust" } ], // Layout constants (base values; these will be responsively scaled) base: { plotH: 300, marginLeft: 55, marginRight: 30, cardRadius: 16, x0PaddingInner: 0.18, x1Padding: 0.12, barRadius: 4 }, // Responsive “shrinks on narrow screens” values responsive: { titleYWide: 38, titleYNarrow: 32, titleSizeWide: 16, titleSizeNarrow: 14, tickSizeWide: 12, tickSizeNarrow: 11, legendSizeWide: 12, legendSizeNarrow: 11, sourceSizeWide: 11, sourceSizeNarrow: 10, gapTitleToPlotWide: 32, gapTitleToPlotNarrow: 18, gapPlotToLegendWide: 18, gapPlotToLegendNarrow: 12, gapLegendToSourceWide: 18, gapLegendToSourceNarrow: 12, bottomPadWide: 12, bottomPadNarrow: 10, xTickTextYWide: 14, xTickTextYNarrow: 12 } }; // ------------------------------------------------------------ // Helpers // ------------------------------------------------------------ const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); const lerp = (a, b, t) => a + (b - a) * t; const w = Math.min(width, CFG.maxWidth); const isNarrow = w < 720; const isTiny = w < 420; // Smooth “responsiveness factor”: 0 (tiny) -> 1 (wide) const t = clamp((w - 360) / (CFG.maxWidth - 360), 0, 1); const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const titleY = Math.round(lerp(CFG.responsive.titleYNarrow, CFG.responsive.titleYWide, t)); const titleSize = lerp(CFG.responsive.titleSizeNarrow, CFG.responsive.titleSizeWide, t); const tickSize = lerp(CFG.responsive.tickSizeNarrow, CFG.responsive.tickSizeWide, t); const legendSize = lerp(CFG.responsive.legendSizeNarrow, CFG.responsive.legendSizeWide, t); const sourceSize = lerp(CFG.responsive.sourceSizeNarrow, CFG.responsive.sourceSizeWide, t); const gapTitleToPlot = Math.round(lerp(CFG.responsive.gapTitleToPlotNarrow, CFG.responsive.gapTitleToPlotWide, t)); const gapPlotToLegend = Math.round(lerp(CFG.responsive.gapPlotToLegendNarrow, CFG.responsive.gapPlotToLegendWide, t)); const gapLegendToSource = Math.round(lerp(CFG.responsive.gapLegendToSourceNarrow, CFG.responsive.gapLegendToSourceWide, t)); const bottomPad = Math.round(lerp(CFG.responsive.bottomPadNarrow, CFG.responsive.bottomPadWide, t)); const xTickTextY = Math.round(lerp(CFG.responsive.xTickTextYNarrow, CFG.responsive.xTickTextYWide, t)); // Plot sizing (keep stable but allow modest shrink) const plotH = Math.round(clamp(lerp(320, CFG.base.plotH, t), 320, CFG.base.plotH)); const margin = { left: isTiny ? 50 : CFG.base.marginLeft, right: isTiny ? 24 : CFG.base.marginRight, top: Math.round(titleY + gapTitleToPlot) }; // Text measurement (reliable pre-mount) const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); return (s, sizePx, weight = 300) => { ctx.font = `${weight} ${sizePx}px ${fontFamily}`; return ctx.measureText(String(s)).width; }; })(); // Prefer splitting long words at vowel boundaries; fall back to any split. const splitLongWordWithHyphen = (word, maxW, sizePx, weight = 300) => { if (measureText(word, sizePx, weight) <= maxW) return [word]; const vowels = new Set(["a","e","i","o","u","y","å","ä","ö","A","E","I","O","U","Y","Å","Ä","Ö"]); const candidateCuts = []; for (let i = 3; i <= word.length - 2; i++) { const prev = word[i - 1]; const next = word[i]; const score = (vowels.has(prev) && !vowels.has(next)) ? 2 : 1; candidateCuts.push({ i, score }); } candidateCuts.sort((a, b) => (b.score - a.score) || (b.i - a.i)); for (const cut of candidateCuts) { const left = word.slice(0, cut.i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(cut.i)]; } for (let i = word.length - 2; i >= 3; i--) { const left = word.slice(0, i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(i)]; } return [word.slice(0, 3) + "-", word.slice(3)]; }; // Wrap into up to maxLines with no ellipsis; hyphenate only when needed. const wrapToLines = (text, maxW, sizePx, maxLines = 3, weight = 300) => { const words = String(text).split(/\s+/).filter(Boolean); if (!words.length) return [""]; const lines = []; let line = ""; const pushLine = (s) => { if (s != null && String(s).length) lines.push(String(s)); }; for (let wi = 0; wi < words.length; wi++) { let word = words[wi]; if (measureText(word, sizePx, weight) > maxW) { const parts = splitLongWordWithHyphen(word, maxW, sizePx, weight); for (let pi = 0; pi < parts.length; pi++) { const part = parts[pi]; const candidate = line ? `${line} ${part}` : part; if (measureText(candidate, sizePx, weight) <= maxW) { line = candidate; } else { pushLine(line); line = part; if (lines.length >= maxLines) { if (pi + 1 < parts.length) line = `${line}${parts.slice(pi + 1).join("")}`; break; } } } continue; } const candidate = line ? `${line} ${word}` : word; if (measureText(candidate, sizePx, weight) <= maxW || !line) { line = candidate; } else { pushLine(line); line = word; if (lines.length >= maxLines) break; } } if (lines.length < maxLines) pushLine(line); return lines.length ? lines : [String(text)]; }; // ------------------------------------------------------------ // Data + scales // ------------------------------------------------------------ const series = CFG.series; const ages = Array.from(new Set(q6Data.map(d => d.age))); const color = d3.scaleOrdinal() .domain(series.map(d => d.key)) .range([BRAND.accent, BRAND.accent2]); const innerW = w - margin.left - margin.right; const x0 = d3.scaleBand() .domain(ages) .range([0, innerW]) .paddingInner(CFG.base.x0PaddingInner); const x1 = d3.scaleBand() .domain(series.map(d => d.key)) .range([0, x0.bandwidth()]) .padding(CFG.base.x1Padding); const y = d3.scaleLinear() .domain(CFG.yDomain) .nice() .range([plotH, 0]); // ------------------------------------------------------------ // X-axis label block sizing (to prevent overlap with legend) // ------------------------------------------------------------ const maxTickW = Math.max(70, x0.bandwidth() * 0.90); const tickLinesByKey = new Map( ages.map(a => [a, wrapToLines(String(a), maxTickW, tickSize, 3, 300)]) ); const maxTickLines = d3.max(ages, a => (tickLinesByKey.get(a) || [String(a)]).length) || 1; const tickLineHpx = Math.round(tickSize * 1.15); const xAxisLabelBlockH = xTickTextY + (maxTickLines * tickLineHpx) + 8; // breathing room // ------------------------------------------------------------ // Legend layout (below axis labels, wraps rows, stays inside card) // Uses per-row height so 2-line items don't reduce row spacing. // ------------------------------------------------------------ const swatch = 12; const swatchGap = 8; const legendItemGap = 18; const availableLegendW = innerW; const legendItems = series.map(s => { const maxLabelW = Math.max( 140, Math.floor((availableLegendW - swatch - swatchGap - legendItemGap) / (isTiny ? 1.15 : 1.6)) ); const lines = (isNarrow || isTiny) ? wrapToLines(s.label, maxLabelW, legendSize, 2, 300) : [s.label]; const widest = Math.max(...lines.map(line => measureText(line, legendSize, 300))); const itemW = swatch + swatchGap + widest + legendItemGap; return { key: s.key, label: s.label, lines, itemW }; }); const rows = []; let row = []; let rowW = 0; const commitRow = () => { if (!row.length) return; const rowWNoGap = Math.max(0, rowW - legendItemGap); const maxLines = Math.max(...row.map(i => legendItems[i].lines.length)); rows.push({ idxs: row.slice(), rowW: rowWNoGap, maxLines }); row = []; rowW = 0; }; legendItems.forEach((it, i) => { if (row.length && rowW + it.itemW > availableLegendW) commitRow(); row.push(i); rowW += it.itemW; }); commitRow(); const lineH = 1.15; // em const rowPadPx = Math.round(legendSize * 0.55); const legendPositions = new Array(legendItems.length); let yCursor = 0; rows.forEach((r) => { const offset = Math.max(0, (availableLegendW - r.rowW) / 2); let xCursor = offset; r.idxs.forEach((i) => { legendPositions[i] = { x: xCursor, y: yCursor }; xCursor += legendItems[i].itemW; }); const rowTextPx = Math.round(legendSize * lineH * r.maxLines); const rowH = Math.max(swatch, rowTextPx) + rowPadPx; yCursor += rowH; }); const legendH = yCursor; // ------------------------------------------------------------ // Source layout (wrap to prevent overflow) // ------------------------------------------------------------ const sourceMaxW = innerW; const sourceLines = wrapToLines(CFG.source, sourceMaxW, sourceSize, 2, 300); const sourceLineH = Math.round(sourceSize * 1.35); const sourceH = sourceLines.length * sourceLineH; // ------------------------------------------------------------ // Final height (guaranteed no overlaps) // ------------------------------------------------------------ const legendTop = margin.top + plotH + xAxisLabelBlockH + gapPlotToLegend; const sourceTop = legendTop + legendH + gapLegendToSource; const h = sourceTop + sourceH + bottomPad; // ------------------------------------------------------------ // SVG + card container // ------------------------------------------------------------ const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", CFG.base.cardRadius) .attr("fill", BRAND.surface); // Title svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text(CFG.title); // Plot group const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Gridlines g.append("g") .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat("")) .call(s => s.selectAll(".tick line").attr("stroke", "rgba(0,0,0,0.08)")) .call(s => s.select(".domain").remove()); // Tooltip const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let x = event.clientX + pad; let y = event.clientY + pad; if (x + rect.width + pad > window.innerWidth) x = event.clientX - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = event.clientY - rect.height - pad; tooltip.style("left", `${x}px`).style("top", `${y}px`); }; const showTooltip = (event, d) => { const label = series.find(s => s.key === d.key)?.label || d.key; tooltip.html(`

${d.age}

${label}: ${d.value}%

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const filter = defs.append("filter") .attr("id", "shadow-hover-6") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); filter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.16)"); // Bars (grouped by age, split by series) const ageGroups = g.selectAll("g.age") .data(q6Data) .join("g") .attr("class", "age") .attr("transform", d => `translate(${x0(d.age)},0)`); const bars = ageGroups.selectAll("rect") .data(d => series.map(s => ({ age: d.age, key: s.key, value: d[s.key] }))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => plotH - y(d.value)) .attr("rx", CFG.base.barRadius) .attr("fill", d => color(d.key)) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("cursor", "pointer"); const labels = ageGroups.selectAll("text.val") .data(d => series.map(s => ({ age: d.age, key: s.key, value: d[s.key] }))) .join("text") .attr("class", "val") .attr("x", d => x1(d.key) + x1.bandwidth() / 2) .attr("y", d => y(d.value) - 6) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", 600) .style("fill", BRAND.textMed) .style("opacity", 0) .style("pointer-events", "none") .text(d => `${d.value}%`); // Hover behavior let activeKey = null; const resetBars = () => { bars.interrupt(); labels.interrupt(); bars .attr("filter", null) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("opacity", 1); labels.style("opacity", 0); activeKey = null; }; const applyHover = (d) => { const key = `${d.age}__${d.key}`; if (activeKey === key) return false; activeKey = key; bars.interrupt(); labels.interrupt(); bars .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", b => (b.age === d.age && b.key === d.key ? 1 : 0.65)); bars .filter(b => b.age === d.age && b.key === d.key) .raise() .transition() .duration(160) .ease(d3.easeCubicOut) .attr("filter", "url(#shadow-hover-6)") .attr("stroke", "rgba(18,18,16,0.18)") .attr("stroke-width", 1.5); labels.style("opacity", 0); labels .filter(b => b.age === d.age && b.key === d.key) .raise() .transition() .duration(140) .ease(d3.easeCubicOut) .style("opacity", 1); return true; }; g.on("pointermove", (event) => { const tEl = event.target; if (!tEl || tEl.tagName !== "rect") return; const d = d3.select(tEl).datum(); const changed = applyHover(d); if (changed) showTooltip(event, d); setTooltipPosition(event); }).on("pointerleave", () => { resetBars(); hideTooltip(); }); invalidation.then(() => { g.on("pointermove", null).on("pointerleave", null); }); // X-axis (wrapped labels, no ellipsis) const xAxis = g.append("g") .attr("transform", `translate(0,${plotH})`) .call(d3.axisBottom(x0)); xAxis.selectAll(".tick text") .style("fill", BRAND.textBase) .style("font-weight", 300) .style("font-size", `${tickSize}px`) .attr("y", xTickTextY) .attr("dy", 0) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .each(function (k) { const text = d3.select(this); const lines = tickLinesByKey.get(k) || [String(k)]; text.text(null); lines.forEach((ln, i) => { text.append("tspan") .attr("x", 0) .attr("dy", i === 0 ? "0em" : "1.15em") .text(ln); }); }); xAxis.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)"); // Y-axis g.append("g") .call(d3.axisLeft(y).ticks(5).tickFormat(d => `${d}%`)) .call(s => s.selectAll("text").style("fill", BRAND.textBase)) .call(s => s.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)")); // ------------------------------------------------------------ // Legend (below axis labels; wraps into rows; stays inside card) // ------------------------------------------------------------ const legend = svg.append("g") .attr("transform", `translate(${margin.left},${legendTop})`) .style("font-size", `${legendSize}px`); const lg = legend.selectAll("g") .data(legendItems) .join("g") .attr("transform", (d, i) => `translate(${legendPositions[i].x},${legendPositions[i].y})`); lg.append("rect") .attr("width", swatch) .attr("height", swatch) .attr("rx", 3) .attr("y", -swatch) .attr("fill", d => color(d.key)) .attr("stroke", "rgba(18,18,16,0.12)"); const lt = lg.append("text") .attr("x", swatch + swatchGap) .attr("y", -2) .style("fill", BRAND.textBase) .style("font-weight", 300); lt.each(function (d) { const tSel = d3.select(this); tSel.text(null); d.lines.forEach((line, idx) => { tSel.append("tspan") .attr("x", swatch + swatchGap) .attr("dy", idx === 0 ? "0em" : "1.15em") .text(line); }); }); // ------------------------------------------------------------ // Source (wrapped, guaranteed to stay inside card) // ------------------------------------------------------------ const sourceText = svg.append("text") .attr("x", margin.left) .attr("y", sourceTop) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300); sourceText.text(null); sourceLines.forEach((line, i) => { sourceText.append("tspan") .attr("x", margin.left) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); return svg.node(); }; 4f:T4b57,chart7 = { // ------------------------------------------------------------ // Brand + key chart configuration (adjust here) // ------------------------------------------------------------ const BRAND = { accent: "#7549f9", accent2: "#2A9D8F", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const CFG = { maxWidth: 900, title: "Trust in AI, by gender", source: "Source: SoteDataLab November 2025 Survey", yDomain: [0, 60], // Data keys + labels (match q7Data columns) series: [ { key: "female", label: "Female" }, { key: "male", label: "Male" } ], // Layout constants (base values; these will be responsively scaled) base: { plotH: 300, marginLeft: 55, marginRight: 30, cardRadius: 16, x0PaddingInner: 0.18, x1Padding: 0.12, barRadius: 4 }, // Responsive “shrinks on narrow screens” values responsive: { titleYWide: 38, titleYNarrow: 32, titleSizeWide: 16, titleSizeNarrow: 14, tickSizeWide: 12, tickSizeNarrow: 11, legendSizeWide: 12, legendSizeNarrow: 11, sourceSizeWide: 11, sourceSizeNarrow: 10, gapTitleToPlotWide: 32, gapTitleToPlotNarrow: 18, gapPlotToLegendWide: 18, gapPlotToLegendNarrow: 12, gapLegendToSourceWide: 18, gapLegendToSourceNarrow: 12, bottomPadWide: 12, bottomPadNarrow: 10, xTickTextYWide: 14, xTickTextYNarrow: 12 } }; // ------------------------------------------------------------ // Helpers // ------------------------------------------------------------ const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); const lerp = (a, b, t) => a + (b - a) * t; const w = Math.min(width, CFG.maxWidth); const isNarrow = w < 720; const isTiny = w < 420; // Smooth “responsiveness factor”: 0 (tiny) -> 1 (wide) const t = clamp((w - 360) / (CFG.maxWidth - 360), 0, 1); const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const titleY = Math.round(lerp(CFG.responsive.titleYNarrow, CFG.responsive.titleYWide, t)); const titleSize = lerp(CFG.responsive.titleSizeNarrow, CFG.responsive.titleSizeWide, t); const tickSize = lerp(CFG.responsive.tickSizeNarrow, CFG.responsive.tickSizeWide, t); const legendSize = lerp(CFG.responsive.legendSizeNarrow, CFG.responsive.legendSizeWide, t); const sourceSize = lerp(CFG.responsive.sourceSizeNarrow, CFG.responsive.sourceSizeWide, t); const gapTitleToPlot = Math.round(lerp(CFG.responsive.gapTitleToPlotNarrow, CFG.responsive.gapTitleToPlotWide, t)); const gapPlotToLegend = Math.round(lerp(CFG.responsive.gapPlotToLegendNarrow, CFG.responsive.gapPlotToLegendWide, t)); const gapLegendToSource = Math.round(lerp(CFG.responsive.gapLegendToSourceNarrow, CFG.responsive.gapLegendToSourceWide, t)); const bottomPad = Math.round(lerp(CFG.responsive.bottomPadNarrow, CFG.responsive.bottomPadWide, t)); const xTickTextY = Math.round(lerp(CFG.responsive.xTickTextYNarrow, CFG.responsive.xTickTextYWide, t)); // Plot sizing (keep stable but allow modest shrink) const plotH = Math.round(clamp(lerp(320, CFG.base.plotH, t), 320, CFG.base.plotH)); const margin = { left: isTiny ? 50 : CFG.base.marginLeft, right: isTiny ? 24 : CFG.base.marginRight, top: Math.round(titleY + gapTitleToPlot) }; // Text measurement (reliable pre-mount) const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); return (s, sizePx, weight = 300) => { ctx.font = `${weight} ${sizePx}px ${fontFamily}`; return ctx.measureText(String(s)).width; }; })(); // Prefer splitting long words at vowel boundaries; fall back to any split. const splitLongWordWithHyphen = (word, maxW, sizePx, weight = 300) => { if (measureText(word, sizePx, weight) <= maxW) return [word]; const vowels = new Set(["a","e","i","o","u","y","å","ä","ö","A","E","I","O","U","Y","Å","Ä","Ö"]); const candidateCuts = []; for (let i = 3; i <= word.length - 2; i++) { const prev = word[i - 1]; const next = word[i]; const score = (vowels.has(prev) && !vowels.has(next)) ? 2 : 1; candidateCuts.push({ i, score }); } candidateCuts.sort((a, b) => (b.score - a.score) || (b.i - a.i)); for (const cut of candidateCuts) { const left = word.slice(0, cut.i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(cut.i)]; } for (let i = word.length - 2; i >= 3; i--) { const left = word.slice(0, i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(i)]; } return [word.slice(0, 3) + "-", word.slice(3)]; }; // Wrap into up to maxLines with no ellipsis; hyphenate only when needed. const wrapToLines = (text, maxW, sizePx, maxLines = 3, weight = 300) => { const words = String(text).split(/\s+/).filter(Boolean); if (!words.length) return [""]; const lines = []; let line = ""; const pushLine = (s) => { if (s != null && String(s).length) lines.push(String(s)); }; for (let wi = 0; wi < words.length; wi++) { let word = words[wi]; if (measureText(word, sizePx, weight) > maxW) { const parts = splitLongWordWithHyphen(word, maxW, sizePx, weight); for (let pi = 0; pi < parts.length; pi++) { const part = parts[pi]; const candidate = line ? `${line} ${part}` : part; if (measureText(candidate, sizePx, weight) <= maxW) { line = candidate; } else { pushLine(line); line = part; if (lines.length >= maxLines) { if (pi + 1 < parts.length) line = `${line}${parts.slice(pi + 1).join("")}`; break; } } } continue; } const candidate = line ? `${line} ${word}` : word; if (measureText(candidate, sizePx, weight) <= maxW || !line) { line = candidate; } else { pushLine(line); line = word; if (lines.length >= maxLines) break; } } if (lines.length < maxLines) pushLine(line); return lines.length ? lines : [String(text)]; }; // ------------------------------------------------------------ // Data + scales // ------------------------------------------------------------ const series = CFG.series; const trustLevels = Array.from(new Set(q7Data.map(d => d.trustLevel))); const color = d3.scaleOrdinal() .domain(series.map(d => d.key)) .range([BRAND.accent, BRAND.accent2]); const innerW = w - margin.left - margin.right; const x0 = d3.scaleBand() .domain(trustLevels) .range([0, innerW]) .paddingInner(CFG.base.x0PaddingInner); const x1 = d3.scaleBand() .domain(series.map(d => d.key)) .range([0, x0.bandwidth()]) .padding(CFG.base.x1Padding); const y = d3.scaleLinear() .domain(CFG.yDomain) .nice() .range([plotH, 0]); // ------------------------------------------------------------ // X-axis label block sizing (to prevent overlap with legend) // ------------------------------------------------------------ const maxTickW = Math.max(50, x0.bandwidth() * 0.90); const tickLinesByKey = new Map( trustLevels.map(k => [k, wrapToLines(String(k), maxTickW, tickSize, 4, 300)]) ); const maxTickLines = d3.max(trustLevels, k => (tickLinesByKey.get(k) || [String(k)]).length) || 1; const tickLineHpx = Math.round(tickSize * 1.15); const xAxisLabelBlockH = xTickTextY + (maxTickLines * tickLineHpx) + 8; // breathing room // ------------------------------------------------------------ // Legend layout (below axis labels, wraps rows, stays inside card) // Uses per-row height so multi-line items don't reduce row spacing. // ------------------------------------------------------------ const swatch = 12; const swatchGap = 8; const legendItemGap = 18; const availableLegendW = innerW; const legendItems = series.map(s => { const maxLabelW = Math.max( 140, Math.floor((availableLegendW - swatch - swatchGap - legendItemGap) / (isTiny ? 1.1 : 1.7)) ); const lines = (isNarrow || isTiny) ? wrapToLines(s.label, maxLabelW, legendSize, 2, 300) : [s.label]; const widest = Math.max(...lines.map(line => measureText(line, legendSize, 300))); const itemW = swatch + swatchGap + widest + legendItemGap; return { key: s.key, label: s.label, lines, itemW }; }); const rows = []; let row = []; let rowW = 0; const commitRow = () => { if (!row.length) return; const rowWNoGap = Math.max(0, rowW - legendItemGap); const maxLines = Math.max(...row.map(i => legendItems[i].lines.length)); rows.push({ idxs: row.slice(), rowW: rowWNoGap, maxLines }); row = []; rowW = 0; }; legendItems.forEach((it, i) => { if (row.length && rowW + it.itemW > availableLegendW) commitRow(); row.push(i); rowW += it.itemW; }); commitRow(); const lineH = 1.15; // em const rowPadPx = Math.round(legendSize * 0.55); const legendPositions = new Array(legendItems.length); let yCursor = 0; rows.forEach((r) => { const offset = Math.max(0, (availableLegendW - r.rowW) / 2); let xCursor = offset; r.idxs.forEach((i) => { legendPositions[i] = { x: xCursor, y: yCursor }; xCursor += legendItems[i].itemW; }); const rowTextPx = Math.round(legendSize * lineH * r.maxLines); const rowH = Math.max(swatch, rowTextPx) + rowPadPx; yCursor += rowH; }); const legendH = yCursor; // ------------------------------------------------------------ // Source layout (wrap to prevent overflow) // ------------------------------------------------------------ const sourceMaxW = innerW; const sourceLines = wrapToLines(CFG.source, sourceMaxW, sourceSize, 2, 300); const sourceLineH = Math.round(sourceSize * 1.35); const sourceH = sourceLines.length * sourceLineH; // ------------------------------------------------------------ // Final height (guaranteed no overlaps) // ------------------------------------------------------------ const legendTop = margin.top + plotH + xAxisLabelBlockH + gapPlotToLegend; const sourceTop = legendTop + legendH + gapLegendToSource; const h = sourceTop + sourceH + bottomPad; // ------------------------------------------------------------ // SVG + card container // ------------------------------------------------------------ const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", CFG.base.cardRadius) .attr("fill", BRAND.surface); // Title svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text(CFG.title); // Plot group const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Gridlines g.append("g") .call(d3.axisLeft(y).ticks(4).tickSize(-innerW).tickFormat("")) .call(s => s.selectAll(".tick line").attr("stroke", "rgba(0,0,0,0.08)")) .call(s => s.select(".domain").remove()); // Tooltip const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let x = event.clientX + pad; let y = event.clientY + pad; if (x + rect.width + pad > window.innerWidth) x = event.clientX - rect.width - pad; if (y + rect.height + pad > window.innerHeight) y = event.clientY - rect.height - pad; tooltip.style("left", `${x}px`).style("top", `${y}px`); }; const showTooltip = (event, d) => { const sLabel = series.find(s => s.key === d.key)?.label || d.key; tooltip.html(`

${d.trustLevel}

${sLabel}: ${d.value}%

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const filter = defs.append("filter") .attr("id", "shadow-hover-7") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); filter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.16)"); // Bars (grouped by trustLevel, split by gender) const levelG = g.selectAll("g.level") .data(q7Data) .join("g") .attr("class", "level") .attr("transform", d => `translate(${x0(d.trustLevel)},0)`); const bars = levelG.selectAll("rect") .data(d => series.map(s => ({ trustLevel: d.trustLevel, key: s.key, value: d[s.key] }))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => plotH - y(d.value)) .attr("rx", CFG.base.barRadius) .attr("fill", d => color(d.key)) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("cursor", "pointer"); const labels = levelG.selectAll("text.val") .data(d => series.map(s => ({ trustLevel: d.trustLevel, key: s.key, value: d[s.key] }))) .join("text") .attr("class", "val") .attr("x", d => x1(d.key) + x1.bandwidth() / 2) .attr("y", d => y(d.value) - 6) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", 600) .style("fill", BRAND.textMed) .style("opacity", 0) .style("pointer-events", "none") .text(d => `${d.value}%`); // Hover behavior let activeKey = null; const resetBars = () => { bars.interrupt(); labels.interrupt(); bars .attr("filter", null) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("opacity", 1); labels.style("opacity", 0); activeKey = null; }; const applyHover = (d) => { const key = `${d.trustLevel}__${d.key}`; if (activeKey === key) return false; activeKey = key; bars.interrupt(); labels.interrupt(); bars .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", b => (b.trustLevel === d.trustLevel && b.key === d.key ? 1 : 0.65)); bars .filter(b => b.trustLevel === d.trustLevel && b.key === d.key) .raise() .transition() .duration(160) .ease(d3.easeCubicOut) .attr("filter", "url(#shadow-hover-7)") .attr("stroke", "rgba(18,18,16,0.18)") .attr("stroke-width", 1.5); labels.style("opacity", 0); labels .filter(b => b.trustLevel === d.trustLevel && b.key === d.key) .raise() .transition() .duration(140) .ease(d3.easeCubicOut) .style("opacity", 1); return true; }; g.on("pointermove", (event) => { const tEl = event.target; if (!tEl || tEl.tagName !== "rect") return; const d = d3.select(tEl).datum(); const changed = applyHover(d); if (changed) showTooltip(event, d); setTooltipPosition(event); }).on("pointerleave", () => { resetBars(); hideTooltip(); }); invalidation.then(() => { g.on("pointermove", null).on("pointerleave", null); }); // X-axis (wrapped labels, no ellipsis) const xAxis = g.append("g") .attr("transform", `translate(0,${plotH})`) .call(d3.axisBottom(x0)); xAxis.selectAll(".tick text") .style("fill", BRAND.textBase) .style("font-weight", 300) .style("font-size", `${tickSize}px`) .attr("y", xTickTextY) .attr("dy", 0) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .each(function (k) { const text = d3.select(this); const lines = tickLinesByKey.get(k) || [String(k)]; text.text(null); lines.forEach((ln, i) => { text.append("tspan") .attr("x", 0) .attr("dy", i === 0 ? "0em" : "1.15em") .text(ln); }); }); xAxis.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)"); // Y-axis g.append("g") .call(d3.axisLeft(y).ticks(4).tickFormat(d => `${d}%`)) .call(s => s.selectAll("text").style("fill", BRAND.textBase)) .call(s => s.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)")); // ------------------------------------------------------------ // Legend (below axis labels; wraps into rows; stays inside card) // ------------------------------------------------------------ const legend = svg.append("g") .attr("transform", `translate(${margin.left},${legendTop})`) .style("font-size", `${legendSize}px`); const lg = legend.selectAll("g") .data(legendItems) .join("g") .attr("transform", (d, i) => `translate(${legendPositions[i].x},${legendPositions[i].y})`); lg.append("rect") .attr("width", swatch) .attr("height", swatch) .attr("rx", 3) .attr("y", -swatch) .attr("fill", d => color(d.key)) .attr("stroke", "rgba(18,18,16,0.12)"); const lt = lg.append("text") .attr("x", swatch + swatchGap) .attr("y", -2) .style("fill", BRAND.textBase) .style("font-weight", 300); lt.each(function (d) { const tSel = d3.select(this); tSel.text(null); d.lines.forEach((line, idx) => { tSel.append("tspan") .attr("x", swatch + swatchGap) .attr("dy", idx === 0 ? "0em" : "1.15em") .text(line); }); }); // ------------------------------------------------------------ // Source (wrapped, guaranteed to stay inside card) // ------------------------------------------------------------ const sourceText = svg.append("text") .attr("x", margin.left) .attr("y", sourceTop) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300); sourceText.text(null); sourceLines.forEach((line, i) => { sourceText.append("tspan") .attr("x", margin.left) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); return svg.node(); }; 50:T3cc9,chart8 = { // ------------------------------------------------------------ // Brand + key chart configuration (adjust here) // ------------------------------------------------------------ const BRAND = { accent: "#7549f9", accent2: "#2A9D8F", surface: "#fcfcfc", textHigh: "#121210", textBase: "#3a3a37", textMed: "#666968", textLow: "#989d9e" }; const CFG = { maxWidth: 940, title: "AI usage, by municipality type", source: "Source: SoteDataLab November 2025 Survey", yDomain: [0, 50], // Data keys (match q8Data columns) xKey: "municipalityType", yKey: "hasUsed", yLabel: "Has used", // Layout constants (base values; these will be responsively scaled) base: { plotH: 300, marginLeft: 55, marginRight: 30, cardRadius: 16, xPadding: 0.28, barRadius: 4 }, // Responsive “shrinks on narrow screens” values responsive: { titleYWide: 38, titleYNarrow: 32, titleSizeWide: 16, titleSizeNarrow: 14, tickSizeWide: 12, tickSizeNarrow: 11, sourceSizeWide: 11, sourceSizeNarrow: 10, gapTitleToPlotWide: 32, gapTitleToPlotNarrow: 18, // (Chart8 has no legend; we keep the same structure and treat this as plot->source spacing) gapPlotToLegendWide: 18, gapPlotToLegendNarrow: 12, // (No legend block; keep small but non-zero breathing room) gapLegendToSourceWide: 12, gapLegendToSourceNarrow: 10, bottomPadWide: 12, bottomPadNarrow: 10, xTickTextYWide: 14, xTickTextYNarrow: 12 } }; // ------------------------------------------------------------ // Helpers // ------------------------------------------------------------ const clamp = (x, a, b) => Math.max(a, Math.min(b, x)); const lerp = (a, b, t) => a + (b - a) * t; const w = Math.min(width, CFG.maxWidth); const isNarrow = w < 720; const isTiny = w < 420; // Smooth “responsiveness factor”: 0 (tiny) -> 1 (wide) const t = clamp((w - 360) / (CFG.maxWidth - 360), 0, 1); const fontFamily = "Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"; const titleY = Math.round(lerp(CFG.responsive.titleYNarrow, CFG.responsive.titleYWide, t)); const titleSize = lerp(CFG.responsive.titleSizeNarrow, CFG.responsive.titleSizeWide, t); const tickSize = lerp(CFG.responsive.tickSizeNarrow, CFG.responsive.tickSizeWide, t); const sourceSize = lerp(CFG.responsive.sourceSizeNarrow, CFG.responsive.sourceSizeWide, t); const gapTitleToPlot = Math.round(lerp(CFG.responsive.gapTitleToPlotNarrow, CFG.responsive.gapTitleToPlotWide, t)); const gapPlotToLegend = Math.round(lerp(CFG.responsive.gapPlotToLegendNarrow, CFG.responsive.gapPlotToLegendWide, t)); const gapLegendToSource = Math.round(lerp(CFG.responsive.gapLegendToSourceNarrow, CFG.responsive.gapLegendToSourceWide, t)); const bottomPad = Math.round(lerp(CFG.responsive.bottomPadNarrow, CFG.responsive.bottomPadWide, t)); const xTickTextY = Math.round(lerp(CFG.responsive.xTickTextYNarrow, CFG.responsive.xTickTextYWide, t)); // Plot sizing (keep stable but allow modest shrink) const plotH = Math.round(clamp(lerp(320, CFG.base.plotH, t), 320, CFG.base.plotH)); const margin = { left: isTiny ? 50 : CFG.base.marginLeft, right: isTiny ? 24 : CFG.base.marginRight, top: Math.round(titleY + gapTitleToPlot) }; // Text measurement (reliable pre-mount) const measureText = (() => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); return (s, sizePx, weight = 300) => { ctx.font = `${weight} ${sizePx}px ${fontFamily}`; return ctx.measureText(String(s)).width; }; })(); // Prefer splitting long words at vowel boundaries; fall back to any split. const splitLongWordWithHyphen = (word, maxW, sizePx, weight = 300) => { if (measureText(word, sizePx, weight) <= maxW) return [word]; const vowels = new Set(["a","e","i","o","u","y","å","ä","ö","A","E","I","O","U","Y","Å","Ä","Ö"]); const candidateCuts = []; for (let i = 3; i <= word.length - 2; i++) { const prev = word[i - 1]; const next = word[i]; const score = (vowels.has(prev) && !vowels.has(next)) ? 2 : 1; candidateCuts.push({ i, score }); } candidateCuts.sort((a, b) => (b.score - a.score) || (b.i - a.i)); for (const cut of candidateCuts) { const left = word.slice(0, cut.i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(cut.i)]; } for (let i = word.length - 2; i >= 3; i--) { const left = word.slice(0, i) + "-"; if (measureText(left, sizePx, weight) <= maxW) return [left, word.slice(i)]; } return [word.slice(0, 3) + "-", word.slice(3)]; }; // Wrap into up to maxLines with no ellipsis; hyphenate only when needed. const wrapToLines = (text, maxW, sizePx, maxLines = 3, weight = 300) => { const words = String(text).split(/\s+/).filter(Boolean); if (!words.length) return [""]; const lines = []; let line = ""; const pushLine = (s) => { if (s != null && String(s).length) lines.push(String(s)); }; for (let wi = 0; wi < words.length; wi++) { let word = words[wi]; if (measureText(word, sizePx, weight) > maxW) { const parts = splitLongWordWithHyphen(word, maxW, sizePx, weight); for (let pi = 0; pi < parts.length; pi++) { const part = parts[pi]; const candidate = line ? `${line} ${part}` : part; if (measureText(candidate, sizePx, weight) <= maxW) { line = candidate; } else { pushLine(line); line = part; if (lines.length >= maxLines) { if (pi + 1 < parts.length) line = `${line}${parts.slice(pi + 1).join("")}`; break; } } } continue; } const candidate = line ? `${line} ${word}` : word; if (measureText(candidate, sizePx, weight) <= maxW || !line) { line = candidate; } else { pushLine(line); line = word; if (lines.length >= maxLines) break; } } if (lines.length < maxLines) pushLine(line); return lines.length ? lines : [String(text)]; }; // ------------------------------------------------------------ // Data + scales // ------------------------------------------------------------ const xValues = Array.from(new Set(q8Data.map(d => d[CFG.xKey]))); const innerW = w - margin.left - margin.right; const x = d3.scaleBand() .domain(xValues) .range([0, innerW]) .padding(CFG.base.xPadding); const y = d3.scaleLinear() .domain(CFG.yDomain) .nice() .range([plotH, 0]); // Distinct colors per category (aligned with palette) const categoryPalette = [BRAND.accent, "#F28E2B", BRAND.accent2]; const barColor = d3.scaleOrdinal() .domain(xValues) .range(categoryPalette.slice(0, Math.max(1, xValues.length))); // ------------------------------------------------------------ // X-axis label block sizing (to prevent overlap below) // ------------------------------------------------------------ const maxTickW = Math.max(70, x.bandwidth() * 0.90); const tickLinesByKey = new Map( xValues.map(k => [k, wrapToLines(String(k), maxTickW, tickSize, 4, 300)]) ); const maxTickLines = d3.max(xValues, k => (tickLinesByKey.get(k) || [String(k)]).length) || 1; const tickLineHpx = Math.round(tickSize * 1.15); const xAxisLabelBlockH = xTickTextY + (maxTickLines * tickLineHpx) + 8; // breathing room // ------------------------------------------------------------ // Source layout (wrap to prevent overflow) // ------------------------------------------------------------ const sourceMaxW = innerW; const sourceLines = wrapToLines(CFG.source, sourceMaxW, sourceSize, 2, 300); const sourceLineH = Math.round(sourceSize * 1.35); const sourceH = sourceLines.length * sourceLineH; // ------------------------------------------------------------ // Final height (guaranteed no overlaps) // ------------------------------------------------------------ const sourceTop = margin.top + plotH + xAxisLabelBlockH + gapPlotToLegend + gapLegendToSource; const h = sourceTop + sourceH + bottomPad; // ------------------------------------------------------------ // SVG + card container // ------------------------------------------------------------ const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("font-family", fontFamily) .style("cursor", "default"); svg.append("rect") .attr("x", 0).attr("y", 0) .attr("width", w).attr("height", h) .attr("rx", CFG.base.cardRadius) .attr("fill", BRAND.surface); // Title svg.append("text") .attr("x", w / 2) .attr("y", titleY) .attr("text-anchor", "middle") .style("font-weight", 600) .style("font-size", `${titleSize}px`) .style("fill", BRAND.textHigh) .text(CFG.title); // Plot group const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Gridlines g.append("g") .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat("")) .call(s => s.selectAll(".tick line").attr("stroke", "rgba(0,0,0,0.08)")) .call(s => s.select(".domain").remove()); // Tooltip const tooltip = d3.select(document.body) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transform", "translateY(4px)") .style("transition", "opacity 140ms ease, transform 140ms ease") .style("background", BRAND.surface) .style("border", "1px solid rgba(18,18,16,0.12)") .style("border-radius", "12px") .style("padding", "10px 12px") .style("box-shadow", "0 10px 26px rgba(0,0,0,0.14)") .style("font-family", fontFamily) .style("font-size", "12px") .style("color", BRAND.textBase); invalidation.then(() => tooltip.remove()); const setTooltipPosition = (event) => { const pad = 12; const rect = tooltip.node().getBoundingClientRect(); let xPos = event.clientX + pad; let yPos = event.clientY + pad; if (xPos + rect.width + pad > window.innerWidth) xPos = event.clientX - rect.width - pad; if (yPos + rect.height + pad > window.innerHeight) yPos = event.clientY - rect.height - pad; tooltip.style("left", `${xPos}px`).style("top", `${yPos}px`); }; const showTooltip = (event, d) => { tooltip.html(`

${d[CFG.xKey]}

${CFG.yLabel}: ${d[CFG.yKey]}%

`); tooltip.style("opacity", 1).style("transform", "translateY(0)"); setTooltipPosition(event); }; const hideTooltip = () => { tooltip.style("opacity", 0).style("transform", "translateY(4px)"); }; // Shadow filter const defs = svg.append("defs"); const filter = defs.append("filter") .attr("id", "shadow-hover-8") .attr("x", "-30%").attr("y", "-30%") .attr("width", "160%").attr("height", "160%"); filter.append("feDropShadow") .attr("dx", 0) .attr("dy", 6) .attr("stdDeviation", 6) .attr("flood-color", "rgba(0,0,0,0.16)"); // Bars const bars = g.selectAll("rect.bar") .data(q8Data) .join("rect") .attr("class", "bar") .attr("x", d => x(d[CFG.xKey])) .attr("y", d => y(d[CFG.yKey])) .attr("width", x.bandwidth()) .attr("height", d => plotH - y(d[CFG.yKey])) .attr("rx", CFG.base.barRadius) .attr("fill", d => barColor(d[CFG.xKey])) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("cursor", "pointer"); const labels = g.selectAll("text.val") .data(q8Data) .join("text") .attr("class", "val") .attr("x", d => x(d[CFG.xKey]) + x.bandwidth() / 2) .attr("y", d => y(d[CFG.yKey]) - 6) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", 600) .style("fill", BRAND.textMed) .style("opacity", 0) .style("pointer-events", "none") .text(d => `${d[CFG.yKey]}%`); // Hover behavior let activeKey = null; const resetBars = () => { bars.interrupt(); labels.interrupt(); bars .attr("filter", null) .attr("stroke", "rgba(18,18,16,0.10)") .attr("stroke-width", 1) .style("opacity", 1); labels.style("opacity", 0); activeKey = null; }; const applyHover = (d) => { const key = String(d[CFG.xKey]); if (activeKey === key) return false; activeKey = key; bars.interrupt(); labels.interrupt(); bars .transition() .duration(120) .ease(d3.easeCubicOut) .style("opacity", b => (String(b[CFG.xKey]) === key ? 1 : 0.65)); bars .filter(b => String(b[CFG.xKey]) === key) .raise() .transition() .duration(160) .ease(d3.easeCubicOut) .attr("filter", "url(#shadow-hover-8)") .attr("stroke", "rgba(18,18,16,0.18)") .attr("stroke-width", 1.5); labels.style("opacity", 0); labels .filter(b => String(b[CFG.xKey]) === key) .raise() .transition() .duration(140) .ease(d3.easeCubicOut) .style("opacity", 1); return true; }; g.on("pointermove", (event) => { const tEl = event.target; if (!tEl || tEl.tagName !== "rect") return; const d = d3.select(tEl).datum(); const changed = applyHover(d); if (changed) showTooltip(event, d); setTooltipPosition(event); }).on("pointerleave", () => { resetBars(); hideTooltip(); }); invalidation.then(() => { g.on("pointermove", null).on("pointerleave", null); }); // X-axis (wrapped labels, no ellipsis) const xAxis = g.append("g") .attr("transform", `translate(0,${plotH})`) .call(d3.axisBottom(x)); xAxis.selectAll(".tick text") .style("fill", BRAND.textBase) .style("font-weight", 300) .style("font-size", `${tickSize}px`) .attr("y", xTickTextY) .attr("dy", 0) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .each(function (k) { const text = d3.select(this); const lines = tickLinesByKey.get(k) || [String(k)]; text.text(null); lines.forEach((ln, i) => { text.append("tspan") .attr("x", 0) .attr("dy", i === 0 ? "0em" : "1.15em") .text(ln); }); }); xAxis.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)"); // Y-axis g.append("g") .call(d3.axisLeft(y).ticks(5).tickFormat(d => `${d}%`)) .call(s => s.selectAll("text").style("fill", BRAND.textBase)) .call(s => s.selectAll(".domain, .tick line").attr("stroke", "rgba(0,0,0,0.18)")); // ------------------------------------------------------------ // Source (wrapped, guaranteed to stay inside card) // ------------------------------------------------------------ const sourceText = svg.append("text") .attr("x", margin.left) .attr("y", sourceTop) .style("fill", BRAND.textLow) .style("font-size", `${sourceSize}px`) .style("font-weight", 300); sourceText.text(null); sourceLines.forEach((line, i) => { sourceText.append("tspan") .attr("x", margin.left) .attr("dy", i === 0 ? "0em" : "1.2em") .text(line); }); return svg.node(); }; 51:[{"id":"250d97071b9a14f18e8ed10171d3dfe47b3e0c7ca11cb387a8d41a6a101fcd2fed37582defc00c1485ea6af1d08b7bc33f1b31390ae423f8587b7a888950d029","href":"https://static.observableusercontent.com/files/250d97071b9a14f18e8ed10171d3dfe47b3e0c7ca11cb387a8d41a6a101fcd2fed37582defc00c1485ea6af1d08b7bc33f1b31390ae423f8587b7a888950d029","name":"kysely_q8.csv","type":"text/csv","lastModified":1768219748685.853,"size":104},{"id":"f51b4c1878ae220ebe98459c1c6d0252af4847f086d3933cbadd7f9967e60967f9728e08a4c71e5f5cd64ef116215d1f133330454f86721c3e37693c28c4da0b","href":"https://static.observableusercontent.com/files/f51b4c1878ae220ebe98459c1c6d0252af4847f086d3933cbadd7f9967e60967f9728e08a4c71e5f5cd64ef116215d1f133330454f86721c3e37693c28c4da0b","name":"kysely_q1.csv","type":"text/csv","lastModified":1767778083089.293,"size":85},{"id":"5caf37d0171254abb1494c23d02761dd0c9b7054d744fb790f4056ed1a71c31df3dd1705479498e67d43e80a200a87f8754d774c190abd755ba7c6f3b653a7ae","href":"https://static.observableusercontent.com/files/5caf37d0171254abb1494c23d02761dd0c9b7054d744fb790f4056ed1a71c31df3dd1705479498e67d43e80a200a87f8754d774c190abd755ba7c6f3b653a7ae","name":"kysely_q2.csv","type":"text/csv","lastModified":1767784250168.107,"size":230},{"id":"281cc503952073ba9d512811853009b0f5eae56bbe71ec001592e4e008ba04fecc33e07728249eb2523afe4d879f4dc6a1162976e294216414bf2907b373bf3f","href":"https://static.observableusercontent.com/files/281cc503952073ba9d512811853009b0f5eae56bbe71ec001592e4e008ba04fecc33e07728249eb2523afe4d879f4dc6a1162976e294216414bf2907b373bf3f","name":"kysely_q6.csv","type":"text/csv","lastModified":1767784250172.993,"size":130},{"id":"2433beba5b170d645a1420734edc9a1073330449d3114e4f0a8b666a4e6da9cabf375d5957a355b309ffa500f352aad091097e8618406de83d550956170c833a","href":"https://static.observableusercontent.com/files/2433beba5b170d645a1420734edc9a1073330449d3114e4f0a8b666a4e6da9cabf375d5957a355b309ffa500f352aad091097e8618406de83d550956170c833a","name":"kysely_q4.csv","type":"text/csv","lastModified":1767784250144.359,"size":130},{"id":"d080b3d0f2ccefcad69d603191b47b6b55bd2858a84aa9ca921c50ef55740ec75b643b2f75de2af03aa7e85ba7e349584c7bf1c5672a3179703a034e2e474e9a","href":"https://static.observableusercontent.com/files/d080b3d0f2ccefcad69d603191b47b6b55bd2858a84aa9ca921c50ef55740ec75b643b2f75de2af03aa7e85ba7e349584c7bf1c5672a3179703a034e2e474e9a","name":"kysely_q7.csv","type":"text/csv","lastModified":1767784250084.978,"size":136},{"id":"6ed8d18769f61ac76ce9b7bc7e693029b45516a3f27074b44a481d4b2d921e156b6d4539c54b691322c41c145764d6560dc3e527f9c8234b848803b82c30d0fd","href":"https://static.observableusercontent.com/files/6ed8d18769f61ac76ce9b7bc7e693029b45516a3f27074b44a481d4b2d921e156b6d4539c54b691322c41c145764d6560dc3e527f9c8234b848803b82c30d0fd","name":"kysely_q3.csv","type":"text/csv","lastModified":1767784250165.789,"size":118},{"id":"77cf675ed99ebcb9de588cb1384a1964d4d2331ca27f18e19ff7e0e765a4f9a599d4c53eee9ea69399f288e81d823f9c9683eda7d8228e142596dcf159059b5b","href":"https://static.observableusercontent.com/files/77cf675ed99ebcb9de588cb1384a1964d4d2331ca27f18e19ff7e0e765a4f9a599d4c53eee9ea69399f288e81d823f9c9683eda7d8228e142596dcf159059b5b","name":"kysely_q5.csv","type":"text/csv","lastModified":1767784250175.81,"size":191}] 29:{"id":"20779c6e92c81347","slug":null,"title":"Tekoälykyselyn vastaukset","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-01-07T09:19:38.656Z","update_time":"$D2026-01-14T10:17:21.609Z","view_time":null,"first_public_time":"$D2026-01-09T13:53:15.493Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"654abf273ee0c4dd","login":"healthdatavisualization","name":"HealthDataVisualization","avatar_url":"https://avatars-next.observableusercontent.com/1ca306f7fb059a64561d355d31dd0df9a24d20b712e59163882c7aabbc59f87d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":366,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a7dc566b8f7627a","login":"sotedatalab","name":"Kivimakialex","avatar_url":"https://avatars-next.observableusercontent.com/c6d0f2632ca8ff781ea05b3150733731825904a2f9d35f6e7acf34276ba33a18","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"654abf273ee0c4dd","login":"healthdatavisualization","name":"HealthDataVisualization","avatar_url":"https://avatars-next.observableusercontent.com/1ca306f7fb059a64561d355d31dd0df9a24d20b712e59163882c7aabbc59f87d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"5a7dc566b8f7627a","login":"sotedatalab","name":"Kivimakialex","avatar_url":"https://avatars-next.observableusercontent.com/c6d0f2632ca8ff781ea05b3150733731825904a2f9d35f6e7acf34276ba33a18","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tekoälykyselyn vastaukset","cells":[{"id":0,"value":"# Tekoälykyselyn vastaukset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"q1Data = {\n const text = await FileAttachment(\"kysely_q1.csv\").text();\n return d3.dsvFormat(\";\").parse(text, d => ({\n age: d[\"Age group\"],\n pct: +d[\"Percentage of respondents\"] // number\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"q2Data = {\n const text = await FileAttachment(\"kysely_q2.csv\").text();\n return d3.dsvFormat(\";\").parse(text, d => ({\n occupation: d[\"Occupation\"],\n // handles \"11 %\", \"11%\", or \"11\"\n pct: +String(d[\"Share\"]).replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"q3Data = {\n const text = await FileAttachment(\"kysely_q3.csv\").text();\n\n // Some exports contain weird percent characters (like \"�\"). Normalize them away.\n const clean = text.replace(/�/g, \"\");\n\n return d3.dsvFormat(\";\").parse(clean, d => ({\n age: d[\"Age group\"],\n never: +String(d[\"Has never used\"]).replace(\"%\", \"\").trim(),\n used: +String(d[\"Has used\"]).replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"q4Data = {\n const text = await FileAttachment(\"kysely_q4.csv\").text();\n const clean = text.replace(/�/g, \"\"); // normalize weird percent char\n\n return d3.dsvFormat(\";\").parse(clean, d => ({\n gender: d[\"\"] ?? d[\"Gender\"] ?? d[\"gender\"] ?? d[\"Sex\"] ?? d[\"sex\"],\n ease: +String(d[\"Ease/convenience\"]).replace(\"%\", \"\").trim(),\n quick: +String(d[\"Quick access to information\"]).replace(\"%\", \"\").trim(),\n stigma: +String(d[\"My issue was personal / involved stigma\"]).replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"q5Data = {\n const text = await FileAttachment(\"kysely_q5.csv\").text();\n const clean = text.replace(/�/g, \"\"); // normalize weird percent char\n\n return d3.dsvFormat(\";\").parse(clean, d => ({\n age: d[\"\"] ?? d[\"Age group\"] ?? d[\"age\"] ?? d[\"Age\"],\n ease: +String(d[\"Ease/convenience\"]).replace(\"%\", \"\").trim(),\n quick: +String(d[\"Quick access to information\"]).replace(\"%\", \"\").trim(),\n stigma: +String(d[\"My issue was personal / involved stigma\"]).replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"q6Data = {\n const text = await FileAttachment(\"kysely_q6.csv\").text();\n const clean = text.replace(/�/g, \"\"); // normalize weird percent char\n\n return d3.dsvFormat(\";\").parse(clean, d => ({\n age: d[\"Age\"] ?? d[\"\"] ?? d[\"Age group\"],\n notTrust: +String(d[\"Does not trust\"]).replace(\"%\", \"\").trim(),\n trust: +String(d[\"Trusts fairly or very much\"]).replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"q7Data = {\n const text = await FileAttachment(\"kysely_q7.csv\").text();\n const clean = text.replace(/�/g, \"\");\n\n return d3.dsvFormat(\";\").parse(clean, d => ({\n trustLevel: d[\"How much do you trust AI?\"],\n female: +String(d[\"Female\"]).replace(\"%\", \"\").trim(),\n male: +String(d[\"Male\"]).replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"q8Data = {\n const text = await FileAttachment(\"kysely_q8.csv\").text();\n const clean = text.replace(/�/g, \"\");\n\n return d3.dsvFormat(\";\").parse(text, d => ({\n municipalityType: (d[\"\"] ?? \"\").trim(),\n hasUsed: +String(d[\"Has used\"] ?? \"\").replace(\"%\", \"\").trim()\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null