| 1 | # ideogram
|
| 2 |
|
| 3 | [](https://app.travis-ci.com/github/eweitz/ideogram)
|
| 4 | [](https://coveralls.io/github/eweitz/ideogram)
|
| 5 |
|
| 6 | [Ideogram.js](https://eweitz.github.io/ideogram/) is a JavaScript library for [chromosome visualization](https://speakerdeck.com/eweitz/designing-genome-visualizations-with-ideogramjs).
|
| 7 |
|
| 8 | 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.
|
| 9 |
|
| 10 | 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).
|
| 11 |
|
| 12 | [](https://eweitz.github.io/ideogram/annotations_histogram.html)
|
| 13 |
|
| 14 | 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)!
|
| 15 |
|
| 16 | 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.
|
| 17 |
|
| 18 | # Installation
|
| 19 |
|
| 20 | To link directly to the latest release, copy this snippet:
|
| 21 | ```
|
| 22 | <script src="https://cdn.jsdelivr.net/npm/ideogram@1.37.0/dist/js/ideogram.min.js"></script>
|
| 23 | ```
|
| 24 |
|
| 25 | You can also easily use the library locally:
|
| 26 | ```
|
| 27 | $ cd <your local web server document root>
|
| 28 | $ git clone https://github.com/eweitz/ideogram.git
|
| 29 | ```
|
| 30 |
|
| 31 | Then go to [http://localhost/ideogram/examples/](http://localhost/ideogram/examples/).
|
| 32 |
|
| 33 | Or, if you use npm:
|
| 34 | ```
|
| 35 | npm install ideogram
|
| 36 | ```
|
| 37 |
|
| 38 | You can then [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) Ideogram into an application like so:
|
| 39 | ```
|
| 40 | import Ideogram from 'ideogram';
|
| 41 | ```
|
| 42 |
|
| 43 |
|
| 44 | # Usage
|
| 45 | ```html
|
| 46 | <head>
|
| 47 | <script src="https://cdn.jsdelivr.net/npm/ideogram@1.37.0/dist/js/ideogram.min.js"></script>
|
| 48 | </head>
|
| 49 | <body>
|
| 50 | <script>
|
| 51 | var ideogram = new Ideogram({
|
| 52 | organism: 'human',
|
| 53 | annotations: [{
|
| 54 | name: 'BRCA1',
|
| 55 | chr: '17',
|
| 56 | start: 43044294,
|
| 57 | stop: 43125482
|
| 58 | }]
|
| 59 | });
|
| 60 | </script>
|
| 61 | </body>
|
| 62 | ```
|
| 63 |
|
| 64 | Many more usage examples are available at https://eweitz.github.io/ideogram/.
|
| 65 |
|
| 66 | 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).
|
| 67 |
|
| 68 |
|
| 69 | # API
|
| 70 |
|
| 71 | See the [Ideogram API reference](api.md) for detailed documentation on configuration options and methods.
|