dnaism

Horizon chart js library for DNA data.

Usage no npm install needed!

<script type="module">
  import dnaism from 'https://cdn.skypack.dev/dnaism';
</script>

README

DNAism

Main site here.

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.

Intro

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.

What type of skills I need to use this software?

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.

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?

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>
...

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 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"),
];

Real data

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.

Snp density

Here is another example, this time showing snp density across 20 Rhesus Macaque samples on chromosome 1.

density