Go Forth Unto All The World

At work I had the opportunity for "innovation days." This meant I had two days to do whatever I wanted as long as I created something of value (though the definition was loose) and learned a new (or advanced an existing) skill.

I chose to work on the missionary efforts of my Great Grandparents Joseph and Elda Brown, and their posterity. I had worked previously on my Grandparent's generation, but felt that it would be much more meaningful if I got 1 more generation of data. Luckily, a majority of work had been done by a cousin as far as listing names, departure dates, mission names etc. However, it was not in the format I needed, and so I had to extract the data that was in a google docs spreadsheet into a MySQL database in the right order, find latitude and longitude information, break it down by family and create some additional fields, etc.

Once I had the database written and working, I set about creating the 3 dynamic pages I wanted. I had a handcart photograph I had taken while on trek last year, and used that for the background. Then, I created some artwork for the google maps pins, the header image plaque, and a checkmark.

After creating the home page with the scripture from Doctrine and Covenants 4, I created the mission list page. At first iteration, I just did a sorted database dump, but after some research, I figured out to dynamically make a database call and refresh the page using AJAX. This was a breakthrough for me, as I had never been able to accomplish this in any of the database projects I had worked on before, and opened a whole new realm of possibilities. I added filtering by family, direct descendant, male, female, couple, country, and state for the US and Canada. Then I added color coding based on the family they belonged to, and created the table that dynamically changed based on a dropdown list of options.

Next I worked on a map. I created different markers for Elders, Sisters, and Couples, and then using PHP/MySQL created a dynamic XML file that the API reads using Javascript and then plots them on an interactive map of the world It creates a list to the side of the panel that you can scroll through and click on individuals to see where they served. It also allows for clicking on the marker and showing who it was that served there.

Lastly, I worked on the timeline. Using and existing jQuery library, I dynamically created the JSON data it was expecting, and then formatted the data to the timeline, adding in the colors chosen for each family. It looks pretty amazing.

Overall it was a fun project to work on, I learned many things about several technologies I was unfamiliar with, and I created something that is both useful and interesting.



Interested in creating one for your own family? Let me know, and I will do what I can to help you set one up. (Be advised, some technical skill is required)

Please let me know what you think in the comments below.

Comments

  1. Great work Geoffrey. It is nice to get some work time to do a pet project. I see some things you have done that I bet took a while to nail down. Nice job on the AJAX and JSON work. Love the map and timeline, it puts the data into a nice visual perspective. Some UX advice... on the Mission List page, I don't know what all the colors are by looking at the page. You can either make a key table or color the entries in the drop down. It would also be nice to have sortable table columns. Not sure if you can get some mouseover or clickable details on each individual on the timeline, but that would be cool. It took me a while to figure out the timeline zoom and scroll. Maybe make it a fixed zoom level (to minimize the confusion of window scrolling and zoom with the same action.) and tell the user about dragging left and right to see more. Thanks for sharing. Again, great job!

    ReplyDelete

Post a Comment