Table of contents

Canvasxpress Themes and Color Schemec (Click me)

CanvasXpress themes and color schemes

There are plenty of themes and color schemes than can be uses with options['theme'] and options['color_scheme']. For example, the following plot uses the ''wallStreetJournal'' theme and the ''Economist'' color scheme:

${ plotter.barplot(id='barplot1.txt', header = True, theme = 'wallStreetJournal', color_scheme='Economist') }

The following table shows the available themes:

economist excel tableau stata igray
solarized paulTol ggplot wallStreetJournal cx

The following table shows the available color schemes:

CanvasXpress CanvasXpressT BlackAndWhite StataMono Stata3 Stata2 Stata WallStreetJournalDemRep
WallStreetJournalBlackGreen WallStreetJournalRedGreen WallStreetJournal3 WallStreetJournal2 WallStreetJournal Tableau GGPlot Solarized
Excel3 Excel2 Excel Bootstrap Economist EconomistBG Pastel Pastel2
Balanced YlGn YlGnBu GnBu BuGn PuBuGn PuBu BuPu
RdPu PuRd OrRd YlOrRd YlOrBr Purples Blues Greens
Oranges Reds Greys Solarized Excel3 Excel2 Excel

Theme: economist

Theme: excel

Theme: tableau

Theme: stata

Theme: igray

Theme: solarized

Theme: paulTol

Theme: ggplot

Theme: wallStreetJournal

Theme: cx

How to cite tables and figures (Click me)

How to cite tables and figures

You can cite tables and figures using the following syntax:

We use ${plotter.add_figure('example')} to add a new reference to 'example' text, so it marks it as 1, and from now on we can use that refence by using ${ plotter.get_figure('example') }. continued calls to 'plotter.add_figure' with other ids will increase the value of the counter, so each text will have its own reference.

The same is also true for tables, for example for a table called table1, we use ${ plotter.add_table('tab:table1')} and ${ plotter.add_table('tab:table1')}

We will show some examples:

Fig $1 : This is an example

We cite $1 as an example

Fig $2 : This is a test

We cite $2 as a test

Table $1 : This is an example table

We cite table $2 as an example

Table $2 : This is a test table

We cite table $2 as a test table

How to define and use titles and clicables (Click me)

How to define and use titles and clicables

Demo (Click me)

Demo2

Demo3

Demo4

Demo5

Demo6

1.0 2.0 3.0
11.0 22.0 33.0
111.0 222.0 333.0

How to embed images (Click me)

How to embed images inside the report

You can embed images using the following syntax (for an image called example.png):

${ plotter.embed_img('file_data/example.png', height=300, width=300) }

We will show an example:

How to create tables (Click me)

How to create tables

You can create tables using the following syntax (eg: for a table called table1.txt):

${ plotter.table(id='table1.txt', header=True, styled='dt', attrib = {'class' : 'table'}, func=mod_data, custom_buttons = ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5']) }

In the above example we are creating a table with 'datatable' style, applying a custom function called 'mod_data' where we are modifying (applying logarithms) the values of the table before being shown:

def mod_data(data):
 for i, row in enumerate(data):
  for j, cell in enumerate(row):
   if i > 0 and j > 0: data[i][j] = math.log(float(data[i][j]))

Additionaly, we are also adding buttons to save the table in different formats (this option is only available with dt styled tables)

We will show some examples that can be check in the template.txt file:

Data table (Header true, text false, style DT):

a b c
1.0 0.6931471805599453 1.0986122886681098
11.0 3.091042453358316 3.4965075614664802
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
11.0 3.091042453358316 3.4965075614664802
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444
111.0 5.402677381872279 5.808142489980444

Data table (Header true, text false, style BS):

1 2 3
11.0 22.0 33.0
111.0 222.0 333.0

Data table (Header true, text true, style DT):

Read_ID Score Organism
A01641:285:HKKKKDSX5:3:1571:5629:14340_1 99.237 Mus musculus
A01642:285:HKKKKDSX5:3:1571:5629:14340_1 95.42 Mus musculus
A01643:285:HKKKKDSX5:3:1571:5629:14340_1 93.13 Mus musculus
A01644:285:HKKKKDSX5:3:1571:5629:14340_1 99.237 Mus musculus
A01645:285:HKKKKDSX5:3:1571:5629:14340_1 99.237 Mus musculus

Mermaid flowcharts (Click me)

Mermaid charts (flowcharts, timelines and so on)

You can create mermaid charts using the mermaidJS syntax. Because it is not so straightforward to draw common patterns, we will leave mermaidJS documentation for further reference (MermaidJS documentation):

Here are some examples of mermaid charts:

Flowchart:


---
title: Hello Title
config:
    theme: base
    themeVariables:
    primaryColor: "#00ff00"
---
graph LR;
    A --- B ;
    A --- E(5) ;
    B-->C[fa:fa-ban forbidden];
    B-->D(fa:fa-spinner);
    click A callback "Texto para el tooltip"
    click B href "#CanvasXpress-ParentNode-obj_3_"

Timeline:


---
title: Hello Title
config:
    theme: base
    themeVariables:
    primaryColor: "#00ff00"
---
timeline
title Workflow
    section Cluster Steps
    get reliable pairs : Net Metrics
    get clusters : Cluster Metrics
                    : CDLib Metrics
    clean clusters : Cluster Metrics
                    : CDLib Metrics
    prepare and randomize clusters : Nothing                    
    cluster ranking : CRank Metrics
    section Disease Steps
    disease prediction : Disease Metrics
    section Ranker Steps
    gene ranking metrics : First Ranker Metrics
                            : First Ranker Metrics Best Genes
    geometric mean integration : Geometric integration
    gene disease ranking : Second Ranker Metrics
                            : Second Ranker Metrics Best Genes
    get control prediction: Phen2Gene Metrics

CanvasXpress plots (Click me)

How to create CanvasXpress plots

barplots (Click me)

plotter.barplot(id='barplot1.txt', header = True, config={'graphOrientation': 'vertical', "xAxisTitle": "Valores"})

plotter.barplot(id = 'barplot2.txt', header = True, height = 300)

plotter.barplot(id = 'barplot3.txt', header= True, smp_attr = [1,2], var_attr = [1,2], segregate = {'var': ['nerv'], 'smp' : ['type2']}, config = {'layoutCollapse' : 'false', 'layoutType' : 'rows', 'graphOrientation' : 'vertical'}, height = 300, width = 300)

stacked_barplots (Click me)

plotter.stacked(id = 'barplot1.txt', header = True, config = {'graphOrientation' : 'vertical'}, theme="stata")

stackedline (Click me)

plotter.stackedline(id = 'barplot3.txt', header= True, smp_attr = [1,2], var_attr = [1,2], transpose = False, height = 500, width = 500, xAxis = ["gen1", "gen2"], #These variable names are used for stacked barplots xAxis2 = ["gen3", "gen4"], #These variable names are used for lineplots config = {'graphOrientation' : 'vertical', "xAxis2Show": True, "xAxis2TickFormat":"%.2f G3-4", "xAxisTickFormat":"%.2f G1-2", "xAxisTitle": "Expression of genes 1 and 2 (bars)", "xAxis2Title": "Expression of genes 3 and 4 (lines)"})

lineplots (Click me)

plotter.line(id= 'barplot1.txt', header = True, func=mod_data )

barline (Click me)

plotter.barline(id = 'barplot3.txt', header= True, smp_attr = [1,2], var_attr = [1,2], transpose = False, height = 500, width = 500, xAxis = ["gen1", "gen2"], #These variable names are used for barplots xAxis2 = ["gen3", "gen4"], #These variable names are used for lineplots config = {'graphOrientation' : 'vertical', "xAxis2Show": True, "xAxis2TickFormat":"%.2f G3-4", "xAxisTickFormat":"%.2f G1-2", "xAxisTitle": "Expression of genes 1 and 2 (bars)", "xAxis2Title": "Expression of genes 3 and 4 (lines)"})

dotplots (Click me)

plotter.dotplot(id = 'canvas_table', header = True, row_names = True, connect = True, height = 300)

pie (Click me)

plotter.pie(id= 'pie_uniq.txt')

plotter.pie(id= 'barplot1.txt', header = True, row_names = True)

plotter.pie(id= 'barplot1.txt', header = True, row_names = True, transpose = True)

correlation_plots (Click me)

plotter.corplot(id = 'correlation1.tsv', header = True, row_names = True, correlationAxis = 'variables')

scatterplots_2D (Click me)

plotter.scatter2D(id= 'x_y.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', alpha = 0.3, theme="tableau" )

plotter.scatter2D(id= 'x_y.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', add_densities=True)

plotter.scatter2D(id= 'x_y_crowded.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', add_densities=True, alpha = 0.3 )

plotter.scatter2D(id= 'x_y_crowded.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', static=True, theme="tableau" )

scatterplots_3D (Click me)

plotter.scatter3D(id= 'scatter3dsizeAndColor.txt', header= True, row_names = True, x_label = 'Num genes', y_label = 'FPKM', z_label= "3thMetric", smp_attr=[6], xAxis = "liver", yAxis="brain", zAxis="lung", pointSize="spleen", colorScaleBy="kidney", shapeBy="pathway")

scatterplots_bubble (Click me)

plotter.scatterbubble2D(id = 'haplotipe_array', header = True, row_names = False, upper_limit = 70, lower_limit = 4, ranges = 80, xAxis = ['pos'], yAxis = ['haplotipe'], zAxis = ['freq'])

hexplots (Click me)

plotter.hexplot(id= 'x_y_crowded.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', bins=30)

boxplots (Click me)

plotter.boxplot(id = 'boxplot.txt', header = True, row_names = True)

plotter.boxplot(id = 'boxplot_one_series.txt', header = True, row_names = True)

plotter.boxplot(id = 'boxplot_factor.txt', header = True, row_names = True, default= False, smp_attr = [4], group = 'pathway' )

plotter.boxplot(id = 'rank_distribution.txt', header = True, row_names = False, default = False, smp_attr = [0,1,2], group = ["clust_method", "clust_status"], height = 500, width= 900)

plotter.boxplot(id = 'boxplot_grid.txt', header = True, row_names = False, default = False, smp_attr = [0,1], group = ["genes", "samples"], height = 700, width= 800, config={"graphOrientation":"vertical"})

boxplot_violin (Click me)

plotter.boxplot(id = 'boxplot_factor.txt', header = True, row_names = True, default= False, smp_attr = [4], group = 'pathway', add_violin=True )

density (Click me)

plotter.density(id="density_one_serie.txt", row_names = False, header = True, fields=[0])

plotter.density(id="density_one_serie.txt", row_names = False, header = True, smp_attr=[1], group="Group", config={"histogramStat":"density"})

plotter.density(id="ridgeline.txt", header = True, row_names = True, fillDensity = True, median = True)

ridgeline (Click me)

plotter.ridgeline(id = 'ridgeline.txt', header = True, row_names = True)

radar (Click me)

plotter.radar(id='barplot4.txt', header = True, row_names = True, subtype=["stacked"] or ["bar", "area", "line", "dot"])

plotter.radar(id='barplot3.txt', header = True, row_names = True, smp_attr = [1,2], var_attr = [1,2], subtype=["area"], show_factors=["type", "-", "type2"])

circular (Click me)

plotter.circular(id = 'circular.txt', header = True, row_names = True, links = 'links', ringsType = ['heatmap', 'dot', 'bar'])

heatmap (Click me)

plotter.heatmap(id = 'hap_sample', header = True, row_names = True )

area (Click me)

plotter.area(id = 'barplot3.txt', header= True, smp_attr = [1,2], var_attr = [1,2], transpose = False, config = {'graphOrientation' : 'vertical', "xAxis2Show": True}, height = 500, width = 500)

arealine (Click me)

plotter.arealine(id = 'barplot3.txt', header= True, smp_attr = [1,2], var_attr = [1,2], transpose = False, height = 500, width = 500, xAxis = ["gen3", "gen4"], #These variable names are used for dotplots xAxis2 = ["gen1", "gen2"], #These variable names are used for lineplots config = {'graphOrientation' : 'vertical', "xAxis2Show": True})

dotline (Click me)

plotter.dotline(id = 'barplot3.txt', header= True, smp_attr = [1,2], var_attr = [1,2], transpose = False, height = 500, width = 500, xAxis = ["gen3", "gen4"], #These variable names are used for dotplots xAxis2 = ["gen1", "gen2"], #These variable names are used for lineplots config = {'graphOrientation' : 'vertical', "xAxis2Show": True})

How to create networks (Click me)

How to create Networks with different plotting libraries

You can create networks using different plotting libraries. The following examples show how to create networks using different libraries.

cytoscape (Click me)

plotter.network(id = 'network.txt', method = 'cytoscape', reference_nodes = ["a", "e"], group_nodes= {"g1": ["i", "j"], "g2": ["b", "c"]})

elgrapho (Click me)

plotter.network(id = 'network.txt', method = 'elgrapho', group = 'layer', layout = 'forcedir', reference_nodes = ["a", "e"])

sigma (Click me)

plotter.network(id = 'network.txt', method = 'sigma', reference_nodes = ["a", "e"])

pyvis (Click me)

plotter.network(id = 'network.txt', method = 'pyvis', reference_nodes = ["a", "e"], group_nodes= {"g1": ["i", "j"], "g2": ["b", "c"]})