2b:null 2c:["$","title",null,{"children":"FLAIRS-39th Paper | NIU ReDAV | Observable"}] 31:T3ad8,viewof controls = { if (!rawData || !topicColumns) return html`

`; const container = html`

⚙️ Control Panel

Dataset: ${rawData.length.toLocaleString()}

Sample Size

Topic Granularity

Color Scheme

Filter by Class

Showing: 5,000

Spoken: 2,500 (50%)

Written: 2,500 (50%)

🎯 Unique Topics: 5

`; // Get elements const sampleSizeSelect = container.querySelector('#sampleSize'); const topicSelect = container.querySelector('#topicSelect'); const colorSchemeSelect = container.querySelector('#colorScheme'); const classFilterDiv = container.querySelector('#classFilter'); const filterBtns = classFilterDiv.querySelectorAll('.filter-btn'); // Stats elements const totalCountEl = container.querySelector('#totalCount'); const spokenCountEl = container.querySelector('#spokenCount'); const spokenPercentEl = container.querySelector('#spokenPercent'); const writtenCountEl = container.querySelector('#writtenCount'); const writtenPercentEl = container.querySelector('#writtenPercent'); const topicCountEl = container.querySelector('#topicCount'); // State object const state = { sampleSize: 5000, selectedTopic: topicColumns[0], colorScheme: "tableau10", classFilter: "All" }; // Function to update stats display function updateStatsDisplay() { // This will be called from outside when data changes // Initial display uses placeholder values } // Expose stats update function container.updateStats = (stats) => { totalCountEl.textContent = stats.total.toLocaleString(); spokenCountEl.textContent = stats.spoken.toLocaleString(); spokenPercentEl.textContent = `(${stats.spokenPercent}%)`; writtenCountEl.textContent = stats.written.toLocaleString(); writtenPercentEl.textContent = `(${stats.writtenPercent}%)`; topicCountEl.textContent = stats.uniqueTopics.toLocaleString(); }; // Event handlers sampleSizeSelect.addEventListener('change', () => { state.sampleSize = parseInt(sampleSizeSelect.value); container.value = {...state}; container.dispatchEvent(new CustomEvent("input")); }); topicSelect.addEventListener('change', () => { state.selectedTopic = topicSelect.value; container.value = {...state}; container.dispatchEvent(new CustomEvent("input")); }); colorSchemeSelect.addEventListener('change', () => { state.colorScheme = colorSchemeSelect.value; container.value = {...state}; container.dispatchEvent(new CustomEvent("input")); }); filterBtns.forEach(btn => { btn.addEventListener('click', () => { filterBtns.forEach(b => { b.style.background = 'transparent'; b.style.color = b.dataset.value === 'All' ? '#2ECC71' : b.dataset.value === 'Spoken' ? '#E74C3C' : '#3498DB'; }); btn.style.background = btn.dataset.value === 'All' ? '#2ECC71' : btn.dataset.value === 'Spoken' ? '#E74C3C' : '#3498DB'; btn.style.color = 'white'; state.classFilter = btn.dataset.value; container.value = {...state}; container.dispatchEvent(new CustomEvent("input")); }); }); container.value = state; return container; }32:T22e5,chart = { const width = 900; const height = 600; const margin = {top: 50, right: 40, bottom: 60, left: 70}; // Create SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("background", "linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)") .style("border-radius", "16px") .style("box-shadow", "0 10px 40px rgba(0,0,0,0.3)"); // Scales const xExtent = d3.extent(filteredData, d => d.x); const yExtent = d3.extent(filteredData, d => d.y); const xPadding = (xExtent[1] - xExtent[0]) * 0.05; const yPadding = (yExtent[1] - yExtent[0]) * 0.05; const xScale = d3.scaleLinear() .domain([xExtent[0] - xPadding, xExtent[1] + xPadding]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain([yExtent[0] - yPadding, yExtent[1] + yPadding]) .range([height - margin.bottom, margin.top]); // Store original scales for zoom reset const xScaleOriginal = xScale.copy(); const yScaleOriginal = yScale.copy(); // Color scale const uniqueTopics = [...new Set(filteredData.map(d => d[controls.selectedTopic]))].sort((a,b) => a - b); const colorSchemes = { tableau10: d3.schemeTableau10, category10: d3.schemeCategory10, set1: d3.schemeSet1, set2: d3.schemeSet2, set3: d3.schemeSet3, paired: d3.schemePaired, dark2: d3.schemeDark2, accent: d3.schemeAccent }; const colorScale = d3.scaleOrdinal() .domain(uniqueTopics) .range(colorSchemes[controls.colorScheme] || d3.schemeTableau10); // Clip path for zoom svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); // Background for chart area const chartBackground = svg.append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "rgba(255,255,255,0.02)"); // Axes groups const xAxisGroup = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .attr("class", "x-axis"); const yAxisGroup = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .attr("class", "y-axis"); // Style axes function updateAxes() { xAxisGroup.call(d3.axisBottom(xScale).ticks(10)) .call(g => g.select(".domain").attr("stroke", "#555")) .call(g => g.selectAll(".tick line").attr("stroke", "#555")) .call(g => g.selectAll(".tick text").attr("fill", "#aaa").attr("font-size", "11px")); yAxisGroup.call(d3.axisLeft(yScale).ticks(10)) .call(g => g.select(".domain").attr("stroke", "#555")) .call(g => g.selectAll(".tick line").attr("stroke", "#555")) .call(g => g.selectAll(".tick text").attr("fill", "#aaa").attr("font-size", "11px")); } updateAxes(); // Axis labels svg.append("text") .attr("x", width / 2) .attr("y", height - 15) .attr("fill", "#aaa") .attr("text-anchor", "middle") .attr("font-size", "12px") .text("UMAP Dimension 1"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("fill", "#aaa") .attr("text-anchor", "middle") .attr("font-size", "12px") .text("UMAP Dimension 2"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("fill", "#fff") .attr("font-size", "16px") .attr("font-weight", "bold") .text(`Document Embeddings — ${controls.selectedTopic.replace('topic_', '')} Topics`); // Instructions svg.append("text") .attr("x", width / 2) .attr("y", 42) .attr("text-anchor", "middle") .attr("fill", "#666") .attr("font-size", "11px") .text("🖱️ Click point to select • Click elsewhere to deselect • Scroll to zoom"); // Points group with clipping const pointsGroup = svg.append("g") .attr("clip-path", "url(#clip)"); // Define shapes const trianglePath = d3.symbol().type(d3.symbolTriangle).size(60); const circlePath = d3.symbol().type(d3.symbolCircle).size(50); // Track selected point let selectedPoint = null; // Helper function to update selection function updateSelection(point) { viewof hoveredPoint.value = point; viewof hoveredPoint.dispatchEvent(new CustomEvent("input")); } // Draw points const points = pointsGroup.selectAll("path.point") .data(filteredData) .join("path") .attr("class", "point") .attr("transform", d => `translate(${xScale(d.x)},${yScale(d.y)})`) .attr("d", d => d.label === 0 ? circlePath() : trianglePath()) .attr("fill", d => colorScale(d[controls.selectedTopic])) .attr("stroke", "rgba(255,255,255,0.3)") .attr("stroke-width", 0.5) .attr("opacity", 0.75) .style("cursor", "pointer") // CLICK to select .on("click", function(event, d) { event.stopPropagation(); // Reset all points points .attr("stroke", "rgba(255,255,255,0.3)") .attr("stroke-width", 0.5) .attr("opacity", 0.75); // Highlight clicked point d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("opacity", 1) .raise(); selectedPoint = d; updateSelection(d); }) // Hover effect (preview, but don't select) .on("mouseenter", function(event, d) { if (selectedPoint !== d) { d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .attr("opacity", 0.9); } }) .on("mouseleave", function(event, d) { if (selectedPoint !== d) { d3.select(this) .attr("stroke", "rgba(255,255,255,0.3)") .attr("stroke-width", 0.5) .attr("opacity", 0.75); } }); // CLICK on background/SVG to deselect svg.on("click", function(event) { // Reset all points points .attr("stroke", "rgba(255,255,255,0.3)") .attr("stroke-width", 0.5) .attr("opacity", 0.75); selectedPoint = null; updateSelection(null); }); // Zoom behavior const zoom = d3.zoom() .scaleExtent([0.5, 20]) .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) .translateExtent([[-200, -200], [width + 200, height + 200]]) .filter(event => !event.button) .on("zoom", zoomed); function zoomed(event) { const transform = event.transform; // Update scales const newXScale = transform.rescaleX(xScaleOriginal); const newYScale = transform.rescaleY(yScaleOriginal); // Update points points.attr("transform", d => `translate(${newXScale(d.x)},${newYScale(d.y)})`); // Update axes xAxisGroup.call(d3.axisBottom(newXScale).ticks(10)) .call(g => g.select(".domain").attr("stroke", "#555")) .call(g => g.selectAll(".tick line").attr("stroke", "#555")) .call(g => g.selectAll(".tick text").attr("fill", "#aaa").attr("font-size", "11px")); yAxisGroup.call(d3.axisLeft(newYScale).ticks(10)) .call(g => g.select(".domain").attr("stroke", "#555")) .call(g => g.selectAll(".tick line").attr("stroke", "#555")) .call(g => g.selectAll(".tick text").attr("fill", "#aaa").attr("font-size", "11px")); } // Apply zoom to SVG svg.call(zoom); // Double-click to reset zoom svg.on("dblclick.zoom", () => { svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); }); // Legend (UPDATED - larger background) const legend = svg.append("g") .attr("transform", `translate(${width - 40}, ${margin.top + 10})`); legend.append("rect") .attr("x", -65) .attr("y", -15) .attr("width", 75) .attr("height", 75) .attr("fill", "rgba(0,0,0,0.6)") .attr("rx", 10); legend.append("text") .attr("x", -27) .attr("y", 8) .attr("fill", "#aaa") .attr("font-size", "11px") .attr("text-anchor", "middle") .text("Class"); legend.append("path") .attr("d", circlePath()) .attr("transform", "translate(-45, 28)") .attr("fill", "none") .attr("stroke", "#737373") .attr("stroke-width", 2); legend.append("text") .attr("x", -27) .attr("y", 32) .attr("fill", "#ccc") .attr("font-size", "10px") .text("Spoken"); legend.append("path") .attr("d", trianglePath()) .attr("transform", "translate(-45, 48)") .attr("fill", "none") .attr("stroke", "#737373") .attr("stroke-width", 2); legend.append("text") .attr("x", -27) .attr("y", 52) .attr("fill", "#ccc") .attr("font-size", "10px") .text("Written"); return svg.node(); }33:T136c,hoverPanel = { if (hoveredPoint === null) { return html`

🔍

Click a point to see details

Click any data point in the chart above to view its information

`; } const d = hoveredPoint; const labelName = d.label === 0 ? "Spoken" : "Written"; const labelIcon = d.label === 0 ? "🎤" : "📝"; const labelColor = d.label === 0 ? "#E74C3C" : "#3498DB"; const labelGradient = d.label === 0 ? "linear-gradient(135deg, #E74C3C 0%, #c0392b 100%)" : "linear-gradient(135deg, #3498DB 0%, #2980b9 100%)"; // Get topic label if available const topicLabelCol = controls.selectedTopic + "_Label"; const topicLabel = d[topicLabelCol] || null; // Find the index in the original rawData const sentenceIndex = rawData.findIndex(row => row.text === d.text); return html`

${labelIcon} Document Details

Document Text

"${d.text}"

Index

${sentenceIndex >= 0 ? sentenceIndex.toLocaleString() : 'N/A'}

Topic ID

${d[controls.selectedTopic]}

Class

${labelName}

${topicLabel ? html`

Topic Label: ${topicLabel}

` : ''}

`; }34:T8e4,viewof distributionView = { const container = html`

View:

`; const buttons = container.querySelectorAll('.view-btn'); let currentView = "topic"; buttons.forEach(btn => { btn.addEventListener('click', () => { buttons.forEach(b => { b.style.background = 'transparent'; b.style.color = '#888'; }); btn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; btn.style.color = 'white'; currentView = btn.dataset.value; container.value = currentView; container.dispatchEvent(new CustomEvent("input")); }); }); container.value = currentView; return container; }35:T1913,distributionChart = { // Get topic counts const topicCounts = d3.rollup(filteredData, v => v.length, d => d[controls.selectedTopic]); const topTopics = Array.from(topicCounts) .sort((a, b) => b[1] - a[1]) .slice(0, 25) .map(d => d[0]); if (distributionView === "topic") { // === TOPIC DISTRIBUTION VIEW === const topicData = Array.from(topicCounts, ([topic, count]) => ({topic, count})) .sort((a, b) => b.count - a.count) .slice(0, 25); return html`

📊 Document Count by Topic (Top 25)

${controls.selectedTopic.replace('topic_', '')} Topics

${Plot.plot({ width: 860, height: 280, marginBottom: 50, marginLeft: 50, marginTop: 10, style: { background: "transparent" }, x: { label: "Topic ID", tickRotate: -45, labelAnchor: "center" }, y: { label: "Document Count", grid: true, gridColor: "#333" }, marks: [ Plot.barY(topicData, { x: "topic", y: "count", fill: "topic", tip: { format: { x: d => `Topic ${d}`, y: d => `${d.toLocaleString()} documents` } } }), Plot.ruleY([0], {stroke: "#444"}) ], color: { scheme: controls.colorScheme } })}

`; } else { // === CLASS DISTRIBUTION VIEW === const distData = []; for (const topic of topTopics) { const topicDocs = filteredData.filter(d => d[controls.selectedTopic] === topic); const spoken = topicDocs.filter(d => d.label === 0).length; const written = topicDocs.filter(d => d.label === 1).length; const total = spoken + written; distData.push({ topic, class: "Spoken", count: spoken, percent: ((spoken / total) * 100).toFixed(1) }); distData.push({ topic, class: "Written", count: written, percent: ((written / total) * 100).toFixed(1) }); } return html`

⚖️ Spoken vs Written Distribution by Topic (Top 25)

Spoken Written

${Plot.plot({ width: 860, height: 280, marginBottom: 50, marginLeft: 50, marginTop: 10, style: { background: "transparent" }, x: { label: "Topic ID", tickRotate: -45, labelAnchor: "center" }, y: { label: "Document Count", grid: true, gridColor: "#333" }, color: { domain: ["Spoken", "Written"], range: ["#E74C3C", "#3498DB"] }, marks: [ Plot.barY(distData, { x: "topic", y: "count", fill: "class", tip: { format: { fill: d => d, y: d => `${d.toLocaleString()} documents` } } }), Plot.ruleY([0], {stroke: "#444"}) ] })}

${filteredData.filter(d => d.label === 0).length.toLocaleString()}

Total Spoken

${filteredData.filter(d => d.label === 1).length.toLocaleString()}

Total Written

${((filteredData.filter(d => d.label === 0).length / filteredData.length) * 100).toFixed(1)}%

Spoken Ratio

`; } }36:T970,viewof comparisonControls = { const container = html`

Level 1

⟷

Level 2

`; const level1 = container.querySelector('#level1'); const level2 = container.querySelector('#level2'); const state = { level1: topicColumns[0], level2: topicColumns[Math.floor(topicColumns.length/2)] }; level1.addEventListener('change', () => { state.level1 = level1.value; container.value = {...state}; container.dispatchEvent(new CustomEvent("input")); }); level2.addEventListener('change', () => { state.level2 = level2.value; container.value = {...state}; container.dispatchEvent(new CustomEvent("input")); }); container.value = state; return container; }37:T581,comparisonPlots = html`

${Plot.plot({ width: 430, height: 380, style: { background: "linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)", borderRadius: "16px" }, color: {scheme: controls.colorScheme}, marks: [ Plot.dot(sampledData, { x: "x", y: "y", fill: d => d[comparisonControls.level1], symbol: d => d.label === 0 ? "circle" : "triangle", r: 3, opacity: 0.6 }) ], title: `${comparisonControls.level1.replace('topic_', '')} Topics` })}

${Plot.plot({ width: 430, height: 380, style: { background: "linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)", borderRadius: "16px" }, color: {scheme: controls.colorScheme}, marks: [ Plot.dot(sampledData, { x: "x", y: "y", fill: d => d[comparisonControls.level2], symbol: d => d.label === 0 ? "circle" : "triangle", r: 3, opacity: 0.6 }) ], title: `${comparisonControls.level2.replace('topic_', '')} Topics` })}

`38:T27f0,viewof controls_m2 = { // Initial state const state = { correctnessFilter: "all", classFilter: "all", sampleIndex: 0 }; // Build the UI const container = html`

⚙️ Control Panel

Total: ${allSamples.length} samples

🎯 Prediction Result

🏷️ True Class

📑 Select Sample

Sample 1 of 100 | Index: #0

Index

Filtered

Correct

Incorrect

Accuracy

`; // Get DOM elements const correctnessSelect = container.querySelector('#correctnessFilter'); const classSelect = container.querySelector('#classFilter'); const slider = container.querySelector('#sampleSlider'); const prevBtn = container.querySelector('#prevBtn'); const nextBtn = container.querySelector('#nextBtn'); const currentNumEl = container.querySelector('#currentNum'); const totalNumEl = container.querySelector('#totalNum'); const sampleIdEl = container.querySelector('#sampleId'); const statIndex = container.querySelector('#statIndex'); const statFiltered = container.querySelector('#statFiltered'); const statCorrect = container.querySelector('#statCorrect'); const statIncorrect = container.querySelector('#statIncorrect'); const statAccuracy = container.querySelector('#statAccuracy'); // Function to filter samples based on current state function getFilteredSamples() { let filtered = allSamples; if (state.correctnessFilter === 'correct') { filtered = filtered.filter(s => s.correct === 1); } else if (state.correctnessFilter === 'incorrect') { filtered = filtered.filter(s => s.correct === 0); } if (state.classFilter === 'spoken') { filtered = filtered.filter(s => s.true_label === 0); } else if (state.classFilter === 'written') { filtered = filtered.filter(s => s.true_label === 1); } return filtered; } // Function to update the UI display function updateUI() { const filtered = getFilteredSamples(); const maxIndex = Math.max(0, filtered.length - 1); // Update slider slider.max = maxIndex; slider.value = Math.min(state.sampleIndex, maxIndex); state.sampleIndex = parseInt(slider.value); // Update display currentNumEl.textContent = filtered.length > 0 ? state.sampleIndex + 1 : 0; totalNumEl.textContent = filtered.length; // Get current sample's original ID const currentSample = filtered[state.sampleIndex]; const originalId = currentSample ? currentSample.id : 'N/A'; sampleIdEl.textContent = `#${originalId}`; statIndex.textContent = originalId; // Update stats const correct = filtered.filter(s => s.correct === 1).length; const incorrect = filtered.length - correct; statFiltered.textContent = filtered.length; statCorrect.textContent = correct; statIncorrect.textContent = incorrect; statAccuracy.textContent = filtered.length > 0 ? (correct / filtered.length * 100).toFixed(1) + '%' : '0%'; } // Function to emit change function emitChange() { updateUI(); container.value = {...state}; container.dispatchEvent(new CustomEvent('input')); } // Event listeners correctnessSelect.addEventListener('change', () => { state.correctnessFilter = correctnessSelect.value; state.sampleIndex = 0; emitChange(); }); classSelect.addEventListener('change', () => { state.classFilter = classSelect.value; state.sampleIndex = 0; emitChange(); }); slider.addEventListener('input', () => { state.sampleIndex = parseInt(slider.value); emitChange(); }); prevBtn.addEventListener('click', () => { if (state.sampleIndex > 0) { state.sampleIndex--; emitChange(); } }); nextBtn.addEventListener('click', () => { const filtered = getFilteredSamples(); if (state.sampleIndex < filtered.length - 1) { state.sampleIndex++; emitChange(); } }); // Initialize updateUI(); container.value = state; return container; }39:Te01,hoverPanel_m2 = { if (!currentSample) { return html`

🔍

No samples match your filters

Try changing the filters above

`; } const s = currentSample; const trueColor = s.true_label === 0 ? '#E74C3C' : '#3498DB'; const trueIcon = s.true_label === 0 ? '🎤' : '📝'; const predColor = s.prediction === 0 ? '#E74C3C' : '#3498DB'; const correctColor = s.correct ? '#2ECC71' : '#E74C3C'; const correctIcon = s.correct ? '✓ Correct' : '✗ Wrong'; return html`

${trueIcon} Sample Details

${correctIcon}

True: ${s.true_label_name}

Predicted: ${s.prediction_name}

Confidence: ${(s.confidence * 100).toFixed(1)}%

Original Text

"${s.text}"

`; }3a:T94d,chart_m2 = { if (!currentSample) return html`

`; const s = currentSample; // Prepare data for Plot const data = s.tokens.map((token, i) => ({ token: token, value: s.attributions_normalized[i], rawValue: s.attributions[i], index: i })); // Calculate domain for symmetric y-axis const maxAbs = Math.max(...data.map(d => Math.abs(d.value)), 0.1); return html`

📊 Token Attribution Scores

Supports prediction Opposes prediction

${Plot.plot({ width: 880, height: 280, marginBottom: 70, marginLeft: 60, marginTop: 20, style: { background: "transparent", color: "#aaa" }, x: { label: "Token", tickRotate: -45, labelOffset: 50 }, y: { label: "Attribution (normalized)", domain: [-maxAbs, maxAbs], grid: true, gridColor: "#333" }, marks: [ // Bars Plot.barY(data, { x: "token", y: "value", fill: d => d.value >= 0 ? "#2ECC71" : "#E74C3C", title: d => `${d.token}\nAttribution: ${d.rawValue.toFixed(4)}` }), // Zero line Plot.ruleY([0], {stroke: "#666", strokeWidth: 1}) ] })}

`; }3b:Tbc5,inlineHighlight = { if (!currentSample) return html`

`; const s = currentSample; // Create colored token spans const tokenHtml = s.tokens.map((token, i) => { const norm = s.attributions_normalized[i]; const raw = s.attributions[i]; const absNorm = Math.abs(norm); // Determine color and intensity let bgColor, borderColor; if (norm > 0.05) { // Green - supports bgColor = `rgba(46, 204, 113, ${Math.min(0.2 + absNorm * 0.6, 0.9)})`; borderColor = '#2ECC71'; } else if (norm < -0.05) { // Red - opposes bgColor = `rgba(231, 76, 60, ${Math.min(0.2 + absNorm * 0.6, 0.9)})`; borderColor = '#E74C3C'; } else { // Neutral - gray bgColor = 'rgba(150, 150, 150, 0.15)'; borderColor = '#555'; } return `${token}`; }).join(''); return html`

🔤 Token-Level Attribution (hover for values)

${html([tokenHtml])}

Stronger support →

Stronger opposition →

`; }3c:Tc8c,topTokensSummary = { if (!currentSample) return html`

`; const s = currentSample; // Create array with token and attribution const tokenData = s.tokens.map((token, i) => ({ token: token, value: s.attributions_normalized[i], raw: s.attributions[i] })); // Sort and get top 5 supporting and opposing const supporting = tokenData .filter(t => t.value > 0) .sort((a, b) => b.value - a.value) .slice(0, 5); const opposing = tokenData .filter(t => t.value < 0) .sort((a, b) => a.value - b.value) .slice(0, 5); return html`

✓ Top 5 Supporting Tokens

${supporting.length === 0 ? html`

No supporting tokens found

` : supporting.map((t, i) => html`

${i + 1}. "${t.token}" +${t.value.toFixed(3)}

`) }

✗ Top 5 Opposing Tokens

${opposing.length === 0 ? html`

No opposing tokens found

` : opposing.map((t, i) => html`

${i + 1}. "${t.token}" ${t.value.toFixed(3)}

`) }

`; }3d:[{"id":"36b0fbfed557eeebfe8f903d91d02c28da8a5d47ec10686ce9d2f3b6f38b62cb5439feed574488c5b2958e6204bcb2c60214a5e3144037a3efec34e16b719b27","href":"https://static.observableusercontent.com/files/36b0fbfed557eeebfe8f903d91d02c28da8a5d47ec10686ce9d2f3b6f38b62cb5439feed574488c5b2958e6204bcb2c60214a5e3144037a3efec34e16b719b27","name":"dataset_2026.01.25.csv","type":"text/csv","lastModified":1769535188406.968,"size":24863586},{"id":"c64bb0c31c168335d95bc03cb88f381ec4d26a9cf347e0f8760181c7ec86cfcdbadbf57755ca2c303f4d86039a0dde816dbfd773a26a2c0061115144c7e0159e","href":"https://static.observableusercontent.com/files/c64bb0c31c168335d95bc03cb88f381ec4d26a9cf347e0f8760181c7ec86cfcdbadbf57755ca2c303f4d86039a0dde816dbfd773a26a2c0061115144c7e0159e","name":"xai_integrated_gradients_compressed.json","type":"application/json","lastModified":1770276472817.548,"size":21256165}] 2f:{"id":"5aa95a27d680c6c0","slug":null,"title":"FLAIRS-39th Paper","thumbnail":"da97d4849662e1a14a72375feeee5e1dbf06f7b5280c9b5e1cfda45510e112ed","access_level":"public","create_time":"$D2026-01-27T17:31:33.027Z","update_time":"$D2026-03-31T00:34:52.831Z","view_time":null,"first_public_time":"$D2026-03-23T02:12:46.163Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"education_2026","bio":""},"version":232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45e5ef3fd5732f7a","login":"mosab-rezaei","name":"Mosab Rezaei","avatar_url":"https://avatars-next.observableusercontent.com/d96d95eb1f4fa982556faae31c74b229aaa073c281162385113df50adba7ef7e","tier":null,"bio":""}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"individual","id":"d8102a30010ff1a4","login":"mina-rajaei-moghadam","name":"Mina rajaei moghadam","avatar_url":"https://avatars-next.observableusercontent.com/77eda675c752281fa63b8d67f8e9a66c2394567d8048ff5c7dbe1ec56f6ece15","tier":null,"role":"editor"},{"type":"individual","id":"45e5ef3fd5732f7a","login":"mosab-rezaei","name":"Mosab Rezaei","avatar_url":"https://avatars-next.observableusercontent.com/d96d95eb1f4fa982556faae31c74b229aaa073c281162385113df50adba7ef7e","tier":null,"role":"editor"},{"type":"individual","id":"24d2e2069ca08f76","login":"reva2","name":"Reva","avatar_url":"https://avatars-next.observableusercontent.com/9e28986b8e9df78988bf410bf6c4291f8de412573c5fc74716573f7f9633d2aa","tier":null,"role":"editor"},{"type":"individual","id":"062d493c0f60d7be","login":"smaoyuan","name":"smaoyuan","avatar_url":"https://avatars-next.observableusercontent.com/b978bceec0306706f83af8760b85ce0c21aa252a97c80c814bbda3d392adf1ca","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"FLAIRS-39th Paper","cells":[{"id":0,"value":"# FLAIRS-39th Paper\n=================================","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"----------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"## **Multi-Topic Visualization** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"rawData = FileAttachment(\"dataset_2026.01.25.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"topicColumns = {\n const cols = Object.keys(rawData [0]);\n return cols.filter(c => c.startsWith('topic_') && !c.includes('Label') && !c.includes('RW'))\n .sort((a, b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"sampledData = {\n const n = controls.sampleSize;\n if (n >= rawData.length) return rawData;\n \n const spoken = rawData.filter(d => d.label === 0);\n const written = rawData.filter(d => d.label === 1);\n \n const spokenSample = d3.shuffle(spoken.slice()).slice(0, Math.floor(n / 2));\n const writtenSample = d3.shuffle(written.slice()).slice(0, Math.floor(n / 2));\n \n return d3.shuffle([...spokenSample, ...writtenSample]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"filteredData = {\n let filtered = sampledData;\n if (controls.classFilter === \"Spoken\") {\n filtered = sampledData.filter(d => d.label === 0);\n } else if (controls.classFilter === \"Written\") {\n filtered = sampledData.filter(d => d.label === 1);\n }\n \n // Calculate stats\n const total = filtered.length;\n const spoken = filtered.filter(d => d.label === 0).length;\n const written = filtered.filter(d => d.label === 1).length;\n const uniqueTopics = new Set(filtered.map(d => d[controls.selectedTopic])).size;\n \n // Update the control panel stats\n if (viewof controls && viewof controls.updateStats) {\n viewof controls.updateStats({\n total,\n spoken,\n written,\n spokenPercent: total > 0 ? ((spoken / total) * 100).toFixed(1) : 0,\n writtenPercent: total > 0 ? ((written / total) * 100).toFixed(1) : 0,\n uniqueTopics\n });\n }\n \n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"rawData[36239]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof hoveredPoint = Inputs.input(null)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"----------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"## **XAI-Vis for Method 2 (Integrated Gradients)** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"xai_integrated_gradients = FileAttachment(\"xai_integrated_gradients_compressed.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"Method2_Data = FileAttachment(\"xai_integrated_gradients_compressed.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"allSamples = {\n const classes = Method2_Data.meta.classes;\n \n return Method2_Data.samples.map(s => ({\n id: s.id,\n text: s.txt || s.tok.join(' '), // Use text or reconstruct from tokens\n tokens: s.tok,\n attributions: s.attr,\n attributions_normalized: (() => {\n // Normalize on the fly\n const maxAbs = Math.max(...s.attr.map(Math.abs), 0.001);\n return s.attr.map(a => a / maxAbs);\n })(),\n true_label: s.tl,\n true_label_name: classes[s.tl],\n prediction: s.pr,\n prediction_name: classes[s.pr],\n confidence: s.cf,\n correct: s.cr\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"filteredData_m2 = {\n let filtered = allSamples;\n \n // Filter by correctness\n if (controls_m2.correctnessFilter === 'correct') {\n filtered = filtered.filter(s => s.correct === 1);\n } else if (controls_m2.correctnessFilter === 'incorrect') {\n filtered = filtered.filter(s => s.correct === 0);\n }\n \n // Filter by class\n if (controls_m2.classFilter === 'spoken') {\n filtered = filtered.filter(s => s.true_label === 0);\n } else if (controls_m2.classFilter === 'written') {\n filtered = filtered.filter(s => s.true_label === 1);\n }\n \n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"currentSample = {\n if (filteredData_m2.length === 0) return null;\n const idx = Math.min(controls_m2.sampleIndex, filteredData_m2.length - 1);\n return filteredData_m2[idx];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 30:"$2f:body"