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
<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" ], "fishCloneLabels":[ "TP53,MET", "NF1", "", "8q+,6p-" ], "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" } // 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-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), fishCloneLabels=list("TP53,MET", "NF1", "", "8q+,6p-"), 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" )