# ideogram > Chromosome visualization for the web Latest version **1.53.0** (published 2025-05-20) · CC0-1.0 license · 0 weekly downloads ## Install ```sh npm install ideogram pnpm add ideogram yarn add ideogram bun add ideogram ``` Provides the command `ideogram`. ## Health **Score 25/100 (F)** — status: maintenance-mode. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.53.0 | | Published | 2025-05-20 | | First published | 2016-06-15 | | Weekly downloads | 0 | | License | CC0-1.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Unpacked size | 42.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 321 | | Author | Eric Weitz | | Maintainers | eweitz | | Keywords | chromosome, ideogram, cytogenetics, genomics, visualization, d3 | ## Links - npm: https://www.npmjs.com/package/ideogram - Repository: https://github.com/eweitz/ideogram - Homepage: https://eweitz.github.io/ideogram - Issues: https://github.com/eweitz/ideogram/issues - npm.io page: https://npm.io/package/ideogram ## Dependencies (12) - [fflate](https://npm.io/package/fflate.md) ^0.7.3 - [d3-array](https://npm.io/package/d3-array.md) ^2.8.0 - [d3-brush](https://npm.io/package/d3-brush.md) ^3.0.0 - [d3-fetch](https://npm.io/package/d3-fetch.md) ^2.0.0 - [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2 - [fast-kde](https://npm.io/package/fast-kde.md) 0.2.1 - [tippy.js](https://npm.io/package/tippy.js.md) 6.3.7 - [d3-format](https://npm.io/package/d3-format.md) ^2.0.0 - [snarkdown](https://npm.io/package/snarkdown.md) ^2.0.0 - [d3-dispatch](https://npm.io/package/d3-dispatch.md) ^2.0.0 - [crossfilter2](https://npm.io/package/crossfilter2.md) 1.5.2 - [workbox-range-requests](https://npm.io/package/workbox-range-requests.md) 7.0.0 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 1.53.0 (latest) — 2025-05-20 - 1.46.1-rc3 (rc3) — 2024-08-11 - 1.46.1-rc2 (rc2) — 2024-08-11 - 1.46.1 (beta) — 2024-08-11 - 0.6.0-alpha2 (alpha) — 2017-07-13 - 1.52.0 — 2025-04-08 - 1.51.0 — 2025-04-01 - 1.50.0 — 2024-12-17 - 1.49.0 — 2024-12-07 - 1.48.0 — 2024-11-13 - 1.47.0 — 2024-08-13 - 1.46.0 — 2024-08-09 - 1.45.1 — 2024-01-16 - 1.45.1-beta — 2024-01-16 - 1.45.0 — 2024-01-16 - … 75 more at https://npm.io/package/ideogram/versions ## README # ideogram [![Tests](https://github.com/eweitz/ideogram/actions/workflows/ci.yml/badge.svg)](https://github.com/eweitz/ideogram/actions/workflows/ci.yml) [![Coverage status](https://coveralls.io/repos/github/eweitz/ideogram/badge.svg?branch=master)](https://coveralls.io/github/eweitz/ideogram?branch=master) [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). The [Ideogram API](https://github.com/eweitz/ideogram/blob/master/api.md) also supports [spanning](https://eweitz.github.io/ideogram/annotations-span) annotations alone, or with [heatmaps and histograms](https://eweitz.github.io/ideogram/annotations-span-heatmap-histogram). 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 ``` 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. --- _Source: https://npm.io/package/ideogram · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._