Please open a ticket and we will be happy to help you.
Open your console (we need git, tar and python for this to work) and run:
$ git clone https://github.com/drio/dnaism.git
$ cd dnaism/example/depth
$ make
Unpacking bed files ...
point your browser here: http://localhost:8888
python3 -m http.server 8888
Serving HTTP on 0.0.0.0 port 8888 ...
And now point your browser to localhost:8888.
If everything went well you should see multiple horizon charts encoding the read depth for multiple genomic samples for a small region of a rhesus genome.
Dnaism is also a npm and a biojs package.
DNAism is a modified version of Cubism aimed to work with genomic data.
Cubism effectively allows you to visualize
time-series data using Horizon charts.
In time-series data your metrics change over time, with DNA it changes
over genomic coordinates (e.g. chr17:45000
).
Head to the wiki for more details on the API reference.
There are two other projects that go together with DNAism: bedserver and bedbrowser. Bedserver is a lightweight backend for the bedserver source (more on that below) and bedbrowser is a web app example that uses DNAism and bedserver.
In the bioinformatics community we are more used to run standalone applications. Those run directly in your Operating System. DNAism is a javascript library. Javascript interpreters run in browsers which in turn run in the Operating System.
To get the most of this library you have to be comfortable writing web applications. That means you should be familiar with CSS, HTML and Javascript.
The library uses D3 to interact with the DOM. D3 experience would be very valuable, specially if you are planning on going beyond the basics.
It is not CPU intensive. Any current laptop or workstation will render the visualizations without trouble.
Data has to be loaded in the browser. If you choose to load all the visualization data points in memory your system (depending of the memory available and the region your are visualizing) may start Thrashing. To avoid that you should preprocess the regions you are visualizing and only send to the browser the data points used for rendering. That processing can happen prior to run the visualization or in realtime using the bedserver source. You can also build your own source to target your own needs.
DNAism is a Javascript library and it is designed to be used in modern browser environments. You simply include the latest version of the library's code (raw or minimized) in your web app. You can also copy the contents of that file to your local disk and load directly from there. Since DNAism uses D3, we have to also include that library prior to load DNAism:
...
<script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="dnaism.v1.js"></script>
...
NOTE: Example with real data here.
Here is a screen shot of DNAism visualizing a region of simulated random data for 23+ samples. The details of how these files are generated is here. Basically a bunch of Bed files are generated for a small region of a genome. It introduces constant values on certain intervals to allow visual validation. Then, we tell DNAism to use that context when visualizing the data.
To try this yourself go to examples/depth
and run build.sh
. It will
generate the javascript code using this
template
and it will generate the bed file with the genomic data:
$ head example/depth/sample21.bed
Chr17 500 500 21
Chr17 501 501 18
Chr17 502 502 37
Chr17 503 503 94
Chr17 504 504 45
Chr17 505 505 22
Chr17 506 506 84
Chr17 507 507 66
Chr17 508 508 93
Chr17 509 509 97
You can look in the template's code to see how we use DNAism to load the data. It is very similar to cubism with minor changes in the creation of the context and the definition of the metrics:
var context = dnaism.context()
.start(500)
.stop(20000)
.size(1280)
.chrm('Chr17')
.step(2);
var metrics = [
source_bedfile.metric("sample1.bed"),
source_bedfile.metric("sample2.bed"),
source_bedfile.metric("sample3.bed"),
//...
source_bedfile.metric("sample23.bed"),
source_bedfile.metric("sample24.bed"),
source_bedfile.metric("sample25.bed"),
];
More details can be found in the wiki and in the projects page.
Here is another example, this time with real data. We computed the read depth across 25 Whole genome samples (30x coverage). As with the simulated data, we use the bedfile source to access the data. Here is a screen shot:
The id of the sample is shown at the beginning of each chart. At the top and bottom we have the region of the genome we are visualizing.
We can appreciate the consistency in read depth across the majority of the samples (Some of them have a lower read depth across the whole genome).
Also, there are small intervals where the read depth is very low, and that is also consistent across all the samples.
Here is another example, this time showing snp density across 20 Rhesus Macaque samples on chromosome 1.