SEAS
The School of Engineering and Applied Sciences (SEAS) is a highly interdisciplinary department, with 147 teaching and research faculty, 6 undergraduate majors, and 12 phd programs. And they want to visualize just how interdisciplinary their faculty are. Eliza Grinnel is the Director of Visual Communications and New Media, and she took CS 171, Intro to Data Visualization, the same semester I did, with the intention of making visualizations that SEAS could display on their website to showcase their department to prospective students, sponsors, and industry partners.
I remember seeing their final group project and loving it, and wanted to make something for my own department. NB: my department, OEB, is considerably smaller and I would honestly be surprised to see any significant academic collaboration between the faculty as they all study drastically different subjects. I'll probably make it would day just to see if I will be surprised. But circling back, the project wasn't finished just because the class was.
Eliza and her group member, Nhan, were still working on the visualizations but given they had full time jobs, they were reaching out to the Bok for help finishing the project. At this point I had joined the Bok Center as a Media and Design Fellow (MDF) and was more than happy to lend a hand.
My objective, within this project, was to finish some of the visualizations, solve bugs, and add features and functionality. I have worked on two of the four visualizations so far: the matrix visualization and the arc visualization.
Eliza, Nhan, Barbara, and Tyler were the original group who created the SEAS Interdisciplinary Visualizations for the CS 171 class, and below is a screenshot of the original matrix visualization (which is available here). The columns are the SEAS faculty and the rows are research interests (e.g. Biomaterials, Soft Matter, Circuits). The squares are colored red if that professor has listed that research interest on their profile. There are three dropdown filters. The left-most one filters either the faculty by their Academic Teaching Area (e.g. Applied Computation, Computer Science) or by their Research Interest. So you are filtering both the rows and the columns from one menu and can therefore do one or the other, but not both. The other two menus allow you to sort the data by teaching area or most research interests (middle), or most number of faculty (right). The default for both is alphabetical.
Below is a list of the majority of the adjustments I have or will make for the visualization. The content is pretty much there and the remaining tasks are about reorganizing the layout of the visualization to match the arc viz.
First, I decided to combine the two sorting filters into one button: Cluster. This sorts the faculty by most research interests and sorts the research interests by most faculty at the same time. I did this because whenever I was playing with the OG matrix, I always did both. I never really stopped at just one or the other for very long, and so I decided to eliminate one of the those steps, with the agreement of Eliza and Nhan. I did split up the filtering menu into two, though: Academic Area and Research Interest. This way the user can filter the rows and columns independently. However, it did create a problem that I needed to solve. What happens when the specific combination of Academic Area and Research Interest yields no faculty? A blank screen.
I never want a user to have to deal with a blank screen. I came up with two solutions and enacted both of them, since the first was easier to figure out. The first solution showed the starting matrix screen (the big wide one with no labels) and displayed a message: "No faculty found at the intersection of [Academic Area] and [Research Interest]". However, this isn't ideal, right, because it's a patch over a hole. I'd much rather the user not be able to see the hole at all.
It's not glamorous, but I created two look-up objects. The first is set up like
Academic Area 1 :{Research Area 1: true, Research Area 2: false, Research Area 3: true, ...}, Academic Area 2 :{Research Area 1: false, Research Area 2: true, Research Area 3: true,....},....
If there are any faculty at the intersection of the AA and RI, the boolean is true. The second look-up object is the exact opposite. It is structured with RI as the higher level and the AAs as the lower level. Whenever the filter menus change, a function grabs the value of the filter menu and goes through the appropriate look up table to determine which menu options should be disabled.
Et voila. The user never accidentally tumbles into a hole of empty data.
One thing the team wanted to add from the start was an indicator of the faculties' academic areas in their row. We decided the best way to do this was through a small box indicator, as seen above. And this required adding a legend. The creation of the legend isn't ideal, since it's hardcoded to certain x,y coordinates. However, for now, it's good enough. SEAS wants this to be desktop-only and instructed us not to worry about making the visualizations responsive. For now, at least.
Now, whenever the academic areas are filtered, there is a visual cue on the columns from the colors of the blocks. For the rows, however, I simply bolded the label for the selected research interest to give a similar visual cue.
Lastly, based on user feedback Eliza received either from the course or from shopping the visualizations around in SEAS, she was concerned about the color palette not being color-blind friendly. The color palette is the same palette that SEAS uses on their website for each of the academic areas, so we couldn't just replace the colors outright. We could introduce a color-blind friendly option, though, and so I created a toggle and function that switches between the two palettes, and Nhan used this functionality in the visualization he was working with, too.
I'm not quite done with this project, but it's close. I'm currently working on the arc visualization and when that's closer to being done, I'll update this article.