Challenge Overview
Overview
Our client is developing an application that will be used in the HBGDki initiative (Healthy Birth, Growth, and Development knowledge integration). The application provides several different modes of analysis / data exploration, one of which will use a version of the Earth project globe for data visualization. The globe is now embedded into their larger application. We are working with the client to add additional capabilities to the Earth map. To date we have the basic globe working and embedded in the client's Frame. We have also added a new data set - "studies" to the globe. In addition to that, we recently ran a couple of challenges to figure out efficient and effective data management and storage practice for our application and added support for rendering live weather data and chemical/aerosol data inside the Globe (similar to what you can see in the original Earth Project linked above). In this challenge we want to enhance the UI capabilities of the application to provide more information about the “studies” dataset that we added in past challenge.
Challenge Objectives
As mentioned in overview, in this challenge you'll be extending the existing code base to add/display details about each of studies available in “Studies” dataset. Specifically, at this point we have made the application feature-rich by adding support for three datasets - “studies”, “Live weather data” and “live chemical/aerosol data”. The next step in this process is to provide textual information display related to Studies in panel on right of the screen.
1. Display “Study” Details in Right Panel
The Details box on the right of the application (an iFrame) is used by other aspects of the Data Journey application to show additional detail. The iFrame will remain in this box, and should be left untouched. An additional DIV should be added above the iFrame (so that it shows in this same "space"). This new DIV will be used to display additional detail about a study selected on the Globe (or in the menu on the left hand side).
Please update the study JSON so that each study has a directory path associated with it. All images in that directory should be shown in the carousel (again - for this challenge, you can use stock / placeholder images in the directory to demonstrate). Alternative approaches to achieve this can be discussed, but the main point on this is that all the client should need to do to add images to the carousel for a given study is copy the image file to a particular directory.
ABOUT - Study ID + Short Description + Study Description (column B + column D + Column E), Study URL (Column E), Study Type (Column K), Intervention Type (Column L), Age of Subjects (Column M-P), Dates of Study (Column Q-R), Study Locations (Column T), Study Population (Column U),
TEAM - PI Name (Column W), Kikm URI (Column Z)
PUBLICATIONS - (Column Z) Kikm URI
GALLERY - Carousel - GUSTO as use case for images and video links
2. Studies and Left Panel on Globe
Please note: A user can select other datasets like weather and chemical data. In this scenario, the study dataset turns off. When that happens, the right panel should retain and display the details of the more recent study that was displayed before changing the dataset. The display should not become blank.
3. Changes in Main Menu
Please see details in the following image:
Additional Details
- As depicted in the image above, each of the selections in the bottom section should be replaced with drop-down menus. Note: When you choose a different mode (like Air or Ocean, the choice below may be different, but they should still be represented as a drop-down.
- Please pay special attention to the new ordering and arrangement of the menu as depicted above.
- In addition, add a new option in the globe config file which controls the size of the text used in the menu (so that the menu can be configured to be smaller).
- The "Transparent Whitespace" should be like the white space currently placed in between the "earth" main tag and the rest of the menu.
4. Bug Fixes and Minor Changes
The following fixes need to be resolved in the application:
We want to remove this hack and implement it in better way.
One possible solution: Do not make any timeshift, and just accept that if you start the app with an empty database, you have to wait for 12-24 hours until it pulls enough data so you can see those data for some moments in time.
Please note: While the above is a plausible solution, we are not very confident about how to exactly handle this. For this reason, please participate in a discussion in forums to discuss this problem and potential soltuions. Alternative solutions to the one provided above are welcome but must be discussed in forums first.
2. [Bug Fix]: When we try to load data from previous hours when data does not exist we get an error: https://gyazo.com/d104699e9e23acb6394d2b8495fe2184.
The following smaller changes also need to be made to the application:
- The background for the Globe needs to be changed to White.
- The dots representing the studies on the globe should be reduced in size by 50 percent. In addition, to this add configuration options in the config file for the size and color of the study dots.
Resources
Github Earth Project - The original base project
Natural Earth - vector data used in the Globe
StudyInfo-HBGD.csv : This file contains the details about studies that you are required to display. It is available in data/folder of the source code
Final Submission Guidelines
- Include a zip file containing your submission.- Update the existing deployment guide in markdown format.
- Include a vidoe demonstration of your solution.