DART Visual Interface

An interactive, Dockerized Flask + JavaScript web application for visualizing dengue case forecasts across Ho Chi Minh City's 24 districts.

---

UI Features

• Map View:
  • Display district-level dengue case counts and standard deviation level in HCMC (Ho Chi Minh City) using choropleth map.
  • Animate weekly case progression with a time slider user control.
• Line Charts:
  • Summary district line chart, showing all districts' 4 recent week historical data, and a maxium of 12 days prediction data. Legend controls the districts of interest to display on the whole interface, including the map and also the individual line charts.
  • Individual distrci line charts -- paginated charts per district, showing historical data and predictions, with multiple prediction interval options.
• Control Panel:
  • Choose prediction model output files, using the latest one by default
  • Toggle Confidence Interval options (multi-select)
  • Sort line charts by district name (ascending) or projected case count (descending)
  • Adjust standard daviation threshold for choropleth map layer
  • Select prediction horizon from 1 to 12 weeks
• Map–Chart Linking: Clicking a district layer on the map highlights the corresponding district line chart and scrolls into view.

---

Instructions

Development (Docker)

Make sure Docker is installed, then run:

docker compose -f docker-compose.dev.yml up -d

Visit in your browser: http://localhost:5000 (or whichever DEV_FLASK_PORT is set in .env)

Consult both the docker-compose.dev.yml and docker-compose.yml files for more info

Production

Docker: Simply run

docker compose up -d

Baremetal:

• Run uv sync --all-extras to install gunicorn
• Then run the server with gunicorn -w 2 app:app from app/

---

Data Mounting Requirement

The app reads prediction files from a Docker bind mount:

-v /absolute/path/to/prediction_folder:/app/static/sample_data/predictions

Each file must be named like VNM-2-YYYY-MM-DD-<name>.csv, for exampleVNM-2-2025-06-23-dengue.csv, and match the required format below.

---

Data Structure

This application relies on two key data files: dengue forecasts in CSV format and GADM boundary GeoJSON.

1. dart_forecast.csv

Contains historical cases, predictions, and confidence intervals.

Column	Type	Description
district	string	GADM district ID (e.g. VNM.25.13_1)
date	date	Monday of the week (e.g. 2019-10-07)
truth	float	Historical case count
.pred	float	Predicted mean cases
intervals	float	Confidence level (0.5, 0.75, 0.9, 0.95, 0.99)
.pred_lower	float	Confidence interval lower bound
.pred_upper	float	Confidence interval upper bound
fh	float	Prediction horizon (1.0 to 12.0)
sd_4wk	float	Four weeks Standard Deviation

2. gadm41_VNM_2.json

Vietnam GADM level 2 boundaries used to extract HCMC districts.

---

API Endpoints

/api/get_dartdata_this_year

Returns historical, predicted, or interval-based case values.

Query Parameters:

Parameter	Example	Description
type	predicted / historical / ci / sd	Data type
interval	0.75 / 0.9 / 0.95 / 0.99	CI level (used for interval only)
weeks	12	How many recent weeks to return

Example (predicted):

{
  "2019-10-07": {
    "VNM.25.13_1": 6,
    "VNM.25.10_1": 10
  }
}

Example (interval):

{
  "2019-10-07": {
    "VNM.25.13_1": {
      "upper": 14.04,
      "lower": 3.91
    }
  }
}

---

/api/get_geojson

Returns centroid-augmented GeoJSON for Leaflet-based map rendering. This is generated using generate_hcmc_geojson.py.

Example:

{
  "type": "Feature",
  "geometry": { "type": "Polygon", "coordinates": [...] },
  "properties": {
    "GID_2": "VNM.25.13_1",
    "NAME_2": "District X",
    "centroid": { "lat": 10.7, "lng": 106.6 }
  }
}