UNICEF Africa 2030
Adobe Illustrator
d3.js, JavaScript, jQuery, SASS
JSON, CSV
My Role in This Project
Position:
Project Lead, Design & Engineering
Design:
Data Visualization, User Interface Design, User Experience
Data:
Processing and Cleaning: Excel
Engineering:
Front-end: D3.js, JavaScript, jQuery, HTML5, SASS
UNICEF released the Generation 2030 Africa report in 2014. They needed a series of interactive visualizations to accompany the report and expose the statistics and findings to a larger audience of stakeholders and the general public. While working at Seed, I was tasked with leading the design and development of the Africa2030 interactive and worked closely with the team from the data division of UNICEF in crafting the visualizations.
Intellectual Property: this project was created while I was working at Seed and all intellectual property belongs to its respective owners as negotiated by contractual agreements or by law between the client and the company. Used with permission.
Worldwide population projections and Africa’s share of the total population.
The default value for the slider is 2015 and users can interact with the visualization through the slider and load the future projections. The description changes to reflect the current view.
Africa’s population and the share of the children under 18.
The visualization reflects the n-fold increase in population that stacks to the height of a bar chart, making use of time and animation to help users experience the increase.
Population projections, total, children under 5 and 18.
The stacked bar animates the shift of the bars, creating a push and pull effect, that helps users see both large scale and subtle shifts in the population dynamics of each continent.
Income brackets and number of babies born per bracket.
Hovering over the bars visualizes the countries on a map to both allow users to orient themselves geographically and also see the geo patterns that emerge. Geographic neighbors tend to have similar income conditions.
Equatorial Guinea is the only high-income country in the continent, a staggering statistic, highlighted by the virtually invisible bar on the graph. The labels were used strategically to enable users to still comprehend and interact with the datapoint.
Fragile and affected by conflict countries.
Number of babies born under these conditions are at greater risk.
Explore view.
The five visualizations, leading to the more complex explore panel, provide necessary context for users to be able to make the most of this more complex view. It enables them to slice the data in multiple ways while further studying the population dynamics.
A “smart” tooltip, that sorts and filters, allows users to seamlessly make comparisons across countries and continents.
Key messages and takeaways.
To account for the multiple user journeys and findings within the explore view, that may prove confusing to laypeople, we embedded a guided tour of the visualizations. Each indicator comes with its own key messages, that users can follow by simply clicking the play button. They can also play them one by one, at their own pace, by clicking on each square indicating a separate message.