Let's say we have a teacher student relation. On one side, we have a list of teachers and on the other, we have a list of students. What is the best way (visually appealing as well) to inform the user about the students taught by a particular teacher and the teachers that a particular student has signed up for. Hover is not an option, as this information has to be presented as soon as a user lands on this page. The assumption that can be made is there will be a maximum of 30 teachers and about 40 students. The subjects don't matter in this scenario. I only want the many to many relationship between a student and teachers mapped.

  • Would two different screens be an option? This would be a lot of information to communicate on immediate opening. – mhick Jul 8 '15 at 12:29
  • What is the use case? Choosing a visualization always depends on the intention what you want to make visible (to the mind, not to the eye). – André Kleinschmidt Jul 8 '15 at 14:56
  • The use case is that the user understands the relationship between different students and teachers on page landing. Subjects aren't important here. – parjun Jul 9 '15 at 3:56

You can use Tabs for Teacher and Students and then display Subject/Teachers in a list view along with the students enrolled to that subject - something like this:

enter image description here

  • The problem with this approach is that the Subject takes a majority of the visual space. I just want to show the relationship between teachers and students. Subject is irrelevant. – parjun Jul 9 '15 at 3:57
  • @parjun The Subject is a placeholder - you can replace that with Teacher and show more students - maybe in two lines – DPS Jul 9 '15 at 6:28
  • Thank you :) I used this idea to come up with something that fits my use case. – parjun Jul 9 '15 at 6:32
  • 1
    @parjun would be good to see what you've come up with – Dave Haigh Jul 9 '15 at 14:13

Using a tabular format you could have the students down one side and teachers across the top (or vice versa, a view switcher option?)

Students can find their name down the left, scan across to see their subjects and scan up from these to see their teacher. Also the cells could be split into multiple subjects if a teacher teaches more than one subject. (see teacher A, Student 3, relationship below).

The table could be filtered to show specific student rows or teacher columns, e.g. if a teacher only wants to see the students they teach they could filter the rows to that criteria.

enter image description here


Following on from André Kleinschmidt's improved more minimal version of my matrix, you could rotate it 45 degrees so both axis' labels ca be read horizontally. Could be another user option to change the view of it if desired.

Example: enter image description here

  • 1
    I really want to build this now! – Dave Haigh Jul 8 '15 at 13:46
  • I liked the approach, but the OP has mentioned around 40 Students and 30 Teachers - with this approach it be difficult to relate the association. – DPS Jul 8 '15 at 17:26
  • 1
    I also like this approach. Given, the question did not specify the need to show the subjects that describe the teacher-student association, perhaps we can abstract it way and use a number to show how many subjects? This way, if you rotate the teacher labels 90 degree, you can fit a lot more content on the page... – SerenS Jul 9 '15 at 7:37
  • @SerenS good suggestion, only downside I can think of is having to read teacher names at 90 degree angles. – Dave Haigh Jul 9 '15 at 14:16
  • Checkout @AndréKleinschmidt reply below! This is almost exactly what I had in mind!!! – SerenS Jul 9 '15 at 16:52


You could try a co-occurrence matrix with the teachers and the students as dimensions. If the subjects doesn't matter a cross/dot will decently show the connection and saves display space.


There is a nice example visualization of a co-occurence matrix, that shows the character co-occurrences in Victor Hugo’s Les Misérables. (See image below if the page became unavailable)

co-occurrence Les Miserables

The example was produced with the JavaScript-Library 3D.js that could be a valuable tool for you if you have to place it on a website.

In opposite to the example you would not match persons with themselves and obviously end up with a rectangular matrix.

additional options

Additionally you could provide a sort by teacher or student relying on the number of connections (filled cells per row/column). With numbering the cols/rows one could easily count how many students a teacher is in charge or vice versa with how many different teachers a single student has to deal.

Instead of a simple marker (dot, cross, etc.) you could fill the cells with the number of classes one teacher conducts to a corresponding student. Summing up this counters makes visible the teaching load per row/column.

  • This is almost exactly what I envisioned in my comment above! Its like you read my mind lol! ...A co-occurrence matrix - I learned something new :) Great answer !!! – SerenS Jul 9 '15 at 16:54
  • This is a great idea. We already found something that fits my requirements, but will keep this in mind the next time. TIL about Co-occurrence. Thank you! – parjun Jul 10 '15 at 7:18
  • 1
    This is what I envisioned after your suggestion @SerenS Very pretty and to the point with regards to purely showing the relationship mapping. This could even have a key with the subjects listed so you could if you want to see what subjects are taught between teacher > student. – Dave Haigh Jul 10 '15 at 9:30
  • You could have an option to switch the view to have the teachers down the left, in case someone is scanning for a particular teacher name. and vice versa with the student names. – Dave Haigh Jul 10 '15 at 9:40
  • isn't this type of visual just called a matrix diagram? rather than a co-occurrence matrix? – Dave Haigh Jul 10 '15 at 10:24

How about this?

enter image description here

Will filters help? Is it expected to show student details or just the name is fine while mapping with the teacher?

Share your thoughts.

  • Your answer sounds like a question :) If you believe in it, SELL IT! – Dirk v B Jul 9 '15 at 5:32
  • There are a few things which i think could "improve" this. Like a badge with a count for each row to ease scanning the data. Whats your thoughts for the user icons? Maybe use actual student profile images to identify them (a hover could reveal more details)... Then again, maybe I am nitpicking, but this feels unnatural and i dont think it scales nicely to a 40 x 30 sample... What I DO LIKE is that it feels very Subject-Centric :) i mean that the subjects are the primary/root nodes for this information. – SerenS Jul 9 '15 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.