Ideogram Examples and Reference


Default Ideogram

An example of a default Ideogram component without any extra properties.

import dash
import dash_bio as dashbio
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    'Select which chromosomes to display on the ideogram below:',
    dcc.Dropdown(
        id='displayed-chromosomes',
        options=[{'label': str(i), 'value': str(i)} for i in range(1, 23)],
        multi=True,
        value=[str(i) for i in range(1, 23)]
    ),
    dashbio.Ideogram(
        id='my-dashbio-ideogram'
    ),
    html.Div(id='ideogram-rotated')
])


@app.callback(
    dash.dependencies.Output('my-dashbio-ideogram', 'chromosomes'),
    [dash.dependencies.Input('displayed-chromosomes', 'value')]
)
def update_ideogram(value):
    return value


@app.callback(
    dash.dependencies.Output('ideogram-rotated', 'children'),
    [dash.dependencies.Input('my-dashbio-ideogram', 'rotated')]
)
def update_ideogram_rotated(rot):
    return 'You have {} selected a chromosome.'.format(
        '' if rot else 'not')


if __name__ == '__main__':
    app.run_server(debug=True)
Select which chromosomes to display on the ideogram below:

Height/Width

Change the size of the chromosomes in your ideogram.

import dash_bio as dashbio

dashbio.Ideogram(
    id='ideogram-size',
    chrHeight=800,
    chrWidth=100
)  

Annotations

Display annotations that are loaded from a JSON file.

import dash_bio as dashbio

dashbio.Ideogram(
    id='ideogram-annotations',
    chromosomes=['X', 'Y'],
    annotationsPath='https://eweitz.github.io/ideogram/data/annotations/SRR562646.json'
)  

Rotatability

Disable rotation of the chromosome upon clicking on it.

import dash_bio as dashbio

dashbio.Ideogram(
    id='ideogram-rotate',
    rotatable=False
)  

Orientation

Display chromosomes horizontally or vertically.

import dash_bio as dashbio

dashbio.Ideogram(
    id='ideogram-orientation',
    orientation='horizontal'
)  

Brush

Highlight a region of the chromosome by adding a brush.

import dash_bio as dashbio

dashbio.Ideogram(
    id='ideogram-brush',
    chromosomes=['X'],
    orientation='horizontal',
    brush='chrX:1-10000000'
)  

Access this documentation in your Python terminal with:
```python

help(dash_bio.Ideogram)
```

id (string; required): The ID used to identify this component in Dash callbacks and used to identify Ideogram instances.

annotationsLayout (a value equal to: ‘tracks’, ‘histogram’, ‘overlay’; default 'tracks'): Layout of ideogram annotations. One of “tracks”, “histogram”, or “overlay”. “tracks”: display annotations in tracks beside each chromosome. “histogram”: display annotations in a histogram. Clusters annotations by location. Each cluster/bin is shown as a bar, the height of which represents the number of annotations on genomic range. “overlay”: display annotations directly over chromosomes.

annotations (dict; optional): A list of annotation objects. Annotation objects can also have a name, color, shape, and track index. At the moment there is more keys specified and the docs need updating. annotations has the following type: list of dicts containing keys ‘name’, ‘chr’, ‘start’, ‘stop’. Those keys have the following types:

  • name (string; optional)
  • chr (string; optional)
  • start (number; optional)
  • stop (number; optional)

annotationsPath (string; optional): An absolute or relative URL directing to a JSON file containing annotation objects (JSON).

annotationsData (string; optional): Use this prop in a dash callback to return annotationData when hovered. It is read-only, i.e., it cannot be used with dash.dependencies.Output but only with dash.dependencies.Input

annotationTracks (list of dicts; optional): A list of objects with metadata for each track, e.g., id, display name, color, shape.

annotationHeight (number; optional): Not used if annotationsLayout is set to “overlay”. The height of histogram bars or the size of annotations tracks symbols

annotationsColor (string; default '#F00'): Color of annotations.

assembly (string; optional): Default: latest RefSeq assembly for specified organism. The genome assembly to display. Takes assembly name (e.g., “GRCh37”), RefSeq accession (e.g., “GCF_000306695.2”), or GenBank accession (e.g., “GCA_000005005.5”)

ancestors (dict; optional): A map associating ancestor labels to colors. Used to color chromosomes from different ancestors in polyploid genomes.

barWidth (number; default 3): Pixel width of histogram bars. Only used if annotationsLayout is set to “histogram”.

brush (string; optional): Genomic coordinate range (e.g., “chr1:104325484-119977655”) for a brush on a chromosome. Useful when ideogram consists of one chromosome and you want to be able to focus on a region within that chromosome, and create an interactive sliding window to other regions

brushData (dict; optional): A dash callback that is activated when the ‘brush’ prop is used. It will return an dictionary like so: {‘start’: <value>, ‘end’: <value>, ‘extent’: <value>} where start is the left most edge, end is right most edge, and extent is the total width of the brush. It is read-only, i.e., it cannot be used with dash.dependencies.Output but only with dash.dependencies.Input. brushData has the following type: dict containing keys ‘start’, ‘end’, ‘extent’. Those keys have the following types:

  • start (string; optional)
  • end (string; optional)
  • extent (string; optional)

className (string; optional): The CSS class of the component wrapper

container (string; optional): CSS styling and the id of the container holding the Ideogram in react-ideogram.js, this is where all the d3 magic happens.

chrHeight (number; default 400): The pixel height of the tallest chromosome in the ideogram

chrMargin (number; default 10): The pixel space of margin between each chromosome.

chrWidth (number; default 10): The pixel width of each chromosome.

chromosomes (list of strings | dict; optional): A list of the names of chromosomes to display. Useful for depicting a subset of the chromosomes in the genome, e.g., a single chromosome. If Homology (between two different species): Ex: chromosomes={ ‘human’: [‘1’], ‘mouse’: [‘4’] } General case to specify specific chromosomes: Ex: chromosomes=[‘1’, ‘2’]

dataDir (string; default 'https://unpkg.com/ideogram@1.5.0/dist/data/bands/native/'): Absolute or relative URL of the directory containing data needed to draw banded chromosomes. You will need to set up your own database to grab data from a custom database.

fullChromosomeLabels (boolean; optional): Whether to include abbreviation species name in chromosome label. Used for homology.

filterable (boolean; optional): Whether annotations should be filterable or not.

histogramScaling (a value equal to: ‘absolute’, ‘relative’; optional): Scaling of histogram bars height Only used if annotationsLayout is set to “histogram”. One of “absolute” or “relative”. “absolute”: sets bar height relative to tallest bar in all chromosomes. “relative”: sets bar height relative to tallest bar in each chromosome.

homology (dict; optional): Used to compare two chromosomes. The keys “chrOne” and “chrTwo” represent one chromosome each. Organism is the taxID or name. Start is an array, containing start one and start two, in this order. Stop is an array, containing stop one, and stop two, in this order. Ex: homology={ “chrOne”: { organism”: “9606”, “start”: [50000, 155701383], “stop”: [900000, 156030895] }, “chrTwo”: { organism”: “10090”, “start”: [10001, 50000000], “stop”: [2781479, 57217415] } }. homology has the following type: dict containing keys ‘chrOne’, ‘chrTwo’. Those keys have the following types:

  • chrOne (dict; optional): chrOne has the following type: dict containing keys ‘organism’, ‘start’, ‘stop’. Those keys have the following types: - organism (string; required) - start (list of numbers; optional) - stop (list of numbers; optional)
  • chrTwo (dict; optional): chrTwo has the following type: dict containing keys ‘organism’, ‘start’, ‘stop’. Those keys have the following types: - organism (string; required) - start (list of numbers; optional) - stop (list of numbers; optional)

localOrganism (dict; optional): Provide local JSON organism into this prop from a local user JSON file. DataDir must not be initialized.

organism (string | number; default 'human'): Organism(s) to show chromosomes for. Supply organism’s name as a string (e.g., “human”) or organism’s NCBI Taxonomy ID (taxid, e.g., 9606) to display chromosomes from a single organism, or an array of organisms’ names or taxids to display chromosomes from multiple species.

orientation (a value equal to: ‘vertical’, ‘horizontal’; optional): The orientation of chromosomes on the page.

perspective (a value equal to: ‘comparative’; optional): Use perspective: ‘comparative’ to enable annotations between two chromosomes, either within the same organism or different organisms. Used for homology.

ploidy (number; default 1): The ploidy - number of chromosomes to depict for each chromosome set.

ploidyDesc (list of dicts; optional): Description of ploidy in each chromosome set in terms of ancestry composition.

resolution (number; optional): The resolution of cytogenetic bands to show for each chromosome. The quantity refers to an approximate value in bands per haploid set (bphs). One of 450, 550, or 850.

rangeSet (list of dicts; optional): List of objects describing segments of recombination among chromosomes in a chromosome set.

rotatable (boolean; default True): Whether chromosomes are rotatable on click.

rotated (boolean; optional): Dash callback that returns true if rotated, and false if not.

style (dict; optional): The component’s inline styles

showAnnotTooltip (boolean; default True): Whether to show a tooltip upon mousing over an annotation.

sex (a value equal to: ‘male’, ‘female’; optional): Useful for omitting chromosome Y in female animals. Currently only supported for organisms that use XY sex-determination.

showChromosomeLabels (boolean; default True): Whether to show chromosome labels, e.g., 1, 2, 3, X, Y.

showBandLabels (boolean; default False): Whether to show cytogenetic band labels, e.g., 1q21.

showFullyBanded (boolean; default True): Whether to show fully banded chromosomes for genomes that have sufficient data. Useful for showing simpler chromosomes of cytogenetically well-characterized organisms, e.g., human, beside chromosomes of less studied organisms, e.g., chimpanzee.

showNonNuclearChromosomes (boolean; default False): Whether to show non-nuclear chromosomes, e.g., for mitochondrial (MT) and chloroplast (CP) DNA.