Projected Urban Population
View the project online
To run the app locally
npm run start
Description of Project
This is an interactive visualization of projected urban populations of Africa, Latin America, and Asia. The diameter of the arcs represent the total population. The orange section of each arc denotes the percent of the population that is urban. The user can toggle between the radio buttons to animate the data.
I used React to modularize my code. Each continent's data was represented by an object in
This data was loaded into the parent component,
UrbanApp.js. React state changed the continent data depending on which radio button was selected, and propogated the data down to child components. D3 was used for various helper functionality, such as scale and arc generation.
Data of each continent:
Styles, organized by component, as well as global style variables like color and size:
Parent component responsible for maintaining state and propogating data down to child components. Also handles data interpolation and animation.
Contains the headline and subhed.
Parent form component of radio buttons.
Each radio group is a radio button with a continent value. When the user selects a button, the state is changed and the data associated with the continent is filtered from the dataset.
SVG container element that contains two animated arcs - one is orange and represents the percent urban, and the other is the gray background. The end angle (how much the orange arc takes up) is calculated via a linear scale (refer to code for more details). This component also contains the text elements located into the middle of the arc. Two of these SVG containers are in
UrbanApp.js – one representing the year 1990, the other 2050.
This arc element is a
<path /> with a
d attribute generated by D3's arc generator. Uses a square root scale to scale the radius according to the population.
SVG element containing a line, arrowhead, and text element denoting the increase in urban people.
Simple div element showing the percent of urban population.
Source line at the bottom of the page.