Challenge Overview
Overview
Our client is developing an application that will be used in the HBGDki intiative (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. This globe will be embedded into their larger application. The client wishes to add additional capabilities to the Earth map, and has provided the basic "frame" which their larger application uses. Going forward we will be working with the Globe within this frame.
Challenge Objectives
In the previous challenge in this series, we asked the community to create a "container" page (as a proxy for the client's frame) and stand up the Earth project / code inside that frame. We centered efforts around an iFrame in that challenge. Further discussion with the client has revealed that we should contain the Globe in a div rather than an iFrame.
There will be two main goals for this challenge
1. Integrate the Globe into the client provided frame.
Start with the client provided frame and add the Globe. Minimal modifications to the client Frame should be needed. Use your judgement here, if you see something more major, let's discuss in the forums.
As stated above, the Globe should be in a div.
You will see the "Globe goes here…" text, by clicking "Globe" on the left hand menu - this indicates where it should go.
The Globe should be responsive within the frame.
The Globe menu should function as designed - it was discovered in the last challenge that there are links in the menu that redirect you to another website. Make sure this doesn't happen and that the Globe functions fully inside the div.
2. Display a set of studies on the Globe.
Use the "StudyInfo-HBGD.csv" file as the data source. In the future, this source may become dynamic - however this file contains the data in the expected format. You may convert into JSON if you'd like.
You will need to update the Globe menu. Modify the Data line - so that when the user clicks on the text there, they are presented with two choices: "Wind + Temp @ Surface" and "Studies". When the user has the "Wind + Temp" option selected, the map should function as it currently does (displaying this information). When the user selects "Studies", the Wind / Temp data should no longer display on the Globe, instead the Study information should display. Note: What we mean here - is that the Wind / Temp animations will no longer appear. This is different than the static colored Overlays in the Overlay section. For now, the "Mode", "Height", and "Control" options in the menu can remain, but while in "Studies" mode, they should have no effect when clicked. The "Overlay" and "Projection" options should function as normal.
Extend the Globe vector data to show country borders. You will need to identify the correct data source from the Natural Earth website referenced below. This is the data source interpreted by the Globe. You can also find some direction on how to prepare the data at the earth Github repo. Make sure this works properly in all of the Projections.
Each row in the CSV file represents a study. For each study, place a visible "dot" on the Globe. The location of the dot for a given study should be determined by the "Country" column in the CSV data. The dot should be placed at or near the center of the country. Note that some studies cover multiple countries - in this case a dot should be placed in each referenced country.
The user should still be able to manipulate the Globe, apply different Overlays, and change the Projection with the study dots placement updating appropriately.
When the user hovers their mouse over a dot, a "tooltip" should appear with the short description of the study (from the "Short Description" column in the CSV).
If the user clicks a specific dot, all other dots which are not related to that study should disappear. Note - in most cases, there is only a single country related to a study, but some studies involve multiple countries. In those cases after clicking the dot, all dots related to that study will remain.
If the user clicks outside of the globe (and outside of the menu - e.g. somewhere in the empty space), the dots should reset - and once again, dots for all studies will be displayed.
Additional Notes and Requirements
You can ignore the formatting issues on the left hand menu for now (client is working on these separately, note also - these don't occur in Firefox if you'd like to see it cleanly).
The client provided framework we'll be adding the globe to is Node / Express based. Please keep changes to their framework to a minimum and try to compartmentalize the Globe code into it's own files as much as possible / practical. Reviewers please note: the client code will not be part of the review process and scores should not be impacted by it.
Bonus Goal
We're trying not to load too much into this challenge, but we'd like to offer a bonus goal.
When viewing the study data on the Globe, when the user clicks on the dot, in addition to all other dots which are not related to that study disappearing, highlight all countries on the Globe related to that study.
We will pay a $200 bonus if you have a passing submission and also meet this goal.
Resources
Gitlab Earth Project - Example of the Globe code running in a responsive frame (an iFrame in this case, for this challenge it needs to run in a div)
Github Earth Project - The original base project
Natural Earth - vector data used in the Globe
Final Submission Guidelines
Submission Guidelines
Include a zip file containing your submission
Include a full deployment guide in markdown format
Include a video demonstration your solution
Include a "plain english" discussion in the deployment guide about how the Globe was integrated into client code. In addition, describe any modifications to the client code which were needed for the integration. This is very important!