HTML5 mojo: JOLECULE, a javascript protein viewer that runs on the web

10 Sep 2010 // protein

Ever since I started reading about HTML5, I had wondered if you could do a stripped down protein viewer in it. So over the last few months, I've holed away in cafes in San Francisco and Berlin to work on yet another protein viewer.

I created a simple 3D library that works on the HTML5 2D canvas with a stylized but clean aesthetic. From this I built the viewer, jolecule (javascript+molecule, or otherwise a great pun in french), which I'm now releasing as a public beta, i.e. I've only tested it in Chrome and Safari and Firefox (BUG-FIXED!), and the syncing with the server is splotchy (you need to reload the page if something goes wonky).

The big problem with looking at proteins is to control the level of detail so that you are looking at something that is meaningful on a structural level. Unlike most other viewers, I've tried to make everything on the screen easily identifiable and clickable. I've chosen an idiosyncratic method of navigating around the protein that I believe provides the optimal flexibility in controlling the viewing detail with the least amount of controls that need to be mastered. Everything can be done on my Macbook Pro with the trackpad.

But more importantly, I designed the program to be tightly integrated with a web server (the marvelous google app engine), both to cache protein structures and to store any annotations that you may wish to make (as an example, check out myoglobin). The result is that almost everything has a unique URL attached to it, and that annotations are publicaly shared.

Finally, I want to thank a bunch of great beta-testers who gave me fantastic suggestions: Kate Stafford, Nir London, Micheal Lerner, Franz Gruswitz, Wladimir Labeikovsky.