Did we Save Our Tigers?

A data visualization explainer article about tiger conservation in India

SoT-01.png

Proposed visualization to show tiger population in India per year

Role

Team Member

Date

Tools

Adobe Illustrator, HTML, CSS, Python, Plotly library

September - December 2020

Team

Kattie Sepehri

Ramya Rao Basava

Methods

Data Visualization, Literature Review, Prototyping, UI Design 

Overview/Context

Developed as the course project for CPSC 547 (Information Visualization) at the University of British Columbia, Canada, this project is an interactive explainer article about the impact of the Save Our Tigers campaign in India.

 

In the span of ~3 months during September to December 2020, we worked on developing multiple visualizations in Python using the Plotly library and putting together this article. My contribution included making some of the visualizations independently, as well as prototyping all of them in Adobe Illustrator, and developing the final article webpage using HTML and CSS.

So, what was the problem?

Since the turn of the century, owing to various factors including climate change, the tiger population has lost over 95% of its historical range, and suffered a drastic 96% decrease in population. Three subspecies have gone extinct, and a fourth is regarded mostly extinct in the wild. Increasing threat from agricultural developments, deforestation and climate change to their habitat have resulted in confirmed breeding populations existing in only eight countries worldwide. 

 

However, after a century of decline, overall wild tiger numbers are starting to tick upward. India, which accounts for over 70% of the global tiger population, has had major success with its tiger conservation efforts, initiated majorly under Project Save Our Tigers, a joint initiative between Indian media and conservatories started in 2008. From a tiger population of 1411 tigers in 2006, India now stands at 2967, a remarkable transformation. 

 

While we were able to get data about the population increase over the years, as wildlife enthusiasts we wished to see trends and patterns in this data. We wanted to know how the conservation efforts had fared by state, by region, by year, but gathering such insights from a spreadsheet database was complicated and tedious.

Who was our target demographic?

Our target audience was anyone who wanted to know more about the tiger conservation effort in India, however, we also wanted to make something that would be easily understandable by everyone, be it wildlife enthusiasts, people interested in data visualization, or simply someone stumbling upon our web page on the vast Internet.

What was our plan?

We followed Dr. Tamara Munzner’s what-why-how framework - what data is to be presented, why is it being visualized, and how will the visual encodings and interactions be designed:

1. What is the data being presented:

Our dataset here was the tiger population data in a time-series format, obtained from the report: Status of Tigers in India 2018. It is available for the years 2006, 2010, 2014 and 2018. The existing data consists of the following for each year:

• Region and states in India where tiger populations exist and are counted.

• The number of tigers in each state with an upper and lower bound.

• The data is available for 23 states in India

2. Why is this being visualized:

The main goal of our visualization article was to enable readers to be better informed and self-analyze tiger conservation efforts in India.

 

Hence, we came up with sample tasks users would probably like to accomplish through our visualizations:

  •  Understand data from visualizations: Readers should be able to comprehend and understand the census data being represented.

  • Identify trends in visualizations: Readers should be able to analyze the visualizations and find trends in the data being shown.

  • Analyse progress of a region: Readers should be able to analyze the visualizations for a particular region being shown. 

  • Overall understanding of current tiger scenario: Readers should be able to gain a concise understanding of the current status of tiger populations in various regions of India, with the context of previous populations.

3. How did we design the visual encodings:

We decided to have multiple visualizations to highlight different aspects of the dataset - some visualizations would focus more on highlighting chronological trends overall, and others would focus on highlighting particular regions or states in India. 

 

We followed an iterative design process, starting from low-fidelity sketching and moving on to final higher fidelity prototypes.

Low-fidelity prototyping:

We began by sketching low-fidelity mockups on paper, just brainstorming ideas as to how we could potentially visualize the dataset:

IMG_20201014_032552.jpg
IMG_20201014_032549.jpg
IMG_20201014_032543.jpg
IMG_20201014_032532.jpg

Low fidelity prototype of our proposed visualizations: (clockwise from top left) A choropleth map to show population geographically, a scatterplot to show population by size, a line graph to show change per year, a multiple line graph to show growth over time

We decided to visualize the tiger population over years through multiple ways. Some of the ideas we came up with:

  • A choropleth map showing the population of tigers in each state per year. This would help show the tiger population geographically, allowing users to spot geographic trends across states and regions. Readers would be able to see the population on hovering on a particular state, and select the year from a drop-down list. This would also be an ideal visualization (viz) for casually-browsing readers, since it would be easy to understand and readers could be in control of how much information they wanted to see.

  • However, given that choropleths are notorious for misguiding viewers with visual importance due to geographic boundaries, we also decided to include a scatterplot version. Scatterplots are more cognitively complex, but provide more accurate information, where the size of the bubbles would represent the magnitude of the tiger population. Readers would still have control of selecting which year they wanted to see the information for, but they would still see it for all states at once without the geographical context.

  • We also decided to use a line graph to show the change in tiger population over time, with each data point representing the increase/decrease compared to the previous year. This would be useful in seeing which states were seeing growing/declining populations, irrespective of the size of the population. Readers would be able to select the state and year here through drop-down lists. 

  • Finally, we also decided to add a multiple line graph, which would show the overall population per year for states, where readers could add multiple states and hence compare trends across states.

High-fidelity prototyping:

After some initial feedback from the course instructor, we moved on to creating high-fidelity prototypes. While we could have directly moved on to coding the visualizations, we decided to create a high-fidelity version to make sure our ideas of the visual encodings would work the way we intended them to. Creating high-fidelity versions closer to our final goal and using colours and marks and channels like we imagined gave us a clearer picture of what our end product would look like and what further refinements we might need.

SoT-01.png

High-fidelity prototype of our choropleth visualization showing tiger population by state per year

We decided to implement two versions of a choropleth map - the one above shows the tiger population in a state in a particular year. The colour helps show the size of the population - states with higher populations have darker shades. We also decided to show the states with the most and least populations per year, and also allow readers to select the year they want to see the data for from a simple button click. Population numbers for each state are also visible on hover, limiting the amount of information seen at once. 

However, we also wanted people to see the change in population - hence the second choropleth below which shows the change compared to the previous time point - an increase marked in blue and a decrease in red. This was important since some states might have a larger but continuously dwindling tiger population, and others might have a smaller but increasing population - both noteworthy developments. We decided to switch from a line chart to a choropleth for this since we felt geographic trends in this aspect would be more relevant as compared to seeing a simple chronological trend through a line chart. Again, we kept the same principles of showing the highest and lowest per year, selecting year through buttons, and showing the numbers on hover.

SoT-02.png

High-fidelity prototype of our choropleth visualization showing change in tiger population by state per year

The scatterplot shown below, shows the tiger population per state per year without the geographical context. We decided to use color encoding to show the highest and lowest populations per year. Readers could select which year they wanted to see the data for from a drop-down menu. 

Persona of Abigail's mom and primary caregiver, Emily

High-fidelity prototype of our choropleth visualization showing change in tiger population by state per year

SoT-03.png

High-fidelity prototype of our scatterplot visualization showing tiger population by state per year

The multiple line graph, shown below, with an option for users to select which all states they would like to see data for. We used the colours to differentiate not only between individual states, but also between regions like the north and south of India. Readers can add states for comparison from a drop-down list and select the amount of data they want to see. The multiple line chart would allow them to see chronological trends.

Persona of Abigail's clinician, Alice

SoT-04N.png

High-fidelity prototype of our multiple line visualization showing tiger population by state 

We also decided to add one more 'overall' viz - a summary chart that would encompass all our information in one graph - the 'tl;dr' version, one picture to show all the data to those who wanted a concise summary without needing to dig too deep. This graph shows the overall tiger population for each year for all years through a horizontal bar graph. We added the figures next to the bars for additional details and used colours to differentiate between the years. Readers can see how each state has progressed over time, while also seeing which states did well per year. 

SoT-05.png

High-fidelity prototype of our 'overall' visualization showing tiger population by state per year

Development:

Post high-fidelity mockup approval, we moved on to developing the visualizations. We tried standard visualization platforms like Tableau and PowerBI, but found choropleth maps particularly tough to implement. Since those maps were a focus of our project, we decided to instead code the visualizations from scratch, using the Plotly library in Python.

How did that turn out?

We faced some challenges in implementing our high-fidelity prototypes perfectly - for instance, we were unable to implement discrete color scales for the choropleths, and a drop-down list for the multiple line graph.

We also made some design decisions during implementation to further enhance the reader's experience:

  • We animated the scatterplot which helps users see the dynamic transformation in the tiger population of each state by year. Readers can still pause the animation if they want to see the graph in more detail.

  • We colour-coded the multiple line graph such that instead of a drop-down for each state, readers can select regions in India and see a comparison between the states in those regions. This made it easier to select multiple states rather than one at a time, given that we had data for 19 states.

  • We also added small multiple line charts to allow readers to see line charts for each state individually, if they want to see trends for a particular state over time.

  • And finally, given the appeal of racing bar charts, we added an animated racing bar chart that shows the progress by states per year, with the states with higher populations rising to the top as populations increase over the years. 

All the visualizations were then added to a webpage made in HTML and CSS, with content added in to create an interactive explainer article.

We also analyzed the visualizations generated and researched reasons for the change in populations, and provided the analysis in the article as well. This could serve as a source of inspiration or information for readers!

The full explainer article can be viewed here: https://bramyarao.github.io/547-Infoviz-Final/

2.png

A screenshot of the racing bar chart animation added to the explainer article

Who else knows?

We presented our project at the end of the course, to an audience of fellow students and visualization enthusiasts:

Outside of everyone who viewed that, now you know too! :)

Challenges we faced

Our biggest challenge was the lack of a more comprehensive and detailed dataset - the Indian government tracks tiger populations only once every 4 years, which meant even though we were trying to show progress from 2006 to 2018, we only had 4 years worth of data. However, given our interest in moving ahead with this particular project, we decided to use a combination of visualizations to extract as much information from this limited dataset as we could.

 

We also faced minor difficulties in translating our high-fidelity prototype perfectly in Python, and made some design decisions on the go as we needed to. We tried to keep the essence of the visualization the same as the prototype, with minor changes in places in colours and fonts. 

What did we learn?

I think our biggest learning here was the amount of information you can extract from a limited dataset - every data point tells a story, and with the correct visualization, you can make sure that story gets heard. 

We particularly enjoyed putting our heads together coming up with creative ways to visualize the data to highlight different aspects of the same data.

What’s gonna happen next?

The article is still live, and we intend to keep it that way, open-access for all who would like to read it. The code can also be viewed here: https://github.com/bramyarao/547-Infoviz-Final

We don’t have any other plans for this project for now, but at some point if we could have a larger data set, we’d love to see the changes it would create. 

Interactive explainer articles are a great way to engage readers with the topic, and given the importance of wildlife conservation, we’d love for there to be more such articles covering other species and topics!

Ok, now let’s talk about