31:Tf57,sankeyGraphData = { const nodesMap = new Map(); const links = []; function addNode(id, layer, displayName, eventId = "") { const key = `${layer}:${id}`; if (!nodesMap.has(key)) { nodesMap.set(key, { id: key, name: displayName, layer: layer, Event_ID: eventId }); } return key; } function addLink(sourceId, sourceLayer, sourceDisplay, targetId, targetLayer, targetDisplay, value, eventId = "") { if (!sourceId || !targetId || value <= 0) return; const sKey = addNode(sourceId, sourceLayer, sourceDisplay, eventId); const tKey = addNode(targetId, targetLayer, targetDisplay, eventId); const existing = links.find(l => l.source === sKey && l.target === tKey); if (existing) { existing.value += value; } else { links.push({ source: sKey, target: tKey, value: value, Event_ID: eventId }); } } const invalidPlaceholders = ["", "0", "nan", "undefined", "null", "blank", "#n/a"]; filteredData.forEach(d => { const eventId = d.Event_ID !== undefined && d.Event_ID !== null ? String(d.Event_ID).trim() : "Sprint1_Workshop"; let theme = d.Theme !== undefined && d.Theme !== null ? String(d.Theme).trim() : ""; const rawConcepts = d["Mapped Concepts"] !== undefined && d["Mapped Concepts"] !== null ? String(d["Mapped Concepts"]).trim() : ""; const rawWeights = d["Mapped Concepts Weight"] !== undefined && d["Mapped Concepts Weight"] !== null ? String(d["Mapped Concepts Weight"]).trim() : ""; if (invalidPlaceholders.includes(theme.toLowerCase()) || invalidPlaceholders.includes(rawConcepts.toLowerCase())) { return; } const baseWeight = 1; // --- FIND THIS SECTION IN YOUR sankeyGraphData CELL --- const concepts = rawConcepts.split(",") .map(c => { return c .replace(/[\u200B-\u200D\uFEFF]/g, "") // 1. Strip invisible zero-width spaces/BOMs .replace(/\s+/g, " ") // 2. Collapse internal multi-spaces to a single space .trim(); // 3. Clean outer leading & trailing spaces }) // 4. Filter out any blank elements or invalid placeholders .filter(c => c !== "" && !invalidPlaceholders.includes(c.toLowerCase())); const weights = rawWeights.split(",") .map(w => parseFloat(w.trim())) .filter(w => !isNaN(w) && w > 0); if (concepts.length === 0) return; if (eventId === "Pre-Workshop Interviews") { const uniqueThemeId = `${theme} (Interview)`; concepts.forEach((concept, index) => { const explicitWeight = weights[index] !== undefined ? weights[index] : (baseWeight / concepts.length); addLink(uniqueThemeId, "theme", theme, concept, "concept", concept, explicitWeight, eventId); }); } else { const primaryCode = d["Code Primary"] !== undefined && d["Code Primary"] !== null ? String(d["Code Primary"]).trim() : ""; const loc = d.Location_ID !== undefined && d.Location_ID !== null ? String(d.Location_ID).toLowerCase().trim() : ""; if (invalidPlaceholders.includes(primaryCode.toLowerCase()) || invalidPlaceholders.includes(loc)) { return; } let macroTrack = "Decisions, Options, & Strategies"; if (loc === "values" || loc === "metrics") { macroTrack = "Values & Metrics"; } addLink(macroTrack, "track", macroTrack, primaryCode, "code", primaryCode, baseWeight, eventId); addLink(primaryCode, "code", primaryCode, theme, "theme", theme, baseWeight, eventId); concepts.forEach((concept, index) => { const explicitWeight = weights[index] !== undefined ? weights[index] : (baseWeight / concepts.length); addLink(theme, "theme", theme, concept, "concept", concept, explicitWeight, eventId); }); } }); return { nodes: Array.from(nodesMap.values()), links: links }; }32:T5a6b, view2 = { // Referencing the toggle cell makes view2 reactive to it const includeInterviews = showInterviews; // ========================================================================= // PHASE 1: MASTER VISUAL STYLE & TYPOGRAPHY CONFIGURATION // ========================================================================= const CONFIG = { dimensions: { width: 1100, height: 500, topMargin: 20, bottomMargin: 25, nodeWidth: 14, nodePadding: 14, codeBlockWidth: 6, targetInterviewNodeHeight: 11 }, // Manage all visual variables in one place styling: { lineOpacity: 0.28, useMultiplyBlend: false, textPaddingX: 8, // Horizontal gap between nodes and their text labels subHeaderOffsetY: 20, // Vertical space added below the track split divider // Muting applied to every layer except concepts, so the final layer's // vivid colors stand apart. Saturation multiplier (0-1, lower = more // muted) and lightness multiplier (>1 lifts toward pastel) muteSaturation: 0.45, muteLightness: 1.12 }, // Font stacks: PT Serif for titles/headings, Lato inside the diagram fonts: { title: "'PT Serif', Georgia, serif", diagram: "'Lato', 'Helvetica Neue', Arial, sans-serif" }, colors: { strategies: "#DB8DFF", // Light purple/pink valuesMetrics: "#0078B5", // Blue preWorkshopInterviews: "#ADADAD" // Lighter gray }, // Categorical palettes assigned per sankey layer layerPalettes: { code: d3.schemeTableau10, theme: d3.schemeSet2, // Fallback hues for concepts without an explicit color; chosen to stay // visually distinct from the four registered concept colors and from // each other, with no grays concept: ["#8B5CF6", "#EC4899", "#0D9488", "#DC2626", "#4F46E5", "#65A30D", "#B45309", "#0891B2"] }, // Centralized font hierarchy rulebook typography: { track: { size: "11px", weight: "700" }, code: { size: "9.5px", weight: "400" }, theme: { size: "9.5px", weight: "400" }, concept: { size: "11px", weight: "700" } }, // ----------------------------------------------------------------------- // DATA MAPPING & PRIORITIZATION HOOKS // ----------------------------------------------------------------------- dataHooks: { primaryTrackName: "Decisions, Options, & Strategies", secondaryTrackName: "Values & Metrics", splitEventID: "Pre-Workshop Interviews", // Display-name overrides applied to raw data labels nameOverrides: { "ai teammate": "AI Collaboration", "editorialization, narration, & generative sense-making": "Editorialization and narration", "adaptive content and experiences": "Adaptive Content", "personalized dashboard and generative tool": "Generative Tools", "headless naep": "NAEP IO", "interactive narratives and explainers": "Accessible Interactions" }, // Concept nodes folded into another concept before layout: all flows // into the key are retargeted to (and tabulated with) the value conceptMerges: { "telemetry": "ai building blocks" }, // Top-level priority order for floating concepts up the right-hand column sortPriorityOrder: [ "ai building blocks", "adaptive content", "generative tools" ], // Explicit concept node color overriding registry conceptColors: { "adaptive content": "#FDCD07", "ai collaboration": "#87CD51", "generative tools": "#31B3EF", "accessible interactions": "#FB6F31" } } }; const thicknessScale = 0.32; const container = d3.create("div").style("width", "100%").style("display", "flex").style("flex-direction", "column"); // ========================================================================= // PHASE 2: GEOMETRIC GRID INTERCEPT COLUMNS // ========================================================================= const columns = { "track": 85, "code": CONFIG.dimensions.width * 0.34, "theme": CONFIG.dimensions.width * 0.62, "concept": CONFIG.dimensions.width - 80 }; // ----------------------------------------------------------- // SVG-NATIVE HEADER BANNER // Rendered inside the SVG (in a negative-y header zone) so column titles // are included when the SVG is exported or screenshotted, instead of // living in HTML divs that exporters ignore // ----------------------------------------------------------- const headerHeight = 44; const svg = container.append("svg") .attr("viewBox", [0, -headerHeight, CONFIG.dimensions.width, CONFIG.dimensions.height + headerHeight]) .attr("xmlns", "http://www.w3.org/2000/svg") .style("width", "100%") .style("height", "auto") .style("background-color", "transparent"); // Embed the font import inside the SVG itself so exported files still // request PT Serif and Lato when opened in a browser svg.append("style").text( "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=PT+Serif:wght@400;700&display=swap');" ); // Each title is horizontally centered on its layer's node column const headings = [ { label: "Post-Its", center: columns["track"] + CONFIG.dimensions.nodeWidth / 2 }, { label: "Qualitative Coding", center: columns["code"] + CONFIG.dimensions.codeBlockWidth / 2 }, { label: "Synthesized Theme", center: columns["theme"] + CONFIG.dimensions.nodeWidth / 2 }, { label: "Design Concept", center: columns["concept"] + CONFIG.dimensions.nodeWidth / 2 } ]; const headerGroup = svg.append("g"); headings.forEach(h => { headerGroup.append("text") .attr("x", h.center) .attr("y", -headerHeight + 24) .attr("text-anchor", "middle") .text(h.label) .style("font-family", CONFIG.fonts.title) .style("font-size", "12px") .style("font-weight", "700") .style("letter-spacing", "0.01em") .style("fill", "#475569"); }); // Divider line replacing the old HTML border-bottom headerGroup.append("line") .attr("x1", 0) .attr("x2", CONFIG.dimensions.width) .attr("y1", -headerHeight + 32) .attr("y2", -headerHeight + 32) .attr("stroke", "#e2e8f0") .attr("stroke-width", 1.5); // ========================================================================= // PHASE 3: NODE SORTING & DATA COUPLING MATHEMATICS // ========================================================================= function customNodeSort(a, b) { if (a.layer === "concept" || b.layer === "concept" || a.id?.includes("concept") || b.id?.includes("concept")) { const cleanA = String(a.name || a.id).replace("concept:", "").trim().toLowerCase(); const cleanB = String(b.name || b.id).replace("concept:", "").trim().toLowerCase(); const aIndex = CONFIG.dataHooks.sortPriorityOrder.indexOf(cleanA); const bIndex = CONFIG.dataHooks.sortPriorityOrder.indexOf(cleanB); if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex; if (aIndex !== -1) return -1; if (bIndex !== -1) return 1; } return b.value - a.value; } sankeyGraphData.nodes.forEach(node => { if (node.id.startsWith("track:")) node.customLayer = "track"; else if (node.id.startsWith("code:")) node.customLayer = "code"; else if (node.id.startsWith("theme:")) node.customLayer = "theme"; else if (node.id.startsWith("concept:")) node.customLayer = "concept"; else node.customLayer = node.layer; node.isInterviewTrack = node.Event_ID === CONFIG.dataHooks.splitEventID || node.id.includes("(Interview)"); // Apply display-name overrides (rename hook) const override = CONFIG.dataHooks.nameOverrides[String(node.name).trim().toLowerCase()]; if (override) node.name = override; }); const inputNodes = sankeyGraphData.nodes.map(d => Object.assign({}, d)); const inputLinks = sankeyGraphData.links.map(d => Object.assign({}, d)); // ----------------------------------------------------------- // INTERVIEW TOGGLE FILTER: when the toggle is off, strip every // pre-workshop interview node, every band touching one, and any node // left orphaned (connected only through interview flows) // ----------------------------------------------------------- let workingNodes = inputNodes; let workingLinks = inputLinks; if (!includeInterviews) { const interviewIds = new Set(inputNodes.filter(n => n.isInterviewTrack).map(n => n.id)); workingLinks = inputLinks.filter(l => !interviewIds.has(l.source) && !interviewIds.has(l.target)); const linkedIds = new Set(); workingLinks.forEach(l => { linkedIds.add(l.source); linkedIds.add(l.target); }); workingNodes = inputNodes.filter(n => !interviewIds.has(n.id) && linkedIds.has(n.id)); } // ----------------------------------------------------------- // CONCEPT MERGES: fold designated concept nodes into their merge target // before layout, so their flows and values tabulate together // ----------------------------------------------------------- const mergeIdMap = new Map(); Object.entries(CONFIG.dataHooks.conceptMerges).forEach(([fromName, intoName]) => { const fromNode = workingNodes.find(n => n.customLayer === "concept" && String(n.name).trim().toLowerCase() === fromName); const intoNode = workingNodes.find(n => n.customLayer === "concept" && String(n.name).trim().toLowerCase() === intoName); if (fromNode && intoNode) mergeIdMap.set(fromNode.id, intoNode.id); }); const mergedNodes = workingNodes.filter(n => !mergeIdMap.has(n.id)); // Retarget links, then aggregate any parallel links the merge created // (same source and target) by summing their values const linkAgg = new Map(); workingLinks.forEach(l => { const source = mergeIdMap.get(l.source) ?? l.source; const target = mergeIdMap.get(l.target) ?? l.target; const key = `${source}\u2192${target}`; if (linkAgg.has(key)) { linkAgg.get(key).value += l.value; } else { linkAgg.set(key, Object.assign({}, l, { source, target })); } }); const mergedLinks = [...linkAgg.values()]; const sankeyGenerator = d3Sankey.sankey() .nodeId(d => d.id) .nodeWidth(CONFIG.dimensions.nodeWidth) .nodePadding(CONFIG.dimensions.nodePadding) .nodeSort(customNodeSort) .extent([[columns["track"], 15], [CONFIG.dimensions.width - 60, CONFIG.dimensions.height - 15]]); const { nodes, links } = sankeyGenerator({ nodes: mergedNodes, links: mergedLinks }); const availableHeight = CONFIG.dimensions.height - CONFIG.dimensions.topMargin - CONFIG.dimensions.bottomMargin; const workshopHeightBoundary = availableHeight * 0.52; const interviewHeightBoundary = availableHeight * 0.48; let sectionDividerY = CONFIG.dimensions.topMargin + workshopHeightBoundary + 15; // ----------------------------------------------------------- // CATEGORICAL COLOR SCALES PER LAYER // ----------------------------------------------------------- const codeColor = d3.scaleOrdinal(CONFIG.layerPalettes.code); const themeColor = d3.scaleOrdinal(CONFIG.layerPalettes.theme); const conceptFallback = d3.scaleOrdinal(CONFIG.layerPalettes.concept); // Every concept gets a unique color: the explicit registry wins, and any // unregistered concept draws a distinct hue from the fallback palette function conceptColor(d) { const cleanName = String(d.name).trim().toLowerCase(); return CONFIG.dataHooks.conceptColors[cleanName] || conceptFallback(cleanName); } // Mute a color toward pastel: used on every layer except concepts so the // final layer's full-strength colors read as the visual destination function mute(color) { const c = d3.hsl(color); c.s *= CONFIG.styling.muteSaturation; c.l = Math.min(0.88, c.l * CONFIG.styling.muteLightness); return c.toString(); } function nodeColor(d) { if (d.isInterviewTrack) return CONFIG.colors.preWorkshopInterviews; if (d.customLayer === "track") { return mute(d.name === CONFIG.dataHooks.secondaryTrackName ? CONFIG.colors.valuesMetrics : CONFIG.colors.strategies); } if (d.customLayer === "code") return mute(codeColor(d.name)); if (d.customLayer === "theme") return mute(themeColor(d.name)); if (d.customLayer === "concept") return conceptColor(d); return "#475569"; } // Band color resolver: same categorical logic as nodeColor, but never // returns grayscale. Interview nodes fall through to their layer's // categorical scale so every ribbon endpoint has a real hue. function bandColor(d) { if (d.customLayer === "track") { return mute(d.name === CONFIG.dataHooks.secondaryTrackName ? CONFIG.colors.valuesMetrics : CONFIG.colors.strategies); } if (d.customLayer === "code") return mute(codeColor(d.name)); if (d.customLayer === "theme") return mute(themeColor(d.name)); if (d.customLayer === "concept") return conceptColor(d); return mute(CONFIG.colors.strategies); } // ----------------------------------------------------------- // SHARED LINK WIDTH FORMULA // Interview flows are drawn thicker than their raw value (min 3px, x1.2), // so node heights must be tabulated from these rendered widths, not raw // values, or blocks fed by interview flows come up short // ----------------------------------------------------------- function linkWidth(link) { const s = link.source; const t = link.target; return (s.isInterviewTrack || t.isInterviewTrack) ? Math.max(3.0, link.value * 1.2) : Math.max(0.5, link.value * thicknessScale); } // ----------------------------------------------------------- // ABSOLUTE POSITIONING CALCULATOR LOOP // ----------------------------------------------------------- const layers = ["track", "code", "theme", "concept"]; const layerShifts = {}; layers.forEach(layerName => { const layerNodes = nodes.filter(n => n.customLayer === layerName).sort(customNodeSort); if (layerName === "track") { const strategiesNode = layerNodes.find(n => n.name === CONFIG.dataHooks.primaryTrackName); const metricsNode = layerNodes.find(n => n.name === CONFIG.dataHooks.secondaryTrackName); if (strategiesNode) { strategiesNode.x0 = columns["track"]; strategiesNode.x1 = strategiesNode.x0 + CONFIG.dimensions.nodeWidth; strategiesNode.y0 = CONFIG.dimensions.topMargin; strategiesNode.y1 = CONFIG.dimensions.topMargin + 65; } if (metricsNode) { metricsNode.x0 = columns["track"]; metricsNode.x1 = metricsNode.x0 + CONFIG.dimensions.nodeWidth; metricsNode.y0 = CONFIG.dimensions.topMargin + 96; metricsNode.y1 = CONFIG.dimensions.topMargin + 96 + 18; } } else if (layerName === "code") { const totalNodes = layerNodes.length; layerNodes.forEach((node, i) => { node.x0 = columns["code"]; node.x1 = node.x0 + CONFIG.dimensions.codeBlockWidth; const targetY = CONFIG.dimensions.topMargin + (i * (availableHeight / Math.max(1, totalNodes - 1))); const nodeHeight = Math.max(3, node.value * thicknessScale); node.y0 = targetY - nodeHeight / 2; node.y1 = targetY + nodeHeight / 2; }); } else if (layerName === "theme") { const workshopThemes = layerNodes.filter(n => !n.isInterviewTrack); const interviewThemes = layerNodes.filter(n => n.isInterviewTrack); // With interviews hidden, workshop themes claim the full column height const workshopSpan = interviewThemes.length > 0 ? workshopHeightBoundary : availableHeight; workshopThemes.forEach((node, i) => { node.x0 = columns["theme"]; node.x1 = node.x0 + CONFIG.dimensions.nodeWidth; const targetY = CONFIG.dimensions.topMargin + (i * (workshopSpan / Math.max(1, workshopThemes.length - 1))); const nodeHeight = Math.max(4, node.value * thicknessScale); node.y0 = targetY - nodeHeight / 2; node.y1 = targetY + nodeHeight / 2; }); interviewThemes.forEach((node, i) => { node.x0 = columns["theme"]; node.x1 = node.x0 + CONFIG.dimensions.nodeWidth; const targetY = (sectionDividerY + 45) + (i * ((interviewHeightBoundary - 60) / Math.max(1, interviewThemes.length - 1))); node.y0 = targetY - CONFIG.dimensions.targetInterviewNodeHeight / 2; node.y1 = targetY + CONFIG.dimensions.targetInterviewNodeHeight / 2; }); } else { const totalNodes = layerNodes.length; layerNodes.forEach((node, i) => { node.x0 = columns[node.customLayer]; node.x1 = node.x0 + CONFIG.dimensions.nodeWidth; const targetY = CONFIG.dimensions.topMargin + (i * (availableHeight / Math.max(1, totalNodes - 1))); // Height = sum of the rendered widths of all incoming bands, so // interview flows (drawn at inflated width) are fully accounted for const nodeHeight = Math.max(4, d3.sum(node.targetLinks || [], linkWidth)); node.y0 = targetY - nodeHeight / 2; node.y1 = targetY + nodeHeight / 2; }); } // ----------------------------------------------------------- // VERTICAL CENTERING: shift each layer so its content block is // centered within the drawing area rather than top-aligned // ----------------------------------------------------------- if (layerNodes.length > 0) { const minY = d3.min(layerNodes, n => n.y0); const maxY = d3.max(layerNodes, n => n.y1); const shift = CONFIG.dimensions.topMargin + (availableHeight - (maxY - minY)) / 2 - minY; layerNodes.forEach(n => { n.y0 += shift; n.y1 += shift; }); layerShifts[layerName] = shift; } }); // Keep the interview sub-heading aligned with the shifted theme layer sectionDividerY += (layerShifts["theme"] || 0); // ----------------------------------------------------------- // FLOW LINE THICKNESS & DYNAMIC COLOR ROUTING MATRIX // ----------------------------------------------------------- const sourcePositions = new Map(); const targetPositions = new Map(); links.forEach(link => { const s = link.source; const t = link.target; if (!sourcePositions.has(s.id)) sourcePositions.set(s.id, s.y0); if (!targetPositions.has(t.id)) targetPositions.set(t.id, t.y0); const sy0 = sourcePositions.get(s.id); const ty0 = targetPositions.get(t.id); link.width = linkWidth(link); link.y0 = sy0 + link.width / 2; link.y1 = ty0 + link.width / 2; sourcePositions.set(s.id, sy0 + link.width); targetPositions.set(t.id, ty0 + link.width); // Gradient Router: every band blends from its source node's color to // its target node's color. No grayscale endpoints anywhere. link.colorStart = bandColor(s); link.colorEnd = bandColor(t); }); // ========================================================================= // PHASE 4: D3 RENDERING PIPELINE (Pure Canvas Drawing Elements) // ========================================================================= // Clean context sub-heading, only rendered when interview themes are shown if (nodes.some(n => n.customLayer === "theme" && n.isInterviewTrack)) { svg.append("text") .attr("x", columns["theme"] + CONFIG.dimensions.nodeWidth + CONFIG.styling.textPaddingX) .attr("y", sectionDividerY + CONFIG.styling.subHeaderOffsetY) .text("Pre-Workshop Interview Themes") .style("font-family", CONFIG.fonts.title) .style("font-size", "11px") .style("font-weight", "700") .style("letter-spacing", "0.01em") .attr("text-anchor", "end") .style("fill", "#64748b"); } // Flow Ribbon Engine (uniform thickness end to end, no taper) function drawLink(d) { const x0 = d.source.customLayer === "code" ? d.source.x0 + CONFIG.dimensions.codeBlockWidth : d.source.x1; const x1 = d.target.x0; const xi = d3.interpolateNumber(x0, x1); const x2 = xi(0.4); const x3 = xi(0.6); const y0 = d.y0; const y1 = d.y1; const w = d.width; return ` M ${x0} ${y0 - w / 2} C ${x2} ${y0 - w / 2}, ${x3} ${y1 - w / 2}, ${x1} ${y1 - w / 2} L ${x1} ${y1 + w / 2} C ${x3} ${y1 + w / 2}, ${x2} ${y0 + w / 2}, ${x0} ${y0 + w / 2} Z `; } // ----------------------------------------------------------- // GRADIENT DEFINITIONS: one horizontal gradient per band, pinned in // user space so the blend runs exactly from source edge to target edge // ----------------------------------------------------------- const defs = svg.append("defs"); links.forEach((link, i) => { link.gradientID = `band-gradient-${i}`; const gx0 = link.source.customLayer === "code" ? link.source.x0 + CONFIG.dimensions.codeBlockWidth : link.source.x1; const gx1 = link.target.x0; const gradient = defs.append("linearGradient") .attr("id", link.gradientID) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", gx0).attr("y1", 0) .attr("x2", gx1).attr("y2", 0); gradient.append("stop").attr("offset", "0%").attr("stop-color", link.colorStart); gradient.append("stop").attr("offset", "100%").attr("stop-color", link.colorEnd); }); svg.append("g") .attr("stroke", "none") .attr("fill-opacity", CONFIG.styling.lineOpacity) .selectAll("path") .data(links.sort((a, b) => (a.colorStart !== CONFIG.colors.strategies ? 1 : -1))) .join("path") .attr("d", drawLink) .attr("fill", d => `url(#${d.gradientID})`) .style("mix-blend-mode", CONFIG.styling.useMultiplyBlend ? "multiply" : "normal"); const node = svg.append("g") .selectAll("g") .data(nodes) .join("g"); // Structural Blocks: every layer, including concepts, renders as a rect node.append("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => Math.max(3, d.y1 - d.y0)) .attr("width", d => d.x1 - d.x0) .attr("fill", nodeColor) .attr("rx", 1); // Typography Grid Layer (Lato inside the diagram) // Browsers place text by baseline, so on-screen y carries a small // baseline offset. The true geometric center is stamped in data-cy so // the exporter can place the type exactly at center for Figma node.append("text") .attr("x", d => d.x0 < CONFIG.dimensions.width / 2 ? d.x1 + CONFIG.styling.textPaddingX : d.x0 - CONFIG.styling.textPaddingX) .attr("y", d => (d.y0 + d.y1) / 2 + parseFloat(CONFIG.typography[d.customLayer].size) * 0.35) .attr("data-cy", d => (d.y0 + d.y1) / 2) .attr("text-anchor", d => d.x0 < CONFIG.dimensions.width / 2 ? "start" : "end") .text(d => d.customLayer === "code" ? "" : d.name) .style("font-family", CONFIG.fonts.diagram) .style("font-size", d => CONFIG.typography[d.customLayer].size) .style("font-weight", d => CONFIG.typography[d.customLayer].weight) .style("fill", "#0f172a"); return container.node(); }33:T1bd8,chartKit = { const fonts = { title: "'PT Serif', Georgia, serif", diagram: "'Lato', 'Helvetica Neue', Arial, sans-serif" }; const styling = { muteSaturation: 0.45, muteLightness: 1.12, segmentStroke: "#ffffff", segmentStrokeWidth: 1 }; // Hide codes whose dominant theme can't be resolved (they'd otherwise // appear in a gray "Unassigned" block). Warned to console either way. const hideUnassigned = true; const layerPalettes = { code: d3.schemeTableau10, theme: [...d3.schemeSet2, "#9e7bb5"] // Set2 + violet as the 9th hue }; const conceptColors = { "adaptive content": "#FDCD07", "ai collaboration": "#87CD51", "generative tools": "#31B3EF", "accessible interactions": "#FB6F31" }; const conceptFallbackPalette = [ "#8B5CF6", "#EC4899", "#0D9488", "#DC2626", "#4F46E5", "#65A30D", "#B45309", "#0891B2" ]; const conceptMerges = { telemetry: "ai building blocks" }; const invalidPlaceholders = [ "", "0", "nan", "undefined", "null", "blank", "#n/a" ]; const applyOverride = (name) => { const clean = String(name) .replace(/[\u200B-\u200D\uFEFF]/g, "") .replace(/\u00A0/g, " ") .replace(/\s+/g, " ") .trim(); return nameOverrides[clean.toLowerCase()] || clean; }; const isInvalid = (v) => invalidPlaceholders.includes( String(v ?? "") .trim() .toLowerCase() ); function mute(color) { const c = d3.hsl(color); // c.s *= styling.muteSaturation; // c.l = Math.min(0.88, c.l * styling.muteLightness); return c.toString(); } const alphaSort = (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }); // Theme and code names come from the DATA, not the sankey graph (the // graph drops rows with invalid Mapped Concepts and under-represents // both layers) function dataLayerNames(field) { const names = new Set(); filteredData.forEach((d) => { if (String(d.Event_ID ?? "").trim() === "Pre-Workshop Interviews") return; if (isInvalid(d[field])) return; names.add(applyOverride(d[field])); }); return [...names].sort(alphaSort); } // Concepts come from the graph (mirrors conceptRows cleaning) function conceptLayerNames() { const names = new Set(); sankeyGraphData.nodes .filter((n) => String(n.id).startsWith("concept:")) .forEach((n) => names.add(applyOverride(String(n.name)))); return [...names].sort(alphaSort); } // CODE -> DOMINANT THEME from filteredData row co-occurrence, with // manual overrides applied case-insensitively against the real keys function buildCodeThemeMap() { const tally = new Map(); filteredData.forEach((d) => { if (String(d.Event_ID ?? "").trim() === "Pre-Workshop Interviews") return; if (isInvalid(d["Code Primary"]) || isInvalid(d.Theme)) return; const code = applyOverride(d["Code Primary"]); const theme = applyOverride(d.Theme); if (!tally.has(code)) tally.set(code, new Map()); const m = tally.get(code); m.set(theme, (m.get(theme) || 0) + 1); }); const dominant = new Map(); tally.forEach((themes, code) => { let best = null, bestVal = -Infinity; themes.forEach((v, theme) => { if (v > bestVal) { best = theme; bestVal = v; } }); dominant.set(code, best); }); const keyByLower = new Map( [...dominant.keys()].map((k) => [k.toLowerCase(), k]) ); Object.entries(codeThemeOverrides).forEach(([code, theme]) => { const cleanCode = applyOverride(code); const realKey = keyByLower.get(cleanCode.toLowerCase()) ?? cleanCode; const cleanTheme = applyOverride(theme); dominant.set(realKey, cleanTheme); console.log(`codeThemeOverride: "${realKey}" -> "${cleanTheme}"`); }); return dominant; } function layerColorScale(layer) { // CONCEPTS: registry colors exact, fallback palette assigned // alphabetically among unregistered concepts. Full saturation. if (layer === "concept") { const order = conceptLayerNames().filter( (n) => !conceptMerges[n.toLowerCase()] ); const unregistered = order.filter((n) => !conceptColors[n.toLowerCase()]); const fallbackMap = new Map( unregistered.map((n, i) => [ n.toLowerCase(), conceptFallbackPalette[i % conceptFallbackPalette.length] ]) ); const scale = (name) => { const key = applyOverride(name).toLowerCase(); return conceptColors[key] || fallbackMap.get(key) || "#cbd5e1"; }; return { scale, order, unmuted: true }; } // CODES GROUPED BY DOMINANT THEME: alphabetical theme blocks, // alphabetical codes within, lightness ramp per block if (layer === "codeByTheme") { const themeOrder = dataLayerNames("Theme"); const themePalette = new Map( themeOrder.map((t, i) => [ t, layerPalettes.theme[i % layerPalettes.theme.length] ]) ); const themeScale = (name) => themePalette.get(applyOverride(name)) || "#94a3b8"; const codeTheme = buildCodeThemeMap(); const grouped = new Map(themeOrder.map((t) => [t, []])); const unassigned = []; codeTheme.forEach((theme, code) => { if (grouped.has(theme)) grouped.get(theme).push(code); else unassigned.push(code); }); if (unassigned.length) { console.warn("Unassigned codes:", unassigned); if (hideUnassigned) unassigned.forEach((c) => codeTheme.delete(c)); else grouped.set("__unassigned__", unassigned); } grouped.forEach((codes) => codes.sort(alphaSort)); const colorByCode = new Map(); const order = []; grouped.forEach((codes, theme) => { const base = theme === "__unassigned__" ? "#94a3b8" : mute(themeScale(theme)); const n = codes.length; codes.forEach((code, i) => { const c = d3.hsl(base); c.l = n > 1 ? 0.55 + (i / (n - 1)) * 0.3 : 0.68; colorByCode.set(code, c.toString()); order.push(code); }); }); const knownCodes = new Set(order); const scale = (name) => colorByCode.get(applyOverride(name)) || "#cbd5e1"; return { scale, order, unmuted: true, codeTheme, themeScale, themeOrder, knownCodes }; } // PLAIN THEME / CODE LAYERS: data-derived names, palette assigned // alphabetically, muted downstream const field = layer === "theme" ? "Theme" : "Code Primary"; const order = dataLayerNames(field); const palette = layerPalettes[layer]; const map = new Map(order.map((n, i) => [n, palette[i % palette.length]])); const scale = (name) => map.get(applyOverride(name)) || "#cbd5e1"; return { scale, order, unmuted: false }; } return { fonts, styling, mute, applyOverride, isInvalid, layerColorScale, conceptMerges }; }34:T473,conceptRows = { const { isInvalid, applyOverride, conceptMerges } = chartKit; const rows = []; filteredData.forEach((d) => { if (String(d.Event_ID ?? "").trim() === "Pre-Workshop Interviews") return; if (isInvalid(d["Mapped Concepts"])) return; const rawConcepts = String(d["Mapped Concepts"]).trim(); const rawWeights = String(d["Mapped Concepts Weight"] ?? "").trim(); const concepts = rawConcepts .split(",") .map((c) => c .replace(/[\u200B-\u200D\uFEFF]/g, "") .replace(/\s+/g, " ") .trim() ) .filter((c) => !isInvalid(c)); const weights = rawWeights .split(",") .map((w) => parseFloat(w.trim())) .filter((w) => !isNaN(w) && w > 0); if (concepts.length === 0) return; concepts.forEach((concept, i) => { const merged = conceptMerges[concept.toLowerCase()] || concept; rows.push( Object.assign({}, d, { Concept: applyOverride(merged), ConceptWeight: weights[i] !== undefined ? weights[i] : 1 / concepts.length }) ); }); }); return rows; }35:T2899,stackedBarChart = ( data, { categoryField, groupField, colorLayer, // "theme", "code", "concept", "codeByTheme" title = "", excludeInterviews = true, extraRowFilter = null, valueAccessor = null, // (d) => number; defaults to counting rows sortCategories = "sankey", // "sankey" (default) or "alphabetical" normalize = normalizeStacks, width = 1100, height = 420, legendRows = 14, // MAX slots per column; grouped legends break at theme boundaries legendColumnWidth = 150, legendMaxChars = 22 } = {} ) => { const { fonts, styling, mute, applyOverride, isInvalid, layerColorScale } = chartKit; const headerHeight = 44; const titleCase = (s) => String(s).replace( /(^|[\s\-\/(])(\p{Ll})/gu, (m, pre, ch) => pre + ch.toUpperCase() ); // --- Count / sum --- const counts = new Map(); data.forEach((d) => { if ( excludeInterviews && String(d.Event_ID ?? "").trim() === "Pre-Workshop Interviews" ) return; if (extraRowFilter && !extraRowFilter(d)) return; if (isInvalid(d[categoryField])) return; const category = applyOverride(d[categoryField]); const group = !isInvalid(d[groupField]) ? applyOverride(d[groupField]) : "Unknown"; const value = valueAccessor ? valueAccessor(d) : 1; if (!counts.has(group)) counts.set(group, new Map()); const g = counts.get(group); g.set(category, (g.get(category) || 0) + value); }); const groups = Array.from(counts.keys()).sort(d3.ascending); // --- Colors --- const { scale: color, order: primedOrder, unmuted, codeTheme, themeOrder, knownCodes } = layerColorScale(colorLayer); const fill = (key) => (unmuted ? color(key) : mute(color(key))); const categoryOrder = [...primedOrder]; counts.forEach((g) => g.forEach((_, cat) => { if (color.domain) color(cat); if (!categoryOrder.includes(cat)) categoryOrder.push(cat); }) ); let activeCategories = categoryOrder.filter((cat) => groups.some((gr) => counts.get(gr).has(cat)) ); if (sortCategories === "alphabetical") { activeCategories = [...activeCategories].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }) ); } // Hidden (unassigned) codes are removed from stacks, legend, and totals if (knownCodes) { activeCategories = activeCategories.filter((cat) => knownCodes.has(cat)); } // --- Legend placement --- // Grouped (codeByTheme): theme blocks are atomic; a block starts a new // column if it won't fit in the remaining rows; blocks taller than a // full column split with a "(cont.)" header. Flat: fill-down, wrap. const grouped = !!codeTheme; const placed = []; if (grouped) { const buckets = new Map(); activeCategories.forEach((cat) => { const theme = codeTheme.get(cat) || "Unassigned"; if (!buckets.has(theme)) buckets.set(theme, []); buckets.get(theme).push(cat); }); const orderedThemes = [ ...(themeOrder || []).filter((t) => buckets.has(t)), ...[...buckets.keys()].filter((t) => !(themeOrder || []).includes(t)) ]; let col = 0, row = 0; orderedThemes.forEach((theme) => { const codes = buckets.get(theme); const blockSize = 1 + codes.length; if (row > 0 && row + blockSize > legendRows && blockSize <= legendRows) { col++; row = 0; } placed.push({ item: { type: "header", label: theme }, col, row }); row++; if (row >= legendRows) { col++; row = 0; } codes.forEach((cat) => { if ( row === 0 && placed.length && placed[placed.length - 1].item.type === "entry" ) { placed.push({ item: { type: "header", label: theme + " (cont.)" }, col, row }); row++; } placed.push({ item: { type: "entry", cat }, col, row }); row++; if (row >= legendRows) { col++; row = 0; } }); }); } else { let col = 0, row = 0; activeCategories.forEach((cat) => { placed.push({ item: { type: "entry", cat }, col, row }); row++; if (row >= legendRows) { col++; row = 0; } }); } const legendColumns = Math.max( 1, (placed.length ? d3.max(placed, (p) => p.col) : 0) + 1 ); const marginRight = 40 + legendColumns * legendColumnWidth; const margins = { top: 20, right: marginRight, bottom: 55, left: 55 }; // --- Stack --- const wide = groups.map((group) => { const row = { group }; activeCategories.forEach((cat) => { row[cat] = counts.get(group).get(cat) || 0; }); return row; }); const groupTotal = new Map( wide.map((r) => [r.group, d3.sum(activeCategories, (c) => r[c])]) ); const stacker = d3.stack().keys(activeCategories); if (normalize) stacker.offset(d3.stackOffsetExpand); const stackKeys = [...activeCategories].reverse(); const series = stacker.keys(stackKeys)(wide); const maxTotal = normalize ? 1 : d3.max(wide, (r) => d3.sum(activeCategories, (c) => r[c])); const fmtTotal = (v) => Number.isInteger(+v.toFixed(6)) ? String(Math.round(v)) : d3.format(".1f")(v); const fmtPct = d3.format(".0%"); const fmtPct1 = d3.format(".1%"); const x = d3 .scaleBand() .domain(groups) .range([margins.left, width - margins.right]) .padding(0.35); const y = d3 .scaleLinear() .domain([0, maxTotal]) .range([height - margins.bottom, margins.top]); if (!normalize) y.nice(); const yTicks = y.ticks(5); // --- Render --- const container = d3.create("div").style("width", "100%"); const svg = container .append("svg") .attr("viewBox", [0, -headerHeight, width, height + headerHeight]) .attr("xmlns", "http://www.w3.org/2000/svg") .style("width", "100%") .style("height", "auto") .style("background-color", "transparent"); svg .append("style") .text( "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=PT+Serif:wght@400;700&display=swap');" ); const headerGroup = svg.append("g"); headerGroup .append("text") .attr("x", margins.left) .attr("y", -headerHeight + 24) .text(title) .style("font-family", fonts.title) .style("font-size", "12px") .style("font-weight", "700") .style("letter-spacing", "0.01em") .style("fill", "#475569"); headerGroup .append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", -headerHeight + 32) .attr("y2", -headerHeight + 32) .attr("stroke", "#e2e8f0") .attr("stroke-width", 1.5); svg .append("g") .selectAll("line") .data(yTicks) .join("line") .attr("x1", margins.left) .attr("x2", width - margins.right) .attr("y1", (d) => y(d)) .attr("y2", (d) => y(d)) .attr("stroke", "#e2e8f0") .attr("stroke-width", (d) => (d === 0 ? 1.5 : 1)); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", (s) => fill(s.key)) .selectAll("rect") .data((s) => s.map((d) => Object.assign(d, { key: s.key }))) .join("rect") .attr("x", (d) => x(d.data.group)) .attr("y", (d) => y(d[1])) .attr("height", (d) => Math.max(0, y(d[0]) - y(d[1]))) .attr("width", x.bandwidth()) .attr("rx", 1) .attr("stroke", styling.segmentStroke) .attr("stroke-width", styling.segmentStrokeWidth) .append("title") .text((d) => normalize ? `${d.data.group} \u00B7 ${titleCase(d.key)}: ${fmtPct1( d[1] - d[0] )} (${fmtTotal(d.data[d.key])})` : `${d.data.group} \u00B7 ${titleCase(d.key)}: ${fmtTotal(d[1] - d[0])}` ); svg .append("g") .selectAll("text") .data(wide) .join("text") .attr("x", (d) => x(d.group) + x.bandwidth() / 2) .attr("y", (d) => (normalize ? y(1) - 6 : y(groupTotal.get(d.group)) - 6)) .attr("text-anchor", "middle") .text((d) => normalize ? `n=${fmtTotal(groupTotal.get(d.group))}` : fmtTotal(groupTotal.get(d.group)) ) .style("font-family", fonts.diagram) .style("font-size", normalize ? "9.5px" : "11px") .style("font-weight", "700") .style("fill", normalize ? "#64748b" : "#0f172a"); svg .append("g") .selectAll("text") .data(groups) .join("text") .attr("x", (d) => x(d) + x.bandwidth() / 2) .attr("y", height - margins.bottom + 20) .attr("text-anchor", "middle") .text((d) => d) .style("font-family", fonts.diagram) .style("font-size", "11px") .style("font-weight", "700") .style("fill", "#0f172a"); svg .append("g") .selectAll("text") .data(yTicks) .join("text") .attr("x", margins.left - 8) .attr("y", (d) => y(d) + 3) .attr("text-anchor", "end") .text((d) => (normalize ? fmtPct(d) : d)) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("fill", "#64748b"); const legend = svg .append("g") .attr( "transform", `translate(${width - margins.right + 25}, ${margins.top})` ); placed.forEach(({ item, col, row }) => { const gEl = legend .append("g") .attr("transform", `translate(${col * legendColumnWidth}, ${row * 20})`); if (item.type === "header") { gEl .append("text") .attr("x", 0) .attr("y", 9) .text(titleCase(item.label)) .style("font-family", fonts.title) .style("font-size", "10px") .style("font-weight", "700") .style("letter-spacing", "0.01em") .style("fill", "#64748b"); return; } const cat = item.cat; gEl .append("rect") .attr("width", 14) .attr("height", 11) .attr("rx", 1) .attr("fill", fill(cat)); const display = titleCase(cat); const label = display.length > legendMaxChars ? display.slice(0, legendMaxChars - 1).trimEnd() + "\u2026" : display; gEl .append("text") .attr("x", 20) .attr("y", 9) .text(label) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("fill", "#0f172a") .append("title") .text(display); }); return container.node(); }36:T1495,heatmapChart = ( data, { xField, yField, title = "", excludeInterviews = true, extraRowFilter = null, width = 1100, cellHeight = 24, marginLeft = 230, // room for y labels marginBottom = 110, // room for rotated x labels maxColor = "#0078B5" // view2's valuesMetrics blue as the ramp endpoint } = {} ) => { const { fonts, applyOverride, isInvalid } = chartKit; const headerHeight = 44; const marginTop = 20; const marginRight = 30; const titleCase = (s) => String(s).replace( /(^|[\s\-\/(])(\p{Ll})/gu, (m, pre, ch) => pre + ch.toUpperCase() ); const alphaSort = (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }); // --- Count co-occurrences --- const counts = new Map(); // "y\u0000x" -> count const xSet = new Set(); const ySet = new Set(); data.forEach((d) => { if ( excludeInterviews && String(d.Event_ID ?? "").trim() === "Pre-Workshop Interviews" ) return; if (extraRowFilter && !extraRowFilter(d)) return; if (isInvalid(d[xField]) || isInvalid(d[yField])) return; const xVal = applyOverride(d[xField]); const yVal = applyOverride(d[yField]); xSet.add(xVal); ySet.add(yVal); const key = `${yVal}\u0000${xVal}`; counts.set(key, (counts.get(key) || 0) + 1); }); const xCats = [...xSet].sort(alphaSort); const yCats = [...ySet].sort(alphaSort); const maxCount = d3.max(counts.values()) || 1; const height = marginTop + yCats.length * cellHeight + marginBottom; const x = d3 .scaleBand() .domain(xCats) .range([marginLeft, width - marginRight]) .padding(0.06); const y = d3 .scaleBand() .domain(yCats) .range([marginTop, marginTop + yCats.length * cellHeight]) .padding(0.12); // Sequential ramp: near-white -> deep blue; zero cells get a faint // slate wash so the grid stays visible const ramp = d3.interpolateRgb("#f4f7fa", maxColor); const cellFill = (v) => v > 0 ? ramp(0.15 + 0.85 * (v / maxCount)) : "#f1f5f9"; // In-cell count labels flip to white once the fill gets dark const labelFill = (v) => (v / maxCount > 0.55 ? "#ffffff" : "#0f172a"); // --- Render --- const container = d3.create("div").style("width", "100%"); const svg = container .append("svg") .attr("viewBox", [0, -headerHeight, width, height + headerHeight]) .attr("xmlns", "http://www.w3.org/2000/svg") .style("width", "100%") .style("height", "auto") .style("background-color", "transparent"); svg .append("style") .text( "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=PT+Serif:wght@400;700&display=swap');" ); const headerGroup = svg.append("g"); headerGroup .append("text") .attr("x", marginLeft) .attr("y", -headerHeight + 24) .text(title || `${titleCase(yField)} \u00D7 ${titleCase(xField)}`) .style("font-family", fonts.title) .style("font-size", "12px") .style("font-weight", "700") .style("letter-spacing", "0.01em") .style("fill", "#475569"); headerGroup .append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", -headerHeight + 32) .attr("y2", -headerHeight + 32) .attr("stroke", "#e2e8f0") .attr("stroke-width", 1.5); // Cells const cells = []; yCats.forEach((yVal) => xCats.forEach((xVal) => { cells.push({ x: xVal, y: yVal, v: counts.get(`${yVal}\u0000${xVal}`) || 0 }); }) ); svg .append("g") .selectAll("rect") .data(cells) .join("rect") .attr("x", (d) => x(d.x)) .attr("y", (d) => y(d.y)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("rx", 1) .attr("fill", (d) => cellFill(d.v)) .append("title") .text((d) => `${d.y} \u00D7 ${d.x}: ${d.v}`); // Count labels inside nonzero cells (skipped if cells get too narrow) if (x.bandwidth() >= 22) { svg .append("g") .selectAll("text") .data(cells.filter((d) => d.v > 0)) .join("text") .attr("x", (d) => x(d.x) + x.bandwidth() / 2) .attr("y", (d) => y(d.y) + y.bandwidth() / 2 + 3) .attr("text-anchor", "middle") .text((d) => d.v) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("font-weight", "700") .style("fill", (d) => labelFill(d.v)) .style("pointer-events", "none"); } // Y labels svg .append("g") .selectAll("text") .data(yCats) .join("text") .attr("x", marginLeft - 8) .attr("y", (d) => y(d) + y.bandwidth() / 2 + 3) .attr("text-anchor", "end") .text((d) => titleCase(d)) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("fill", "#0f172a"); // X labels, rotated svg .append("g") .selectAll("text") .data(xCats) .join("text") .attr( "transform", (d) => `translate(${x(d) + x.bandwidth() / 2}, ${ marginTop + yCats.length * cellHeight + 10 }) rotate(-40)` ) .attr("text-anchor", "end") .text((d) => titleCase(d)) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("fill", "#0f172a"); return container.node(); }37:T1bd8,heatmapChartColorized = ( data, { xField, yField, title = "", excludeInterviews = true, extraRowFilter = null, width = 1100, cellHeight = 24, marginLeft = 230, marginBottom = 110, maxColor = "#0078B5" // fallback ramp when neither axis is categorical } = {} ) => { const { fonts, mute, applyOverride, isInvalid, layerColorScale } = chartKit; const headerHeight = 44; const marginTop = 20; const marginRight = 30; const titleCase = (s) => String(s).replace( /(^|[\s\-\/(])(\p{Ll})/gu, (m, pre, ch) => pre + ch.toUpperCase() ); const alphaSort = (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }); function fieldColor(field) { if (field === "Theme") { const { scale } = layerColorScale("theme"); return (name) => mute(scale(name)); } if (field === "Concept") { const { scale } = layerColorScale("concept"); return (name) => scale(name); } if (field === "Code Primary") { const { scale } = layerColorScale("codeByTheme"); return (name) => scale(name); } return null; } const xColor = fieldColor(xField); const yColor = fieldColor(yField); // --- Count co-occurrences --- const counts = new Map(); const xSet = new Set(); const ySet = new Set(); data.forEach((d) => { if ( excludeInterviews && String(d.Event_ID ?? "").trim() === "Pre-Workshop Interviews" ) return; if (extraRowFilter && !extraRowFilter(d)) return; if (isInvalid(d[xField]) || isInvalid(d[yField])) return; const xVal = applyOverride(d[xField]); const yVal = applyOverride(d[yField]); xSet.add(xVal); ySet.add(yVal); const key = `${yVal}\u0000${xVal}`; counts.set(key, (counts.get(key) || 0) + 1); }); const xCats = [...xSet].sort(alphaSort); const yCats = [...ySet].sort(alphaSort); const maxCount = d3.max(counts.values()) || 1; const height = marginTop + yCats.length * cellHeight + marginBottom; const x = d3 .scaleBand() .domain(xCats) .range([marginLeft, width - marginRight]) .padding(0.06); const y = d3 .scaleBand() .domain(yCats) .range([marginTop, marginTop + yCats.length * cellHeight]) .padding(0.12); // --- Cell coloring --- // Hue + saturation come from the category's chart color; LIGHTNESS is a // shared scale (0.93 at the faintest -> 0.38 at maxCount) so intensity // reads identically across rows regardless of hue. Saturation gets a // floor so pale palette entries (muted yellow/beige) still deepen // visibly. Zero cells: faint slate, keeps the grid without implying data. const L_MAX = 0.93, L_MIN = 0.38; const lightnessFor = (v) => L_MAX - (L_MAX - L_MIN) * (v / maxCount); const hueAxis = yColor ? "y" : xColor ? "x" : null; const hueScale = yColor || xColor; const fallbackRamp = d3.interpolateRgb("#f4f7fa", maxColor); const cellFill = (d) => { if (d.v === 0) return "#f1f5f9"; if (!hueScale) return fallbackRamp(0.15 + 0.85 * (d.v / maxCount)); const base = d3.hsl(hueScale(hueAxis === "y" ? d.y : d.x)); return d3.hsl(base.h, Math.max(0.35, base.s), lightnessFor(d.v)).toString(); }; // Text flips to white once the shared lightness drops below mid const labelFill = (d) => { if (d.v === 0) return "#0f172a"; if (!hueScale) return d.v / maxCount > 0.55 ? "#ffffff" : "#0f172a"; return lightnessFor(d.v) < 0.55 ? "#ffffff" : "#0f172a"; }; // --- Render --- const container = d3.create("div").style("width", "100%"); const svg = container .append("svg") .attr("viewBox", [0, -headerHeight, width, height + headerHeight]) .attr("xmlns", "http://www.w3.org/2000/svg") .style("width", "100%") .style("height", "auto") .style("background-color", "transparent"); svg .append("style") .text( "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=PT+Serif:wght@400;700&display=swap');" ); const headerGroup = svg.append("g"); headerGroup .append("text") .attr("x", marginLeft) .attr("y", -headerHeight + 24) .text(title || `${titleCase(yField)} \u00D7 ${titleCase(xField)}`) .style("font-family", fonts.title) .style("font-size", "12px") .style("font-weight", "700") .style("letter-spacing", "0.01em") .style("fill", "#475569"); headerGroup .append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", -headerHeight + 32) .attr("y2", -headerHeight + 32) .attr("stroke", "#e2e8f0") .attr("stroke-width", 1.5); const cells = []; yCats.forEach((yVal) => xCats.forEach((xVal) => { cells.push({ x: xVal, y: yVal, v: counts.get(`${yVal}\u0000${xVal}`) || 0 }); }) ); svg .append("g") .selectAll("rect") .data(cells) .join("rect") .attr("x", (d) => x(d.x)) .attr("y", (d) => y(d.y)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("rx", 1) .attr("fill", cellFill) .append("title") .text((d) => `${d.y} \u00D7 ${d.x}: ${d.v}`); if (x.bandwidth() >= 22) { svg .append("g") .selectAll("text") .data(cells.filter((d) => d.v > 0)) .join("text") .attr("x", (d) => x(d.x) + x.bandwidth() / 2) .attr("y", (d) => y(d.y) + y.bandwidth() / 2 + 3) .attr("text-anchor", "middle") .text((d) => d.v) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("font-weight", "700") .style("fill", labelFill) .style("pointer-events", "none"); } // Y labels, swatched when categorical const yLabelG = svg.append("g").selectAll("g").data(yCats).join("g"); if (yColor) { yLabelG .append("rect") .attr("x", marginLeft - 20) .attr("y", (d) => y(d) + y.bandwidth() / 2 - 5) .attr("width", 10) .attr("height", 10) .attr("rx", 1) .attr("fill", (d) => yColor(d)); } yLabelG .append("text") .attr("x", yColor ? marginLeft - 26 : marginLeft - 8) .attr("y", (d) => y(d) + y.bandwidth() / 2 + 3) .attr("text-anchor", "end") .text((d) => titleCase(d)) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("fill", "#0f172a"); // X labels (rotated), swatched when categorical const xBase = marginTop + yCats.length * cellHeight; const xLabelG = svg.append("g").selectAll("g").data(xCats).join("g"); if (xColor) { xLabelG .append("rect") .attr("x", (d) => x(d) + x.bandwidth() / 2 - 5) .attr("y", xBase + 4) .attr("width", 10) .attr("height", 10) .attr("rx", 1) .attr("fill", (d) => xColor(d)); } xLabelG .append("text") .attr( "transform", (d) => `translate(${x(d) + x.bandwidth() / 2}, ${ xBase + (xColor ? 24 : 10) }) rotate(-40)` ) .attr("text-anchor", "end") .text((d) => titleCase(d)) .style("font-family", fonts.diagram) .style("font-size", "9.5px") .style("fill", "#0f172a"); return container.node(); }38:[] 2f:{"title":"NAEP Workshop 1 Data analysis","cells":[{"id":0,"value":"# NAEP Workshop 1 Data analysis","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"// Cell 1: The upload button\nviewof workshopFile = Inputs.file({label: \"Upload Workshop CSV\", accept: \".csv\", required: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"// -------------------------------------------------------------------------\n// COMPANION CELL: paste this as its own Observable cell (it must exist or\n// view2 will error). Toggling it re-runs view2 automatically.\n//\n viewof showInterviews = Inputs.toggle({\n label: \"Include pre-workshop interviews\",\n value: false\n })\n// -------------------------------------------------------------------------\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"// Cell 2: The automatic parser (this replaces 'rawData' from our earlier logic)\nrawData = (await workshopFile.csv({ typed: true })).map((d) => ({\n ...d,\n Group_ID: d.Group_ID\n ? d.Group_ID.replace(\" \", \"\")\n .replace(\"Group\", \"Table\")\n .split(/(?<=^.{5})/)\n .join(\" \")\n : undefined\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"// Dropdown for Group ID\nviewof selectedGroup = Inputs.select(\n [null, ...new Set(rawData.map(d => d.Group_ID).filter(Boolean))], \n { label: \"Filter by Group ID\", format: x => x === null ? \"All Groups\" : x }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"// Dropdown for Location ID\nviewof selectedLocation = Inputs.select(\n [null, ...new Set(rawData.map(d => d.Location_ID).filter(Boolean))], \n { label: \"Filter by Location ID\", format: x => x === null ? \"All Locations\" : x }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"filteredData = {\n // 1. Apply interactive filters\n let data = rawData;\n if (selectedGroup) data = data.filter(d => d.Group_ID === selectedGroup);\n if (selectedLocation) data = data.filter(d => d.Location_ID === selectedLocation);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"d3Sankey = require(\"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"nameOverrides = ({\n \"ai teammate\": \"AI Collaboration\",\n \"editorialization, narration, & generative sense-making\": \"Editorialization\",\n \"editorialization and narration\": \"Editorialization\",\n \"adaptive content and experiences\": \"Adaptive Content\",\n \"personalized dashboard and generative tool\": \"Generative Tools\",\n \"headless naep\": \"NAEP IO\",\n \"interactive narratives and explainers\": \"Accessible Interactions\",\n \"next next-gen\": \"Next Next Gen NAEP\",\n curated: \"Curation\",\n comparison: \"Comparison\",\n \"data reliability\": \"Data reliability\",\n \"data ux\": \"Accessiblity\",\n \"ai building blocks\": \"AI building blocks\",\n \"ai implementation and infrastructure\": \"AI Infra\",\n \"democratizing data\": \"Democratizing data\",\n \"internal operations modernization\": \"Modernization\",\n ai: \"AI-friendly\",\n \"ai-friendly\": \"AI-friendly\",\n \"understanding user needs\": \"User Needs\",\n \"accurate communication\": \"Accuracy\",\n \"user-specific\": \"Contextual Support\",\n \"continued engagements\": \"Extended Engagement\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"codeThemeOverrides = ({\n \"policy implementation\": \"Editorialization\",\n \"naep perception\": \"Data Guardrails\",\n \"user specific\": \"Modernization\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"viewof normalizeStacks = Inputs.toggle({\n label: \"Normalize Stacks\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"hideUnassigned = Inputs.toggle({ label: \"Hide Unassigned Theme\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"stackedBarChart(filteredData, {\n height: 600,\n categoryField: \"Code Primary\",\n groupField: \"Group_ID\",\n colorLayer: \"codeByTheme\",\n title: \"Code Assignments per Table, Colored by Theme\",\n legendRows: 24,\n legendColumnWidth: 120\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"themesByTable = stackedBarChart(filteredData, {\n categoryField: \"Theme\",\n groupField: \"Group_ID\",\n colorLayer: \"theme\",\n title: \"Theme Assignments per Table\",\n sortCategories: \"alphabetical\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"conceptsByTable = stackedBarChart(conceptRows, {\n categoryField: \"Concept\",\n groupField: \"Group_ID\",\n colorLayer: \"concept\",\n title: \"Design Concepts per Table\",\n // valueAccessor: (d) => d.ConceptWeight,\n legendColumnWidth: 120\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"conceptsByTheme = stackedBarChart(conceptRows, {\n categoryField: \"Concept\",\n groupField: \"Theme\",\n colorLayer: \"concept\",\n title: \"How Themes Composed Design Concepts\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"viewof heatmapAxes = Inputs.form({\n x: Inputs.select(\n [\n \"Group_ID\",\n \"Theme\",\n \"Code Primary\",\n \"Concept\",\n \"Activity_ID\",\n \"Location_ID\"\n ],\n { label: \"X axis\", value: \"Theme\" }\n ),\n y: Inputs.select(\n [\n \"Theme\",\n \"Code Primary\",\n \"Concept\",\n \"Group_ID\",\n \"Activity_ID\",\n \"Location_ID\"\n ],\n { label: \"Y axis\", value: \"Concept\" }\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"heatmapView = {\n const { x, y } = heatmapAxes;\n const usesConcept = x === \"Concept\" || y === \"Concept\";\n const source = usesConcept ? conceptRows : filteredData;\n\n if (x === y) {\n return html`

\n Pick two different fields for the axes.

`;\n }\n\n return heatmapChart(source, { xField: x, yField: y });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"heatmapView2 = {\n const { x, y } = heatmapAxes;\n const usesConcept = x === \"Concept\" || y === \"Concept\";\n const source = usesConcept ? conceptRows : filteredData;\n\n if (x === y) {\n return html`

\n Pick two different fields for the axes.

`;\n }\n\n return heatmapChartColorized(source, { xField: x, yField: y });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}