CODEWITHSUNDEEP
asp.nethtml
dan27
dan27

Reputation: 1505

Creative way to display table with multiple columns and rows in a grid

I have a matrix of user data points, userid, selection, selection result. Now, I can have any number of users (average would be 15-50) and any number of selections (average would be 14-20).

I want to display back to the user their selection, if it was correct or not as well as all of the other users' selections and whether they too got it correct or not. That way they can see how they did as well as how they did compared to anyone else.

I was thinking a large grid; however, that would probably require some sort of horizontal scroll bar regardless is the users are columns or rows.

I am assuming that there is no "good" way to display such a large grid on a page (HTML5). Is there? Any interesting examples?

Can someone suggest a more creative way to display this data? Maybe, the rows are the selections and the user is the first column...and then let him select what other users he wants to compare too?

Thoughts? Examples?

Upvotes: 1

Views: 548

Answers (1)

McGarnagle
McGarnagle

Reputation: 102743

There must be lots of ways to do this, but it's usually a good idea to present large data sets in a way that's easily digestible, with the ability to zoom in / drill down.

I like the idea of a modified "heat map". For each row, contrast the user's selection with the overall average of selections. Here's a simple example, where I assumed each selection had a right/wrong answer. The user's selections are color-coded as red-green, and the average of all users is on the color spectrum. You could also expand details on click, and allow the user to sort the questions by various metrics.

<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>​

Upvotes: 1

Related Questions