創造性地顯示網格中有多列和多行的表格

Question

我有一個用戶數據點，用戶標識，選擇，選擇結果的矩陣。現在，我可以有任意數量的用戶（平均值爲15-50），並且可以有多個選項（平均值爲14-20）。

我想向用戶顯示他們的選擇，如果它是正確的或不是所有其他用戶的選擇以及他們是否正確或不正確。這樣他們就可以看到他們的表現以及他們與其他人相比的表現。

我在想一個大網格;但是，無論用戶是列還是行，這可能都需要某種水平滾動條。

我假設沒有「好」的方法來在頁面上顯示這樣一個大網格（HTML5）。在那兒？任何有趣的例子？

有人可以建議一個更有創意的方式來顯示這些數據嗎？也許，行是選擇，用戶是第一列...然後讓他選擇他想要比較的其他用戶呢？

想法？例子？

Answer 1

必須有很多方法可以做到這一點，但通過一種易於消化的方式呈現大型數據集通常是一個好主意，可以放大/縮小。

我喜歡修改「熱圖」的想法。對於每一行，將用戶的選擇與總體平均選擇進行對比。 Here's a simple example，我認爲每個選擇都有正確/錯誤的答案。用戶的選擇以紅綠色進行顏色編碼，所有用戶的平均值在色譜上。您還可以展開有關點擊的詳細信息，並允許用戶按各種指標對問題進行排序。

<div class="cont"> 
    <div class="label">Correct selections:</div> 
    <div class="selection">5</div> 
    <div class="selection">10</div> 
    <div class="selection">8</div> 
    <div class="selection">25</div> 
    <div class="selection">8</div> 
    <div class="selection">22</div> 
    <div class="selection">2</div> 
    <div class="selection">0</div> 
</div> 
<div class="cont"> 
    <div class="label">Your selection:</div> 
    <div class="answer">correct</div> 
    <div class="answer">incorrect</div> 
    <div class="answer">correct</div> 
    <div class="answer">correct</div> 
    <div class="answer">incorrect</div> 
    <div class="answer">correct</div> 
    <div class="answer">correct</div> 
    <div class="answer">correct</div> 
</div>​