Globe with rotating animation and country label

We would like to create a globe on a web page that paints out all continents. Users can select a country to rotate the globe to center on that country.

Within this project, you'll learn about how to use d3-geo API, the concept of projection, and how to draw on a canvas or SVG. Depending on your experience with JavaScript and D3.js, it might take you 8 to 16 hours to complete this project.

• Display a globe at the center of the web page
• A selector for the user to choose a country. We suggest a dropdown list or text input.
• When the user selects a country, the globe should rotate with a transition animation and center to the country selected.
• Highlight the continent that the country belongs.
• On the globe, display the names of all other countries in the same continent as the selected country.

The following image shows one way to implement the UI. Feel free to interpret the requirements however you'd like!

For an extra challenge: Allow the user to select the country by clicking on the globe.

• We suggest starting off with creating a globe with d3. Your globe should be able to be centered on any country location without animation.
• Next, pass the value of the selected country to this globe module, which would then center the globe to the passed country.
• The last step would be to add in the transition animation.

• D3 Geo API: Geographic projections, spherical shapes and spherical trigonometry.
• Globe with rotation controls reference
• Rotating globe with location marker reference
• You'll need a list of country names and country code mapping - reference