md `# Compare COMIC challenge results visualization`
viewof data_file = html`<input id='fileInput' type=file accept="application/json">`
viewof summary_stats_table = {
// Convert to list
const submissions = Object.values(parse_results);
// Collect stats in '2D', stat-major object
const stats = {}
for (const submission of submissions) {
const submission_id = submission.pk
submission.metrics.aggregates.summary_stats.forEach(stat => {
if (!(stat.id in stats)) {
stats[stat.id] = { title: stat.title }
}
stats[stat.id][submission_id] = stat.value
})
}
// Construct header
const headerCells = [
html`<td>Statistic</td>`,
...(submissions.map(submission => html`<td>${submission.submission_comment}</td>`))
]
// Construct table rows
const rows = [];
for (let stat_id in stats) {
const stat = stats[stat_id]
const valueCells = [
html`<td>${stat.title}</td>`,
...(submissions.map(submission => html`<td>${stat[submission.pk]}</td>`))
]
rows.push(html`<tr>${valueCells}</tr>`)
}
return html`<table id="statistics" style="table-layout: fixed;">
<thead style="border-bottom: 1px solid black;">${headerCells}</thead>
<tbody>${rows}</tbody>
</table>`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
