Embedding Dalliance

Dalliance is a self-contained Javascript object which can be inserted into almost any web page, e.g.:

Typical embedding code looks something like:

<script language="javascript" src="//www.biodalliance.org/release-0.13/dalliance-compiled.js"></script>
<script language="javascript">
  new Browser({
    chr:          '22',
    viewStart:    30700000,
    viewEnd:      30900000,

    coordSystem: {
      speciesName: 'Human',
      taxon: 9606,
      auth: 'GRCh',
      version: '37',
      ucscName: 'hg19'
    },

    sources:     [{name:                 'Genome',
                   twoBitURI:            '//www.biodalliance.org/datasets/hg19.2bit',
                   tier_type:            'sequence'},
                  {name:                 'Genes',
                   desc:                 'Gene structures from GENCODE 19',
                   bwgURI:               '//www.biodalliance.org/datasets/gencode.bb',
                   stylesheet_uri:       '//www.biodalliance.org/stylesheets/gencode.xml',
                   collapseSuperGroups:  true,
                   trixURI:              '//www.biodalliance.org/datasets/geneIndex.ix'},
                  {name:                 'Repeats',
                   desc:                 'Repeat annotation from Ensembl',
                   bwgURI:               '//www.biodalliance.org/datasets/repeats.bb',
                   stylesheet_uri:       '//www.biodalliance.org/stylesheets/bb-repeats.xml'},
                  {name:                 'Conservation',
                   desc:                 'Conservation', 
                   bwgURI:               '//www.biodalliance.org/datasets/phastCons46way.bw',
                   noDownsample:         true}],

  });
</script>

<div id="svgHolder"></div>

Note that you need to provide a DIV (named "svgHolder" by default, although this can be changed if you want to embed multiple browsers in one page) into which the browser components will be inserted. You can apply more-or-less arbitrary CSS to this div in order to style it or fit it into your page layout.

Embedding API

It's possible to change or animate the view, add/remove tracks, or adjust the highlighted region from Javascript code. There should be some more examples here! There is also a plugin API for extending and customizing the browser.

Examples of embedding

Public sites known to use Biodalliance. Let us know if you want yours added!