Did we Save Our Tigers?
A data visualization explainer article about tiger conservation in India
Visualizations showing (clockwise from top left) tiger population density per state in India, change in tiger population per state through small multiple line charts, comparative tiger population density through scatterplot, overlaid line charts to compare population change, increase/decrease in tiger population per state, overall population per state every 4 years
Role
Team Member
Date
Tools
Adobe Illustrator, HTML, CSS, Python, Plotly library
September - December 2020
Team
Kattie Sepehri
Ramya Rao Basava
Methods
Data and Task Abstraction, Visualization Design, Literature Review, Prototyping, UI Design, Visualization Development
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 creating the explainer article. My contribution included co-designing the visualizations and prototyping them in Adobe Illustrator, as well as co-developing them and final article webpage using HTML and CSS.
So, what was the problem?
Since 2000, owing to various factors including climate change, the tiger population has suffered a 96% decrease in population. However, 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. 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, hence we decided to visualize this dataset through an interactive explainer.
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 steps for nested visualization design:
-
Domain characterization
-
Data abstraction design
-
Encoding design
-
Algorithm design
Domain characterization:
Our domain 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
Data abstraction design:
The goal of this stage was to elicit generic tasks that users could perform with our dataset, thus guiding the next step of encoding design.
The aim of our project was to enable readers to be better informed and self-analyze tiger conservation efforts in India. Hence, we brainstormed 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 the current 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.
Encoding design:
We decided to have multiple visualizations to highlight different aspects of the dataset - some visualizations would focus 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 to final higher fidelity prototypes.
Low-fidelity prototyping:
We began by sketching low-fidelity mockups on paper, brainstorming ideas on how we could visualize the dataset:
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 show the tiger population geographically, allowing users to spot geographic trends across states and regions.
-
However, given that choropleths can misguide viewers with visual importance due to geographic boundaries, we also decided to include a scatterplot version. Scatterplots are cognitively complex, but more accurate, where the size of the bubbles would represent the magnitude of the tiger population.
-
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.
-
Finally, we also decided to add a multiple line graph, which would show the overall population per year for all states, where readers could add multiple states and hence compare trends across states.
High-fidelity prototyping:
After some initial feedback from our course instructor (Dr. Munzner), we moved on to creating high-fidelity prototypes. 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.
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.
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.
High-fidelity prototype of our choropleth visualization showing change in tiger population by state per year
The scatterplot below, shows the tiger population per state per year without the geographical size bias. 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
High-fidelity prototype of our scatterplot visualization showing tiger population by state per year
The multiple line graph below shows growth patterns for whichever states users select. We used 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.
Persona of Abigail's clinician, Alice
High-fidelity prototype of our multiple line visualization showing tiger population by state
We also decided to add a summary chart that would encompass all our information in one graph. This graph shows the overall tiger population for each year for all years through a horizontal bar graph. Readers can see how each state has progressed over time, while also seeing which states did well per year.
High-fidelity prototype of our 'overall' visualization showing tiger population by state per year
Algorithm design:
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 choropleths were a focus of our project, we decided to instead code the visualizations from scratch, using the Plotly library in Python.
We also created the explainer article using HTML and CSS, embedding the visualizations in it along with documentation guiding viewers on how to read and interact with the visualizations.
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 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 so that readers can select regions in India and see a comparison between the all states in those regions.
-
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.
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/
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.
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!