Oncoprint Chart

OncoPrint is a way to visualize multiple genomic alteration events by heatmap. ... Besides the default style which is provided by cBioPortal, there are additional barplots at both sides of the heatmap which show numbers of different alterations for each sample and for each gene.


Example Color Themes

Example Fonts



Show Code

Tools

<head>
  <!-- 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/dist/canvasXpress.min.js"></script>
</head>

<body>

  <!-- 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 = {
       "x" : {
          "Annt1" : ["Desc : 1","Desc : 2","Desc : 1"],
          "Annt2" : [23,34,52],
          "Annt3" : [12,14,34],
          "Annt4" : [8,14,14],
          "Annt5" : [17,9,18]
       },
       "y" : {
          "data" : [
            [3.1,3.5,4],
            [3,7.4,4.1],
            [2.8,3.1,3.3],
            [2.3,2.4,2.1],
            [4.9,6.1,6.1],
            [1.9,2.1,0.1],
            [2.2,1.9,2.1],
            [1.7,2.1,0.2],
            [0.2,4.9,3.9]
          ],
          "data2" : [["","","Amplification"],
            ["","Amplification",""],
            ["","",""],
            ["","",""],
            ["","Amplification","Amplification"],
            ["","",""],
            ["","",""],
            ["","","Deletion"],
            ["Deletion","Amplification",""]
          ],
          "data3" : [["","","Missence"],
            ["","","Truncating"],
            ["Nonsense","",""],
            ["","Missence",""],
            ["","Truncating",""],
            ["","Nonsense",""],
            ["","",""],
            ["Missence","",""],
            ["","",""]
          ],
          "data4" : [["","A",""],
            ["","A",""],
            ["","A",""],
            ["","A",""],
            ["","B",""],
            ["","B",""],
            ["","","B"],
            ["","","B"],
            ["B","",""]
          ],
          "smps" : ["V1","V2","V3"],
          "vars" : ["S1","S2","S3","S4","S5","S6","S7","S8","S9"]
       },
       "z" : {
          "Factor" : ["Lev : 1","Lev : 2","Lev : 1","Lev : 2","Lev : 1","Lev : 2","Lev : 1","Lev : 2","Lev : 1"]
       }
    }
    
    
    // Create the configuration for the graph
    var config = {
       "graphType":"Heatmap",
       "oncoprintCNA":"data2",
       "oncoprintMUT":"data3",
       "overlaysThickness":"100",
       "showTransition":false
    }
    

    // Call the CanvasXpress function to create the graph
    var cX = new CanvasXpress("canvasId", data, config);


  </script>

</body>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-oncoprint-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
y2=read.table("https://www.canvasxpress.org/data/cX-oncoprint-dat2.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
y3=read.table("https://www.canvasxpress.org/data/cX-oncoprint-dat3.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
y4=read.table("https://www.canvasxpress.org/data/cX-oncoprint-dat4.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-oncoprint-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-oncoprint-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=list(y=y, data2=y2, data3=y3, data4=y4),
  smpAnnot=x,
  varAnnot=z,
  graphType="Heatmap",
  oncoprintCNA="data2",
  oncoprintMUT="data3",
  overlaysThickness=100,
  showTransition=FALSE
)