The most common way of creating globes seemed to be by using D3.js and GeoJSON. I was able to find lots of incredibly helpful examples of people using these libraries (the examples I used are in the references). Most of the code is based on examples of somewhat similar problems.
To test the code locally I used Python's SimpleHTTPServer. I began by using code for a simple globe, and then tried to stitch pieces from other examples together. My workflow consisted of a lot of poking around, print statement debugging, and of course, StackOverflow. I did run into several hurdles along the way. One of the first difficulties was getting point data into the GeoJSON format so that it could be drawn. I initially inputted the Ling073 Pairs into this format by hand. Because I only had coordinates for a subset of the Apertium languages, I wrote a Python script that scraped the regular pair data and creates a GeoJSON file with the pairs that have coordinates. In the end I was able to implement all of the core functionality that I was aiming for.
- Interactive: My main goal was to create a fully rotatable globe, that conveys the language pair data in some form. The finished globe can be rotated by using mouse clicks.
- 3D Arcs: The program uses 3D arcs to indicate the language pairs. The arcs fade based on distance.
- Points: The language locations are marked on the globe with points.
- Labels: Each point is labelled with its language tag. These labels moved based on their position, and disappear when not visible on the globe.
- Tooltips: The points and labels can be hovered to show a tooltip. The tooltip contains the language's three-letter tag and full name.
- Zooming: There is a Zoom In and Zoom Out button that will zoom the globe by a Fixed Amount.
- Arc Coloring: The arcs are color-coded by the repo status of the pair. The current color-coding is shown in the following table:
|trunk||Released Language Pair|
|staging||Extensively developed, but not yet released|
|nursery||Can be built, but not extensively developed yet|
|incubator||Dictionaries, fragments, rules|
|Ling073-Spring||Language pairs that were worked on this semester!|
Bugs / Known Issues
- Zooming in or out resets the globe to the default position, not where it was previously
- Certain values are still hardcoded, should be changed to be dynamic in the future
- Tooltip doesn't fit long names. Perhaps make tooltip size scaleable in the future
- Currently ignores all two letter language codes. Should add conversions from two to three letter codes
- Far away arcs fade a lot, making them difficult to be seen (e.g. Guarani to Warlpiri)
- Implement mousewheel zooming (rather than using buttons)
- Arrowheads for arcs to indicate directionality?
- Separate coordinates from pair data in the JSON file.
- Include entire set of Apertium pairs, not just the trimmed down version
- Add a way to filter arcs or points
- Colors indicating repo of the pair are pretty ugly, tried to base it off the original pairviewer color scheme
- Zoom buttons could be made prettier, possibly add scroll to zoom.
The code is currently located at my personal Github linked here. The repo contains all of the files that I used along the way. The Readme file contains more specific details about individual files and how to run it.
Code available publicly here.
As mentioned earlier, I had a lot of help from various examples of using D3.js to create globes. The example codes were all either open-source or unlicensed. The following were the most useful examples that I used: