AML clonal evolution across 7 timepoints

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", "C1", "C2", "C3", "C4", "C5", "C6", "C7"],
        [ 0, 99, 30, 2, 60, 0, 2, 1],
        [ 34, 1, 0, 0.1, 0, 0, 0, 1],
        [ 69, 3, 0, 2.5, 0, 0, 0, 1],
        [ 187, 1, 0, 0.9, 0, 0, 0, 10],
        [ 334, 3, 0, 0.9, 0, 0.1, 0, 20],
        [ 505, 80, 0, 76, 0, 60, 0, 15],
        [ 530, 0.1, 0, 0.005, 0, 0.001, 0, 0 ]
      ];

      // Create the configuration for the graph
      var config = {
         "backgroundType" : "panelSolidGradient",
         "colorSpectrum" : ["#ffe4c4","#ffb90f","#cd6600"],
         "colors" : ["#888888","#EF0000","#8FFF40","#FF6000","#50FFAF","#FFCF00","#0070FF"],
         "fishAxis" : [0,34,69,187,334,505,530,650,750],
         "fishParents" : [0,1,1,1,3,4,0],
         "fishSeparateIndependentClones" : true,
         "fishShape" : "spline",
         "fishTimepoints" : [0,34,69,187,334,505,530],
         "gradientOrientation" : "horizontal",
         "graphType" : "Fish",
         "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
         "legendKeyBackgroundColor" : "rgba(255,255,255,0)",
         "xAxis": ["C1","C2","C3","C4","C5","C6","C7"]
      }

      // 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" : [
              [99,1,3,1,3,80,0.1],
              [30,0,0,0,0,0,0],
              [2,0.1,2.5,0.9,0.9,76,0.005],
              [60,0,0,0,0,0,0],
              [0,0,0,0,0.1,60,0.001],
              [2,0,0,0,0,0,0],
              [1,1,1,10,20,15,0]
            ],
            "smps" : [0,34,69,187,334,505,530],
            "vars" : ["C1","C2","C3","C4","C5","C6","C7"]
         }
      }

      // Create the configuration for the graph
      var config = {
         "backgroundType" : "panelSolidGradient",
         "colorSpectrum" : ["#ffe4c4","#ffb90f","#cd6600"],
         "colors" : ["#888888","#EF0000","#8FFF40","#FF6000","#50FFAF","#FFCF00","#0070FF"],
         "fishAxis" : [0,34,69,187,334,505,530,650,750],
         "fishParents" : [0,1,1,1,3,4,0],
         "fishSeparateIndependentClones" : true,
         "fishShape" : "spline",
         "fishTimepoints" : [0,34,69,187,334,505,530],
         "gradientOrientation" : "horizontal",
         "graphType" : "Fish",
         "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
         "legendKeyBackgroundColor" : "rgba(255,255,255,0)",
         "xAxis": ["C1","C2","C3","C4","C5","C6","C7"]
      }

      // 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-fish4-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  backgroundType="panelSolidGradient",
  colorSpectrum=list("#ffe4c4", "#ffb90f", "#cd6600"),
  colors=list("#888888", "#EF0000", "#8FFF40", "#FF6000", "#50FFAF", "#FFCF00", "#0070FF"),
  fishAxis=list(0, 34, 69, 187, 334, 505, 530, 650, 750),
  fishParents=list(0, 1, 1, 1, 3, 4, 0),
  fishSeparateIndependentClones=TRUE,
  fishShape="spline",
  fishTimepoints=list(0, 34, 69, 187, 334, 505, 530),
  gradientOrientation="horizontal",
  graphType="Fish",
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  xAxis=list("C1", "C2", "C3", "C4", "C5", "C6", "C7")
)