UNHabitat - Village Vulnerability Infographic Generator

Overview of Automation System

Background

UNHabitat has undergone data collection for climate change vulnerability assessment located in the provinces of Attapeu, Saravane, and Sekong in Laos. As part of a communications strategy, UNHabitat has developed PDF and hard-copy based infographics for each village (total of 189) populated with the data and statistics collected from data collection. Manually creating or editing each village profile Infographic can be cumbersome and time intensive. To streamline the process for efficiency, UNHabitat has developed this system to automate the Infographic file generation process.

This system allows for generating village profile Infographics in Lao and English language. While the village list on the left consists of all 189 villages the list may be filtered by districts of each province for easier grouping.

The final village Infographics have been created in PDF however the list allows the creating of the Infographics using the 'Steps in processing data into PDF' section below as documentation and reference to how the system is used for possible future replication or scaling of the system.

Required Components

	InDesign Infographics Template – The Infographics Template is created by the UNHabitat team to establish a layout and design style to be exported and converted into PHP/HTML.
	PHP/HTML design of Infographics Template – The InDesign Infographics Template is spliced according to the layout and graphics. The Infographic file is then coded in a PHP/HTML file in order for the data to be processed and dynamic.
	KoboToolBox Server – The Kobo server contains the collected data exported in Excel format. The exported Excel file has gone through data cleaning and prepped with required columns and data to populate the infographics template.
	JSON Input File – JSON file formats for (English and Lao) has been converted from the Excel file from the KoboToolBox Server (see How to convert Excel to JSON). JSON is a format that allows data interchange making it easier for the system to parse.
	PHP Server – A PHP Server (Apache) may be installed locally or remotely to host the PHP/HTML Infographics file. This is where the data processing occurs. The web interface produces the dynamic Infographic according to village data to be saved as PDF for printing.
	Chrome Browser – A web browser is required to interact with the system. Since different web browsers render HTML differently Chrome (Version 60.0.3112 or above) is recommended for use with the system. In addition to the issue of different browsers rendering differently, encode/saving web pages into PDF also results in visual differences. To avoid encoding the HTML to PDF, Chrome has a free plugin named ‘Fireshot’ to screen capture the HTML page of the Infographics and turn into a PDF.

Steps in processing data into PDF

Data flow

The model is to have the system list villages by village name and code. The list is a hyperlink to query the JSON data file. Upon clicking a village name/code a new separate web page opens as the Infographic with the data queried by village code.

Once KoboToolBox data has been prepped and converted into JSON the following are the steps required to generate the PDF.

Step 1:

Go to the village list page to select the language of English or Lao (ລາວ) and click on a village.

A new webpage of the Infographic will be created with the information pertaining to the village in the language selected.

Notice the size of the Infographic page is quite large. This is to maintain the A4 paper size in order to retain the image quality for printing.

Step 2:

Click the 'Capture entire page' button from the 'Fireshot' plugin as described in the 'Required Components' section above.

The plugin will scan the Infographic page to generate a screenshot of the page. After the plugin scans, a 'Save Screenshot' page will open.

Step 3:

Click the 'Save to PDF' button to save file using the naming convention
'<village code>_eng.pdf'.
Notice for Lao infographics the '_eng.pdf' must be '_lao.pdf'. Once the file is saved the PDF has been generated. The current infographic tab may be closed to open a new village link.

Normalization and Conventions

The purpose for normalization and using naming conventions is for scaling and automating the system. During the initial development of the system some data were still being collected and some maps were not completed. Setting naming convention allows the system to be developed without actual data and once data has been collected and conformed to the naming convention the program code can automatically pull data according to the naming convention.

PDF file name: The PDF file name must be saved as
'<village code>_<language (eng or lao)>.pdf'.
For example, 1402002_eng.pdf or 1402002_lao.pdf. This naming convention allows the village list to create a link to the PDF in the language of English or Lao.

Map file name: all maps must be stored in a central location with the village code and file extension.

For example,

Related Documents