Exploring kepler.gl as a tool to create and share visualizations across UNICEF
Dr. Sudha Balakrishnan is a health specialist who focuses on HIV care and prevention for mothers and infants in UNICEF program countries. My team prototypes tools meant to improve decision making in country offices. Sudha has asked us to create a map for her of all health facilities in Malawi that she can superimpose on other data sets and add to a presentation. I’d like to find or create a tool to let her do this on her own.
This article describes what that tool might look like, and how it can be expanded so that she can share those maps with colleagues over the internet.
(This is what we have so far, btw, and this is part II of this story.)
At UNICEF, advocacy specialists often use maps to make their arguments. Inputs to a good map may include:
- borders for polygons (country, province, county)
- a CSV for points of interest (e.g. health facilities, schools)
- roads and rivers for calculating distance and travel time
In some cases, the data they want to display is sensitive and must be protected.
Putting all of these things together can be complex. What would be cool is a tool to make it easier for UNICEF staff to build a map and deploy it to a web app.
Kepler.gl is an open source application that lets you upload datasets to the browser, and visualize them as layers on a map.
Figure 1 is the landing page.
Drop a geojson file of Malawi at admin level 1, and the map below will render (Figure 2).
From there, drop a CSV of health facilities, and another layer is added, (Figure 3).
In the upper left corner you’ll see a share button. It has options to export an image, the data, and a configuration file.
In order to allow Sudah to share the map so that her colleagues can interact with it through a browser, I want to add another option that deploys the map to a separate web application.
Here are the steps:
- send the datasets and a layer configuration file from the browser to a public folder in a cloned copy of Kepler.gl on a separate virtual machine.
2. a docker image is built from the repository on the VM and deployed to a container and run on an open port.
Because kepler.gl is built using create-react-app, there is no programmable back-end to handle the transfer of data to the VM. A solution we’ve used with other create-react-app front-ends, is to add an express server with API end points. Since both applications run from the same domain, it’s not necessary to enable cross-origin HTTP requests.
This is a rough diagram to demonstrate the architecture and flow.
Credits
This article was written with great help from Clara Palau Montava, Marcella Maki and Thoa Ta.
The data set of health facilities throughout Malawi was provided by Magda Biesiada of the Malawi country office.
