Phyloinformatics Summer of Code Meetup at NESCent

At the end of last week the NESCent SoCoders all met up in Durham, NC for a wrap up conference. It was really neat to see what others had been doing all summer long. The diversity of projects was to be expected, though there were some common threads between us.

One message that was hammered home to me was the need for file standards in evolutionary biology. The amount of time spent massaging your data into different formats to interface with interesting programs is many times prohibitive to actually using the programs. I was struck by all the development going on with NEXUS (ex: Nexplorer, NEXML, and libraries for NEXUS) in particular, and I feel like I need to jump on this bandwagon too! I was quick to realize that I'm part of the problem in that PhyloGeoViz currently doesn't accept NEXUS (or anything else for that matter besides my own special format). Well, being able to work with NEXUS files is now on the top of my list of priorities.

Another common theme of the meeting was the visualization of tree data. Multiple projects were coming at this problem using different languages and in different contexts.

A great meeting! I had a lot of fun hearing other students' and mentors' experiences. Hope to run into you again soon!

Symbolic links in UNIX

Just a note to self here:

To create a symbolic link use the following command:
ln -s [source file or directory] [target name]

Note: I can't figure out how to overwrite sym-links to point to new things. It's easiest to delete the old link, then write the new one.

More features to add

I was showing off the pie viewer prototype to Norm, and he had some great suggestions for features.

A black/white/grayscale option. Many journals prefer black and white figures, so it'd be great to be able to color pies with grayscale and maybe patterns.

Be able to save as an Illustrator or other vector based document. I'm creating all these svg's, so allowing output to be read by an svg master manipulator seems smart.

getting the preview pane working

I spent most of this week trying to get the basic functionality of the preview pane working. The goals were to draw a map with randomly generated pie charts and colors where the pies were draggable and zoomed appropriately. I succeeded in generating this zoomable and draggable pie chart. Try it out. The page generates a pie with random slices and colors. Try dragging the pie, zooming to new levels, and try dragging again.

These are the steps that I took to build that code:

1. Draw a circle on a map.
2. Draw multiple circles on a map.
3. Make the circles draggable.
4. Draw a pie on a map.
5. Make the pie draggable.
6. Make the pie zoomable.
7. Make the pie zoomable and draggable.

I ran into various bugs along the way that made this problem really challenging. Here are some of the implementation details:

• Drawing the circles in Google Maps (GM) is actually easier than in Google Earth because you can easily calculate the pixel coordinates of the 90 vertices that comprise the circle. GM provides functions like fromDivPixelToLatLng() and fromLatLngToDivPixel() that then make switching back and forth to latlong coordinates easier, and you don't have to do all the complicated haversine computations yourself.
• Making the circles draggable was a little difficult because you have to wrap the created circle svg's within appropriate HTML div elements. This turned out to be somewhat complicated because it involved manipulating the DOM node tree that simultaneously updated our array of svg elements.
• Drawing the pies instead of circles added another layer of complexity because not only does each svg of a pie slice need to be wrapped in its own div but then all the slices of the same pie need to be wrapped together in another div that was made draggable.
  
• One bug I ran into was how to get the pie pieces to fit together seamlessly. The random numbers generated for the dimensions of each slice didn't correspond exactly with the 90 evenly spaced vertices (one vertex every 5 degrees), but some simple rounding and modulo type operations fixed that. That means that the pies are not exact representations of the input data, they may be off 5 degrees or so for each slice, but I'm guessing most humans won't be able to notice that.
• So making the new pie divs draggable wasn't a problem, but making it work with the zoom function was a bear. After zooming, the pie would either become undraggable, we'd see too many copies of the pie, and/or not all of the copies would be the same or in the correct places. There were several issues to overcome. First, I had to wipe and redraw the overlays containing the pies. Second, I had to repackage the functions so that I could save and access the random data that had been generated (i.e. the slice angle data, slice colors). Third, I had to update the location information of the pie after it was dragged. The first two tasks were not bad, but the last bug took the longest to fix.
  
• At first, I tried to get the new location info from calculating the center point of the encapsulating div. Several problems with that approach: I could get the info for the left top corner of the div, but the height and width were zero, and the div's size was not only just large enough to fit the pie (the width of the div was not equal to the diameter of the circle) as I had assumed, and finally I realized that what was returned by style.left and style.top was NOT the coordinates of the top left corner but rather the offset of the coordinates in pixels.
  
• I could use the offset in pixels to calculate the new lat and long for the center of the pie. However, to convert from pixels to latlng units I needed to use a different function that incorporated zoom level information (different zooms will have different latlng to pixel relationships). This involves declaring a GProjection variable to get the fromLatLngToPixel(latlng, zoomLevel) function. Whew! But finally, we have pies we can move and zoom.

Links to useful documentation for working with javascript and Google Maps

Prototype is an excellent javascript library that basically implements all those functions that you wish came standard but didn't. Yay! Thanks to Cyrus and Jack who pointed this out to me. The documentation is pretty good too.

Javascript documentation. Fairly helpful, but not very complete. I ended up buying O'Reilly's javascript book this weekend to supplement this. The book's proven to be extremely helpful so far.

HTML DOM reference. Helpful, but doesn't have an 'DOM Element' section, which is annoying. The O'Reilly book does though, which once again is great.

HTML DOM Element reference. On Mozilla's development site. Has links to other references on javascript that might be worth checking out.

General HTML Tag reference.

Google Maps API reference. It has all the functions, but it's a bit difficult to parse. It can be difficult to find what a function belongs to -- the headings need to be set apart more. Also, some example syntax would be helpful. All in all, it's a necessary resource, but difficult to understand.

GPolygon class examples. On the Google Maps API forum. Many helpful links that showed how they implemented circles, making them draggable, resizable, etc. Very useful reference.

Firebug debugger. I've been using this debugger for inside website stuff. It's generally awesome. You can view the DOM hierarchy, set break points, and generally debug your code with it. Only complaints so far are that the debugging functionality appears to be a line off for some reason and sometimes the program fails to recognize the breakpoints you set (just blows right through them).

Lat and Long in KML

While you can enter coordinates in "lat, long" pairs in the finder, in KML, within the tag, the order is "longitude, latitude, altitude".

note to self: escape characters in html

Remember:

< = &lt;
> = &gt;

Playing around with Google Earth

Notes:

You can easily move placemarks by accessing their 'properties' then clicking and dragging. You can NOT easily move polygons in the same manner. Maybe that should be a design consideration.

Found a great application that makes all sorts of graphs in GE, called GE-Graph.
He (?) makes the circles as groups of 21 points (first and last the same), so not a true circle.

If you want multiple placemarks within the same file, they must be enclosed by a <Document></Document> tag. Otherwise, GE complains about having too many 'roots'.

Within the <Document> tag you can define a lot of styles using <style id="foo"></style> then reference those styles in the document using <styleUrl>#foo</styleUrl>.

Within a <Placemark> you can only have one point, polygon, etc. Otherwise, it only shows the last one. Unfortunately you can't click on polygon's to view their properties or description. It seems like the easiest way is to create two placemarks for each location. One that is a point, that the user can click on easily, the other the pie chart. Put these data in different folders (<Folder></Folder>) so you can easily turn off the labels.