Joyful Recreational Coding: Google Visualization Timeline Hosted by Google Drive

I have been dragging my feet to decide which tour to pick for my up coming Peru trip. There are two very similar 3 days 2 night trekking tours that I find it very hard to decide from reading description.  So it is just wonderful that my technical skill can help create an interactive web page to decide.  It is really really simple to create such visualization that  you should also give it a try!

I first used JSFIDDLE to play with a new Google visualization chart Timelines.   The process of putting text into well formatted detail itinerary really forced me to focus on understanding the detail of the trip.  It is amazing how even simple table with colour bars actually help one to clearly visualization the duration of each event.

After I know the in how long and often I have to walk/hike, it turned out that I feel extremely fuzzy about where exactly we will be visiting and how difficult the trekking would be.  I started with my usual tool “tripline” to map each area but finding it come out short because it was really hard to search for tiny remote little city.  At the end I went back Google Map and finding its embedded map is amazing.

Putting it all together, here is how I like to research for my trip.


JSFIDDLE can display the result but it is really slow and not display well on mobile (cannot scroll to see full content).  You can check out from here.  To workaround it, I have just discovered a great feature from Google Drive.  You can actually host static html file directly from Google Drive.  Of course, you can easily do that with AWS S3 or Google Cloud Storage.  But having it integrated with drive make updating and controlling permission so much easier.

If you are curious to see the final looks like.  Check out this very cryptic link:

View source if you curious to see how to google visualization.  I am back-end developer, the JavaScript / bootstrap bit is pretty horrible looking for real front end developer.  But it has been a  really fun process to use my skill to help myself to solve non work related problem that I can share.  Next time I will just update the html to query Google Spreadsheet for source data so this kind of trip planning page can be more data driven.

Recreational coding can be fun!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s