ideogram/examples/homology_advanced.html

Chromosome visualization with D3.js

<!DOCTYPE html>
<html>
<head>
  <title>Homology, advanced | Ideogram</title>
  <style>body {font: 12px Arial; line-height: 19.6px;}</style>
  <script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
</head>
<body>
  <h1>Homology, advanced | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="homology_basic.html">Previous</a> |
  <a href="homology_interspecies.html">Next</a>
  <p>
      Large-scale insertions, deletions, and inversions are represented below.
      Focus on a particular large variation by clicking or hovering over a colored region.
  </p>
	<script type="text/javascript">

	function onIdeogramLoad() {

		var chrs = ideogram.chromosomes,
			chr1 = chrs["10090"]["1"],
			chr2 = chrs["10090"]["2"],
			r1Band = chr1["bands"][7],
			r2Band = chr2["bands"][17],
			range1, range2, range3, range4, range5, range6,
			syntenicRegions = [];

		range1 = {
			chr: chr1,
			start: r1Band.bp.start,
			stop: r1Band.bp.stop
		};

		for (var i = 1; i < 20; i++) {
			range2 = {
				chr: chr2,
				start: 6000000 * i,
				stop: 6500000 * i
			};
			syntenicRegions.push({"r1": range1, "r2": range2, "color": "#F55"});
		}

		var range3 = {
			chr: chr1,
			start: 125000000,
			stop: 126000000
		};

		range4 = {
			chr: chr2,
			start: 1500000 * i,
			stop: 3600000 * i
		};
		syntenicRegions.push({"r1": range3, "r2": range4, "opacity": 0.7});


		var range6 = {
			chr: chr2,
			start: r2Band.bp.start,
			stop: r2Band.bp.stop
		};

		for (var i = 1; i < 6; i++) {
			range5 = {
				chr: chr1,
				start: 120000000 + (12000000 * i),
				stop: 120000000 + (8000000 * i)
			};
			color = "#AAF";
			if (i == 5) {
				color = "#DDD";
			}
			syntenicRegions.push({"r1": range5, "r2": range6, "color": color});
		}

		ideogram.drawSynteny(syntenicRegions);

	}

	var config = {
	  organism: "mouse",
	  chromosomes: ["1", "2"],
	  chrMargin: 200,
	  showBandLabels: true,
	  perspective: "comparative",
	  onLoad: onIdeogramLoad
	};

	var ideogram = new Ideogram(config);

	</script>
</body>
</html>