The visualization can be found at https://6859-sp21.github.io/a4-cindy/.
This visualization uses data on extinct plant species around the world. The data comes from the International Union for Conservation of Nature (IUCN) Red list of Threatened Species (Version 2020-1) and was scrapped and prepared by Florent Lavergne. The data consists of three files.
- Plants.csv contains lists of plants with their scientific names, country, and last seen date.
- Threats.csv indicates the types of threats which contributed to the extinction of each species.
- Actions.csv indicates the conservation actions that were taken to preserve species.
This interactive visualization allows users to explore the number of plant species that have gone extinct around the world in the past century. An map of the world takes up most of the visualization, in which users can zoom into countries to select data for a particular country. There are three graphs at the bottom which show extra statistics about the threats to endangered species, the preservation actions that were taken, and a timeline of when plants went extinct. When a country is selected on a map, these three graphs dynamically adjust to show data from that country alone. A list with all species will also appear on the right-hand side, and users can see more information about each species by hovering over the name.
I chose this design by considering what would allow people to explore the variety of information in this dataset most easily. I imagine that most people are rather unfamiliar with this topic, and don’t have many preconceptions about the subject. I also don’t expect most people to try and become and expert on every detail about the topic. Rather, this graphic should be an interesting way to get a sense of which countries have a large number of extinct species, and appreciate the wide array of diversity that has been lost. I felt that an interactive map was the most effective encoding for exploring the dataset. To facilitate interaction, I made zoom functionality as agile as possible, as users can drag the map around, scroll to zoom, or click to zoom. I wanted the three smaller graphs to seamlessly update with every click on the graph as well, so that the user has to do minimal clicking in order to see all the information on one page. These three subgraphs have little interaction to them, and are simple bar/line graphs. This was to convey the information in the least cluttered way possible. There’s many other types of graphs (e.g. pie chart) that could have been used instead, but I chose to stick to the simplest ones to convey the information most clearly. The textbox on the right was an important addition because it allows users to also view species individually rather than just the aggregate level. I didn’t have enough information to create some type of taxonomy tree to display the plants, and I figured a list was the next best thing. I also added all the information I had about each plant to the second textbox that appears when a name is hovered over. I think the addition of an image to each plant brings the data to life much more. The images were downloaded through an automated Python code that saved the first image from each Google image search, so some images may not be most fitting.
Overall, the assignment took about 40 hours. It was overall very time consuming as I have no experience with JavaScript, HTML, CSS, and web development. The initial setup itself was difficult as I was unsure how to host an html page and get CSV/JSON data imports to work properly. Then, I spent a fair amount of time figuring out how to build interactive maps in D3. Although there are code templates online, I needed to understand every line in order to adjust it for my visualization. I started off by laying out all the components of my visualization, and then worked on adding small interactive features and fixing style issues or bugs. I found that parts of the D3 tutorials in class relied on imports only available in Observable, and much of the syntax was not compatible with an HTML version of D3. Although some of these libraries are available through CDNJS, it would cause some of my other imports to fail. As a result, I ended up learning D3 mostly by reading online tutorials and following their methods rather than through the tutorials shown in class. The Observable notebooks were very nice to read through, though, for initial understanding of D3.
The most challenging part of this project was the steep learning curve and keeping the code organized as my visualization became more complex. I tried to pay attention to detail, such as having the informational textboxes vanish and appear when countries are selected and deselected. There were also many custom margins and location coordinates that had to be manually set in order for the layout to fit together nicely. Having to pay attention to detail without the skillset to code well in D3/Javascript made my code much more messy and difficult to maintain. Because all these small details were extremely time-consuming, I was only able to do so much in terms of polishing the aesthetics of my visualization. Since style is extremely subjective anyway, I stuck to a simple stylesheet that wouldn’t distract from the main content.