Case Study: Spectral Overlay Tool
Posted in Case Studies on September 1, 2015
I landed some work with Biosearch Technologies, a biotechnology company in Petaluma, California that designs and manufactures nucleic acid-based products. They approached me to help them out with one of their new campaigns to promote their various products and renovated services through an all new microsite called qPCR Design Lab.
The work would be split between me and The Spider, a website development company also hired by Biosearch Technologies in San Francisco. I would be responsible for developing the site’s spectral overlay tool and the branded HTML5 game.
This particular case study will only focus on the spectral overlay tool.
The spectral overlay tool is a web application that visualizes the absorption and emission spectra for common fluorescent dyes and quenchers. Users can overlay them as multiplexed sets according to recommended combinations for each qPCR device.
So, like most of technology included the campaign, the previous spectral overlay tool was in serious need of renovation. The first version was built from Flash, and support for the platform has been weakening lately in favor of HTML5. Biosearch Technologies sent me some feature requirements, branding guidelines, and the following technological requirements:
- The tool must use HTML5 technologies.
- The tool must support use on both desktop and mobile.
Drawing the Charts
Most of the libraries supported the core feature requirement which is the ability to draw line charts, but ultimately I decided to use the Google Visualization API over all of them because of its clear and thorough documentation. After I skimmed through it, I knew that by choosing this API I wouldn’t run into too many problems since there would always be something to answer my questions.
In the end I believe I made the right decision because I didn’t run into any significant problems during development thanks to the docs and I really enjoyed using the API a lot.
When the desktop and mobile support requirement popped up, not gonna lie, my first thought was just like what many web engineers these days would have... "Let’s use Bootstrap."
Bootstrap was still extremely helpful at the end of the day, but very early in development I decided to scrap the grid in favor of custom CSS which was something I wasn’t expecting. After the first few builds of the application, I realized that while the Bootstrap grid is extremely easy to use, some of the columns were awkwardly proportioned at some screen sizes or the layout would transition into its mobile version too early. In order to get specific dimensions and have fine control over how they adjust on screen size change, I needed to write custom CSS.
To convert the data, I wrote a little Python script that converts the CSV to JSON. After the conversion, the JSON is then read in by the application. This makes it so that even Biosearch Technologies employees can update the graph data by themselves without me. All they need to do is convert their CSV to JSON and overwrite the existing JSON folder and the application will be updated.
Scaffolding & Task Running
I wanted to try out some new things in my workflow so I decided to use Yeoman. I really enjoyed using it since it setup the file structure and the project dependencies for me, saving me a lot of time when starting to work.
Grunt is so useful that now I use it in almost every frontend project I work on.