ubc-mds / 532-group21

The app has a single main page with three visualizations that depend on the filters selected. Most importantly, the top left contains a filter which selects the statistic of interest and this is the main filter on which all of the visuals are built and includes life expectancy, child mortality, education ratio, population density and CO2 emissions.

GapExpresser

Link to the dashboard

GapExpresser

What are we doing?

The problem

• The Education For All act is a global commitment to solve education disparity problem in some regions of the world. Many entities are working together to achieve the goal including many development aid agencies.
• However, these agencies are varied in size, missions, expertise, and experience. Some agencies operate with a very narrow scope, in location and/or directive, while others operate globally and in many development areas. Large agencies often have the resources to hire dedicated research staff or employ experts in their chosen area of focus, but many agencies do not have these resources.

The solution

• We propose building a data visualization app to assist these organizations visually explore some key statistics for different countries/regions.
• This will help them identify countries/regions that would benefit from the type of service the agency provides, or gain additional insight into a region where they already operate.
• These data visualizations may also challenge some misconceptions about a particular region, which in turn can help these agencies better serve the communities they operate in.
• Our app will provide these organizations a snapshot of several key development statistics. Users can explore these statistics by filtering by region and other demographic factors.

Description of the dashboard Interface

The app has a single main page with three visualizations that depend on the filters selected. Most importantly, the top left contains a filter which selects the statistic of interest and this is the main filter on which all of the visuals are built and includes life expectancy, child mortality, education ratio, population density and CO2 emissions. At the top of the page is a global map which displays a color gradient corresponding to the level of the chosen statistic of interest for each country. A filter can be applied for region, sub region and income group and only the countries contained in those filters will be colored on the map. Furthermore, there is a also a slider which can control the minimum and maximum population size for these countries. These filters also apply to the two bottom plots. The bottom left chart is a horizontal bar chart showing the statistic of interest for the top 5 or bottom 5 countries (controlled via a button switch) in the filtered group to allow for a closer look at the data. The bottom right chart displays the statistic of interest over time in a line plot (top 5 or bottom 5) and also has an additional filter for the date range for users to see how the data in those specific countries trended over time.

Dashboard Interface

To help us improve the dashboard

1. Fork the repository
2. Install dependencies

pandas
gunicorn
altair
dash==1.18.1
dash_bootstrap_components
plotly==4.14.3
vega_datasets

3. To run the app locally, run the following command from the root of this repository
   python src/dashboard/app.py
4. Create an issue thread to discuss with the team about the changes/improvements you propose to make. Here is the detailed contribution guide.

License

532-group21's Issues

Dash Interface

Please post any major issue regarding Dash interface development under this issue thread.

Group Meeting 1

Date&Time:

15 Jan 2021, 10am - 11am (PST)

Attendees:

@chuangw46 @ebs33 @syadk @wangjc640

Actionable Items

ID	Assignee	Tasks	Delivery Time
1	@chuangw46	To create two markdown files To push EDA script	23:59, 15 Jan 2021 (PST)
2	@ebs33	To refine the prototype To refine the proposal section and research question section	23:59, 15 Jan 2021 (PST)
3	@syadk	To write down the description of the sketch	23:59, 15 Jan 2021 (PST)
4	@wangjc640	To think about a name for this application To add a couple of graphs in the EDA script	23:59, 15 Jan 2021 (PST)

Include a screenshot/screencast as a gif in your repo

Hey @chuangw46 @ebs33 @wangjc640 @syadk ! Just a heads up that if you want to change the thumbnail in the dashboard gallery I posted on slack, you can take a screencast/screen shot and save it as a gif in your repo, currently it is your sketch that is shown there. Feel free to use this one I just took and converted for you:

Milestone 1 Feedback

Hi Group 21,

• cool choice of data and proposed use case!

• There are a lot of grammatical errors in the ‘Research questions you are exploring’ section.

• I would like to know more specifically what you mean by ‘fund-sensitive’ countries? I am not quite sure if these are countries where the desired outcomes were seen, or one where they had received funds previously but have not reached the goals yet?

• I really like your dashboard design! Very thorough and looks useful to Alice!
  -It might be useful to display a title with your map and bar graph to show the user which year or data is being displayed.

• check boxes might have to be changed to radial buttons because I think your dashboard in its current iteration can only display one Statistic of interest at a time.

• there are a lot of interactive elements, I’m excited to see which ones you get implemented. Being able to hover over the map and get some info about the country would be helpful since colour ranges can be hard to compare by eye sometimes.

App Formatting & Functionality To Do - Addressing feedback

• Increase title and axis label font size
• Implement population size filter
• Map chart - country IDs
• Map chart - Black outline for all countries when filter is applied vs only displaying the selected countries (TA feedback/ Client feedback)
• Add note on population density units (TA feedback)
• Add asterisk to Education Ratio and Population to draw attention to notes (TA feedback)
• Colour scale on world map changing (TA feedback)
• Drag and zoom functionality on map chart (Client feedback)
• Reorder legends, countries should be in the same order between both graphs
• Full layout on screen without scrolling (Client feedback)

Milestone 2 Feedback

Hi Team 21,

• Well done implementing all design features in your proposal (with a few minor edits/features that need fixing)!!
  The overall functionality and use of the dashboard is easy and intuitive.
• I like that you have a note at the bottom describing what the education ratio means. I’m also wanting to know more about what units population density is in, and maybe a note to direct me to the bottom for descriptions. I did not immediately see the note until I had tried all of the many features you have.
• Using the map works well. I think it would help to have black country outlines for all countries in view on the screen instead of white space because with some of the views it makes it very hard for me to intuitively know what region or sub region I am looking at.
• would be careful with the colour changing on the world map. I realize that each region has different ranges and a changing legend helps see the differences better. However, if I am switching between regions it makes it hard for me to visually do a comparison without remembering values and calculating.
• I also am actually quite happy with the way you have made the two plots below and I wouldn’t change the order of the bar plot to match the line plot. Having the colour matched is good enough and the ordering from highest to lowest is nice. I know I made this suggestion in your proposal, but seeing the dashboard in action I wouldn't make this change.
• the edits you mentioned in your reflectione to the map section would definitely make that part of the dashboard stronger.

Client feedback

Hello data science team.
Thank you for your excellent work! I have tried out the app and am pleased with its design and intuitive controls. It does most of what I want it to but I have a few suggestions for improvements:

• It would be nice if the entire app fit on the screen without the need for scrolling down to see the lower plots or to use the controls.
• It can be hard to see countries on the map when they appear outside the frame of the map. I have to use the small scroll bar to locate them. The ability to drag and zoom the plot with the mouse would make it easier.
• When the selection I make contains very few countries the map can be hard to understand because the country is not shown in the context of its region. I’d like to see the outline of the other countries that are not in my selection to help orient myself.
• When I click on a new region, I would like to see the map for the whole region without having to specify a sub-region first. This would allow me to see trends across a wider area.
• Similarly, I would like to be able to see data across all income groups as well, not just the individual groups.

Thanks,
Alice Bing-Chandler

Group Meeting 2

Date&Time:

19 Jan 2021, 2pm - 3pm (PST)

Attendees:

@chuangw46 @ebs33 @syadk @wangjc640

Actionable Items

Phase 1:

ID	Assignee	Tasks	Delivery Time
1	@syadk @wangjc640	Preprocess data and save it in data/processed folder Make two plots (bar chart and line chart) using altair	23:59, 19 Jan 2021 (PST)
2	@chuangw46 @ebs33	Dash Interface (major components, filters, map etc)	23:59, 21 Jan 2021 (PST)

Phase 2:

ID	Assignee	Tasks	Delivery Time
1	@chuangw46 @wangjc640	Heroku deployment	23:59, 22 Jan 2021 (PST)
2	@syadk @ebs33	Improve the README Reflection	23:59, 22 Jan 2021 (PST)

Notes:

1. Create PRs rather than pushing directly to upstream
2. Repo name: confirmed with Jeol: just keep it as is
3. Note how the education ratio is calculated somewhere on the interface
4. try to follow the project organization

it might be better to have two subfolders under src to make structure more clear (one for wrangling work, and the other is for interface development)

project/
├── data/            .csv .hdf .pkl .feather
│   ├── processed/
│   └── raw/
├── src/             .py .R
├── reports/         .ipynb .Rmd
├── doc/             .md
├── environment.yaml (or/and requirements.txt)
├── README.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
└── LICENSE.md

5. Data Preprocessing

• Ratio = years_in_school_men / years_in_school_women
• Select all the data starting from 1960