Genome Chart

Examples of full genome browsers using CanvasXpress can be found in the following links for GTEX and for Gencode. Use the mouse wheel to zoom in/out or drag the vis to page across the genome.


Example Color Themes

Example Fonts



Show Code


<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "tracks" : [{"data" : [{"dir" : "right","fill" : "rgb(51,255,255)","id" : "Reference Sequence","offset" : 1,"outline" : "rgb(0,0,0)","sequence" : "TACGTACGTACGTACGTACGTACGTACGT","translate" : [-3,-2,-1,1,2,3]
              },
              {
                 "coordinate" : 50,
                 "dir" : "right",
                 "fill" : "rgb(255,255,51)",
                 "gaps" : [
          [4,2],
                   [8,1]
                 ],
                 "id" : "R1-0000-1234",
                 "offset" : 1,
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "TACGCGTAGTACGT",
                 "trace" : {
                    "A" : [15,27,47,72,93,101,93,72,47,27,15,54,120,224,350,459,502,459,350,224,120,54,3,4,6,12,24,43,67,86,94,86,67,43,24,12,6,4,3,13,26,45,69,89,97,89,69,45,26,13,13,26,46,70,92,100,92,70,46,26,13,5,12,26,48,75,99,108,99,75,48,26,12,5,2,4,10,22,41,64,83,91,83,64,41,22,10,4,2,22,55,122,226,353,462,505,462,353,226,122,55,22,4,11,24,45,70,92,100,92,70,45,24,11,4,2,3,6,13,28,50,78,102,111,102,78,50,28,13,6,3,2,6,11,26,62,135,249,388,506,553,506,388,249,135,62,26,11,6,6,8,14,26,45,68,87,95,87,68,45,26,14,8,6,11,23,43,67,88,96,88,67,43,23,11,5,6,8,15,28,48,73,94,102,94,73,48,28,15,8,6,5],
                    "C" : [10,16,26,39,50,54,50,39,26,16,10,7,14,26,40,51,56,51,40,26,14,7,4,8,20,50,109,203,317,414,453,414,317,203,109,50,20,8,4,9,16,26,39,51,55,51,39,26,16,9,56,123,229,357,467,511,467,357,229,123,56,2,6,12,22,35,45,49,45,35,22,12,6,2,1,3,6,13,25,39,50,55,50,39,25,13,6,3,1,5,8,15,26,39,50,55,50,39,26,15,8,5,2,5,11,21,32,42,46,42,32,21,11,5,2,2,2,3,6,12,22,33,43,47,43,33,22,12,6,3,2,2,5,5,6,9,16,25,37,47,51,47,37,25,16,9,6,5,5,10,24,56,121,223,347,453,495,453,347,223,121,56,24,10,6,13,24,37,48,52,48,37,24,13,6,5,5,6,9,15,25,36,46,50,46,36,25,15,9,6,5,5],
                    "G" : [7,10,15,20,25,27,25,20,15,10,7,4,7,13,19,25,27,25,19,13,7,4,3,3,3,5,8,14,20,25,27,25,20,14,8,5,3,3,3,56,122,226,353,461,504,461,353,226,122,56,5,8,13,19,24,26,24,19,13,8,5,22,58,130,245,383,502,549,502,383,245,130,58,22,1,1,3,7,12,18,24,26,24,18,12,7,3,1,1,3,5,8,13,19,24,26,24,19,13,8,5,3,19,51,114,213,334,437,478,437,334,213,114,51,19,2,2,3,4,8,14,21,26,29,26,21,14,8,4,3,2,2,5,5,5,7,10,15,20,25,27,25,20,15,10,7,5,5,5,5,5,7,10,15,20,25,27,25,20,15,10,7,5,5,53,119,223,349,457,500,457,349,223,119,53,5,5,5,7,10,15,21,26,28,26,21,15,10,7,5,5,5],
                    "T" : [62,135,249,388,507,554,507,388,249,135,62,2,4,6,8,10,11,10,8,6,4,2,3,3,3,4,5,7,9,12,12,12,9,7,5,4,3,3,3,5,6,8,11,13,14,13,11,8,6,5,4,5,7,10,12,13,12,10,7,5,4,1,2,3,5,8,10,11,10,8,5,3,2,1,7,22,58,130,244,383,501,548,501,383,244,130,58,22,7,3,4,5,7,10,12,13,12,10,7,5,4,3,1,2,3,5,8,10,11,10,8,5,3,2,1,3,8,21,54,119,222,347,454,497,454,347,222,119,54,21,8,3,5,5,5,6,7,9,12,14,15,14,12,9,7,6,5,5,5,5,5,6,7,9,12,14,15,14,12,9,7,6,5,5,2,3,5,7,9,10,9,7,5,3,2,6,11,25,61,131,242,377,492,538,492,377,242,131,61,25,11,6],
                    "max" : 507,
                    "peak" : [5,16,30,44,55,67,81,95,108,123,140,156,169,183]
                 }
              },
              {
                 "coordinate" : 80,
                 "dir" : "right",
                 "fill" : "rgb(255,255,102)",
                 "gaps" : [[3,1],
                   [10,1]
                 ],
                 "id" : "R1-0000-2345",
                 "offset" : 6,
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "ACGACGTACGACG",
                 "trace" : {
                    "A" : [49,110,206,323,424,463,424,323,206,110,49,3,5,12,24,45,69,90,98,90,69,45,24,12,5,3,5,7,14,28,49,75,97,105,97,75,49,28,14,7,5,5,10,25,61,132,245,382,499,545,499,382,245,132,61,25,10,5,7,13,27,48,74,96,105,96,74,48,27,13,7,4,6,13,25,46,70,91,100,91,70,46,25,13,6,4,4,7,14,27,49,76,99,108,99,76,49,27,14,7,4,3,8,22,57,125,234,366,479,524,479,366,234,125,57,22,8,3,5,8,15,30,52,80,104,113,104,80,52,30,15,8,5,7,13,25,44,66,86,94,86,66,44,25,13,7,23,58,127,236,368,482,527,482,368,236,127,58,23,3,4,6,13,26,47,73,95,104,95,73,47,26,13,6,4,3,5,6,9,16,30,52,79,102,111,102,79,52,30,16,9,6,5],
                    "C" : [5,12,21,33,43,47,43,33,21,12,5,7,21,53,117,218,341,447,488,447,341,218,117,53,21,7,4,5,9,15,26,38,49,53,49,38,26,15,9,5,4,4,4,6,9,16,27,40,51,56,51,40,27,16,9,6,4,4,20,50,109,203,317,415,453,415,317,203,109,50,20,3,4,8,14,25,37,48,52,48,37,25,14,8,4,3,3,4,8,14,24,36,46,50,46,36,24,14,8,4,3,2,2,3,6,13,22,34,44,48,44,34,22,13,6,3,2,2,9,23,55,118,219,342,447,489,447,342,219,118,55,23,9,5,9,16,26,39,50,54,50,39,26,16,9,5,4,8,14,25,37,48,52,48,37,25,14,8,4,4,9,22,55,120,224,349,457,500,457,349,224,120,55,22,9,4,5,5,7,10,17,27,40,51,56,51,40,27,17,10,7,5,5],
                    "G" : [3,6,11,17,22,24,22,17,11,6,3,2,2,4,7,12,17,22,24,22,17,12,7,4,2,2,10,24,59,129,239,373,487,533,487,373,239,129,59,24,10,4,4,4,6,9,14,20,25,27,25,20,14,9,6,4,4,4,3,5,8,13,19,24,26,24,19,13,8,5,3,9,23,59,129,239,374,489,534,489,374,239,129,59,23,9,3,3,5,8,13,18,23,25,23,18,13,8,5,3,3,2,2,2,4,7,12,17,22,24,22,17,12,7,4,2,2,2,4,4,6,9,14,19,24,26,24,19,14,9,6,4,4,22,52,113,209,325,425,465,425,325,209,113,52,22,3,5,8,13,19,24,26,24,19,13,8,5,3,3,3,3,5,8,14,20,26,28,26,20,14,8,5,3,3,3,6,11,26,62,133,246,383,501,547,501,383,246,133,62,26,11,6],
                    "T" : [2,3,5,7,10,10,10,7,5,3,2,2,2,2,4,6,8,10,11,10,8,6,4,2,2,2,4,4,4,6,8,10,12,13,12,10,8,6,4,4,4,4,4,4,5,6,8,11,13,14,13,11,8,6,5,4,4,4,3,4,5,7,10,12,13,12,10,7,5,4,3,3,3,3,5,7,9,11,12,11,9,7,5,3,3,3,8,21,52,115,213,333,436,476,436,333,213,115,52,21,8,2,2,2,3,4,6,8,10,11,10,8,6,4,3,2,2,2,4,4,4,6,8,10,12,13,12,10,8,6,4,4,4,4,4,6,8,10,12,13,12,10,8,6,4,4,3,4,5,7,9,11,12,11,9,7,5,4,3,3,3,3,4,5,7,10,12,13,12,10,7,5,4,3,3,3,5,5,5,6,7,9,11,14,14,14,11,9,7,6,5,5,5],
                    "max" : 501,
                    "peak" : [5,18,33,49,64,78,93,109,125,139,152,167,184]
                 }
              },
              {
                 "coordinate" : 150,
                 "dir" : "left",
                 "fill" : "rgb(255,51,255)",
                 "gaps" : [[7,2]
                 ],
                 "id" : "R1-0000-3456",
                 "offset" : 12,
                 "offsetLeft" : "23",
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "GTACGTATAC",
                 "trace" : {
                    "A" : [4,4,5,6,8,11,13,14,13,11,8,6,5,4,4,2,2,3,4,6,8,10,11,10,8,6,4,3,2,2,8,20,50,110,205,320,418,457,418,320,205,110,50,20,8,5,5,5,7,9,11,13,14,13,11,9,7,5,5,5,8,23,59,130,243,380,498,545,498,380,243,130,59,23,8,1,1,1,2,3,5,8,10,11,10,8,5,3,2,1,1,1,4,5,7,10,12,13,12,10,7,5,4,5,5,6,7,9,12,14,15,14,12,9,7,6,5,5,10,23,57,124,230,358,468,512,468,358,230,124,57,23,10,1,1,3,5,7,9,10,9,7,5,3,1,1],
                    "C" : [4,4,6,10,15,21,27,29,27,21,15,10,6,4,4,2,3,4,8,14,21,26,29,26,21,14,8,4,3,2,3,3,5,8,13,19,24,26,24,19,13,8,5,3,3,5,6,7,11,17,24,30,32,30,24,17,11,7,6,5,2,2,4,7,13,19,24,26,24,19,13,7,4,2,2,2,7,21,56,126,236,370,485,531,485,370,236,126,56,21,7,2,5,8,13,19,24,26,24,19,13,8,5,5,6,7,11,16,23,29,31,29,23,16,11,7,6,5,4,4,6,9,14,21,26,28,26,21,14,9,6,4,4,21,54,122,228,357,467,511,467,357,228,122,54,21],
                    "G" : [10,24,57,125,231,360,470,514,470,360,231,125,57,24,10,2,3,7,13,23,35,46,50,46,35,23,13,7,3,2,3,5,8,15,26,39,51,55,51,39,26,15,8,5,3,5,6,9,15,25,36,46,50,46,36,25,15,9,6,5,2,3,6,13,22,34,44,48,44,34,22,13,6,3,2,1,1,2,6,12,22,34,44,48,44,34,22,12,6,2,1,1,59,130,242,377,494,540,494,377,242,130,59,5,7,10,17,28,41,53,57,53,41,28,17,10,7,5,4,5,8,14,24,35,45,49,45,35,24,14,8,5,4,2,6,13,23,36,47,51,47,36,23,13,6,2],
                    "T" : [5,8,15,28,50,76,99,108,99,76,50,28,15,8,5,7,19,50,110,206,322,421,460,421,322,206,110,50,19,7,4,7,13,27,49,75,98,107,98,75,49,27,13,7,4,11,24,58,124,228,355,464,507,464,355,228,124,58,24,11,3,6,13,26,48,75,98,107,98,75,48,26,13,6,3,1,2,4,11,24,44,69,90,99,90,69,44,24,11,4,2,1,13,25,45,69,89,97,89,69,45,25,13,11,24,58,124,228,356,465,508,465,356,228,124,58,24,11,5,8,15,29,51,79,102,111,102,79,51,29,15,8,5,4,10,22,41,64,84,92,84,64,41,22,10,4],
                    "max" : 511,
                    "peak" : [8,23,38,53,68,84,98,111,126,140],
                    "reversed" : true
                 }
              },
              {
                 "coordinate" : 20,
                 "dir" : "right",
                 "fill" : "rgb(255,102,255)",
                 "gaps" : [[5,1]
                 ],
                 "id" : "R1-0000-4567",
                 "offset" : 15,
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "CGTACTACGTA",
                 "trace" : {
                    "A" : [9,16,29,51,78,100,110,100,78,51,29,16,9,15,28,50,77,100,109,100,77,50,28,15,4,5,7,13,25,44,67,86,94,86,67,44,25,13,7,5,4,4,8,21,53,115,214,335,438,479,438,335,214,115,53,21,8,4,2,3,5,11,23,42,65,85,93,85,65,42,23,11,5,3,2,8,15,29,52,80,103,113,103,80,52,29,15,8,4,9,23,57,126,233,365,477,522,477,365,233,126,57,23,9,4,2,4,10,23,42,66,87,95,87,66,42,23,10,4,2,3,5,12,25,46,71,93,101,93,71,46,25,12,5,3,4,5,8,14,28,50,76,99,108,99,76,50,28,14,8,5,4,19,49,108,202,316,413,452,413,316,202,108,49,19],
                    "C" : [24,56,121,223,348,454,496,454,348,223,121,56,24,8,14,24,36,46,50,46,36,24,14,8,4,4,5,8,15,24,36,46,50,46,36,24,15,8,5,4,4,3,3,4,8,14,25,38,48,53,48,38,25,14,8,4,3,3,3,8,21,54,119,222,348,455,498,455,348,222,119,54,21,8,3,5,9,15,25,38,48,52,48,38,25,15,9,5,3,3,5,8,15,26,39,51,55,51,39,26,15,8,5,3,3,6,18,48,107,201,315,412,451,412,315,201,107,48,18,6,2,3,6,12,22,33,43,47,43,33,22,12,6,3,2,4,4,6,9,16,28,42,54,58,54,42,28,16,9,6,4,4,3,7,13,24,37,47,52,47,37,24,13,7,3],
                    "G" : [6,7,11,16,23,29,31,29,23,16,11,7,6,56,121,223,348,455,498,455,348,223,121,56,4,4,5,6,10,16,23,28,31,28,23,16,10,6,5,4,4,3,3,4,5,9,14,21,26,29,26,21,14,9,5,4,3,3,2,2,2,4,7,12,18,24,26,24,18,12,7,4,2,2,2,4,6,9,14,19,24,26,24,19,14,9,6,4,3,3,3,5,8,13,19,24,26,24,19,13,8,5,3,3,3,1,2,3,7,12,19,24,27,24,19,12,7,3,2,1,7,20,51,113,211,330,432,473,432,330,211,113,51,20,7,4,4,4,6,9,15,21,26,29,26,21,15,9,6,4,4,4,3,4,8,13,20,26,28,26,20,13,8,4,3],
                    "T" : [5,6,7,9,11,13,14,13,11,9,7,6,5,4,6,8,10,12,13,12,10,8,6,4,5,10,24,60,130,241,376,492,538,492,376,241,130,60,24,10,5,3,3,3,3,5,7,9,11,12,11,9,7,5,3,3,3,3,2,2,2,2,4,6,8,10,11,10,8,6,4,2,2,2,2,22,53,114,211,328,429,469,429,328,211,114,53,22,3,3,3,3,5,7,9,11,12,11,9,7,5,3,3,3,3,1,1,2,3,5,7,9,10,9,7,5,3,2,1,1,2,2,2,4,6,8,10,11,10,8,6,4,2,2,2,5,10,24,58,127,235,366,479,524,479,366,235,127,58,24,10,5,2,3,4,6,8,10,11,10,8,6,4,3,2],
                    "max" : 492,
                    "peak" : [6,18,32,49,66,81,96,112,127,143,158]
                 }
              },
              {
                 "coordinate" : 120,
                 "dir" : "right",
                 "fill" : "rgb(51,255,255)",
                 "gaps" : [[7,1]
                 ],
                 "id" : "R1-0000-5678",
                 "offset" : 18,
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "ACGTACGACGT",
                 "trace" : {
                    "A" : [10,25,60,131,244,380,497,544,497,380,244,131,60,25,10,5,6,8,15,28,48,73,95,103,95,73,48,28,15,8,6,5,4,6,13,26,47,72,94,102,94,72,47,26,13,6,4,6,8,15,28,49,74,95,104,95,74,49,28,15,8,6,2,7,22,58,129,243,380,498,545,498,380,243,129,58,22,7,2,11,23,43,66,86,94,86,66,43,23,11,5,8,15,28,50,77,100,109,100,77,50,28,15,8,5,6,11,24,58,125,232,361,471,515,471,361,232,125,58,24,11,6,12,24,43,66,85,93,85,66,43,24,12,14,28,50,76,99,108,99,76,50,28,14,5,7,14,27,47,72,93,101,93,72,47,27,14,7,5],
                    "C" : [4,5,8,15,24,36,46,50,46,36,24,15,8,5,4,6,11,26,62,135,249,388,506,554,506,388,249,135,62,26,11,6,3,5,8,15,25,38,49,54,49,38,25,15,8,5,3,5,6,9,15,25,36,46,50,46,36,25,15,9,6,5,1,1,3,6,13,24,37,49,53,49,37,24,13,6,3,1,1,53,117,219,342,447,489,447,342,219,117,53,4,5,8,15,25,36,47,51,47,36,25,15,8,5,4,5,5,7,10,17,28,41,53,57,53,41,28,17,10,7,5,5,57,124,231,360,471,516,471,360,231,124,57,9,16,27,40,51,55,51,40,27,16,9,4,6,9,16,27,41,52,57,52,41,27,16,9,6,4],
                    "G" : [4,5,6,10,16,22,28,31,28,22,16,10,6,5,4,5,5,5,7,10,15,21,26,28,26,21,15,10,7,5,5,5,8,21,53,116,216,337,440,482,440,337,216,116,53,21,8,5,6,7,11,17,23,29,32,29,23,17,11,7,6,5,1,1,1,3,6,11,17,22,24,22,17,11,6,3,1,1,1,4,8,13,20,25,27,25,20,13,8,4,9,21,52,111,206,321,420,459,420,321,206,111,52,21,9,5,5,5,7,10,16,22,27,30,27,22,16,10,7,5,5,5,5,8,14,20,25,27,25,20,14,8,5,57,124,230,358,468,512,468,358,230,124,57,4,4,6,9,14,20,25,28,25,20,14,9,6,4,4],
                    "T" : [4,4,5,6,8,11,14,14,14,11,8,6,5,4,4,5,5,5,6,7,9,12,14,15,14,12,9,7,6,5,5,5,3,3,4,5,7,10,12,13,12,10,7,5,4,3,3,11,24,57,122,224,349,456,498,456,349,224,122,57,24,11,1,1,1,2,3,5,8,10,11,10,8,5,3,2,1,1,1,3,4,6,8,11,11,11,8,6,4,3,4,4,5,6,8,11,13,14,13,11,8,6,5,4,4,5,5,5,6,7,9,12,14,15,14,12,9,7,6,5,5,5,4,5,7,10,12,13,12,10,7,5,4,4,6,8,10,12,13,12,10,8,6,4,10,25,60,131,242,378,494,540,494,378,242,131,60,25,10],
                    "max" : 512,
                    "peak" : [7,23,39,54,70,84,97,113,127,138,151]
                 }
              }
           ],
           "highlight" : [{"color" : "rgb(120,120,180)","offset" : 8,"width" : 1},{"color" : "rgb(180,20,180)","offset" : 22,"width" : 1}],
           "subtype" : "DNA",
           "type" : "sequence"
        }
     ]
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "background":"rgb(245,245,245)",
     "graphType":"Genome",
     "setMax":"30",
     "setMin":"0"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
library(canvasXpress)
library(jsonlite)
genome <- read_json("https://www.canvasxpress.org/data/cX-genomeintermediate.json")
canvasXpress(
  data=genome,
  background="rgb(245,245,245)",
  graphType="Genome",
  setMax=30,
  setMin=0
)