2a:null 2b:["$","title",null,{"children":"MLHC 2025 (Clean Version) | Hongtao Hao | Observable"}] 31:T1b81,performance_plot2 = { // Compute per-algo mean metrics const algoMeans = d3.rollups( all_results, v => ({ tau: d3.mean(v, d => d.kendalls_tau), mae: d3.mean(v, d => d.mae) }), d => d.algo ); const tauSortedAlgos = algoMeans .slice() .sort((a, b) => d3.ascending(a[1].tau, b[1].tau)) .map(d => d[0]); const maeSortedAlgos = algoMeans .slice() .sort((a, b) => d3.ascending(a[1].mae, b[1].mae)) .map(d => d[0]); // Dimensions const width = 600; const height = 420; const marginLeft = 120; const gap = 10; // Instead of trying to combine the plots afterwards, // let's directly create one SVG with both plots // Create a single SVG container const svg = d3.create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("width", width * 2 + gap) .attr("height", height) .attr("viewBox", `0 0 ${width * 2 + gap} ${height}`) .style("background", "#fff") .style("font-family", "DejaVu Sans, Arial, sans-serif"); // Create group for the left plot (Kendall's Tau) const tauGroup = svg.append("g") .attr("transform", `translate(0, 0)`); // Create group for the right plot (MAE) const maeGroup = svg.append("g") .attr("transform", `translate(${width + gap}, 0)`); // Add plot titles svg.append("text") .attr("x", width / 2) .attr("y", 50) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Normalized Kendall's Tau Distance for Ordering Results") .style("font-weight", "bold"); // <-- Make text bold svg.append("text") .attr("x", width + gap + width / 2) .attr("y", 50) .attr("text-anchor", "middle") .attr("font-size", "14px") .text("Mean Absolute Error for Staging Results") .style("font-weight", "bold"); // <-- Make text bold // Function to draw a box plot function drawBoxPlot(group, data, xValue, yValue, domain, margin) { const y = d3.scaleBand() .domain(domain) .range([60, height - 60]) .padding(0.2); const x = d3.scaleLinear() // .domain(xValue === "kendalls_tau" ? [0, 1] : [0, d3.max(data, d => d[xValue]) * 1.1]) .domain([0, d3.max(data, d => d[xValue]) * 1.1]) .range([margin, width - 30]); // Add Y axis group.append("g") .attr("transform", `translate(${margin},0)`) .call(d3.axisLeft(y)) .selectAll("text") .style("font-size", "14px") // <-- Increase font size // .style("font-weight", "bold"); // <-- Make text bold // Add X axis group.append("g") .attr("transform", `translate(0,${height - 60})`) .call( d3.axisBottom(x) .tickFormat(d => d) ); // Add X axis label group.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .text(xValue === "kendalls_tau" ? "Normalized Kendall's Tau Distance" : "MAE"); // Add vertical grid lines group.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height - 60})`) .call( d3.axisBottom(x) .tickSize(-(height - 120)) .tickFormat("") ) .attr("opacity", 0.1) .select(".domain") .attr("opacity", 0); // Calculate statistics for each algorithm const statsByGroup = d3.rollups( data, v => { const values = v.map(d => d[xValue]).sort(d3.ascending); const q1 = d3.quantile(values, 0.25); const median = d3.quantile(values, 0.5); const q3 = d3.quantile(values, 0.75); const iqr = q3 - q1; const min = Math.max(d3.min(values), q1 - 1.5 * iqr); const max = Math.min(d3.max(values), q3 + 1.5 * iqr); const mean = d3.mean(values); return { q1, median, q3, iqr, min, max, mean, outliers: values.filter(d => d < min || d > max) }; }, d => d[yValue] ); // Draw each box domain.forEach(algo => { const stats = statsByGroup.find(d => d[0] === algo)[1]; // Box group.append("rect") .attr("x", x(stats.q1)) .attr("y", y(algo) + y.bandwidth() / 4) .attr("width", x(stats.q3) - x(stats.q1)) .attr("height", y.bandwidth() / 2) .attr("fill", "#e5e7eb") .attr("stroke", "#333"); // Median line group.append("line") .attr("x1", x(stats.median)) .attr("x2", x(stats.median)) .attr("y1", y(algo) + y.bandwidth() / 4) .attr("y2", y(algo) + y.bandwidth() * 3/4) .attr("stroke", "#333") .attr("stroke-width", 2); // Min whisker group.append("line") .attr("x1", x(stats.min)) .attr("x2", x(stats.q1)) .attr("y1", y(algo) + y.bandwidth() / 2) .attr("y2", y(algo) + y.bandwidth() / 2) .attr("stroke", "#333"); // Min cap group.append("line") .attr("x1", x(stats.min)) .attr("x2", x(stats.min)) .attr("y1", y(algo) + y.bandwidth() / 3) .attr("y2", y(algo) + y.bandwidth() * 2/3) .attr("stroke", "#333"); // Max whisker group.append("line") .attr("x1", x(stats.q3)) .attr("x2", x(stats.max)) .attr("y1", y(algo) + y.bandwidth() / 2) .attr("y2", y(algo) + y.bandwidth() / 2) .attr("stroke", "#333"); // Max cap group.append("line") .attr("x1", x(stats.max)) .attr("x2", x(stats.max)) .attr("y1", y(algo) + y.bandwidth() / 3) .attr("y2", y(algo) + y.bandwidth() * 2/3) .attr("stroke", "#333"); // Mean marker group.append("circle") .attr("cx", x(stats.mean)) .attr("cy", y(algo) + y.bandwidth() / 2) .attr("r", 3) .attr("fill", "white") .attr("stroke", "#333"); // Draw outliers if any stats.outliers.forEach(value => { group.append("circle") .attr("cx", x(value)) .attr("cy", y(algo) + y.bandwidth() / 2) .attr("r", 2) .attr("fill", "#999") .attr("opacity", 0.7); }); // Draw data points (jittered) - just a sample for visualization const allValues = data .filter(d => d[yValue] === algo) .map(d => d[xValue]); // Show only a subset of points to avoid overcrowding for (let i = 0; i < allValues.length; i += 5) { group.append("line") .attr("x1", x(allValues[i])) .attr("x2", x(allValues[i])) .attr("y1", y(algo) + y.bandwidth() * 0.8) .attr("y2", y(algo) + y.bandwidth() * 0.9) .attr("stroke", "#333") .attr("opacity", 0.3); } }); } // Draw both box plots manually drawBoxPlot(tauGroup, all_results, "kendalls_tau", "algo", tauSortedAlgos, marginLeft); drawBoxPlot(maeGroup, all_results, "mae", "algo", maeSortedAlgos, marginLeft); return svg.node(); }32:T25e2,viewof chart_integrated33 = { const metricName = selectedMetric; const width = 310, height = 220, margin = { top: 30, right: 10, bottom: 40, left: 50 }; const experiments = [...new Set(processed.map(d => d.E))].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }) ); const Js = [...new Set(processed.map(d => +d.J))].sort((a, b) => a - b); const Rs = [...new Set(processed.map(d => +d.R))].sort((a, b) => a - b); const algos = [...new Set(processed.map(d => d.algo))]; const shapeGenerators = { circle: (g, cx, cy, size, fillColor, strokeColor) => g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", size).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), square: (g, cx, cy, size, fillColor, strokeColor) => g.append("rect").attr("x", cx - size).attr("y", cy - size).attr("width", size * 2).attr("height", size * 2).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), diamond: (g, cx, cy, size, fillColor, strokeColor) => g.append("polygon").attr("points", `${cx},${cy - size} ${cx + size},${cy} ${cx},${cy + size} ${cx - size},${cy}`).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), triangle: (g, cx, cy, size, fillColor, strokeColor) => g.append("polygon").attr("points", `${cx},${cy - size} ${cx + size},${cy + size} ${cx - size},${cy + size}`).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), cross: (g, cx, cy, size, fillColor) => { const s = size * 1.0; g.append("line") .attr("x1", cx - s).attr("y1", cy - s) .attr("x2", cx + s).attr("y2", cy + s) .attr("stroke", fillColor) .attr("stroke-width", size / 1.5); return g.append("line") .attr("x1", cx - s).attr("y1", cy + s) .attr("x2", cx + s).attr("y2", cy - s) .attr("stroke", fillColor) .attr("stroke-width", size / 1.5); }, plus: (g, cx, cy, size, fillColor) => { const s = size * 1.2; g.append("line").attr("x1", cx - s).attr("y1", cy).attr("x2", cx + s).attr("y2", cy).attr("stroke", fillColor).attr("stroke-width", size / 1.5); return g.append("line").attr("x1", cx).attr("y1", cy - s).attr("x2", cx).attr("y2", cy + s).attr("stroke", fillColor).attr("stroke-width", size / 1.5); }, star: (g, cx, cy, size, fillColor, strokeColor) => { const R = size * 1.2, r = size * 0.6; let path = ""; for (let i = 0; i < 10; i++) { const angle = Math.PI / 5 * i; const radius = i % 2 === 0 ? R : r; const x = cx + radius * Math.sin(angle); const y = cy - radius * Math.cos(angle); path += i === 0 ? `M${x},${y}` : `L${x},${y}`; } return g.append("path").attr("d", path + "Z").attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); }, pentagon: (g, cx, cy, size, fillColor, strokeColor) => { const R = size * 1.2; let path = ""; for (let i = 0; i < 5; i++) { const angle = (Math.PI * 2 / 5) * i - Math.PI / 2; const x = cx + R * Math.cos(angle); const y = cy + R * Math.sin(angle); path += i ? `L${x},${y}` : `M${x},${y}`; } return g.append("path").attr("d", path + "Z").attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); }, hexagon: (g, cx, cy, size, fillColor, strokeColor) => { const R = size * 1.2; const points = Array.from({ length: 6 }, (_, i) => { const angle = Math.PI / 3 * i; return [cx + R * Math.cos(angle), cy + R * Math.sin(angle)]; }); return g.append("polygon").attr("points", points.map(p => p.join(",")).join(" ")).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); } }; const algoToShape = { "SA-EBM": "circle", "MLE": "square", "EM": "diamond", "KDE": "triangle", "Hard K-Means": "pentagon", "UCL KDE": "plus", "DEBM GMM": "star", "DEBM": "cross", "UCL GMM": "hexagon" }; const aggregatedData = []; experiments.forEach(E => { const expData = processed.filter(d => d.E === E); Js.forEach(J => { Rs.forEach(R => { algos.forEach(algo => { const points = expData.filter(d => d.J == J && d.R == R && d.algo === algo); if (points.length > 0) { const meanKendallsTau = d3.mean(points, d => d.kendalls_tau); const meanMAE = d3.mean(points, d => d.mae); const meanMAEDiseased = d3.mean(points, d => d.mae_diseased); aggregatedData.push({ E, J, R, algo, kendalls_tau: meanKendallsTau, mae: meanMAE, mae_diseased: meanMAEDiseased, count: points.length }); } }); }); }); }); const algoStats = {}; algos.forEach(algo => { const algoPoints = aggregatedData.filter(d => d.algo === algo); const values = algoPoints.map(d => d[metricName]); const mean = d3.mean(values); let ciLow = null, ciHigh = null; if (values.length > 1) { const n = values.length; const stdDev = Math.sqrt(d3.sum(values.map(x => Math.pow(x - mean, 2))) / (n - 1)); const stderr = stdDev / Math.sqrt(n); const tCritical = 1.96; ciLow = mean - tCritical * stderr; ciHigh = mean + tCritical * stderr; } algoStats[algo] = { mean, ciLow, ciHigh }; }); const sortedAlgos = [...algos].sort((a, b) => { return algoStats[a].mean - algoStats[b].mean; }); const color = d3.scaleOrdinal(d3.schemeTableau10).domain(sortedAlgos); const xGroup = d3.scaleBand().domain(Js).range([margin.left, width - margin.right]).padding(0.1); const xInner = d3.scalePoint().domain(Rs).range([0, xGroup.bandwidth()]).padding(0.5); const outerContainer = d3.create("div").style("position", "relative").style("width", "100%"); const svgWidth = width * Math.min(experiments.length, 3); const svgHeight = height * Math.ceil(experiments.length / 3) + 100; const masterSVG = outerContainer.append("svg").attr("width", svgWidth).attr("height", svgHeight).style("background", "#fff"); experiments.forEach((E, index) => { const row = Math.floor(index / 3), col = index % 3; const chartG = masterSVG.append("g").attr("transform", `translate(${col * width}, ${row * height})`); const expData = aggregatedData.filter(d => d.E === E); let yDomain; if (metricName === 'kendalls_tau') yDomain = [0.6, 0]; else if (metricName === 'qwk') yDomain = [0, 1.0]; else yDomain = [4, 0]; const y = d3.scaleLinear().domain(yDomain).nice().range([height - margin.bottom, margin.top]); chartG.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y).ticks(5).tickFormat(d => d.toFixed(1))); chartG.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xGroup)).selectAll(".tick text").text(d => `J=${d}`); chartG.append("text").attr("x", width / 2).attr("y", margin.top - 10).attr("text-anchor", "middle").style("font-size", "12px").style("font-weight", "bold").text(E); if (index === 0) { chartG.append("text") .attr("transform", "rotate(-90)") .attr("x", -(height - margin.bottom + margin.top) / 2) .attr("y", margin.left / 4) .attr("text-anchor", "middle") .style("font-size", "12px") .text(metricName === 'kendalls_tau' ? "Kendall's Tau of Orderings" : metricName === 'mae' ? "MAE of Stagings" : "QWK of Stagings"); } sortedAlgos.forEach(algo => { Js.forEach(J => { const points = expData.filter(d => d.algo === algo && d.J === J).sort((a, b) => a.R - b.R); if (points.length < 2) return; const line = d3.line().x(d => xGroup(d.J) + xInner(d.R)).y(d => y(d[metricName])).curve(d3.curveMonotoneX); chartG.append("path").datum(points).attr("fill", "none").attr("stroke", color(algo)).attr("stroke-width", 1.5).attr("d", line); points.forEach(d => { const cx = xGroup(d.J) + xInner(d.R); const cy = y(d[metricName]); const shapeFn = shapeGenerators[algoToShape[algo]]; shapeFn(chartG, cx, cy, 3, color(algo), "white"); }); }); }); }); const legendG = masterSVG.append("g").attr("transform", `translate(0, ${height * Math.ceil(experiments.length / 3)})`); const itemsPerRow = 5; const itemWidth = svgWidth / itemsPerRow; legendG.append("text") .attr("x", svgWidth / 2) .attr("y", 15) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", "bold") .text(`Algorithms (Avg. ${ metricName === 'kendalls_tau' ? "Normalized Kendall's Tau Distance" : metricName === 'mae' ? "MAE All" : "MAE Diseased" } ± 95% CI)`); sortedAlgos.forEach((algo, i) => { const row = Math.floor(i / itemsPerRow); const col = i % itemsPerRow; const g = legendG.append("g").attr("transform", `translate(${col * itemWidth + 40}, ${row * 20 + 40})`); const shapeFn = shapeGenerators[algoToShape[algo]]; shapeFn(g, 0, 0, 5, color(algo), "black"); const { mean, ciLow, ciHigh } = algoStats[algo]; const statText = (ciLow != null && ciHigh != null) ? `${algo} (${mean.toFixed(2)} ± ${((ciHigh - ciLow) / 2).toFixed(2)})` : `${algo} (${mean.toFixed(2)})`; g.append("text") .attr("x", 15) .attr("y", 0) .attr("dy", "0.32em") .style("font-size", "10px") .text(statText); }); return outerContainer.node(); }33:T26d2,viewof chart_integrated2 = { const metricName = selectedMetric; const width = 310, height = 220, margin = { top: 30, right: 10, bottom: 40, left: 50 }; const experiments = [...new Set(processed_all_algo.map(d => d.E))].sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }) ); const Js = [...new Set(processed_all_algo.map(d => +d.J))].sort((a, b) => a - b); const Rs = [...new Set(processed_all_algo.map(d => +d.R))].sort((a, b) => a - b); const algos = [...new Set(processed_all_algo.map(d => d.algo))]; const shapeGenerators = { circle: (g, cx, cy, size, fillColor, strokeColor) => g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", size).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), square: (g, cx, cy, size, fillColor, strokeColor) => g.append("rect").attr("x", cx - size).attr("y", cy - size).attr("width", size * 2).attr("height", size * 2).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), diamond: (g, cx, cy, size, fillColor, strokeColor) => g.append("polygon").attr("points", `${cx},${cy - size} ${cx + size},${cy} ${cx},${cy + size} ${cx - size},${cy}`).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), triangle: (g, cx, cy, size, fillColor, strokeColor) => g.append("polygon").attr("points", `${cx},${cy - size} ${cx + size},${cy + size} ${cx - size},${cy + size}`).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), cross: (g, cx, cy, size, fillColor) => { const s = size * 1.0; g.append("line") .attr("x1", cx - s).attr("y1", cy - s) .attr("x2", cx + s).attr("y2", cy + s) .attr("stroke", fillColor) .attr("stroke-width", size / 1.5); return g.append("line") .attr("x1", cx - s).attr("y1", cy + s) .attr("x2", cx + s).attr("y2", cy - s) .attr("stroke", fillColor) .attr("stroke-width", size / 1.5); }, plus: (g, cx, cy, size, fillColor) => { const s = size * 1.2; g.append("line").attr("x1", cx - s).attr("y1", cy).attr("x2", cx + s).attr("y2", cy).attr("stroke", fillColor).attr("stroke-width", size / 1.5); return g.append("line").attr("x1", cx).attr("y1", cy - s).attr("x2", cx).attr("y2", cy + s).attr("stroke", fillColor).attr("stroke-width", size / 1.5); }, star: (g, cx, cy, size, fillColor, strokeColor) => { const R = size * 1.2, r = size * 0.6; let path = ""; for (let i = 0; i < 10; i++) { const angle = Math.PI / 5 * i; const radius = i % 2 === 0 ? R : r; const x = cx + radius * Math.sin(angle); const y = cy - radius * Math.cos(angle); path += i === 0 ? `M${x},${y}` : `L${x},${y}`; } return g.append("path").attr("d", path + "Z").attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); }, pentagon: (g, cx, cy, size, fillColor, strokeColor) => { const R = size * 1.2; let path = ""; for (let i = 0; i < 5; i++) { const angle = (Math.PI * 2 / 5) * i - Math.PI / 2; const x = cx + R * Math.cos(angle); const y = cy + R * Math.sin(angle); path += i ? `L${x},${y}` : `M${x},${y}`; } return g.append("path").attr("d", path + "Z").attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); }, hexagon: (g, cx, cy, size, fillColor, strokeColor) => { const R = size * 1.2; const points = Array.from({ length: 6 }, (_, i) => { const angle = Math.PI / 3 * i; return [cx + R * Math.cos(angle), cy + R * Math.sin(angle)]; }); return g.append("polygon").attr("points", points.map(p => p.join(",")).join(" ")).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); } }; const algoToShape = { "Conjugate Priors": "circle", "MLE": "square", "EM": "diamond", "KDE": "triangle", "Hard K-Means": "pentagon", "UCL KDE": "plus", "DEBM GMM": "star", "DEBM": "cross", "UCL GMM": "hexagon" }; const aggregatedData = []; experiments.forEach(E => { const expData = processed_all_algo.filter(d => d.E === E); Js.forEach(J => { Rs.forEach(R => { algos.forEach(algo => { const points = expData.filter(d => d.J == J && d.R == R && d.algo === algo); if (points.length > 0) { const meanKendallsTau = d3.mean(points, d => d.kendalls_tau); const meanMAE = d3.mean(points, d => d.mae); const meanMAEDiseased = d3.mean(points, d => d.mae_diseased); // const validQWKs = points.map(d => d.qwk).filter(v => typeof v === 'number' && !isNaN(v)); // const meanQWK = validQWKs.length > 0 ? d3.mean(validQWKs) : null; aggregatedData.push({ E, J, R, algo, kendalls_tau: meanKendallsTau, mae: meanMAE, mae_diseased: meanMAEDiseased, count: points.length }); } }); }); }); }); const algoStats = {}; algos.forEach(algo => { const algoPoints = aggregatedData.filter(d => d.algo === algo); const values = algoPoints.map(d => d[metricName]); const mean = d3.mean(values); let ciLow = null, ciHigh = null; if (values.length > 1) { const n = values.length; const stdDev = Math.sqrt(d3.sum(values.map(x => Math.pow(x - mean, 2))) / (n - 1)); const stderr = stdDev / Math.sqrt(n); const tCritical = 1.96; ciLow = mean - tCritical * stderr; ciHigh = mean + tCritical * stderr; } algoStats[algo] = { mean, ciLow, ciHigh }; }); const sortedAlgos = [...algos].sort((a, b) => { return algoStats[a].mean - algoStats[b].mean; }); const color = d3.scaleOrdinal(d3.schemeTableau10).domain(sortedAlgos); const xGroup = d3.scaleBand().domain(Js).range([margin.left, width - margin.right]).padding(0.1); const xInner = d3.scalePoint().domain(Rs).range([0, xGroup.bandwidth()]).padding(0.5); const outerContainer = d3.create("div").style("position", "relative").style("width", "100%"); const svgWidth = width * Math.min(experiments.length, 3); const svgHeight = height * Math.ceil(experiments.length / 3) + 100; const masterSVG = outerContainer.append("svg").attr("width", svgWidth).attr("height", svgHeight).style("background", "#fff"); experiments.forEach((E, index) => { const row = Math.floor(index / 3), col = index % 3; const chartG = masterSVG.append("g").attr("transform", `translate(${col * width}, ${row * height})`); const expData = aggregatedData.filter(d => d.E === E); let yDomain; if (metricName === 'kendalls_tau') yDomain = [0.6, 0]; else if (metricName === 'qwk') yDomain = [0, 1.0]; else yDomain = [4, 0]; const y = d3.scaleLinear().domain(yDomain).nice().range([height - margin.bottom, margin.top]); chartG.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y).ticks(5).tickFormat(d => d.toFixed(1))); chartG.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xGroup)).selectAll(".tick text").text(d => `J=${d}`); chartG.append("text").attr("x", width / 2).attr("y", margin.top - 10).attr("text-anchor", "middle").style("font-size", "12px").style("font-weight", "bold").text(E); if (index === 0) { chartG.append("text") .attr("transform", "rotate(-90)") .attr("x", -(height - margin.bottom + margin.top) / 2) .attr("y", margin.left / 4) .attr("text-anchor", "middle") .style("font-size", "12px") .text(metricName === 'kendalls_tau' ? "Kendall's Tau of Orderings" : metricName === 'mae' ? "MAE of Stagings" : "QWK of Stagings"); } sortedAlgos.forEach(algo => { Js.forEach(J => { const points = expData.filter(d => d.algo === algo && d.J === J).sort((a, b) => a.R - b.R); if (points.length < 2) return; const line = d3.line().x(d => xGroup(d.J) + xInner(d.R)).y(d => y(d[metricName])).curve(d3.curveMonotoneX); chartG.append("path").datum(points).attr("fill", "none").attr("stroke", color(algo)).attr("stroke-width", 1.5).attr("d", line); points.forEach(d => { const cx = xGroup(d.J) + xInner(d.R); const cy = y(d[metricName]); const shapeFn = shapeGenerators[algoToShape[algo]]; shapeFn(chartG, cx, cy, 3, color(algo), "white"); }); }); }); }); const legendG = masterSVG.append("g").attr("transform", `translate(0, ${height * Math.ceil(experiments.length / 3)})`); const itemsPerRow = 5; const itemWidth = svgWidth / itemsPerRow; legendG.append("text") .attr("x", svgWidth / 2) .attr("y", 15) .attr("text-anchor", "middle") .style("font-size", "11px") .style("font-weight", "bold") .text(`Algorithms (Avg. ${ metricName === 'kendalls_tau' ? "Normalized Kendall's Tau Distance" : metricName === 'mae' ? "MAE All" : "MAE Diseased" } ± 95% CI)`); sortedAlgos.forEach((algo, i) => { const row = Math.floor(i / itemsPerRow); const col = i % itemsPerRow; const g = legendG.append("g").attr("transform", `translate(${col * itemWidth + 40}, ${row * 20 + 40})`); const shapeFn = shapeGenerators[algoToShape[algo]]; shapeFn(g, 0, 0, 5, color(algo), "black"); const { mean, ciLow, ciHigh } = algoStats[algo]; const statText = (ciLow != null && ciHigh != null) ? `${algo} (${mean.toFixed(2)} ± ${((ciHigh - ciLow) / 2).toFixed(2)})` : `${algo} (${mean.toFixed(2)})`; g.append("text") .attr("x", 15) .attr("y", 0) .attr("dy", "0.32em") .style("font-size", "10px") .text(statText); }); return outerContainer.node(); }34:T2af9,// viewof chart_simplified = { // const metricName = selectedMetric; // const width = 310, height = 220, margin = { top: 30, right: 10, bottom: 40, left: 50 }; // // Extract unique values for experiments, J, R, and algorithms // const experiments = [...grouped.keys()].sort((a, b) => // a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }) // ); // // For J and R, we iterate through the first experiment to get all possible values // const firstExp = grouped.get(experiments[0]); // const Js = [...firstExp.keys()].map(Number).sort((a, b) => a - b); // // Get a flattened array of all R values across all J values in the first experiment // const Rs = [...Js.flatMap(j => { // const rMap = firstExp.get(j); // return [...rMap.keys()].map(Number); // })].sort((a, b) => a - b) // .filter((v, i, self) => self.indexOf(v) === i); // Remove duplicates // // Get all unique algorithm names // const algos = new Set(); // for (const [E, jMap] of grouped) { // for (const [J, rMap] of jMap) { // for (const [R, algoMap] of rMap) { // for (const [algo, _] of algoMap) { // algos.add(algo); // } // } // } // } // const uniqueAlgos = [...algos]; // // Shape generators remain the same // const shapeGenerators = { // circle: (g, cx, cy, size, fillColor, strokeColor) => // g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", size).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), // square: (g, cx, cy, size, fillColor, strokeColor) => // g.append("rect").attr("x", cx - size).attr("y", cy - size).attr("width", size * 2).attr("height", size * 2).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), // diamond: (g, cx, cy, size, fillColor, strokeColor) => // g.append("polygon").attr("points", `${cx},${cy - size} ${cx + size},${cy} ${cx},${cy + size} ${cx - size},${cy}`).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), // triangle: (g, cx, cy, size, fillColor, strokeColor) => // g.append("polygon").attr("points", `${cx},${cy - size} ${cx + size},${cy + size} ${cx - size},${cy + size}`).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5), // cross: (g, cx, cy, size, fillColor) => { // const s = size * 1.0; // g.append("line") // .attr("x1", cx - s).attr("y1", cy - s) // .attr("x2", cx + s).attr("y2", cy + s) // .attr("stroke", fillColor) // .attr("stroke-width", size / 1.5); // return g.append("line") // .attr("x1", cx - s).attr("y1", cy + s) // .attr("x2", cx + s).attr("y2", cy - s) // .attr("stroke", fillColor) // .attr("stroke-width", size / 1.5); // }, // plus: (g, cx, cy, size, fillColor) => { // const s = size * 1.2; // g.append("line").attr("x1", cx - s).attr("y1", cy).attr("x2", cx + s).attr("y2", cy).attr("stroke", fillColor).attr("stroke-width", size / 1.5); // return g.append("line").attr("x1", cx).attr("y1", cy - s).attr("x2", cx).attr("y2", cy + s).attr("stroke", fillColor).attr("stroke-width", size / 1.5); // }, // star: (g, cx, cy, size, fillColor, strokeColor) => { // const R = size * 1.2, r = size * 0.6; // let path = ""; // for (let i = 0; i < 10; i++) { // const angle = Math.PI / 5 * i; // const radius = i % 2 === 0 ? R : r; // const x = cx + radius * Math.sin(angle); // const y = cy - radius * Math.cos(angle); // path += i === 0 ? `M${x},${y}` : `L${x},${y}`; // } // return g.append("path").attr("d", path + "Z").attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); // }, // pentagon: (g, cx, cy, size, fillColor, strokeColor) => { // const R = size * 1.2; // let path = ""; // for (let i = 0; i < 5; i++) { // const angle = (Math.PI * 2 / 5) * i - Math.PI / 2; // const x = cx + R * Math.cos(angle); // const y = cy + R * Math.sin(angle); // path += i ? `L${x},${y}` : `M${x},${y}`; // } // return g.append("path").attr("d", path + "Z").attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); // }, // hexagon: (g, cx, cy, size, fillColor, strokeColor) => { // const R = size * 1.2; // const points = Array.from({ length: 6 }, (_, i) => { // const angle = Math.PI / 3 * i; // return [cx + R * Math.cos(angle), cy + R * Math.sin(angle)]; // }); // return g.append("polygon").attr("points", points.map(p => p.join(",")).join(" ")).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 0.5); // } // }; // const algoToShape = { // "Conjugate Priors": "circle", // "MLE": "square", // "EM": "diamond", // "KDE": "triangle", // "Hard K-Means": "pentagon", // "UCL KDE": "plus", // "DEBM GMM": "star", // "DEBM": "cross", // "UCL GMM": "hexagon" // }; // // Use the grouped data directly instead of re-aggregating // const aggregatedData = []; // for (const [E, jMap] of grouped) { // for (const [J, rMap] of jMap) { // for (const [R, algoMap] of rMap) { // for (const [algo, stats] of algoMap) { // aggregatedData.push({ // E, // J: +J, // R: +R, // algo, // kendalls_tau: stats.kendalls_tau, // mae: stats.mae, // qwk: stats.qwk, // count: stats.count // }); // } // } // } // } // // Calculate algorithm statistics directly from the grouped data // const algoStats = {}; // uniqueAlgos.forEach(algo => { // const algoPoints = aggregatedData.filter(d => d.algo === algo); // const values = algoPoints.map(d => d[metricName]); // const mean = d3.mean(values); // let ciLow = null, ciHigh = null; // if (values.length > 1) { // const n = values.length; // const stdDev = Math.sqrt(d3.sum(values.map(x => Math.pow(x - mean, 2))) / (n - 1)); // const stderr = stdDev / Math.sqrt(n); // const tCritical = 1.96; // ciLow = mean - tCritical * stderr; // ciHigh = mean + tCritical * stderr; // } // algoStats[algo] = { mean, ciLow, ciHigh }; // }); // // Sort algorithms based on the performance metric // const sortedAlgos = [...uniqueAlgos].sort((a, b) => { // if (metricName !== 'mae') { // return algoStats[b].mean - algoStats[a].mean; // } else { // return algoStats[a].mean - algoStats[b].mean; // } // }); // const color = d3.scaleOrdinal(d3.schemeTableau10).domain(sortedAlgos); // const xGroup = d3.scaleBand().domain(Js).range([margin.left, width - margin.right]).padding(0.1); // const xInner = d3.scalePoint().domain(Rs).range([0, xGroup.bandwidth()]).padding(0.5); // const outerContainer = d3.create("div").style("position", "relative").style("width", "100%"); // const svgWidth = width * Math.min(experiments.length, 3); // const svgHeight = height * Math.ceil(experiments.length / 3) + 100; // const masterSVG = outerContainer.append("svg").attr("width", svgWidth).attr("height", svgHeight).style("background", "#fff"); // experiments.forEach((E, index) => { // const row = Math.floor(index / 3), col = index % 3; // const chartG = masterSVG.append("g").attr("transform", `translate(${col * width}, ${row * height})`); // // Filter data for this experiment // const expData = aggregatedData.filter(d => d.E === E); // let yDomain; // if (metricName === 'kendalls_tau') yDomain = [-0.2, 1.0]; // else if (metricName === 'qwk') yDomain = [0, 1.0]; // else yDomain = [2, 0]; // const y = d3.scaleLinear().domain(yDomain).nice().range([height - margin.bottom, margin.top]); // chartG.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y).ticks(5).tickFormat(d => d.toFixed(1))); // chartG.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xGroup)).selectAll(".tick text").text(d => `J=${d}`); // chartG.append("text").attr("x", width / 2).attr("y", margin.top - 10).attr("text-anchor", "middle").style("font-size", "12px").style("font-weight", "bold").text(E); // if (index === 0) { // chartG.append("text") // .attr("transform", "rotate(-90)") // .attr("x", -(height - margin.bottom + margin.top) / 2) // .attr("y", margin.left / 4) // .attr("text-anchor", "middle") // .style("font-size", "12px") // .text(metricName === 'kendalls_tau' ? "Kendall's Tau of Orderings" : metricName === 'mae' ? "MAE of Stagings" : "QWK of Stagings"); // } // sortedAlgos.forEach(algo => { // Js.forEach(J => { // const points = expData.filter(d => d.algo === algo && d.J === J).sort((a, b) => a.R - b.R); // if (points.length < 2) return; // const line = d3.line().x(d => xGroup(d.J) + xInner(d.R)).y(d => y(d[metricName])).curve(d3.curveMonotoneX); // chartG.append("path").datum(points).attr("fill", "none").attr("stroke", color(algo)).attr("stroke-width", 1.5).attr("d", line); // points.forEach(d => { // const cx = xGroup(d.J) + xInner(d.R); // const cy = y(d[metricName]); // const shapeFn = shapeGenerators[algoToShape[algo]]; // shapeFn(chartG, cx, cy, 3, color(algo), "white"); // }); // }); // }); // }); // const legendG = masterSVG.append("g").attr("transform", `translate(0, ${height * Math.ceil(experiments.length / 3)})`); // const itemsPerRow = 5; // const itemWidth = svgWidth / itemsPerRow; // legendG.append("text") // .attr("x", svgWidth / 2) // .attr("y", 15) // .attr("text-anchor", "middle") // .style("font-size", "11px") // .style("font-weight", "bold") // .text(`Algorithms (Avg. ${ // metricName === 'kendalls_tau' ? "Kendall's Tau" : // metricName === 'mae' ? "MAE" : "QWK" // } ± 95% CI)`); // sortedAlgos.forEach((algo, i) => { // const row = Math.floor(i / itemsPerRow); // const col = i % itemsPerRow; // const g = legendG.append("g").attr("transform", `translate(${col * itemWidth + 40}, ${row * 20 + 40})`); // const shapeFn = shapeGenerators[algoToShape[algo]]; // shapeFn(g, 0, 0, 5, color(algo), "black"); // const { mean, ciLow, ciHigh } = algoStats[algo]; // const statText = (ciLow != null && ciHigh != null) // ? `${algo} (${mean.toFixed(2)} ± ${((ciHigh - ciLow) / 2).toFixed(2)})` // : `${algo} (${mean.toFixed(2)})`; // g.append("text") // .attr("x", 15) // .attr("y", 0) // .attr("dy", "0.32em") // .style("font-size", "10px") // .text(statText); // }); // return outerContainer.node(); // }35:[{"id":"b3641e5602ecc06ed9b2ae8652d34dce461e62495676d63bc597cba133b6c839876f1f4880c70da7e8296981155635d4db2461ddf21edc2b96021767f67d2495","href":"https://static.observableusercontent.com/files/b3641e5602ecc06ed9b2ae8652d34dce461e62495676d63bc597cba133b6c839876f1f4880c70da7e8296981155635d4db2461ddf21edc2b96021767f67d2495","name":"mlhc_results_fastsaebm_all_five_variants_results.csv","type":"text/csv","lastModified":1754400902171.457,"size":8422980},{"id":"3c14f12d3a3f8c9db9aabc96892e3e91c2442c01db162ccfd06ac4d8819233a7fb6c2a7f3a9325fb9532c1f29d2c0d4ec6eafb887b37f00aaf9dbf6dd8ce7413","href":"https://static.observableusercontent.com/files/3c14f12d3a3f8c9db9aabc96892e3e91c2442c01db162ccfd06ac4d8819233a7fb6c2a7f3a9325fb9532c1f29d2c0d4ec6eafb887b37f00aaf9dbf6dd8ce7413","name":"all_results@20.csv","type":"text/csv","lastModified":1760896884288.991,"size":8434074}] 2e:{"id":"a30e38aaec8c8251","slug":"mlhc-2025-plots","title":"MLHC 2025 (Clean Version)","thumbnail":"a1826b8b0048dc9b6635ffb582a1c734b6d160daba2ef33ae22ed9dc542eed4c","access_level":"public","create_time":"$D2025-06-22T04:03:56.477Z","update_time":"$D2025-10-19T18:01:19.247Z","view_time":null,"first_public_time":"$D2025-07-11T22:50:32.450Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024"},"version":598,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"},{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"MLHC 2025 (Clean Version)","cells":[{"id":0,"value":"# MLHC 2025 (Clean Version)","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"processed = all_results\n .filter(d => !['EM', 'MLE', 'Hard K-Means', 'KDE'].includes(d.algo))\n .map(d => ({\n E: d.E.replace(/\\+/g, '&'),\n J: +d.J,\n R: +d.R,\n algo: d.algo === 'Conjugate Priors' ? 'SA-EBM' : d.algo,\n kendalls_tau: +d.kendalls_tau,\n mae: +d.mae,\n mae_diseased: +d.mae_diseased\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"processed_all_algo = all_results\n .map(d => ({\n E: d.E.replace(/\\+/g, '&'),\n J: +d.J,\n R: +d.R,\n algo: d.algo,\n kendalls_tau: +d.kendalls_tau,\n mae: +d.mae,\n mae_diseased: +d.mae_diseased\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"grouped = d3.rollup(\n processed,\n values => ({\n kendalls_tau: d3.mean(values, d => d.kendalls_tau),\n mae: d3.mean(values, d => d.mae),\n qwk: d3.mean(values, d => d.qwk),\n count: values.length\n }),\n d => d.E,\n d => d.J,\n d => d.R,\n d => d.algo\n);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"biomarkerParams = ({\n \"MMSE\": { theta_mean: 22, theta_std: 2.67, phi_mean: 28, phi_std: 0.67 },\n \"ADAS\": { theta_mean: -20, theta_std: 4.00, phi_mean: -6, phi_std: 1.33 },\n \"AB\": { theta_mean: 150, theta_std: 16.67, phi_mean: 250, phi_std: 50.00 },\n \"P-Tau\": { theta_mean: -50, theta_std: 33.33, phi_mean: -25, phi_std: 16.67 },\n \"HIP-FCI\": { theta_mean: -5, theta_std: 6.67, phi_mean: 5, phi_std: 1.67 },\n \"HIP-GMI\": { theta_mean: 0.3, theta_std: 0.33, phi_mean: 0.4, phi_std: 0.23 },\n \"AVLT-Sum\": { theta_mean: 20, theta_std: 6.67, phi_mean: 40, phi_std: 15.00 },\n \"PCC-FCI\": { theta_mean: 5, theta_std: 3.33, phi_mean: 12, phi_std: 4.00 },\n \"FUS-GMI\": { theta_mean: 0.5, theta_std: 0.07, phi_mean: 0.6, phi_std: 0.07 },\n \"FUS-FCI\": { theta_mean: -20, theta_std: 6.00, phi_mean: -10, phi_std: 3.33 }\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"all_results = await FileAttachment(\"all_results@20.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"viewof selectedMetric = {\n const form = html``;\n \n form.value = form.querySelector(\"select\").value;\n form.querySelector(\"select\").addEventListener(\"input\", () => {\n form.value = form.querySelector(\"select\").value;\n form.dispatchEvent(new Event(\"input\"));\n });\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"