CanvasXpress Visualization Library

repository·master·Indexed 43 days ago

https://github.com/neuhausi/canvasxpress

A visualization library for bioinformatics and systems biology providing a wide range of scientific plots. It supports R, R-Studio, and Shiny web applications, offering a comprehensive set of graph types including Heatmaps, Scatter3D, Boxplots, and Venn diagrams. The library includes advanced features such as data aggregations, calculated fields, and event hooks for user interaction.

Tokens
39K
Snippets
42
Records
99
Agent score
56%

What's inside CanvasXpress

  1. Note layout variations in dynamic charts

    master

    The following chart types have layouts that depend on chart dimensions and may vary across different browsers and platforms:

    • Treemaps: Sample locations are area-based; layout depends on chart size.
    • Tag Clouds: Layout is dynamic and depends on chart dimensions.
    • Layout Charts: The order of elements may vary.
    • 3D Scatterplots: The superimposition/stacking order of points and 3D overlays (like ellipses in scatter3d2) may differ.
    • 3D Scatterplot Transpose: Transposing 3D plots will result in only a few points; this is intended behavior.
  2. Handle plot resizing restrictions

    master

    If you set resizableX or resizableY to FALSE, these restrictions apply to the 'maximize' button in the menu bar as well:

    • If resizableX is FALSE: Maximizing the plot will expand the height but the width will remain fixed.
    • If both resizableX and resizableY are FALSE: The plot will not resize when maximized and may move to the top-left corner of the container.
  3. Install the canvasXpress R library

    master

    You can install the stable version of canvasXpress from CRAN, or install the latest development version directly from GitHub using devtools.

    # Install latest version from GitHub
    devtools::install_github('neuhausi/canvasXpress')
  4. Configure LLM prompts for CanvasXpress charts

    master
    When using charts that utilize LLM prompts, ensure that all required configurations are included directly within the prompt text. If the prompt text is invalid, the plot and table will still render, but they will display a loading circle and trigger a browser popup error.
  5. Explore Shiny examples with cxShinyExample

    master

    The canvasXpress package includes a function cxShinyExample() to run interactive Shiny applications demonstrating advanced features like mouse events, zooming, and broadcasting.

    • Use cxShinyExample() to list available example names.
    • Use cxShinyExample(example = "name") to run a specific example.
    # List example names
    cxShinyExample()
    
    # Run an interactive shiny example
    cxShinyExample(example = "example1")
  6. Access package vignettes

    master

    To learn more about getting started or to see additional examples, you can access the built-in R vignettes.

    • vignette(package = "canvasXpress") lists all available vignettes.
    • vignette("getting_started", package = "canvasXpress") opens the getting started guide.
    • vignette("additional_examples", package = "canvasXpress") opens the additional examples guide.
    # List all package vignettes
    vignette(package = "canvasXpress")
    
    # View a specific vignette
    vignette("getting_started", package = "canvasXpress")
    vignette("additional_examples", package = "canvasXpress")
  7. Configure Sankey diagram height models

    master

    The sankeyType property determines how the strata (columns) are scaled in a Sankey/alluvial diagram:

    • "normal": One shared scale across the whole diagram. Columns with fewer classes appear shorter (default).
    • "proportional": Each stratum column is scaled independently to fill the full plot height. Node heights remain proportional to their values, and flow ribbons fill the node boxes proportionally at both ends.
    • "equal": Every stratum (node) in a column gets the same height, partitioning the column evenly. Ribbons fill the equal node boxes proportionally.
    • "aligned": Keeps normal node heights but spreads the strata of each column evenly over the full plot height (this overrides sankeyNodePadding).
    {
      graphType: 'Sankey',
      sankeyType: 'proportional'
    }
  8. Enable asynchronous rendering with yieldingRender

    master

    For very large charts, you can enable yieldingRender to keep the page responsive.

    When yieldingRender is set to true, the 'cold render' yields to the browser after data ingestion. It paints recorded objects in short requestAnimationFrame slices instead of one long task. This makes rendering asynchronous.

    To know when rendering is complete, monitor the CanvasXpress.ready event or the afterRendering flag.

    Default Behavior

    • yieldingRender: false: Rendering is fully synchronous (ensures identical pixels).
  9. Configure Selection Mode and Rendering

    master

    Control how data points appear when selected using selectionMode:

    • "highlight": Recolors the selection (default).
    • "ghost": Fades the non-selected marks.
    • "focus": Recolors non-selected marks to grey and keeps the selection in color (storytelling focus).
    • "name": Labels the selection (requires selectionMetadata to be set and Scatter plot).
    • "filter": Keeps only the selected points.

    Selection Properties

    • selectedDataPoints: Array of variable/sample names to initially select (default: []).
    • selectionMetadata: Metadata (from data.z) to use for labeling when selectionMode is "name".
    • selectionColor: Color for selected points when selectionMode is "highlight" (deprecated; use highlightColor).
  10. Configure Highlighting and Selection modes

    master

    CanvasXpress provides several ways to emphasize data through highlighting:

    • highlightColor: The primary emphasis color for highlighted/selected marks.
    • highlightMode: Determines how declarative highlights are rendered:
      • "highlight" (default): Recolors the highlighted marks.
      • "ghost": Fades the non-highlighted marks.
      • "focus": Recolors non-highlighted marks to grey, keeping highlighted ones in color (storytelling focus).
    • highlightGreyOut: De-emphasis strength (0-1) for backgrounded marks. In "focus" mode, it controls how visible the grey of non-focused marks is.
    • highlightSmp: Array of sample names to highlight.
    • highlightVar: Array of variable names to highlight.
    • highlightNode: Array of node names to highlight (for Network graphs).
    • highlightBy: A predicate object used to populate highlightVar or highlightSmp automatically based on data statistics (e.g., { target: "variable", stat: "mean", operator: ">", value: 10 }).
  11. Configure data aggregations and calculated fields

    master

    CanvasXpress allows for data transformation during the loading process using aggregations and calculatedFields.

    Aggregations

    Used for Tableau-style materialized group-by operations. Each entry follows the pattern: { by: [annotationNames], defaultFn, overrides: { variable: fn }, sep? }. Supported functions (fn): mean, median, sum, min, max, sd, count, first.

    Calculated Fields

    Allows creating new columns based on formulas. Each entry is { name, target, formula }.

    • target: Can be variable, sampleAnnotation, or variableAnnotation.
    • formula: A safe expression (e.g., log2(A/B), (V1 - mean(V1)) / sd(V1)).

    These are applied after calculatedFields and are serialized so they persist with the chart.

  12. Configure CanvasXpress charts with CXConfig

    master

    The CXConfig interface defines the full configuration schema for CanvasXpress charts. It contains over 1600 possible keys used to control data loading, visual styling, axis behavior, and specific graph types.

    Key features include:

    • Data Manipulation: Use aggregations for Tableau-style group-by operations and calculatedFields for formula-derived columns (e.g., log2(A/B)).
    • Visual Styling: Control backgroundType (solid, gradient, image, etc.), colorBy for coloring based on annotations, and autoScaleFont for text sizing.
    • Graph-Specific Settings: Many properties are scoped to specific graph types (e.g., boxplotWhiskersType for Boxplot or circularTrackOrder for Circular).
    • Broadcasting: Use broadcast and broadcastGroup to enable synchronization between multiple CanvasXpress objects on a single page.
    // Example of a partial CXConfig object
    const config: CXConfig = {
      graphType: 'Bar',
      colorBy: 'group',
      backgroundType: 'solid',
      background: 'rgb(255,255,255)',
      autoScaleFont: false
    };