I’ve previously written about my travels and goals to see each of the fifty United States. I’ve developed a travel map that documents my travels within the country. The map can be easily reused by creating your own spreadsheet and saving it off as a .tsv.

I’ve not made the same gesture for international travel. As my list of visited countries grows, I find my desire to establish the same mapping growing.

The U.S. travel map I developed is based off of Michelle Chandra‘s Basic US State Map with significant additions that required many hours of development time.

One goal of mine with the travel globe is to rely on as many established frameworks as possible to reduce the amount of custom code needed in order to exhibit a high quality user interface and other desired features on a travel map.

Potential Starting Points

• Jorin’s Logbook – Create a 3D globe with D3.js
• Jason Davies – Animated World Zoom, Rotate the World

Animated transitions between countries, dragging functionality, lat/long lines.

Developing my own solution

Now that I’ve done some research on similar examples and frameworks that are out there, I need to enumerate the needs of my map.

Functionality

Needs

• Implementation:
  • The development must be easily reused by swapping out different datasets
  • The development must be well structured, easy to read and understand
  • The development must be versioned, well documented, and contain instructions for others as how to create their own travel maps
• Information:
  • Latitude & Longitude lines: User must understand the projection
  • Legend: User must understand the color coding
• Interaction:
  • User must be able to zoom into a region
  • User must get additional information on hover

Wants

• Animation:
  • In a globe form, the globe spins automatically
  • Show the “travel” over time. Meaning, how many countries has this individual traveled to on a given date. This could be a slider the user controls, or simply a date label that updates as more countries are filled to represent they have been traveled to.
• Implementation:
  • Develop in leading frameworks, D3 and Topojson
• Information:
  • • Display the count of countries traveled to.
    • Show a link to a facebook album or photo website for the specific country traveled to.

  flight/travel lines displaying the travelers path.e traveler has for the trip on hover

  • Using the date and a new data element “traveled from”, show flight/travel lines displaying the travelers path.
  • Show the cities traveled to within the country
  • Show the states within a country if zoomed in(?)
• Interaction:
  • Would be nice to be able to switch between a globe and a map

Approach

After looking at the different implementations as starting points, I’ve decided to go with Jason Davies‘ World Countries implementation. This is built off of Mike Bostock’s World Tour (mentioned several times in this article) but has a more accurate interpolation of the “arcs” the globe would traverse when swapping between countries that the traveler has been to.
Here’s the example:

Having a starting point, there are a couple of steps I need to take:

1. Enumerate the functionality deficiencies between Davies’ globe and my own desired one
2. Review the source code to see how the globe was implemented
3. Design each new feature and add it into the application

The last step will be the largest, and will involve creating a new trunk in git (forking off of Davies’ globe), and committing the changes into the new fork.

Research & Resources

• D3 d3-geo – Draw map projections based on topo-json documents
• Knoyd – Traveling the world in D3 (pt 2, pt 3, final product)
• Mike Bostock – World Tour (animated globe spin)
• Jason Davies’ – More accurate globe representation of Bostock’s World Tour
• Mike Bostock – Map Zooming
• Hacker News – Discussion relating to World Tour
• Mike Bostock – Command-Line Cartography – Part 1
• Mike Bostock – Command-Line Cartography – Part 2
• Mike Bostock – Command-Line Cartography – Part 3
• Mike Bostock – Command-Line Cartography – Part 4

3D globe that has hover effects and dragging functionality.