| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>AutoFS Leaderboard</title> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| margin: 40px; |
| } |
| |
| table { |
| border-collapse: collapse; |
| width: 100%; |
| } |
| |
| th, td { |
| border: 1px solid #ddd; |
| padding: 10px; |
| text-align: center; |
| } |
| |
| th { |
| cursor: pointer; |
| background-color: #f5f5f5; |
| user-select: none; |
| } |
| |
| th span { |
| margin-left: 6px; |
| font-size: 12px; |
| opacity: 0.7; |
| } |
| |
| tr:nth-child(even) { |
| background-color: #fafafa; |
| } |
| |
| .chart-row { |
| display: flex; |
| gap: 40px; |
| margin-top: 40px; |
| } |
| |
| .chart-container { |
| width: 50%; |
| } |
| |
| .chart-row-single { |
| display: flex; |
| justify-content: center; |
| margin-top: 40px; |
| } |
| |
| .chart-container-single { |
| width: 60%; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <h1>Feature Selection Leaderboard</h1> |
|
|
| <table> |
| <thead> |
| <tr> |
| <th>Rank</th> |
| <th onclick="sortTable('algorithm')">Algorithm <span id="arrow-algorithm">↕</span></th> |
| <th onclick="sortTable('num_features')">#Features <span id="arrow-num_features">↕</span></th> |
| <th onclick="sortTable('mean_f1')">Mean F1 <span id="arrow-mean_f1">↕</span></th> |
| <th onclick="sortTable('mean_auc')">Mean AUC <span id="arrow-mean_auc">↕</span></th> |
| <th onclick="sortTable('time')">Time (s) <span id="arrow-time">↕</span></th> |
| </tr> |
| </thead> |
| <tbody id="tbody"></tbody> |
| </table> |
|
|
| |
| <div class="chart-row"> |
| <div class="chart-container"> |
| <canvas id="f1Chart"></canvas> |
| </div> |
| <div class="chart-container"> |
| <canvas id="aucChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="chart-row-single"> |
| <div class="chart-container-single"> |
| <canvas id="timeChart"></canvas> |
| </div> |
| </div> |
|
|
| <script> |
| let leaderboardData = {{ leaderboard | tojson }}; |
| let sortKey = null; |
| let sortAsc = true; |
| let f1Chart, aucChart, timeChart; |
| |
| const metricOrder = { |
| algorithm: "asc", |
| num_features: "asc", |
| mean_f1: "desc", |
| mean_auc: "desc", |
| time: "asc" |
| }; |
| |
| function renderTable() { |
| const tbody = document.getElementById("tbody"); |
| tbody.innerHTML = ""; |
| |
| const n = leaderboardData.length; |
| |
| const isBestFirst = |
| (metricOrder[sortKey] === "desc" && !sortAsc) || |
| (metricOrder[sortKey] === "asc" && sortAsc); |
| |
| leaderboardData.forEach((r, i) => { |
| const rank = isBestFirst ? i + 1 : n - i; |
| |
| tbody.insertAdjacentHTML("beforeend", ` |
| <tr> |
| <td>${rank}</td> |
| <td>${r.algorithm}</td> |
| <td>${r.num_features}</td> |
| <td>${r.mean_f1.toFixed(4)}</td> |
| <td>${r.mean_auc.toFixed(4)}</td> |
| <td>${r.time.toFixed(2)}</td> |
| </tr> |
| `); |
| }); |
| } |
| |
| function sortTable(key) { |
| if (sortKey === key) { |
| sortAsc = !sortAsc; |
| } else { |
| sortKey = key; |
| sortAsc = metricOrder[key] === "asc"; |
| } |
| |
| leaderboardData.sort((a, b) => { |
| if (typeof a[key] === "string") { |
| return sortAsc |
| ? a[key].localeCompare(b[key]) |
| : b[key].localeCompare(a[key]); |
| } |
| return sortAsc ? a[key] - b[key] : b[key] - a[key]; |
| }); |
| |
| updateArrows(); |
| renderTable(); |
| updateCharts(); |
| } |
| |
| function updateArrows() { |
| document.querySelectorAll("th span").forEach(s => s.textContent = "↕"); |
| document.getElementById("arrow-" + sortKey).textContent = sortAsc ? "↑" : "↓"; |
| } |
| |
| function updateCharts() { |
| const labels = leaderboardData.map(r => r.algorithm); |
| |
| if (f1Chart) f1Chart.destroy(); |
| if (aucChart) aucChart.destroy(); |
| if (timeChart) timeChart.destroy(); |
| |
| const baseOptions = title => ({ |
| responsive: true, |
| maintainAspectRatio: true, |
| aspectRatio: 2, |
| plugins: { title: { display: true, text: title } } |
| }); |
| |
| f1Chart = new Chart(document.getElementById("f1Chart"), { |
| type: "line", |
| data: { |
| labels, |
| datasets: [{ label: "Mean F1", data: leaderboardData.map(r => r.mean_f1) }] |
| }, |
| options: baseOptions("Mean F1 Curve") |
| }); |
| |
| aucChart = new Chart(document.getElementById("aucChart"), { |
| type: "line", |
| data: { |
| labels, |
| datasets: [{ label: "Mean AUC", data: leaderboardData.map(r => r.mean_auc) }] |
| }, |
| options: baseOptions("Mean AUC Curve") |
| }); |
| |
| timeChart = new Chart(document.getElementById("timeChart"), { |
| type: "line", |
| data: { |
| labels, |
| datasets: [{ label: "Time (s)", data: leaderboardData.map(r => r.time) }] |
| }, |
| options: baseOptions("Runtime Curve") |
| }); |
| } |
| |
| renderTable(); |
| updateCharts(); |
| </script> |
|
|
| </body> |
| </html> |
|
|
