New features added

Last week I tried to code up as many of the features as possible prior to the meet-up at NESCent. Here are some I managed to add by the end of this past weekend:

Expandable/collapsible menu widgets for the legend.
Outline pie wedges option.
Enlarge/reduce map window size.

I also got all the pages prettied-up with the same css styles, which I think made a huge difference to the look and usability of the site. Thanks, Jack for helping me feel my way around CSS this week!

Newest version is up. Version 2.2.2.

Beautiful site design -- Thanks, Jack!

Another project this weekend was to create a nicer looking home for the app on the web. The main page for the project will be at http://phylogeoviz.org/. Jack helped me out with some CSS stuff and put together a great looking page for the project. It's great having a web designer in the family! Anyways, the front page looks great and I'll get to linking it with the actual app later this week.

Thanks, Jack!

updated project wiki to include design doc

Finally got around to putting the design doc up on the wiki. I didn't get a chance to incorporate the haplotype grouping feature into the design, but I image it would mean added a table of haplotyes x group identifier on the manual data input and the data management pages. Also, I'd like to incorporate Norm's suggestions of a grayscale feature and export as .ai feature eventually too.

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.

Detailed design document, draft 1

If the user selects 'input manually',


The default numbers of haplotypes and populations are set to 10. Users can update these values to get the appropriate number of rows and columns in the data matrix. Unless the data matrix is small, the user will likely have to scroll within the table to input all the data. To facilitate this the population, lat, and long columns and the header row will be frozen. After the data is saved, the application checks the input. If the data is validated, we go to


We arrive at this page once the data have been validated (whether input by hand or uploaded). The purpose of this page is to allow the user to include/exclude populations and/or haplotypes. By default all populations and haplotypes are included. After any edits the user is taken to


This window previews and allows the user to edit the visualization. There are 3 possible visualizations: 1) Show just the sampling localities. On this option, the map options 'haplotype color', 'pie size (absolute)', and 'pie size (relative)' are grayed out. 2) Display with circles relative to the sample size for each locality. In this case, the map option 'marker appearance' is grayed out. 3) Display full haplotype information for each locality. In this case, the map option 'marker appearance' is grayed out.

When editing any of the map options a panel will pop out with options for that task. Map option definitions:

• marker appearance: select what icons you want to identify each population
• haplotype color: select colors for each haplotype
• pie size (absolute): set the max diameter for each circle or pie
• pie size (relative): choose if pies are all the same size or relative to the sample size; allows the user to set the bounds on the sample size bins

The map itself is fully functional. Users can zoom in, pan, and access satellite imagery as they can in other google maps applications. Furthermore, the users can click on drag any of the markers, circles, or pies to reposition them. This should be very useful especially for avoiding overlapping pies. If there's time, I'd like to add a button here for 'auto-fix overlapping pies', where the application detects collisions and repositions the pies for the user.

Below the preview screen is the legend. It shows the current color of each haplotype as well as the relative circle sizes and their corresponding sample sizes.

I know on the mock-up the preview screen is fairly small. However, the page will scale with the window, so it should be big enough for most folks. I will also consider moving the 'map options' below the map, so the map can be bigger. I was thinking, though, that the user might find it annoying to constantly scroll up and down to see the effects of the 'map options'.

Now to export the finalized map and legend.


From this page the user can export the visualization in four ways. It's important for the user to do the repositioning, coloring, and other editing work here before exporting to Google Earth. It's not possible to click and drag polygons in Google Earth as it is in Google Maps. If the user selects the .jpg option, they will be prompted to choose either saving the map and legend together or separately. The other formats handle the map and legend separately anyways.

Error handling: If the application has trouble reading the input file, then the validation will fail and generate this error page.

The user is then directed back to either uploading or manually inputting their data.

Overall flow chart for the application

In words:
The user starts by inputting their data. There are three options for data input. After the data has been input, we validate that the data is appropriate and interpretable. If not, we send an error message to the user, and ask them to resubmit their data. If the data input is successful, we display the data back to the user and allow the user to include/exclude any populations and/or haplotypes. Following data management, the user is taken to the preview visualization page. Here a google map is displayed showing a visualization of the data. There are various map and view options here that update the page. The user can also return to the data management screen and edit previous choices. Finally, the visualization can be exported in four formats.