alenzhao / leanback

Interactive javascript plots of biological data using D3.js (moved to bit.ly/rclickme as longitudinal_heatmap)

Leanback

Leanback is a way to visualize longitudinal data interactively. It was built to overcome the limitations of static heatmaps. The main advantage of adding a parallel coordinates plot, is that lines are a more intuitive way to make comparisons than comparing different shades of color in a heatmap.

Usage

git clone git://github.com/nachocab/leanback.git
cd leanback
python -m SimpleHTTPServer 8888 # or your favorite server

Open in Chrome/Firefox: http://localhost:8888/examples/longitudinal/index.html?groups=1&clusters=1 or look at a live example

URL Parameters

file=PATH

You can specify any CSV file with a header row. It should have a column containing the names of each row. Columns containing the heatmap values should follow the format: group_timepoint_number (ex: hiv_day_3 or spain_year_2012). Optionally, a column named "cluster" may be added.

Open in Chrome/Firefox: http://localhost:8888/examples/longitudinal/index.html?file=../data/hiv_fake_data.csv or look at a live example

clusters=1

If this options is specified, and there is a column named "cluster" in the input file, lines in the parallel coordinate plot will be colored according to its cluster. Clicking on each cluster button will update the heatmap and the parallel coordinates plot accordingly.

Open in Chrome/Firefox: http://localhost:8888/examples/longitudinal/index.html?clusters=1 or look at a live example

tags=PATH

You can optionally specify a file without a header, that presents a comma-separated list of annotations or tags for each row in the heatmap. You can click on a tag to only show rows that are annotated with that tag.

Open in Chrome/Firefox: http://localhost:8888/examples/longitudinal/index.html?clusters=1&groups=1&tags=../data/hiv_fake_tags.csv or look at a live example

groups=1

If this option is specified, and the columns in the input file follow the convention group_timepoint_number, each group will be displayed separately in the parallel coordinates plot.

Open in Chrome/Firefox: http://localhost:8888/examples/longitudinal/index.html?clusters=1&groups=1 or look at a live example

JS parameters

Other parameters are set in the code. Take a look at the file: examples/longitudinal/index.html

var userOptions = { urlVars: urlVars, rowNameColumn: "gene_symbol", rowType: "DE genes" };
var parsedGenesModel = new window.LongitudinalModel(parsedGenes, userOptions);

• urlVars: represents the URL parameters
• rowNameColumn: name of the column in the input file that contains the row names. For example: "gene_symbol"
• rowType: type of content displayed, used to display in the title. For example: "DE genes" (Differentially Expressed)

Requirements

Leanback uses D3.js, CoffeeScript, Backbone.js, Twitter Bootstrap and jQuery

Contributing

This project is at very early stages, so email me with any contributions or thoughts on how to improve it.