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

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


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"},{"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"
              },
              {
                 "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"
              },
              {
                 "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"
              },
              {
                 "dir" : "right",
                 "fill" : "rgb(255,102,255)",
                 "gaps" : [[5,1]
                 ],
                 "id" : "R1-0000-4567",
                 "offset" : 15,
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "CGTACTACGTA"
              },
              {
                 "dir" : "right",
                 "fill" : "rgb(51,255,255)",
                 "gaps" : [[7,1]
                 ],
                 "id" : "R1-0000-5678",
                 "offset" : 18,
                 "outline" : "rgb(0,0,0)",
                 "sequence" : "ACGTACGACGT"
              }
           ],
           "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-genomesimple.json")
canvasXpress(
  data=genome,
  background="rgb(245,245,245)",
  graphType="Genome",
  setMax=30,
  setMin=0
)