Questions, patches, comments, feedback?
Please open a ticket and we will be happy to help you.
For the impatient
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 a modified version of Cubism aimed to work with genomic data.
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.
What type of skills I need to use this software?
What resources does this library consume?
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.
How do I install DNAism?
... <script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script> <script src="dnaism.v1.js"></script> ...
Basic example (Simulated data)
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
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"), ];
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.