Idiogrammatik

An extensible, embeddable karyogram for the browser.

Idiogrammatik provides a simple, small, fast, and highly extensible idiogram (alternatively, karyogram) that can be embedded in any webpage.

The goal of project is to provide an easily navigable map of the human (or, really, any) genome. The map should be speedy, intuitive, and provide enough hooks in and events out to handle most reasonable tasks related to navigating a genome without requiring a bloated library that handles every case for every user built-in.

The example genome used is from GRCh38, with Giemsa cytoband staining in order to provide important visuospacial orientation. This data can be found in gstained-chromosomes.json, but any data of that form can be loaded (or hard-coded). This enables any sort of chromosomes with any sort of banding to be easily displayed; thus, idiogrammatik can be used for mouse, fruit fly, or alien genome navigation. Handy.

D3.js is required for this software to work. Just include it earlier in the page, and all will be well.

A running demo can be found at www.isaachodes.io/idio. Shift-dragging ranges selects/highlights them.

Documentation

Extensive documentation & more examples and recipes for adding functionality can be found in DOCUMENTATION.md, and a working example can be run from a local server (e.g. python -m SimpleHTTPServer) at test.html.

An understanding of D3.js could be helpful for fully utilizing idiogrammatik, but the documenation should cover all basic use-cases. The goal is that using this library be very simple.

Quick Start

The minimum viable example:

d3.json('data/gstrained-chromosomes.json', function(err, chromosomes) {
  if (err) return console.error(err);

  d3.select('body')
      .datum(chromosomes)
      .call(idiogrammatik());
});

Note that D3.js must be included in the page before idiogrammatik.js.

Running tests

Idiogrammatik is tested using dpxdt, allowing arbitrary code to be run, testing the features of the idiogram, and then taking screenshot of the result and comparing it against a golden master of the expected visual outcome.

To run tests, install dpxdt, (in a virtual environment, if you like), and run it with

dpxdt test tests/pdiff

To update the screenshots, assuming a change has been made, run

dpxdt update tests/pdiff

You can easilys ee the different by using git webdiff, assuming you have that awesome tool installed.

License

Licensed under the Apache License, Version 2.0.