RNA-Seq Data Viewer

This repo contains a simple data viz tool for viewing RNA-Seq data. This README includes notes about how to run the application, notes about my approach, and thoughts on future directions.

How to Run the App

To run the application:

1. In a terminal, navigate to this directory and run:

   npm install

2. When packages are done installing, run:

   npm run start:api

3. In a separate terminal tab or window, navigate to this directory and run:

   npm run start:client

4. App should be able to be accessed at http://localhost:1234

Approach

Based on the project description and the accompanying dataset, I thought that a histogram would offer the cleanest way to display to the user gene expression (count) as a function of gene position (start) and allow them to pinpoint the count at any given position in the genetic sequence. In order to keep the visualization simple and focused on the count-over-position data, I specifically used the "start" position for each datapoint, rather than displaying the full "start" to "end" range in the width of each bar.

I had wanted to add a brush tool to enable more intuitive selection, zooming, and panning of the chart, but this proved more time-consuming than I anticipated. In its place, I added a simple form field for range start and end data points. This accomplishes the same goal of allowing the user to hone in on a specific range of nucleotides in the genetic sequence.

The chart is built in pure D3. I had originally built it using the Victory library, but I quickly recognized that the performance when updating the chart to change the position range was very poor (it turns out Victory is only intended to be used on the order of hundreds of datapoints, not thousands).

I also added a tooltip to display the full datapoint at each point on the x-axis, which is a critical piece in accomplishing the overall goal of displaying count at a given position.

The annotations are mapped into the D3 data chart as color. I did notice that "annotations" is an array of arrays, which means that if there were other arrays or other types of annotations than "Gene", the current implementation would break.

Future Directions

Given more time, I would have implemented the following:

• A testing system using Jest and Enzyme
• A brush tool for easy zooming / panning
• Form validation
• A more dynamic way for integrating and displaying annotations (I think given the potential for other "types" of annotations, it would be interesting to have a toggle that lets you switch the annotation type that you are viewing)
• Heatmap and/or line charts views of the data, toggleable via a drop down for "chart type"; I think a heatmap would be particularly interesting for viewing this data, but the histogram seemed to be the most straightforward choice for the initial implementation
• Better organization of styling; currently it is split between the D3 code and the /scss folder