https://github.com/eweitz/ideogram

Chromosome visualization for the web
https://github.com/eweitz/ideogram

cancer-genomics comparative-genomics cytogenetics genomics karyotype personal-genomics visualization

Last synced: about 2 months ago
JSON representation

Chromosome visualization for the web

• Host: GitHub
• URL: https://github.com/eweitz/ideogram
• Owner: eweitz
• License: other
• Created: 2015-02-04T03:05:48.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-01-17T02:09:15.000Z (6 months ago)
• Last Synced: 2024-04-14T22:34:04.685Z (3 months ago)
• Topics: cancer-genomics, comparative-genomics, cytogenetics, genomics, karyotype, personal-genomics, visualization
• Language: JavaScript
• Homepage: https://eweitz.github.io/ideogram
• Size: 139 MB
• Stars: 277
• Watchers: 22
• Forks: 68
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Authors: AUTHORS

Lists

• repo-5916-awesome-genome-visualization - eweitz/Ideogram - genome-visualization/eweitz_ideogram.png) (Ideogram)
• awesome-genome-visualization - eweitz/Ideogram
• Awesome-Bioinformatics-CN - ideogram - 染色体可视化的JS库 (可视化 / 染色体可视化)

README

        
# ideogram

[Ideogram.js](https://eweitz.github.io/ideogram/) is a JavaScript library for [chromosome visualization](https://speakerdeck.com/eweitz/designing-genome-visualizations-with-ideogramjs).

Ideogram supports drawing and animating genome-wide datasets for [human](https://eweitz.github.io/ideogram/human), [mouse](https://eweitz.github.io/ideogram/mouse), and [many other eukaryotes](https://eweitz.github.io/ideogram/eukaryotes).  The [Ideogram API](https://github.com/eweitz/ideogram/blob/master/api.md) for annotations supports [histograms](https://eweitz.github.io/ideogram/annotations-histogram), [heatmaps](https://eweitz.github.io/ideogram/annotations-heatmap), [overlays](https://eweitz.github.io/ideogram/annotations-overlaid), and points of arbitrary shape and color layered in [tracks](https://eweitz.github.io/ideogram/annotations-tracks). Ideogram can depict haploid, [diploid](https://eweitz.github.io/ideogram/ploidy-basic) or higher ploidy genomes (e.g. plants), as well as aneuploidy, [genetic recombination](https://eweitz.github.io/ideogram/ploidy-recombination), and [homologous features](https://eweitz.github.io/ideogram/homology-basic) between chromosomes.

Ideogram can be embedded as a [reusable component](https://github.com/eweitz/ideogram#usage) in any web page or application, and leverages D3.js and SVG to achieve fast, crisp client-side rendering. You can also integrate Ideogram with JavaScript frameworks like [Angular](https://github.com/eweitz/ideogram/tree/master/examples/angular), [React](https://github.com/eweitz/ideogram/tree/master/examples/react), and [Vue](https://github.com/eweitz/ideogram/tree/master/examples/vue), as well as data science platforms like [R](https://github.com/eweitz/ideogram/tree/master/examples/r) and [Jupyter Notebook](https://github.com/eweitz/ideogram/tree/master/examples/jupyter).

[![All human genes](https://raw.githubusercontent.com/eweitz/ideogram/master/examples/vanilla/ideogram_histogram_all_human_genes.png)](https://eweitz.github.io/ideogram/annotations_histogram.html)

Check out [live examples](https://eweitz.github.io/ideogram/), get [up and running](#installation) with your own deployment, skim [basic usage](#usage), or dive into the [full API](api.md)!

A [broader overview](https://speakerdeck.com/eweitz/ideogramjs-chromosome-visualization-with-javascript) is also available.  It discusses Ideogram's chromosome biology, technical architecture, and more.

# Installation

To link directly to the latest release, copy this snippet:

```

```

You can also easily use the library locally:

```

$ cd 

$ git clone https://github.com/eweitz/ideogram.git

```

Then go to [http://localhost/ideogram/examples/](http://localhost/ideogram/examples/).

Or, if you use npm:

```

npm install ideogram

```

You can then [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) Ideogram into an application like so:

```

import Ideogram from 'ideogram';

```

# Usage

```html

  

  var ideogram = new Ideogram({

    organism: 'human',

    annotations: [{

      name: 'BRCA1',

      chr: '17',

      start: 43044294,

      stop: 43125482

    }]

  });

```

Many more usage examples are available at https://eweitz.github.io/ideogram/.

You can also find examples of integrating Ideogram with JavaScript frameworks like [Angular](https://github.com/eweitz/ideogram/tree/master/examples/angular), [React](https://github.com/eweitz/ideogram/tree/master/examples/react), and [Vue](https://github.com/eweitz/ideogram/tree/master/examples/vue), as well as data science platforms like [R](https://github.com/eweitz/ideogram/tree/master/examples/r) and [Jupyter Notebook](https://github.com/eweitz/ideogram/tree/master/examples/jupyter).

# API

See the [Ideogram API reference](api.md) for detailed documentation on configuration options and methods.