User:Cpillsb1/Final project

From LING073
Jump to: navigation, search

My goal for the final project was to create a useful application for Apertium. Jonathan showed me the existing Apertium PairViewer, which is an interactive tool that visualizes the existing language pairs in Apertium. One idea that was in the works but no one had gotten around to was to create a 3D globe to visualize the language pairs. I was interested in learning JavaScript and HTML/CSS, so I decided to tackle this task as my final project for the class.

3D Pairviewer

Process

Going into this project, I had no prior knowledge of any web development or JavaScript, but had some programming experience (Python, C++). A good chunk of time was spent simply reading up on how JS, HTML, and CSS interact, and more broadly, how the internet works.

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.

Features

  • 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:
Status Description
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)

Future Improvements

  • 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.

Code

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.

References

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: