The Descriptive Analytics

The descriptive analytics presents INFORM risk index at sub-national level, where the user will easily recognise the relative risks of different administrative unit. Easy-to-understand annotation on the INFORM scores will be presented in this display with minimalistic pop-ups. The descriptive analytics presents a map of the sub-national risk data in target administrative unit in ordinal value (I.e., very high-high-medium-low-very low).

The Descriptive Analytics tool is developed using CDC's Social Vulnerability Index 2014 template, Calcite Web, Esri Application Boilerplate Template, and ArcGIS API for JavaScript 4.x.

  • Calcite Web is a branded CSS & JavaScript framework, web style guide, and visual design system for Esri. You can use Calcite Web to quickly build on-brand, lightweight, and accessible websites. The robust codebase is well supported, steadily maintained, and always being improved.
  • Esri Application Boilerplate Template is a starter Application for building ArcGIS Online configurable applications with the ArcGIS API for JavaScript version 4.
  • The ArcGIS API for JavaScript is a lightweight way to embed maps and tasks in web applications. You can get these maps from ArcGIS Online, your own ArcGIS Enterprise or others' servers.
The Descriptive Analytics application
Descriptive Analytics application

Folders and Files

The descriptive source code can be found in <<your web server path>>\DSS\FJI\Descriptive\

The application consists of the following folders and files:

/config/: A folder for your application's configuration files.

  • config.json: Define the default configuration information for the application. You can use this file to specify things like a default web map id, a feature service id, default services, a print url, default colour theme and other template-specific settings.

/css/: Contains the CSS files for the application.

  • boilerplate.css: This file contains the map styles that set the margin, padding and initial height (100%).

/example/: Contains default source code.

/images/: Contains images used by the application.

/application/js/: Contains JavaScript files:

  • /nls/: The nls folder contains a file called resources.js that contains the language strings used by the application. If the application needs to be supported by multiple locales you can create a folder for each locale and inside that folder add a resources.js file with the translated strings. See the resources.js file in the nls/fr folder for an example of this in French.
  • app.js: Creates the map based on configuration info. You will write all your main application logic in here.
  • Top10Symbols.json: The file contains symbol styles that set the marker symbols.

index.html: The default html file for the application.

Configuring the application to work with your data

By default, the descriptive application loads a web map and provides basic mapping capabilities using an INFORM feature service hosted by UNOSAT. In order to configure it to work with your own data, you will have to follow the steps outlined in this document.

Once you have an INFORM feature service, you will have to modify some of the configuration settings in before deploying the application.

The following settings must be modified:

  1. Go to application folder: <<your web server path>>\DSS\FJI\Descriptive\config\config.json
  2. Open the JSON file in a text editor and edit the following parameters.
  3. Make sure you have the same fields schema with this feature service.
  4. Set portalURL to the URL of your ArcGIS Online organisation or your portal if you are not using ArcGIS Online.
    5. Set ArcGIS Online organisation or your portal URL
    Set ArcGIS Online organisation or your portal URL
  5. Find your web map id, navigate to ArcGIS Online or your portal, and find the map you want to display. If it is one of your maps, make sure it's shared with everyone (public). View the map details and copy the ID from the URL in the top of your browser. The section you need to copy is bolded in the following URL: arcgis.com/home/webmap/viewer.html?webmap=03c17175c9aa4782bf041daf510ffae6
    6. Set ArcGIS Online or Portal web map id
    Set ArcGIS Online or Portal web map id
  6. Update colour theme of horizontal bar charts in the application with HEX code.
    7. Update colour theme of horizontal bar charts in the application with HEX code
    Update colour theme of horizontal bar charts in the application with HEX code
  7. You must update all feature services id and layer name from your web map.
    8. Set all feature services id and layer name from your web map
    Set all feature services id and layer name from your web map

In addition, you may need to change the following settings:

  1. Go to application folder: <<your web server path>>\DSS\FJI\Descriptive\js\application\app.js
  2. Open the JavaScript file in a text editor and edit field name in your file to match with feature service schema.

For more information, see