### Install and Run React Ideogram Example

Source: https://github.com/eweitz/ideogram/blob/master/examples/react/README.md

This snippet outlines the commands to clone the Ideogram repository, navigate to the React example directory, install dependencies, and start the development server.

```Bash
git clone https://github.com/eweitz/ideogram
cd ideogram/examples/react
npm install
npm start
```

--------------------------------

### Install and Run Vue Example

Source: https://github.com/eweitz/ideogram/blob/master/examples/vue/README.md

This snippet shows the bash commands required to clone the Ideogram repository, navigate to the Vue example directory, install dependencies using npm, and start the development server.

```bash
git clone https://github.com/eweitz/ideogram
cd ideogram/examples/vue
npm install
npm run dev
```

--------------------------------

### Install and Initialize Ideogram Gene Leads Lite

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/gene-leads-lite.html

This snippet shows how to install the Ideogram library using npm and then initialize the Gene Leads Lite component. It includes options for importing the library via a modern import statement or a classic script tag, and demonstrates how to set up an onClickAnnot callback to plot related genes.

```javascript
// Setup
npm install ideogram

// Either use a modern import statement
import Ideogram from 'ideogram'

// or use a classic HTML script tag
<script src="https://cdn.jsdelivr.net/npm/ideogram@1.50.0/dist/js/ideogram.min.js"></script>

// Upon clicking a triangular annotation, plot that gene
function onClickAnnot(annot) {
  ideogram.plotRelatedGenes(annot.name);
}

const ideogram = Ideogram.initGeneLeads({
  container: '#ideogram-container',
  onClickAnnot
});
```

```javascript
/** Upon clicking a triangular annotation or tooltip, plot that gene */ function onClickAnnot(annot) { ideogram.plotRelatedGenes(annot.name); }
// Instantiate Gene Leads
const ideogram = Ideogram.initGeneLeads({
  organism: 'homo-sapiens',
  container: '#ideogram-container',
  onClickAnnot
});
```

--------------------------------

### Install and Run Ideogram in Jupyter

Source: https://github.com/eweitz/ideogram/blob/master/examples/jupyter/README.md

This snippet demonstrates how to clone the Ideogram repository, navigate to the Jupyter examples directory, and launch a Jupyter notebook to run the Ideogram integration example.

```bash
git clone origin https://github.com/eweitz/ideogram
cd ideogram/examples/jupyter
jupyter notebook
```

--------------------------------

### Install and Serve Ideogram in Angular

Source: https://github.com/eweitz/ideogram/blob/master/examples/angular/README.md

This snippet demonstrates the command-line steps required to clone the Ideogram project, navigate to the Angular example directory, install npm dependencies, and serve the Angular application. It assumes a local development environment with Git and Node.js installed.

```bash
git clone origin https://github.com/eweitz/ideogram
cd ideogram/examples/angular
npm install
ng serve
```

--------------------------------

### Install Ideogram.js Locally

Source: https://github.com/eweitz/ideogram/blob/master/README.md

This snippet demonstrates how to install Ideogram.js locally by cloning the repository into your web server's document root.

```shell
cd <your local web server document root>
git clone https://github.com/eweitz/ideogram.git
```

--------------------------------

### Initialize Ideogram with Configuration

Source: https://github.com/eweitz/ideogram/blob/master/api.md

Demonstrates how to instantiate the Ideogram class with essential configuration options like organism and annotations. This is the starting point for using the Ideogram.js library.

```JavaScript
var ideogram = new Ideogram({
  organism: 'human',
  annotations: [{
    name: 'BRCA1',
    chr: '17',
    start: 43044294,
    stop: 43125482
  }]
});
```

--------------------------------

### Install Ideogram.js via npm

Source: https://github.com/eweitz/ideogram/blob/master/README.md

This snippet shows how to install Ideogram.js using npm, a popular JavaScript package manager.

```shell
npm install ideogram
```

--------------------------------

### Ideogram Search Examples

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/orthologs.html

Demonstrates how to construct URLs for the Ideogram tool to search for gene orthologs. Examples include searching for a single gene, multiple genes, and specific genomic loci, with options to specify source and target organisms and the orthology backend.

```URL
?genes=MTOR&org=homo-sapiens&org2=mus-musculus&backend=orthodb
```

```URL
?genes=MTOR,BRCA1&org=homo-sapiens&org2=mus-musculus&backend=orthodb
```

```URL
?loci=2:150000000,5:200000000&org=homo-sapiens&org2=mus-musculus
```

--------------------------------

### Install Ideogram.js via CDN

Source: https://github.com/eweitz/ideogram/blob/master/README.md

This snippet shows how to include the Ideogram.js library in an HTML page using a Content Delivery Network (CDN) link for the latest release.

```html
<script src="https://cdn.jsdelivr.net/npm/ideogram@1.53.0/dist/js/ideogram.min.js"></script>
```

--------------------------------

### Ideogram Initialization with Configuration

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/layout-small.html

Initializes an Ideogram visualization using a JavaScript configuration object. This configuration specifies the container element, orientation, organism, resolution, chromosome height, number of rows, and whether rotation is enabled.

```javascript
var config = { container: '.small-ideogram', orientation: 'vertical', organism: 'human', resolution: 550, chrHeight: 150, rows: 2, rotatable: false };
var ideogram = new Ideogram(config);
```

--------------------------------

### Ideogram.js JSON Annotation Format Example

Source: https://github.com/eweitz/ideogram/wiki/Annotations

This snippet demonstrates the expected JSON structure for Ideogram.js annotation sets. It includes keys defining annotation properties and the nested structure for grouping annotations by chromosome.

```json
{
  "keys": ["name", "start", "length", "expression-level", "gene-type"]
  "annots": [{
    "chr": "1",
    "annots": [
      ["MTOR", 11106535, 155972, 5, 5],
      ["F5", 169514166, 72422, 4, 2]
  },
  {
    "chr": "2",
    "annots": [
      ["APOB", 21001429, 42644, 2, 5],
      ["CASP8", 201233443, 54268, 6, 5]
  }
  ]
}
```

--------------------------------

### Initialize Ideogram with Custom Organism Data

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/custom-organism.html

Initializes the Ideogram library to display a custom organism's genome. It requires specifying the organism name and the directory containing the chromosome data. The dataDir points to a GitHub repository containing native band data.

```JavaScript
var ideogram = new Ideogram({
  organism: 'customjsonnoextension',
  dataDir: 'https://raw.githubusercontent.com/eweitz/ideogram/aff3866b022b55e76b8ad7d45ba216361019a186/data/bands/native/'
});
```

--------------------------------

### CSS for Ideogram Layout and Styling

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/layout-small.html

Provides CSS rules for styling the Ideogram component and its surrounding layout. It defines styles for the body, links, and specific layout containers like top-left and top-right elements.

```css
body {font: 14px Arial; line-height: 19.6px; padding: 0 15px;}
a, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a, a:hover, a:visited, a:active {color: #0366d6;}
.top-left { width: 440px; padding-right: 10px; float: left; position: relative; top: -0.45em; }
.top-right { padding-top: 75px; width: 460px; float: left; }
.bottom { 
  height: 600px;
  min-width: 960px;
  float: left;
}
```

--------------------------------

### Event Listener Setup

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/paralogs.html

Attaches event listeners to the search button and search input field for 'click' and 'keyup' events, respectively, to trigger the search functionality. It also sets up a 'change' event listener for the organism selection dropdown.

```javascript
document.querySelector('#search-button').addEventListener('click', handleSearch);
document.querySelector('#search-genes').addEventListener('keyup', handleSearch);
document.querySelector('select').addEventListener('change', handleOrganism);
```

--------------------------------

### Initialize Ideogram.js with Default Configuration

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/gene-leads.html

Initializes Ideogram.js with a default configuration, potentially including gene leads if specified, and falls back to related genes if a 'cold' parameter is not present.

```JavaScript
if ('cold' in urlParams === false) {
  // ... other initializations ...
} else {
  ideogram = Ideogram.initRelatedGenes(config, annotsInList);
}
```

--------------------------------

### Ideogram.js: Initialization Configuration

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/gene-leads.html

This code block shows the Ideogram configuration object, setting essential parameters like the organism, container, and various callback functions for events like `onLoad`, `onPlotFoundGenes`, `onHoverLegend`, `onClickAnnot`, and `onWillShowAnnotTooltip`.

```JavaScript
config = {
    organism: organism,
    container: '#ideogram-container',
    showVariantInTooltip: plotGeneFromUrl,
    onLoad: plotGeneFromUrl,
    onPlotFoundGenes: reportFoundGenes,
    onHoverLegend: reportLegendMetrics,
    onClickAnnot,
    onWillShowAnnotTooltip
}
```

--------------------------------

### Get Selected Tracks

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/annotations-track-filters.html

Retrieves the indices of the currently selected annotation tracks from the checkboxes. This is used to update the Ideogram visualization with the user's track preferences.

```JavaScript
function getSelectedTracks() {
  var selectedTracks = [];
  checkboxes.forEach(function(checkbox) {
    var trackIndex = parseInt(checkbox.getAttribute('id').split('_')[1]);
    if (checkbox.checked) {
      selectedTracks.push(trackIndex);
    }
  });
  return selectedTracks;
}
```

--------------------------------

### Initialize Ideogram with Multiple Sample Configurations

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/multiple-trio-sv.html

This snippet shows how to configure and initialize multiple Ideogram instances for different samples. It defines a base configuration and an array of sample-specific configurations, then iterates through them to create and render each Ideogram.

```JavaScript
var config, sampleConfigs, id, i, container, sampleConfig, label; config = { organism: 'human', chrHeight: 250, chrMargin: 2, orientation: 'horizontal', annotationsLayout: 'overlay', showFullyBanded: false, showAnnotTooltip: false }; sampleConfigs = [
  {label: 'Sample 1', annotationsPath: '../../data/annotations/10_virtual_cnvs.json'},
  {label: 'Sample 2', annotationsPath: '../../data/annotations/10_virtual_cnvs.json'},
  {label: 'Sample 3', annotationsPath: '../../data/annotations/10_virtual_cnvs.json'}
];

for (i = 0; i < sampleConfigs.length; i++) {
  sampleConfig = sampleConfigs[i];
  label = sampleConfig.label;
  id = label.toLowerCase().replace(' ', '');
  container = '<div class="ideogram-container">' +
              '<div class="ideogram-name">' + label + '</div>' +
              '<div id="' + id + '"></div>' +
              '</div>';
  document.querySelector('#content').innerHTML += container;
  config.container = '#' + id;
  config.annotationsPath = sampleConfig.annotationsPath;
  new Ideogram(config);
}
```

--------------------------------

### Initialize Google API Client and Authentication

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/auth.html

This snippet initializes the Google API client and authentication modules. It sets up the client ID and requested scopes, listens for sign-in state changes, and handles the initial sign-in status. It also attaches click handlers for sign-in/out and revoke access buttons.

```JavaScript
var GoogleAuth;
var SCOPE = 'https://www.googleapis.com/auth/devstorage.read_only';

function handleClientLoad() {
  // Load the API's client and auth2 modules.
  // Call the initClient function after the modules load.
  gapi.load('client:auth2', initClient);
}

function initClient() {
  // Initialize the gapi.client object, which app uses to make API requests.
  // Get API key and client ID from API Console.
  // 'scope' field specifies space-delimited list of access scopes.
  gapi.client.init({
    // This clientId is for the Ideogram project in Google Cloud Platform.
    'clientId': '829416742843-558e4gu9cfvdamcb727gh9au8lh7b7tk.apps.googleusercontent.com',
    'scope': SCOPE
  }).then(function () {
    GoogleAuth = gapi.auth2.getAuthInstance();

    // Listen for sign-in state changes.
    GoogleAuth.isSignedIn.listen(updateSigninStatus);

    // Handle initial sign-in state. (Determine if user is already signed in.)
    var user = GoogleAuth.currentUser.get();
    setSigninStatus();

    // Call handleAuthClick function when user clicks on
    // "Sign In/Authorize" button.
    $('#sign-in-or-out-button').click(function() { handleAuthClick(); });
    $('#revoke-access-button').click(function() { revokeAccess(); });
  });
}
```

--------------------------------

### Fetch Data from Ensembl API (JavaScript)

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/paralogs.html

An asynchronous function to fetch data from the Ensembl REST API. It supports GET and POST requests with JSON payloads and handles response parsing.

```JavaScript
async function fetchEnsembl(path, body=null, method='GET') {
  let init = { method: method, headers: {'Content-Type': 'application/json'}
 }
  if (body !== null) init.body = JSON.stringify(body);
  const response = await fetch(`https://rest.ensembl.org${path}`, init);
  const json = await response.json();
  return json;
}
```

--------------------------------

### Ideogram Initialization and BED File Loading (JavaScript)

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/annotations-file-url.html

This JavaScript code initializes the Ideogram library, sets up event listeners for loading BED files from a URL input, and handles parsing URL parameters to pre-configure the Ideogram instance with specific assemblies and annotation URLs. It also includes a function to display a caption for the loaded annotations.

```JavaScript
d3 = Ideogram.d3;
function displayAnnotsCaption() {
  var cfg = ideogram.config,
    asm = cfg.assembly,
    annotsUrl = cfg.annotationsPath;
  if (annotsUrl === '') {
    return;
  }
  d3.select('#annotations-summary').html(
    'Displaying ' + asm + ' BED file ' + '<a target="_blank" href="' + annotsUrl + '">' + annotsUrl + '</a>'
  );
}

d3.select('#display-bed').on('click', function() {
  var bedUrl = d3.select('#bed-url').nodes()[0].value;
  var asm = d3.select('input[name="asm"]:checked').nodes()[0].value;
  d3.select('#ideo-container').nodes()[0].innerHTML = '';
  ideogram = new Ideogram({
    organism: 'human',
    assembly: asm,
    annotationsPath: bedUrl,
    annotationHeight: annotsHeight,
    container: '#ideo-container',
    onDrawAnnots: displayAnnotsCaption
  });
});

// Parse URL parameters
var rawParams = document.location.search;
var urlParams = {};
var param, key, value;
if (rawParams !== '') {
  rawParams = rawParams.split('?')[1].split('&');
  for (var i = 0; i < rawParams.length; i++) {
    param = rawParams[i].split('=');
    key = param[0];
    value = param[1];
    urlParams[key] = value;
  }
}

var annotsHeight = 3.5;
var config = {
  organism: 'human',
  container: '#ideo-container',
  chrHeight: 300
};

if ('annotsUrl' in urlParams) {
  config.annotationsPath = urlParams.annotsUrl;
  config.annotationHeight = annotsHeight;
  config.onDrawAnnots = displayAnnotsCaption;
}

if ('asm' in urlParams) {
  config.assembly = urlParams.asm;
  d3.select('#' + urlParams.asm).nodes()[0].checked = true;
}

var ideogram = new Ideogram(config);
```

--------------------------------

### Ideogram.js: Human Chromosome Visualization

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/index.html

Displays human chromosomes 1-22, X and Y rendered vertically using the Ideogram.js library. This example demonstrates the basic rendering of human chromosomes.

```HTML
[Human](human)  
Chromosomes 1-22, X and Y rendered vertically.
```

--------------------------------

### Initialize Ideogram with Configuration

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/compare-whole-genomes.html

Initializes the Ideogram library by creating a new Ideogram instance with a provided configuration object. The configuration includes visual properties and the target container for rendering.

```javascript
var config = { hrHeight: chrHeight, chrMargin: chrMargin, container: '#ideogram-container', onLoad: onIdeogramLoad };
var ideogram = new Ideogram(config);
var initialized = true;
```

--------------------------------

### Get Selected Categorical Filters

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/differential-expression.html

Retrieves the currently selected categorical filters from the UI. It identifies checked input elements, extracts facet and filter information, and returns a structured object of selections.

```javascript
function getCategorySelections() {
    var tmp, checkedFilter, checkedFilters, i, facet, counts, count, filterID, key, filterDomId, labels, selections = {};
    checkedFilters = d3.selectAll('.category-facet input:checked').nodes();
    for (i = 0; i < checkedFilters.length; i++) {
        filterDomId = checkedFilters[i].id;
        tmp = filterDomId.split('_');
        facet = tmp[1];
        checkedFilter = tmp.slice(2).join('_');
        labels = ideogram.rawAnnots.metadata.labels[facet];
        filterID = labels.indexOf(checkedFilter);
        if (facet in selections === false) {
            selections[facet] = {};
        }
        selections[facet][filterID] = 1;
    }
    return selections;
}
```

--------------------------------

### Initialize Ideogram.js with Related Genes

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/gene-leads.html

Initializes Ideogram.js to display related genes based on provided configuration and a list of annotations. This is typically used when a query parameter 'q' is present in the URL.

```JavaScript
if ('q' in urlParams) {
  ideogram = Ideogram.initRelatedGenes(config, annotsInList);
}
```

--------------------------------

### Ideogram.js: Mouse Chromosome Visualization

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/index.html

Displays mouse chromosomes 1-19, X and Y rendered horizontally with labeled bands using the Ideogram.js library. This example showcases horizontal rendering and band labeling.

```HTML
[Mouse](mouse)  
Chromosomes 1-19, X and Y rendered horizontally, with labeled bands.
```

--------------------------------

### Get Selected Numerical Range Filters

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/differential-expression.html

Retrieves the selected numerical ranges from the Ideogram sliders. It checks if the associated checkbox is enabled and maps the slider values, handling special cases for log2fc filters.

```javascript
function getRangeSelections() {
    var selections = {}
    document.querySelectorAll('.ideogramSlider').forEach(slider => {
        // Don't apply range filter if this slider is unchecked
        var checkbox = document.querySelector(`#slider-checkbox-${slider.id}`);
        if (checkbox.checked === false) return;
        var range = slider.noUiSlider.get().map(d => parseFloat(d));
        if (slider.id.includes('log2fc')) {
            range = range.map(v => {
                if (v === -1.5) return -Infinity;
                if (v === 1.5) return Infinity;
                return v;
            })
        }
        selections[slider.id] = range;
    });
    return selections;
}
```

--------------------------------

### Initialize Ideogram.js with Gene Leads (Homo Sapiens)

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/gene-leads.html

Initializes Ideogram.js to display gene leads, specifically for 'homo-sapiens', when a 'gene-leads-de' parameter is present. It sets up custom drawing functions and color maps.

```JavaScript
if ('org' in urlParams) {
  // Show genome for the organism specified via URL
  if (urlParams.org === 'homo-sapiens') {
    if ('gene-leads-de' in urlParams) {
      config.onDrawAnnots = onDrawAnnots;
      config.geneLeadsDE = true;
      config.colorMap = colorMap;
      ideogram = Ideogram.initGeneLeads(config);
    }
  } else {
    ideogram = Ideogram.initRelatedGenes(config, annotsInList);
  }
} else {
  if ('gene-leads-de' in urlParams) {
    config.onDrawAnnots = onDrawAnnots;
    config.geneLeadsDE = true;
    config.colorMap = colorMap;
  }
  ideogram = Ideogram.initGeneLeads(config);
}
```

--------------------------------

### Get Chromosome Height Configuration

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/orthologs.html

This function determines the appropriate height for chromosomes based on organism, number of annotations, orientation, and scale. It checks for a URL parameter 'chr-height' first and provides default values for different scenarios.

```JavaScript
function getChromosomeHeight(organism, numAnnots) {
    var chrHeight;
    if ('chr-height' in urlParams) {
        return urlParams['chr-height'];
    }
    if (numAnnots < 2) {
        return orientation === 'vertical' ? 600 : 700;
    }
    if (
        (organism.includes('canis lupus familiaris') || organism.includes('danio rerio')) &&
        orientation === 'horizontal' &&
        scale === 'relative'
    ) {
        chrHeight = 65;
    } else if (orientation === 'horizontal') {
        chrHeight = 95;
    } else {
        // vertical
        chrHeight = 44;
    }
    return chrHeight;
}
```

--------------------------------

### Create and Initialize Ideogram Instance

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/orthologs.html

This asynchronous function processes URL parameters, checks for errors, retrieves chromosome height, and then creates a new Ideogram instance with a comprehensive configuration object. The configuration adapts based on whether orthology or paralogy is being displayed, and handles single or multiple chromosome views.

```JavaScript
async function createIdeogram() {
    await processUrl();
    if (document.querySelector('#error-container') !== null) {
        return;
    }
    chrHeight = getChromosomeHeight(org1);
    var config = {
        container: '#ideogram-container',
        showBandLabels: showBandLabels,
        rotatable: false,
        chrWidth: 10,
        onLoad: onIdeogramLoad,
        orientation: orientation,
        chrHeight: chrHeight,
        chrLabelSize: 11
    };
    if (org1 !== org2) {
        // Orthology
        config.organism = [org1, org2];
    } else {
        // Paralogy
        config.organism = org1;
        config.chromosomesConfig = [loci1Chr, loci2Chr];
    }
    if (orthologs.length > 1) {
        // For (likely) multiple chromosomes in each genome
        organism = config.organism;
        Object.assign(config, {
            chromosomeScale: scale,
            geometry: 'collinear',
            chrMargin: 6
        });
    } else {
        // For one chromosome in each genome
        region = parseSyntenicRegion(orthologs[0]);
        chromosomesConfig = {};
        chromosomesConfig[org1] = [region.r1.chr];
        chromosomesConfig[org2] = [region.r2.chr];
        Object.assign(config, {
            chromosomes: chromosomesConfig,
            fullChromosomeLabels: true,
            perspective: 'comparative'
        });
    }
    delete chrBands;
    ideogram = new Ideogram(config);
}
```

--------------------------------

### Ideogram Configuration and Initialization

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/layout-tabs.html

Configures and initializes the Ideogram visualization with specific organism, assembly, and annotation data. It includes settings for chromosome height, margin, annotation paths, and layout options like heatmaps with defined thresholds.

```javascript
var annotationTracks = [
  {id: 'expressionLevelTrack', displayName: 'Expression level'},
  // {id: 'geneTypeTrack', displayName: 'Gene type'},
];
var config = {
  container: '#ideogram',
  organism: 'human',
  assembly: 'GRCh37',
  chrHeight: 400,
  chrMargin: 18,
  annotationsPath: '../../data/annotations/SRR562646.json',
  annotationTracks: annotationTracks,
  annotationsLayout: 'heatmap',
  heatmaps: [
    {
      key: 'expression-level',
      thresholds: [['2', '#88F'], ['4', '#CCC'], ['+', '#F33']]
    },
    // {
    //   key: 'gene-type',
    //   thresholds: [['0', '#00F'], ['1', '#0AF'], ['2', '#AAA'], ['3', '#FA0'], ['4', '#F00']]
    // }
  ]
};
var ideogram = new Ideogram(config);
```

--------------------------------

### Parse Syntenic Region Data

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/orthologs.html

Parses data representing a syntenic region between two organisms. It extracts chromosome, start, and stop positions for both regions, along with optional color and width properties. It then constructs a region object suitable for visualization.

```javascript
function parseSyntenicRegion(ortholog) {
  var [loci1, loci2, color, width] = ortholog;
  var [loci1Chr, loci1Range] = loci1.location.split(':');
  var [loci2Chr, loci2Range] = loci2.location.split(':');
  var [loci1Start, loci1Stop] = loci1Range.split('-');
  var [loci2Start, loci2Stop] = loci2Range.split('-');
  if (typeof loci1Stop === 'undefined') loci1Stop = loci1Start
  if (typeof loci2Stop === 'undefined') loci2Stop = loci2Start
  if ('gene' in loci1) {
    loci1.name = loci1.gene
    delete loci1.gene
  }
  if ('gene' in loci2) {
    loci2.name = loci2.gene
    delete loci2.gene
  }
  r1 = {
    chr: loci1Chr,
    start: loci1Start,
    stop: loci1Stop,
    name: loci1.name
  };
  r2 = {
    chr: loci2Chr,
    start: loci2Start,
    stop: loci2Stop,
    name: loci2.name
  };
  let region = {r1, r2};
  if (typeof color !== 'undefined') region.color = color
  if (typeof width !== 'undefined') region.width = width
  return region;
}
```

--------------------------------

### Initialize and Highlight Ideogram with JavaScript

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/highlights-basic.html

This snippet initializes an Ideogram instance for the human organism and sets up a callback function to highlight the mitochondrial chromosome (MT) once the ideogram has loaded. It demonstrates basic configuration and dynamic highlighting.

```javascript
function onIdeogramLoad() {
  this.highlight(['MT']);
}

var ideogram = new Ideogram({
  organism: 'human',
  onLoad: onIdeogramLoad,
  showNonNuclearChromosomes: true
});
```

--------------------------------

### Initialize Ideogram with BRCA1 Annotation (JavaScript)

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/annotations-basic.html

This snippet initializes the Ideogram library with a configuration object. The configuration specifies the organism, chromosome, chromosome height, orientation, and an array of annotations. The BRCA1 gene is annotated on chromosome 17 with its specific start and stop coordinates.

```JavaScript
var config = {
  organism: 'human',
  chromosome: '17',
  chrHeight: 600,
  orientation: 'horizontal',
  annotations: [
    {
      name: 'BRCA1',
      chr: '17',
      start: 43044294,
      stop: 43125482,
    }
  ]
};
var ideogram = new Ideogram(config);
```

--------------------------------

### Draw Synteny Between Human and Mouse Genomes

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/compare-whole-genomes.html

This JavaScript function, `onIdeogramLoad`, is triggered when the Ideogram visualization is ready. It defines gene ranges for human and mouse chromosomes and uses `ideogram.drawSynteny` to display these syntenic regions. It includes examples for MTOR, PTEN, and GAD2 genes.

```javascript
var initialized = false;
function onIdeogramLoad() {
    var chrs, humanChrs, mouseChrs, syntenicRegions, humanTaxid, mouseTaxid;
    chrs = ideogram.chromosomes;
    humanTaxid = ideogram.getTaxid('human');
    mouseTaxid = ideogram.getTaxid('mouse');
    humanChrs = chrs[humanTaxid];
    mouseChrs = chrs[mouseTaxid];
    syntenicRegions = [];
    // MTOR gene
    range1 = {chr: humanChrs['1'], start: 11106531, stop: 11262557};
    range2 = {chr: mouseChrs['4'], start: 148448582, stop: 148557685};
    syntenicRegions.push({'r1': range1, 'r2': range2});
    // PTEN gene
    range3 = {chr: humanChrs['10'], start: 87864470, stop: 87965472};
    range4 = {chr: mouseChrs['19'], start: 32758445, stop: 32820028};
    syntenicRegions.push({'r1': range3, 'r2': range4});
    // GAD2 gene
    range5 = {chr: humanChrs['10'], start: 26216810, stop: 26300961}
    range6 = {chr: mouseChrs['2'], start: 22622663, stop: 22690346};
    syntenicRegions.push({'r1': range5, 'r2': range6});
    ideogram.drawSynteny(syntenicRegions);
}
```

--------------------------------

### Initialize Ideogram with Configuration

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/annotations-track-filters.html

Initializes the Ideogram visualization with a specific configuration, including organism, container, dimensions, and annotation paths. It also defines the `onLoadAnnots` callback function to set up track filters.

```JavaScript
var config, ideogram, checkboxes, annotsLayout;
config = {
  organism: 'human',
  container: '#ideogram-container',
  chrHeight: 400,
  chrMargin: 4,
  rotatable: false,
  annotationsLayout: 'heatmap',
  annotationsPath: '../../data/annotations/9_tracks_virtual_snvs.json',
  onLoadAnnots: createTrackFilters,
  annotationsNumTracks: 3,
  annotationsDisplayedTracks: [1, 5, 9],
  geometry: 'parallel'
  // annotationsPath: '../../data/annotations/all_human_genes.json',
  // annotationsNumTracks: 2,
  // annotationsDisplayedTracks: [1, 2],
};
ideogram = new Ideogram(config);
```

--------------------------------

### Ideogram.js: Annotation Tooltip Handling

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/gene-leads.html

The `onWillShowAnnotTooltip` function is a callback for Ideogram that allows custom handling of annotation tooltips. It returns the annotation object directly or awaits it if it's a promise.

```JavaScript
async function onWillShowAnnotTooltip(annot) {
    if (annot.then) {
        return await annot;
    }
    return annot;
}
```

--------------------------------

### Parse Ortholog Data

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/orthologs.html

Parses ortholog data, splitting it by delimiters like ';' and '!!' to extract raw ranges and region properties. It further processes location strings to create locus objects with chromosome, start, stop, and optional name properties. Region properties like color and width can also be extracted.

```javascript
am.split(';').map(ortholog => {
  let region = {}
  let [rawRanges, regionProps] = ortholog.split('!!')
  ranges = rawRanges.split(',').map(loc => {
    const entries = loc.split('!')
    locus = {location: entries[0].trim()}
    if (entries.length > 1) {
      entries.splice(1).map(entry => {
        const [key, value] = entry.split(':').map(v => v.trim())
        locus[key] = value
      })
    }
    if ('name' in locus === false) locus['name'] = ''
    return locus
  })
  if (regionProps) {
    regionProps.split(',').map(prop => {
      const [key, value] = prop.split(':').map(v => v.trim())
      region[key] = value
    })
    if ('color' in region) ranges.push(region.color)
    if ('width' in region) ranges.push(region.width)
  }
  return ranges
})
```

--------------------------------

### Load and Process Syntenic Region Data

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/genome-alignment.html

Fetches syntenic region data from a TSV file, parses it line by line, and extracts relevant information for human and mouse chromosomes, start and end positions, and orientation. It then formats this data into a structure suitable for Ideogram's `drawSynteny` function.

```JavaScript
async function onIdeogramLoad() {
  // See HomoloGene entry for MTOR at
  // http://www.ncbi.nlm.nih.gov/homologene/3637
  // Placements for H. sapiens and M. musculus used below.
  // Placements from latest annotation release in
  // Human: http://www.ncbi.nlm.nih.gov/gene/2475#genomic-context
  // Mouse: http://www.ncbi.nlm.nih.gov/gene/56717#genomic-context
  var chrs, chr1, chr4, syntheticRegions, humanTaxid, mouseTaxid;
  response = await fetch ('/data/annotations/homo_sapiens-mus_musculus-synteny-v73.tsv')
  text = await response.text()
  lines = text.split('\n')
  syntenicRegions = []
  lines.forEach(line => {
    if (line[0] === '#') return
    columns = line.split('\t')
    if (columns.length === 1) return
    chrOrg1 = columns[1].replace('chr', '')
    startOrg1 = columns[2]
    endOrg1 = columns[3]
    chrOrg2 = columns[4].replace('chr', '')
    startOrg2 = columns[5]
    endOrg2 = columns[6]
    orientation = columns[7] === '-1' ? 'reverse' : '';
    if (orientation === 'reverse') {
      tmp = startOrg2;
      startOrg2 = endOrg2;
      endOrg2 = tmp;
    }
    range1 = { chr: chrOrg1, start: startOrg1, stop: endOrg1, orientation: orientation }
    range2 = { chr: chrOrg2, start: startOrg2, stop: endOrg2 }
    syntenicRegions.push({r1: range1, r2: range2, color: chrColorMap[chrOrg1]})
  })
  ideogram.drawSynteny(syntenicRegions);
}
```

--------------------------------

### Initialize Ideogram with Cursor

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/cursor.html

This snippet shows how to initialize an Ideogram visualization with a specific cursor position and an event handler for cursor movement. The `cursorPosition` parameter sets the initial location, and `onCursorMove` specifies a function to call when the cursor moves over a chromosome.

```javascript
var config = {
    container: '.ideogram-container',
    organism: 'human',
    chromosome: '1',
    chrHeight: 900,
    resolution: 550,
    orientation: 'horizontal',
    cursorPosition: 110673777, // set a default position
    onCursorMove: writeCurrentPosition // event handler when position is clicked
};
window.ideogram = new Ideogram(config);
```

--------------------------------

### Fetch and Draw ACMG Genes with Ideogram.js

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/annotations-external-data.html

This JavaScript function retrieves genomic coordinate data for ACMG-recommended genes from NCBI EUtils. It uses ESearch to find gene IDs and ESummary to get genomic locations and weights. The data is then formatted and passed to Ideogram.js for drawing annotations on chromosomes, with visual styling based on gene importance.

```JavaScript
function getAndDrawAcmgGenes() {
    var acmgGenes, i, annots, geneClause, geneID, geneIDs, topWeight, eutils, esearch, esummary, url, defaultParams, ideo = this;
    ideo.annotDescriptions = {annots: {}}
    geneIDs = []
    annots = []
    // EUtils is a web API to access NCBI data
    eutils = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/';
    defaultParams = '?db=gene&retmode=json&retmax=100';
    // Use ESearch to get NCBI Gene ID for gene name, e.g. BRCA1 -> 672
    esearch = eutils + 'esearch.fcgi' + defaultParams;
    // Use ESummary to get genomic coordinates for given gene IDs
    esummary = eutils + 'esummary.fcgi' + defaultParams;
    acmgGenes = [
        'APC', 'MYH11', 'ACTA2', 'TMEM43', 'DSP', 'PKP2', 'DSG2', 'DSC2', 'BRCA1', 'BRCA2', 'SCN5A', 'RYR2', 'LMNA', 'MYBPC3', 'COL3A1', 'GLA', 'APOB', 'LDLR', 'MYH7', 'TPM1', 'PRKAG2', 'TNNI3', 'MYL3', 'MYL2', 'ACTC1', 'RET', 'PCSK9', 'BMPR1A', 'SMAD4', 'TNNT2', 'TP53', 'TGFBR1', 'TGFBR2', 'SMAD3', 'KCNQ1', 'KCNH2', 'MLH1', 'MSH2', 'MSH6', 'PMS2', 'RYR1', 'CACNA1S', 'FBN1', 'MEN1', 'MUTYH', 'NF2', 'OTC', 'SDHD', 'SDHAF2', 'SDHC', 'SDHB', 'STK11', 'PTEN', 'RB1', 'TSC1', 'TSC2', 'VHL', 'WT1', 'ATP7B'
    ];
    // Batch request all ACMG genes
    geneClause = '(' + acmgGenes.join('[symbol] OR ') + '[symbol])';
    topWeight = 0;
    weights = [];
    url = esearch + '&term=Homo-sapiens[Organism] AND ' + geneClause;
    d3.json(url).then(function(data) {
        geneIDs = data.esearchresult.idlist;
        // Batch request genomic coordinates for all ACMG genes
        url = esummary + '&id=' + geneIDs.join(',');
        d3.json(url).then(function(data) {
            var result, gene, chr, loc, start, stop, weight;
            for (i = 0; i < geneIDs.length; i++) {
                geneID = geneIDs[i];
                result = data.result[geneID];
                if (result.currentid !== '' || acmgGenes.indexOf(result.name) === -1) {
                    // currentid case occurs when one gene symbol in a taxon maps to
                    // multiple gene. It seems to be annotation-run noise.
                    // result.name case occurs when gene has a non-canonical alias
                    // matching the gene symbol.
                    // Ignore both.
                    continue;
                }
                gene = result.name;
                chr = result.chromosome;
                loc = result.locationhist[0]; // better than 'genomicinfo'
                start = loc.chrstart;
                stop = loc.chrstop;
                weight = result.geneweight;
                if (result.weight > topWeight) {
                    topWeight = result;
                }
                ////
                // This is the annotations API ////
                annots.push({
                    name: gene, // required
                    chr: chr, // required
                    start: start, // required
                    stop: stop, // required
                    weight: weight // optional
                });
                var clinvarText = 'Pathogenic variants';
                var clinvarBase = 'https://www.ncbi.nlm.nih.gov/clinvar';
                var clinvarUrl = 'https://www.ncbi.nlm.nih.gov/clinvar' + '?term=' + gene + '%5Bgene%5D%20AND%20%22clinsig%20pathogenic%22%5BProperties%5D';
                var clinvarLink = 'ClinVar: <a target="_blank" href=
```

--------------------------------

### JavaScript: Configure and Render Ideogram for Multiple Primates

Source: https://github.com/eweitz/ideogram/blob/master/examples/vanilla/multiple-primates.html

This JavaScript code configures and initializes Ideogram instances for multiple primate species. It defines common configuration settings and species-specific annotations, then iterates through them to create and render individual Ideogram visualizations within HTML containers. Each visualization displays gene locations for APOB and CTLA4, using distinct colors and shapes.

```JavaScript
var config, orgConfigs, id, i, container, orgConfig, name;
config = {
  chrHeight: 250,
  chrMargin: 3,
  annotationHeight: 4,
  orientation: 'horizontal',
  showFullyBanded: false
};
orgConfigs = [
  {
    organism: 'homo-sapiens',
    annotations: [
      {name: 'APOB', chr: '2', start: 21001429, stop: 21044073, color: '#F00'},
      {name: 'CTLA4', chr: '2', start: 203867788, stop: 203873960, color: '#77F', shape: 'circle'}
    ]
  },
  {
    organism: 'pan-troglodytes',
    annotations: [
      {name: 'APOB', chr: '2A', start: 21371172, stop: 21413720, color: '#F00'},
      {name: 'CTLA4', chr: '2B', start: 94542849, stop: 94550230, color: '#77F', shape: 'circle'}
    ]
  },
  {
    organism: 'macaca-fascicularis',
    annotations: [
      {name: 'APOB', chr: '13', start: 89924186, stop: 89966894, color: '#F00'},
      {name: 'CTLA4', chr: '12', start: 93412707, stop: 93419132, color: '#77F', shape: 'circle'}
    ]
  }
];

for (i = 0; i < orgConfigs.length; i++) {
  orgConfig = orgConfigs[i];
  id = orgConfig.organism; // e.g. homo-sapiens -> Homo sapiens
  name = id[0].toUpperCase() + id.slice(1).replace('-', ' ');
  container = '<div class="ideogram-container">' +
              '<div class="ideogram-name">' + name + '</div>' +
              '<div id="' + id + '"></div>' +
              '</div>';
  document.querySelector('#content').innerHTML += container;

  config.organism = orgConfig.organism;
  config.container = '#' + id;
  config.annotations = orgConfig.annotations;
  window['ideogram_' + id.replace('-', '_')] = new Ideogram(config);
}
```