Using React to Build Interactive Interfaces to Exciting Dataset
Data Tutorial
On the side of my full-time job as the CEO of a small machine-learning company, my hobby is creating beautiful data visualizations.
I usually do that using Matplotlib, but I wanted to create a more interactive experience this time.
Since I enjoy web development and design, I decided to create a React application for the Population Estimates And Projections dataset from the World Bank.
It's a fascinating dataset where you can look at population pyramids for all countries and regions from 1960 to 2022, including projections to 2050. It's licensed under Creative Commons Attribution 4.0.
It's also a dataset well suited for an interactive interface where people can change years and regions quickly.
In this story, I'll share insights from my work and what I learned.
If you want to test the solution, you can find it here: https://datawonder.io/population-pyramids
Let's get started.
Part 1: Preparing the data
I wanted to create a simple and fast backend that serves data to the front end without doing any time-consuming preprocessing.
Instead, my idea was to do all the data ahead of time and load it all into memory when the applications start.
The World Bank data always have a set of indicators, and the ones I want have the following format:
Population ages ,
There are 17 age groups ranging from 0–4 and 80+. Each indicator has a separate column for every year, like in the pandas data frame below.
Since I knew exactly what parts of the data I needed and didn't want to do any filtering or other operations on the backend.
Instead, I decided to turn the DataFrame into a JSON file with the following format.
data = {
= {
"1960": {
"total": X + Y ... + A + B + ...
"male": {
"0-4": X,
"4-9": Y,
...
}
"female": {
"0-4": A,
"4-9": B,
...
}
}
...
}
...
} That's it for preparing the data.
Part 2: Creating the backend
The backend is the most straightforward part of this web application and only serves the JSON data for the user interface.
When the app starts, I load the preprocessed JSON into memory as a Python dictionary.
import json
from typing import List
from fastapi import FastAPI, Query
app = FastAPI()
population_data_file = open("./data/data.json")
population_data = json.load(population_data_file)
population_data_file.close()I decided to use FastAPI because it's one of the viable options and makes it easy to create endpoints.
When the user sends a query, I can instantly access the data.
@app.get("/population")
def get_data(areas: List[str] = Query(None)):
populations = []
for area in areas:
if area not in population_data.keys():
return "Unknown area", 400
populations.append({"area": area, "data": population_data[area]})
return {"populations": populations}I also have an endpoint to list all available countries and areas.
@app.get("/areas")
def get_countries():
return list(population_data.keys())That's every single line of code I have on my backend.
Part 3: Creating the user interface
Building the front end was the most time-consuming aspect of this project. I can't go through every line of code in detail.
My goal was to create a minimalistic application that's both responsive and easy to use because many data interfaces are too complicated.
I use two primary JavaScript libraries to make my life easier: Recharts and Chakra.
I won't go into much detail on Recharts because they have excellent documentation describing everything you can do.
In essence, they provide a React component called ResponsiveContainer that serves as the base of your charts.
You can then define things like BarChart, YAxis, XAxis, Tooltip, and Legend to create the perfect graph.
The structure looks like this; all components have several properties to get the styling right.
For example, I set my BarChart component to have a verticle layout and stack the bars on "sign" to make them go in opposite directions.
The prepare_data() the function takes the population data for one area and year and turns it into a list of objects.
const prepare_data = (population, percentage) => {
return AGES.map((age) => ({
name: age,
Male:
(population["male"][age] * -1) /
(percentage ? 0.01 * population["total"] : 1),
Female:
population["female"][age] / (percentage ? 0.01 * population["total"] : 1),
}));
};Here's what each chart looks like.
I set additional properties for other components to style the axis labels and grid, among other things.
Part 4: Deploying the application
I decided to use the Digital Ocean apps platform as my deployment, but it's probably not the cheapest option.
Their minimum backend service is way better than I require, but I plan to add additional endpoints for other datasets over time.
Deploying the frontend
If you create your front end with create-react-app, you can point Digital Ocean to that repo, and it will build the application whenever you push your code to master.
You don't need to create a Docker container or anything like that. It's fantastic for people like me who are lazy regarding DevOps.
It's also perfect for this application because it doesn't require anything fancy.
Conclusion
Static data visualizations are great, but sometimes, you want a more interactive experience allowing users to explore patterns themselves.
When that's the case, it's surprisingly easy to build simple React web applications that use open-source libraries to create charts and graphics.
In this tutorial, I shared some insight into how I created a user interface that allows users to look at age distributions for different countries and regions.
I hope that you got some inspiration to do a similar project yourself.
Thank you for reading, and see you next time!
