From mn/ifi/inf5750
Jump to: navigation, search

Group members

  • Markus Medalen (markusme)
  • Petter Hallvard Tveiten Gregersen (phgreger)
  • Sebastian Pettersen Sigurdsen (sebastps)

Product descriptions requirements


HIV Cascade Analysis

Assignment description

In this assignment we are gone create an DHIS2 application that provides a visualisation of a HIV 90-90-90 cascade. DHIS2 already has a Data Visualizer implemented to create bar charts, but lacks functionalities to have the value of each bar represents the subset of the previous bar.  

The application should also present this information in three different ways: 

  • As percentages, where the first bar in the cascade is 100%, and the subsequent bars as expressed as percentages of the previous.  
  • As raw numbers, but showing both the actual number and the gap. 
  • As raw data and percentages (on different axis), i.e. bars with the raw data and a line with the percentage. 

The application can be used in different settings/ countries and thus, different DHIS2 databases. Because of this, we need to create an interface that the user can configurated and save for later: 

  • What data elements/indicators to include in the cascade, as this might differ from country to country or even at different levels within a country. 
  • The target for each data element/indicator. While the global target for HIV is 90-90-90, it should be possible to set the target in the app. 

Cascades are often done for different population groups (by sex, age etc). Therefore, it should be possible to save different configurations, and to swap between these. In addition to selection of data, it must be possible to select the time period and organisation unit to display data for, either as part of the configuration or when generating the visualisation. There must be support for downloading the visualisations.  


Frameworks and external libraries:

  • React - We chose React because two people on the group knew a little bit how to use that framework from before.
  • - We chose d3 for data visualisation because it has high customisability
  • We chose bootstrap for easy and good looking CSS.
Project architecture


Whenever someone pushes changes to the repository, the other members are notified on Slack.


Division of labour

Everyone works on everything.

We use Git issues to create a backlog where everyone can grab assignments to work on.

We also have at least two weekly meetings where we work together and discuss the project.


Chart layout mockup
Configure layout mockup

Use case diagram

Use case diagram - User flow
Use case diagram - Administrator flow / Configure flow


Milestone Deadline
Make Wiki 28.10.2017
Choosing frameworks and plugins 05.11.2017
Get data out from API 10.11.2017
Core implementation 25.11.2017
Make implementation good looking 06.12.2017
Testing and preparing for presentation 06.12.2017
Presentation 07.12.2017

Link to project repository