MouseWatch was created in order for users to explore how body temperature, along with activity levels, differ between male/female mice over time. The interactive visualization was based on data collected from an observational experiment in which the body temperature/activity levels of mice (of both genders) were recorded to the minute. To ensure the mice maintained body clock rhythms, the lighting in the environment was adjusted every twelve hours; the first twelve hours of each day consisted of no lighting, to simulate nighttime, while the second twelve hours of each day consisted of lighting, to simulate daytime. The overall goal was to enable users to identify trends in the data, such as whether male or female mice experience higher body temperatures during each lighting period, whether male or female mice experience higher activity levels during each lighting period, the peak body temperature or activity level for each gender, and much more. By providing an interactive, intuitive way to explore these trends, MouseWatch empowers users to uncover meaningful insights into the biological rhythms of mice, which could be useful for future research.
There were many design choices which were considered for implementation into the visualization, but our final version includes elements which best suit the intended purpose.
Our interactive visualization utilizes two line charts (one for body temperature, and one for activity level) to represent trends over time, and these line charts are placed next to each other (in a vertical manner) to allow for easy comparison. The x-axis represents time, in days, while the y-axis represents either the temperature (in ℃) or the activity level. To distinguish between male vs. female mice, a natural color encoding is used; blue is used to represent male mice, while pink is used to represent female mice. These colors are represented on the lines in the chart, in addition to the buttons at the top, which allow the user to filter by gender. Additionally, these colors (albeit stereotypical) allow the user to easily map the corresponding data to each gender without having to refer to a legend. Furthermore, to provide context for the light/dark cycles in the experiment, alternating shaded sections are added to the charts to represent dark periods, with unshaded sections representing light periods; again, just like the colors for the genders, this natural color choice allows the viewer to easily map each section of the chart to the appropriate lighting period. To clear up any possible confusion, though, a subtle legend is present below the line charts to explain the reason for the shading. At the top, a slider is implemented to allow users to brush through the entire 14-day period, while a dynamic value display (below the line charts) shows the exact temperature/activity levels at a specific point in time; this details-on-demand approach allows for deeper exploration into the data, which a static visualization is not able to provide.
To tie the theme of the visualization into the interactive elements, a small mouse is placed on the slider to be dragged by the user, and cheese is placed at the end of the slider; instead of simply placing text on the visualization to instruct the user to drag the mouse to the end, this playful, yet intuitive visual representation is used as instructions instead. Furthermore, when the user clicks on the buttons at the top to filter for gender, a “squeak” sound is played, and the user can control the volume of this squeak with a volume slider at the top right of the web page.
As far as alternatives go, bar charts or area charts were considered instead of line charts, but line charts were ultimately chosen for their ability to clearly display trends over time. Tooltips upon hovering were also considered, but a persistent value display was chosen instead to provide continuous feedback as the slider is moved. Initially, the shading legend consisted of squares with thin, solid borders to define the color for each lighting period representation, but this visual choice looked like a clickable button, so the squares were turned into rectangles, and a dashed border was added to mitigate this confusion.
Overall, every aspect of this interactive visualization is purposeful, and these design decisions were made to ensure the visualization is informative, intuitive, and playful, allowing users to uncover meaningful insights into the biological rhythms of mice.
The majority of the work for this project was done on one computer in person to ensure efficiency throughout the entire process. The “pair programming” method was used (but for 4 people) to write the code; one person wrote the code while the others thought of ideas or helped debug, and the person writing the code switched out every 20-30 minutes. In addition to the coding itself, the process involved designing the UI, initial templating, and a little bit of research. We sketched out our initial ideas on Microsoft Paint, and began developing our visualization, making tweaks along the way as necessary. After the majority of the visualization was created, the remaining work was done remotely, which included small tweaks to the visual encodings, adding fun elements to match the theme of the visualization, and composing the write-up. Overall, this project took our team roughly 15-20 hours, with the brunt of the time spent on getting the visualization to look similar to our prototype, in addition to fiddling around with the D3 library to fix bugs.