Tumor Evolution Fish Plot Example

Fish plots are designed to visualize tumor evolution. This visualizationwas inspired by the fishplot package for R by Christopher A. Miller, Joshua McMichael, Ha X. Dang, Christopher A. Maher, Li Ding, Timothy J. Ley, Elaine R. Mardis & Richard K. Wilson

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

<html>

  <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>

      // Use a data frame (2D-array) for the graph
      var data = [
        [ "Id", "Founding", "Subclone 1", "Subclone 2", "Subclone 3"],
        [ 0, 100, 45, 0, 0],
        [ 30, 2, 0, 0, 0],
        [ 75, 2, 0, 2, 1],
        [ 150, 98, 0, 95, 40 ]
      ];

      // Create the configuration for the graph
      var config = {
         "backgroundType" : "panel",
         "colors" : ["rgb(136,136,136)","rgb(239,0,0)","rgb(255,96,0)","rgb(255,207,0)","rgb(191,255,64)","rgb(80,255,175)","rgb(0,223,255)","rgb(0,112,255)","rgb(0,0,255)","rgb(0,0,143)"],
         "fishAxis" : [0,150],
         "fishParents" : [0,1,1,3],
         "fishShape" : "spline",
         "fishTimepoints" : [0,30,75,150],
         "graphType" : "Fish",
         "legendColumns" : 4,
         "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
         "legendKeyBackgroundColor" : "rgba(255,255,255,0)",
         "legendPosition" : "bottom",
         "panelBackgroundColor" : "#ffe4c4",
         "title" : "Sample1",
         "xAxis" : ["Founding","Subclone 1","Subclone 2","Subclone 3"]
      }

      // Event used to create graph (optional)
      var events = false


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

      
    </script>

  </body>

</html>

<html>

  <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 = {
         "y" : {
            "data" : [
              [100,2,2,98],
              [45,0,0,0],
              [0,0,2,95],
              [0,0,1,40]
            ],
            "smps" : [0,30,75,150],
            "vars" : ["Founding","Subclone 1","Subclone 2","Subclone 3"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "backgroundType" : "panel",
         "colors" : ["rgb(136,136,136)","rgb(239,0,0)","rgb(255,96,0)","rgb(255,207,0)","rgb(191,255,64)","rgb(80,255,175)","rgb(0,223,255)","rgb(0,112,255)","rgb(0,0,255)","rgb(0,0,143)"],
         "fishAxis" : [0,150],
         "fishParents" : [0,1,1,3],
         "fishShape" : "spline",
         "fishTimepoints" : [0,30,75,150],
         "graphType" : "Fish",
         "legendColumns" : 4,
         "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
         "legendKeyBackgroundColor" : "rgba(255,255,255,0)",
         "legendPosition" : "bottom",
         "panelBackgroundColor" : "#ffe4c4",
         "title" : "Sample1",
         "xAxis" : ["Founding","Subclone 1","Subclone 2","Subclone 3"]
      }

      // Event used to create graph (optional)
      var events = false


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

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-fish-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  backgroundType="panel",
  colors=list("rgb(136,136,136)", "rgb(239,0,0)", "rgb(255,96,0)", "rgb(255,207,0)", "rgb(191,255,64)", "rgb(80,255,175)", "rgb(0,223,255)", "rgb(0,112,255)", "rgb(0,0,255)", "rgb(0,0,143)"),
  fishAxis=list(0, 150),
  fishParents=list(0, 1, 1, 3),
  fishShape="spline",
  fishTimepoints=list(0, 30, 75, 150),
  graphType="Fish",
  legendColumns=4,
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  legendPosition="bottom",
  panelBackgroundColor="#ffe4c4",
  title="Sample1",
  xAxis=list("Founding", "Subclone 1", "Subclone 2", "Subclone 3")
)