Projected Urban Population

View the project online

http://danspector.io/urban_population

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.

Technical Overview

I used React to modularize my code. Each continent's data was represented by an object in ./src/regionDataset.js. 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.

Code Hierarchy

React Components:

./src/components/

Data of each continent:

./src/regionDataset.js

Styles, organized by component, as well as global style variables like color and size:

./src/styles/

Component Descriptions

UrbanApp.js Parent component responsible for maintaining state and propogating data down to child components. Also handles data interpolation and animation.

Headline.js Contains the headline and subhed.

RadioButtons.js Parent form component of radio buttons.

RadioGroup.js 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.

SvgArc.js 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.

Arc.js 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.

Arrow.js SVG element containing a line, arrowhead, and text element denoting the increase in urban people.

Percent.js Simple div element showing the percent of urban population.

Source.js Source line at the bottom of the page.