28:null 29:["$","title",null,{"children":"JCDL 2025 Short Paper - Heat Map | himarshaj | Observable"}] 2e:T752,viewof chart = (async () => { // Labels const labels = ["R1","R2","R3","R4","R5","R6","T1","T2","T3"]; // Lower-triangular symmetric data matrix (Cohen's Kappa) const data = [ [null, null, null, null, null, null, null, null, null], [0.28, null, null, null, null, null, null, null, null], [0.34, 0.20, null, null, null, null, null, null, null], [0.43, 0.25, 0.38, null, null, null, null, null, null], [0.44, 0.27, 0.49, 0.53, null, null, null, null, null], [0.52, 0.27, 0.33, 0.45, 0.58, null, null, null, null], [0.28, 0.25, 0.28, 0.23, 0.32, 0.32, null, null, null], [0.32, 0.10, 0.33, 0.24, 0.32, 0.49, 0.45, null, null], [0.72, 0.37, 0.46, 0.49, 0.57, 0.59, 0.46, 0.40, null] ]; // Mirror across diagonal for (let i = 0; i < data.length; i++) { for (let j = 0; j < data.length; j++) { if (data[i][j] == null && data[j][i] != null) { data[i][j] = data[j][i]; } } } // Convert to long-form const heatmapData = []; for (let i = 0; i < labels.length; i++) { for (let j = 0; j < labels.length; j++) { if (i === j) { heatmapData.push({x: labels[j], y: labels[i], value: 1}); // diagonal = 1 } else if (data[i][j] != null) { heatmapData.push({x: labels[j], y: labels[i], value: data[i][j]}); } } } return Plot.plot({ width: 600, height: 600, marginLeft: 50, marginBottom: 50, aspectRatio: 1, color: {scheme: "ylorRd", legend: true, label: "Cohen's Kappa"}, x: {domain: labels}, y: {domain: labels}, marks: [ Plot.cell(heatmapData, { x: "x", y: "y", fill: "value" }), Plot.text(heatmapData, { x: "x", y: "y", text: d => d.value.toFixed(2), fill: d => d.value > 0.5 ? "white" : "black", fontSize: 10 }) ] }); })() 2f:T13c2,viewof chart2 = (async () => { const labels = ["R1","R2","R3","R4","R5","R6","TB","VD","RB"]; const chartHeight = 300; // inner height of plot const marginBottom = 50; const marginTop = 30; // top margin for plot // --- Datasets --- const fullData = [ [null, null, null, null, null, null, null, null, null], [0.28, null, null, null, null, null, null, null, null], [0.34, 0.20, null, null, null, null, null, null, null], [0.43, 0.25, 0.38, null, null, null, null, null, null], [0.44, 0.27, 0.49, 0.53, null, null, null, null, null], [0.52, 0.27, 0.33, 0.45, 0.58, null, null, null, null], [0.28, 0.25, 0.28, 0.23, 0.32, 0.32, null, null, null], [0.32, 0.10, 0.33, 0.24, 0.32, 0.49, 0.45, null, null], [0.72, 0.37, 0.46, 0.49, 0.57, 0.59, 0.46, 0.40, null] ]; const negData = [ [null, null, null, null, null, null, null, null, null], [0.27, null, null, null, null, null, null, null, null], [0.35, 0.03, null, null, null, null, null, null, null], [0.61, 0.35, 0.38, null, null, null, null, null, null], [0.61, 0.27, 0.49, 0.57, null, null, null, null, null], [0.80, 0.30, 0.26, 0.55, 0.58, null, null, null, null], [0.39, 0.08, 0.41, 0.27, 0.42, 0.31, null, null, null], [0.60, -0.01, 0.45, 0.24, 0.39, 0.47, 0.44, null, null], [0.86, 0.34, 0.50, 0.66, 0.66, 0.74, 0.47, 0.57, null] ]; const posData = [ [null, null, null, null, null, null, null, null, null], [0.50, null, null, null, null, null, null, null, null], [0.43, 0.48, null, null, null, null, null, null, null], [0.28, 0.34, 0.46, null, null, null, null, null, null], [0.44, 0.47, 0.63, 0.60, null, null, null, null, null], [0.34, 0.43, 0.53, 0.50, 0.75, null, null, null, null], [0.16, 0.31, 0.25, 0.13, 0.25, 0.30, null, null, null], [0.16, 0.20, 0.28, 0.29, 0.37, 0.54, 0.52, null, null], [0.51, 0.55, 0.55, 0.40, 0.63, 0.53, 0.47, 0.32, null] ]; // Helper: mirror & convert to long form function matrixToHeatmap(matrix, labels) { for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix.length; j++) { if (matrix[i][j] == null && matrix[j][i] != null) { matrix[i][j] = matrix[j][i]; } } } const heatmapData = []; for (let i = 0; i < labels.length; i++) { for (let j = 0; j < labels.length; j++) { if (i === j) { heatmapData.push({x: labels[j], y: labels[i], value: 1}); } else if (matrix[i][j] != null) { heatmapData.push({x: labels[j], y: labels[i], value: matrix[i][j]}); } } } return heatmapData; } const fullHeatmap = matrixToHeatmap(fullData, labels); const negHeatmap = matrixToHeatmap(negData, labels); const posHeatmap = matrixToHeatmap(posData, labels); const allValues = [...fullHeatmap, ...negHeatmap, ...posHeatmap].map(d => d.value); const globalMin = Math.min(...allValues); const globalMax = Math.max(...allValues); function buildPlot(data) { return Plot.plot({ width: 300, height: chartHeight, marginLeft: 50, marginBottom, marginTop, aspectRatio: 1, color: { scheme: "blues", domain: [globalMin, globalMax], legend: false }, x: {domain: labels, label: null}, y: {domain: labels, label: null}, marks: [ Plot.cell(data, {x: "x", y: "y", fill: "value"}), Plot.text(data, { x: "x", y: "y", text: d => d.value.toFixed(2), fill: d => d.value > (globalMin+globalMax)/2 ? "white" : "black", fontSize: 9 }) ] }); } // Create vertical legend matching the y-axis height const legendSteps = 10; const legendValues = Array.from({length: legendSteps}, (_, i) => globalMin + (i / (legendSteps - 1)) * (globalMax - globalMin) ).reverse(); const legendInnerHeight = chartHeight - marginTop - marginBottom - 22; const legendDiv = html`

${legendValues.map(v => html`

${v.toFixed(2)}

`)}

`; return html`

${buildPlot(fullHeatmap)}

(a) Positive, Negative, Neutral

${buildPlot(negHeatmap)}

(b) Negative vs Non-Negative

${buildPlot(posHeatmap)}

${legendDiv}

`; })()30:T166c,viewof chart3 = (async () => { const labels = ["R1","R2","R3","R4","R5","R6","TB","VD","RB"]; const chartHeight = 300; const marginBottom = 50; const marginTop = 30; // --- Datasets --- const fullData = [ [null, null, null, null, null, null, null, null, null], [0.28, null, null, null, null, null, null, null, null], [0.34, 0.20, null, null, null, null, null, null, null], [0.43, 0.25, 0.38, null, null, null, null, null, null], [0.44, 0.27, 0.49, 0.53, null, null, null, null, null], [0.52, 0.27, 0.33, 0.45, 0.58, null, null, null, null], [0.28, 0.25, 0.28, 0.23, 0.32, 0.32, null, null, null], [0.32, 0.10, 0.33, 0.24, 0.32, 0.49, 0.45, null, null], [0.72, 0.37, 0.46, 0.49, 0.57, 0.59, 0.46, 0.40, null] ]; const negData = [ [null, null, null, null, null, null, null, null, null], [0.27, null, null, null, null, null, null, null, null], [0.35, 0.03, null, null, null, null, null, null, null], [0.61, 0.35, 0.38, null, null, null, null, null, null], [0.61, 0.27, 0.49, 0.57, null, null, null, null, null], [0.80, 0.30, 0.26, 0.55, 0.58, null, null, null, null], [0.39, 0.08, 0.41, 0.27, 0.42, 0.31, null, null, null], [0.60, -0.01, 0.45, 0.24, 0.39, 0.47, 0.44, null, null], [0.86, 0.34, 0.50, 0.66, 0.66, 0.74, 0.47, 0.57, null] ]; const posData = [ [null, null, null, null, null, null, null, null, null], [0.50, null, null, null, null, null, null, null, null], [0.43, 0.48, null, null, null, null, null, null, null], [0.28, 0.34, 0.46, null, null, null, null, null, null], [0.44, 0.47, 0.63, 0.60, null, null, null, null, null], [0.34, 0.43, 0.53, 0.50, 0.75, null, null, null, null], [0.16, 0.31, 0.25, 0.13, 0.25, 0.30, null, null, null], [0.16, 0.20, 0.28, 0.29, 0.37, 0.54, 0.52, null, null], [0.51, 0.55, 0.55, 0.40, 0.63, 0.53, 0.47, 0.32, null] ]; // --- Agreement categories with blue–teal theme --- const categories = [ { min: -1.00, max: 0.00, label: "Poor", color: "#d6e6f5" }, // very light blue { min: 0.01, max: 0.20, label: "Slight", color: "#a9ccee" }, // light blue { min: 0.21, max: 0.40, label: "Fair", color: "#7ab8e5" }, // medium-light blue { min: 0.41, max: 0.60, label: "Moderate", color: "#4a91d9" }, // medium blue { min: 0.61, max: 0.80, label: "Substantial", color: "#1d6fc2" },// dark blue { min: 0.81, max: 1.00, label: "Almost Perfect", color: "#0b4a8c" } // very dark blue ]; function valueToCategoryColor(value) { for (const cat of categories) { if (value >= cat.min && value <= cat.max) return cat.color; } return "#ffffff"; } // Helper: mirror & convert to upper-triangle function matrixToHeatmap(matrix, labels) { for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix.length; j++) { if (matrix[i][j] == null && matrix[j][i] != null) { matrix[i][j] = matrix[j][i]; } } } const heatmapData = []; for (let i = 0; i < labels.length; i++) { for (let j = i; j < labels.length; j++) { // top half including diagonal if (i === j) { heatmapData.push({x: labels[j], y: labels[i], value: 1}); } else if (matrix[i][j] != null) { heatmapData.push({x: labels[j], y: labels[i], value: matrix[i][j]}); } } } return heatmapData; } const fullHeatmap = matrixToHeatmap(fullData, labels); const negHeatmap = matrixToHeatmap(negData, labels); const posHeatmap = matrixToHeatmap(posData, labels); const allValues = [...fullHeatmap, ...negHeatmap, ...posHeatmap].map(d => d.value); const globalMin = Math.min(...allValues); const globalMax = Math.max(...allValues); function buildPlot(data) { return Plot.plot({ width: 300, height: chartHeight, marginLeft: 50, marginBottom, marginTop, aspectRatio: 1, x: { domain: labels, label: null }, y: { domain: labels, label: null }, marks: [ // Cells: top-half color, diagonal transparent Plot.cell(data, { x: "x", y: "y", fill: d => (d.x === d.y ? null : valueToCategoryColor(d.value)) }), // Text: show all numbers including diagonal Plot.text(data, { x: "x", y: "y", text: d => d.value.toFixed(2), fill: d => d.x === d.y ? "black" : (d.value > (globalMin+globalMax)/2 ? "white" : "black"), fontSize: 10 }) ] }); } const legendBoxHeight = 18; // fixed box height const legendFontSize = 10; const legendDiv = html`

${categories.map(cat => html`

${cat.label}

`)}

`; return html`

${buildPlot(fullHeatmap)}

(a) Positive, Negative, & Neutral

${buildPlot(negHeatmap)}

(b) Negative vs Non-Negative

${buildPlot(posHeatmap)}

${legendDiv}

`; })() 31:T1ad2,viewof chart4 = (async () => { const labels = ["R1","R2","R3","R4","R5","R6","TB","VD","RB","LM","QW","GP"]; const chartHeight = 300; const marginBottom = 50; const marginTop = 30; // --- Datasets --- const fullData = [ [null, null, null, null, null, null, null, null, null, null, null, null], [0.28, null, null, null, null, null, null, null, null, null, null, null], [0.34, 0.20, null, null, null, null, null, null, null, null, null, null], [0.43, 0.25, 0.38, null, null, null, null, null, null, null, null, null], [0.44, 0.27, 0.49, 0.53, null, null, null, null, null, null, null, null], [0.52, 0.27, 0.33, 0.45, 0.58, null, null, null, null, null, null, null], [0.28, 0.25, 0.28, 0.23, 0.32, 0.32, null, null, null, null, null, null], [0.32, 0.10, 0.33, 0.24, 0.32, 0.49, 0.45, null, null, null, null, null], [0.72, 0.37, 0.46, 0.49, 0.57, 0.59, 0.46, 0.40, null, null, null, null], [0.55, 0.41, 0.43, 0.47, 0.53, 0.61, 0.32, 0.30, 0.59, null, null, null], [0.45, 0.37, 0.31, 0.43, 0.61, 0.62, 0.33, 0.35, 0.51, 0.69, null, null], [0.54, 0.33, 0.39, 0.46, 0.53, 0.74, 0.35, 0.39, 0.64, 0.80, 0.74, null] ]; const negData = [ [null, null, null, null, null, null, null, null, null, null, null, null], [0.27, null, null, null, null, null, null, null, null, null, null, null], [0.35, 0.03, null, null, null, null, null, null, null, null, null, null], [0.61, 0.35, 0.38, null, null, null, null, null, null, null, null, null], [0.61, 0.27, 0.49, 0.57, null, null, null, null, null, null, null, null], [0.80, 0.30, 0.26, 0.55, 0.58, null, null, null, null, null, null, null], [0.39, 0.08, 0.41, 0.27, 0.42, 0.31, null, null, null, null, null, null], [0.60, -0.01, 0.45, 0.24, 0.39, 0.47, 0.44, null, null, null, null, null], [0.86, 0.34, 0.50, 0.66, 0.66, 0.74, 0.47, 0.57, null, null, null, null], [0.74, 0.43, 0.41, 0.63, 0.59, 0.66, 0.29, 0.38, 0.67, null, null, null], [0.71, 0.47, 0.32, 0.56, 0.65, 0.64, 0.29, 0.34, 0.65, 0.74, null, null], [0.78, 0.37, 0.39, 0.60, 0.56, 0.78, 0.31, 0.44, 0.76, 0.80, 0.74, null] ]; const posData = [ [null, null, null, null, null, null, null, null, null, null, null, null], [0.50, null, null, null, null, null, null, null, null, null, null, null], [0.43, 0.48, null, null, null, null, null, null, null, null, null, null], [0.28, 0.34, 0.46, null, null, null, null, null, null, null, null, null], [0.44, 0.47, 0.63, 0.60, null, null, null, null, null, null, null, null], [0.34, 0.43, 0.53, 0.50, 0.75, null, null, null, null, null, null, null], [0.16, 0.31, 0.25, 0.13, 0.25, 0.30, null, null, null, null, null, null], [0.16, 0.20, 0.28, 0.29, 0.37, 0.54, 0.52, null, null, null, null, null], [0.51, 0.55, 0.55, 0.40, 0.63, 0.53, 0.47, 0.32, null, null, null, null], [0.44, 0.52, 0.63, 0.49, 0.69, 0.70, 0.38, 0.32, 0.69, null, null, null], [0.33, 0.40, 0.54, 0.51, 0.78, 0.79, 0.29, 0.45, 0.54, 0.78, null, null], [0.38, 0.45, 0.60, 0.52, 0.75, 0.76, 0.35, 0.38, 0.65, 0.90, 0.88, null] ]; // --- Agreement categories with blue–teal theme --- const categories = [ { min: -1.00, max: 0.00, label: "Poor", color: "#d6e6f5" }, // very light blue { min: 0.01, max: 0.20, label: "Slight", color: "#a9ccee" }, // light blue { min: 0.21, max: 0.40, label: "Fair", color: "#7ab8e5" }, // medium-light blue { min: 0.41, max: 0.60, label: "Moderate", color: "#4a91d9" }, // medium blue { min: 0.61, max: 0.80, label: "Substantial", color: "#1d6fc2" },// dark blue { min: 0.81, max: 1.00, label: "Almost Perfect", color: "#0b4a8c" } // very dark blue ]; function valueToCategoryColor(value) { for (const cat of categories) { if (value >= cat.min && value <= cat.max) return cat.color; } return "#ffffff"; } // Helper: mirror & convert to upper-triangle function matrixToHeatmap(matrix, labels) { for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix.length; j++) { if (matrix[i][j] == null && matrix[j][i] != null) { matrix[i][j] = matrix[j][i]; } } } const heatmapData = []; for (let i = 0; i < labels.length; i++) { for (let j = i; j < labels.length; j++) { // top half including diagonal if (i === j) { heatmapData.push({x: labels[j], y: labels[i], value: 1}); } else if (matrix[i][j] != null) { heatmapData.push({x: labels[j], y: labels[i], value: matrix[i][j]}); } } } return heatmapData; } const fullHeatmap = matrixToHeatmap(fullData, labels); const negHeatmap = matrixToHeatmap(negData, labels); const posHeatmap = matrixToHeatmap(posData, labels); const allValues = [...fullHeatmap, ...negHeatmap, ...posHeatmap].map(d => d.value); const globalMin = Math.min(...allValues); const globalMax = Math.max(...allValues); function buildPlot(data) { return Plot.plot({ width: 300, height: chartHeight, marginLeft: 50, marginBottom, marginTop, aspectRatio: 1, x: { domain: labels, label: null }, y: { domain: labels, label: null }, marks: [ // Cells: top-half color, diagonal transparent Plot.cell(data, { x: "x", y: "y", fill: d => (d.x === d.y ? null : valueToCategoryColor(d.value)) }), // Text: show all numbers including diagonal Plot.text(data, { x: "x", y: "y", text: d => d.value.toFixed(2), fill: d => d.x === d.y ? "black" : (d.value > (globalMin+globalMax)/2 ? "white" : "black"), fontSize: 8 }) ] }); } const legendBoxHeight = 18; // fixed box height const legendFontSize = 10; const legendDiv = html`

${categories.map(cat => html`

${cat.label}

`)}

`; return html`

${buildPlot(fullHeatmap)}

(a) Positive, Negative, & Neutral

${buildPlot(negHeatmap)}

(b) Negative vs Non-Negative

${buildPlot(posHeatmap)}

${legendDiv}

`; })() 32:T1cf4,viewof chart5 = (async () => { const labels = ["R1","R2","R3","R4","R5","R6","TB","VD","RB","LM","QW","GP"]; const chartHeight = 300; const marginBottom = 50; const marginTop = 30; // --- Datasets --- const fullData = [ [null, null, null, null, null, null, null, null, null, null, null, null], [0.28, null, null, null, null, null, null, null, null, null, null, null], [0.34, 0.20, null, null, null, null, null, null, null, null, null, null], [0.43, 0.25, 0.38, null, null, null, null, null, null, null, null, null], [0.44, 0.27, 0.49, 0.53, null, null, null, null, null, null, null, null], [0.52, 0.27, 0.33, 0.45, 0.58, null, null, null, null, null, null, null], [0.28, 0.25, 0.28, 0.23, 0.32, 0.32, null, null, null, null, null, null], [0.32, 0.10, 0.33, 0.24, 0.32, 0.49, 0.45, null, null, null, null, null], [0.72, 0.37, 0.46, 0.49, 0.57, 0.59, 0.46, 0.40, null, null, null, null], [0.55, 0.41, 0.43, 0.47, 0.53, 0.61, 0.32, 0.30, 0.59, null, null, null], [0.45, 0.37, 0.31, 0.43, 0.61, 0.62, 0.33, 0.35, 0.51, 0.69, null, null], [0.54, 0.33, 0.39, 0.46, 0.53, 0.74, 0.35, 0.39, 0.64, 0.80, 0.74, null] ]; const negData = [ [null, null, null, null, null, null, null, null, null, null, null, null], [0.27, null, null, null, null, null, null, null, null, null, null, null], [0.35, 0.03, null, null, null, null, null, null, null, null, null, null], [0.61, 0.35, 0.38, null, null, null, null, null, null, null, null, null], [0.61, 0.27, 0.49, 0.57, null, null, null, null, null, null, null, null], [0.80, 0.30, 0.26, 0.55, 0.58, null, null, null, null, null, null, null], [0.39, 0.08, 0.41, 0.27, 0.42, 0.31, null, null, null, null, null, null], [0.60, -0.01, 0.45, 0.24, 0.39, 0.47, 0.44, null, null, null, null, null], [0.86, 0.34, 0.50, 0.66, 0.66, 0.74, 0.47, 0.57, null, null, null, null], [0.74, 0.43, 0.41, 0.63, 0.59, 0.66, 0.29, 0.38, 0.67, null, null, null], [0.71, 0.47, 0.32, 0.56, 0.65, 0.64, 0.29, 0.34, 0.65, 0.74, null, null], [0.78, 0.37, 0.39, 0.60, 0.56, 0.78, 0.31, 0.44, 0.76, 0.80, 0.74, null] ]; const posData = [ [null, null, null, null, null, null, null, null, null, null, null, null], [0.50, null, null, null, null, null, null, null, null, null, null, null], [0.43, 0.48, null, null, null, null, null, null, null, null, null, null], [0.28, 0.34, 0.46, null, null, null, null, null, null, null, null, null], [0.44, 0.47, 0.63, 0.60, null, null, null, null, null, null, null, null], [0.34, 0.43, 0.53, 0.50, 0.75, null, null, null, null, null, null, null], [0.16, 0.31, 0.25, 0.13, 0.25, 0.30, null, null, null, null, null, null], [0.16, 0.20, 0.28, 0.29, 0.37, 0.54, 0.52, null, null, null, null, null], [0.51, 0.55, 0.55, 0.40, 0.63, 0.53, 0.47, 0.32, null, null, null, null], [0.44, 0.52, 0.63, 0.49, 0.69, 0.70, 0.38, 0.32, 0.69, null, null, null], [0.33, 0.40, 0.54, 0.51, 0.78, 0.79, 0.29, 0.45, 0.54, 0.78, null, null], [0.38, 0.45, 0.60, 0.52, 0.75, 0.76, 0.35, 0.38, 0.65, 0.90, 0.88, null] ]; // --- Agreement categories with blue–teal theme --- const categories = [ { min: -1.00, max: 0.00, label: "Poor", color: "#d6e6f5" }, // very light blue { min: 0.01, max: 0.20, label: "Slight", color: "#a9ccee" }, // light blue { min: 0.21, max: 0.40, label: "Fair", color: "#7ab8e5" }, // medium-light blue { min: 0.41, max: 0.60, label: "Moderate", color: "#4a91d9" }, // medium blue { min: 0.61, max: 0.80, label: "Substantial", color: "#1d6fc2" },// dark blue { min: 0.81, max: 1.00, label: "Almost Perfect", color: "#0b4a8c" } // very dark blue ]; function valueToCategoryColor(value) { for (const cat of categories) { if (value >= cat.min && value <= cat.max) return cat.color; } return "#ffffff"; } // Helper: mirror & convert to upper-triangle function matrixToHeatmap(matrix, labels) { for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix.length; j++) { if (matrix[i][j] == null && matrix[j][i] != null) { matrix[i][j] = matrix[j][i]; } } } const heatmapData = []; for (let i = 0; i < labels.length; i++) { for (let j = i; j < labels.length; j++) { // top half including diagonal if (i === j) { heatmapData.push({x: labels[j], y: labels[i], value: 1}); } else if (matrix[i][j] != null) { heatmapData.push({x: labels[j], y: labels[i], value: matrix[i][j]}); } } } return heatmapData; } const fullHeatmap = matrixToHeatmap(fullData, labels); const negHeatmap = matrixToHeatmap(negData, labels); const posHeatmap = matrixToHeatmap(posData, labels); const allValues = [...fullHeatmap, ...negHeatmap, ...posHeatmap].map(d => d.value); const globalMin = Math.min(...allValues); const globalMax = Math.max(...allValues); function buildPlot(data) { return Plot.plot({ width: 300, height: chartHeight, marginLeft: 50, marginBottom, marginTop, aspectRatio: 1, x: { domain: labels, label: null }, y: { domain: labels, label: null }, marks: [ // Cells: top-half color, diagonal transparent Plot.cell(data, { x: "x", y: "y", fill: d => (d.x === d.y ? null : valueToCategoryColor(d.value)) }), // Text: show all numbers including diagonal Plot.text(data, { x: "x", y: "y", text: d => d.value.toFixed(2), fill: d => d.x === d.y ? "black" : (d.value > (globalMin+globalMax)/2 ? "white" : "black"), fontSize: 8 }) ] }); } const legendBoxHeight = 18; // fixed box height const legendFontSize = 10; const legendDiv = html`

${categories.map(cat => html`

${cat.label}

`)}

`; return html`

${buildPlot(fullHeatmap)}

(a) Positive, Negative, & Neutral

${buildPlot(negHeatmap)}

(b) Negative vs Non-Negative

${buildPlot(posHeatmap)}

${legendDiv}

`; })() 33:[] 2c:{"id":"a4eb2deca1e25a20","slug":null,"title":"JCDL 2025 Short Paper - Heat Map","thumbnail":"efd77a94011ca55b9f24c81d8305cec0839a0e077134f1da192f26726d01afea","access_level":"public","create_time":"$D2025-08-20T14:55:14.802Z","update_time":"$D2026-05-19T01:38:20.463Z","view_time":null,"first_public_time":"$D2025-08-28T03:03:30.870Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7e25104dcd36556e","login":"himarshaj","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65b77612058b3eb60c101df722cd2d23c12b767cb16fc3f06ae2a84a30851b16","tier":"starter_2024"},"version":129,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b75e65c77ceaeeb","login":"himarshaj","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65b77612058b3eb60c101df722cd2d23c12b767cb16fc3f06ae2a84a30851b16","tier":null}],"members":[{"type":"individual","id":"3b75e65c77ceaeeb","login":"himarshaj","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65b77612058b3eb60c101df722cd2d23c12b767cb16fc3f06ae2a84a30851b16","tier":null,"role":"editor"},{"type":"team","id":"7e25104dcd36556e","login":"himarshaj","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65b77612058b3eb60c101df722cd2d23c12b767cb16fc3f06ae2a84a30851b16","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"JCDL 2025 Short Paper - Heat Map","cells":[{"id":0,"value":"# JCDL 2025 Short Paper - Heat Map\n## Himarsha R. Jayanetti\n### Date: 2025-08-19 \n.\n# WebSci 2026 Short Paper - Heat Map\n### Updated Date: 2025-12-10\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"# WebSci - adding LLMs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"# TPDL 2026","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2d:"$2c:body"