Threatened Animal Species

Team Members: Camille Birch, Nicole Riley, Jefferson Van Wagenen, Rebecca Wong

Design Rationale

When determining our visualization topic, we all agreed that we were interested in data related to animals. Animal conservation is an important topic, so we chose a dataset from the International Union for Conservation of Nature and Natural Resources (IUCN). The data is sufficiently rich such that we could produce interesting visualizations, and there were minimal data quality issues to handle.

Once we chose our dataset and did preliminary visualizations in Tableau to get an overview of the data, we decided to not include the plants and protists data. We chose to do this for two reasons. First, we wanted to focus on animals rather than other organisms. Second, the plant and protist data encompassed a much broader range of organisms than the others (considering taxonomy, plants and protists encompass Kingdoms, whereas the other groups were subdivided into smaller taxonomic groups); plants thus contained many more threatened species, while protists contained almost none. If we had included the plant or protist data, the graph scale would have made it difficult for a viewer to easily see all of the animal species group data -- which is our focus for this visualization. As such, we decided to only visualize animal species groups.

We had originally considered creating a map graphic showing the geographic locations of different threatened organisms and their current conservation status. However, we ultimately decided to not pursue this as our data lists the total number of threatened species in different organism groups and does not include the geographic data for each species. It was also difficult to find data in computer-readable format that included the geographic data necessary.

We decided to display the data as a multiline plot in which each line represents a group of organisms. The x axis represents the year and the y axis represents the number of organisms in the group that are considered threatened by the IUCN. We chose a multiline plot because it is an effective visual encoding for displaying changes in numbers over time. A pie chart or other area based graphic would not have been appropriate, as they are generally non-ideal for visualizing changes over several timepoints. Originally, we considered making the graphic an aggregation of the data across critically endangered, endangered, and vulnerable statuses, but decided against this as the ability to view the breakdown category by category provides interesting information. For instance, there are significantly more vulnerable species than there are endangered or critically endangered species.

By breaking down the data by endangerment level, we essentially create three different versions of the plot, with each version representing data from a different threatened category (one plot each for critically endangered, endangered, and vulnerable). The viewer can select which plot to view through a dropdown menu. The default plot is for critically endangered species. This interaction allows the viewer to see and understand how the number of species in each animal group differs across the different conservation categories. The y axis dynamically scales to make the data easily viewable (otherwise, the endangered and critically endangered plots would have data squished towards the bottom of the visualization); the animation makes it obvious that the scale is changing. We decided to use a dropdown menu to control this toggle because it clearly illustrates to the viewer that data from only one conservation level can be viewed at a time. The ability to view multiple of these levels at once would create a potentially confusing graphic, in which there would be so many plotted lines that interpreting them would be extremely difficult.

Another interactive component is the legend. By clicking on an organism group in the legend, the user can toggle the view of that group on or off. Because this aspect of interaction might not be intuitive to first time users, we included a sentence about how this kind of interaction works. By default, all groups are plotted. If a group is toggled off, the associated data disappears from the plot and the group name in the legend becomes grayed out. When a group is toggled on, the associated data is plotted and the group name in the legend is the same color as the plotted line. This form of interaction allows the user to clearly compare two or three groups at a time if desired, instead of having to view all the groups at once. Greying out the group name in the legend when it is toggled off conveys to the state of the group to the user (displayed vs. not displayed). The state of each organism group is maintained when the user switches between conservation levels. There is also a redraw all lines button that allows the user to quickly toggle all of the organism groups back to visible. Our thought process for this button stemmed from the principle of the reset button that is important in data visualization, as this lets the user reset the graph within the current conservation level category. This is a useful addition, as it allows the user to revert to a view all state without having to toggle each species back on individually.

The final interaction component is a line hover animation. When the mouse is hovered over a line, it becomes bolded while the others are greyed out. The legend title associated with the line also increases in size. This allows for the viewer to easily determine which line corresponds to which organism group. Because we have ten lines plotted in the visualization when all the organism groups are toggled on, the hover feature allows for the data of an individual organism group to jump out more clearly for the user.

We had originally considered including a year range slider that would have allowed the viewer to adjust the time range of the data that would appear in the graphic. We pursued developing it for a relatively long time, and had it implemented such that the slider appear, dynamically read position changes,and update the data appearing the graphic. We ultimately decided to not include this feature, as we did not feel that it would add much functionality to the graphic for the viewer. Adding an additional form of interaction would have made the visualization too busy, thus detracting from the other interactive elements that we had already implemented and provided more interesting information focus. While developing the slider, we also encountered several problems and bugs with the feature. For example, there were issues with flicker as the graph was redrawn every time the slider was adjusted. Our limited time to complete the assignment in addition to these difficulties also pushed us to focus on other interactive features that provide more value to the viewer.

An additional design decision that we made relatively early in our project development was to optimize our visualization for computers rather than smaller touchscreen devices such as tablets and phones. For instance, we include a hover feature that highlights the line and increases the size of the associated legend text. Hover functionality is not possible on touchscreen devices, so this feature would not be accessible on phones or tablets. In addition to this, the sizing and scaling of the visualization is optimized for a computer screen. On a smaller screen (such as that of a mobile device), it would be necessary to either view the graphic zoomed out, in which case the text and lines would be small and difficult to discern, or zoomed in, in which scrolling would be necessary to view all of the elements.

Development Process

Throughout the development process, all members of the project team were involved with all elements. Everyone participated in implementation, design, and design rationale writing. We first held preliminary meetings to choose our dataset and make general design decisions, such as what interactive elements we would include in the visualization. Jefferson formatted the data into JSON and Nicole made Tableau visualizations to gain a better understanding of the data set. Jefferson implemented the original static graphic, with the rest of the group adding features and eventually changing the data formatting as needed. We then split into pairs to work on the original two interactive elements on which we planned to focus. Rebecca and Jefferson worked on building the year range slider while Camille and Nicole worked on building the interactive legend. At this point, we were working to show an aggregate of all conservation levels. We later decided that it would be more interesting to differentiate the data by level of endangerment rather than changing the year range, so we stopped working on the slider feature. Moving forward from there, we spent considerable time pair programming and individually programming to finish implementing the interactive legend and conservation level dropdown toggle. We also worked from home separately, messaging issues and achievements to each other on a group chat. We integrated individually created code during in-person meetings to help prevent conflicts in the code.

In total, it took an estimated 100 people-hours to complete the visualization. There was initially a steep learning curve, as none of us had previous experience with D3 -- even small accomplishments took significant time. We spent many hours on each interactive feature, as we did significant research both in the book and online to learn from other examples. The most time-consuming element of the project was finding bugs and fixing them, and making the first static visualization. Thoroughly debugging the code took a significant amount of time because some bugs were very subtle and therefore difficult to pinpoint and fix. The debugging process was further complicated by our general unfamiliarity with JavaScript.

Acknowledgements

Our data can be found here. This data was compiled by the IUCN Red List. We looked at several other D3 visualizations online to find ideas for implementation of certain elements of our visualization.

CSE 442 Data Visualization - University of Washington