Simple Usage:

        import { DotplotGL, RectplotGL, TickplotGL } from "./index.js";

        // you can either pass in a dom selector or HTMLElement
        let plot = new DotplotGL(".canvas");
      
        // provide input data to the element, 
        // data must contain x (as `rows`) and y (as `columns`)
        // you can also provide x and y labels
        plot.setInput({
          x: [...],
          y: [...],
          xlabels: [],
          ylabels: [],
        });
      
        // render the plot
        plot.render();
      

Set Encodings:

These attributes either take a fixed value or an array of values for each data point.

• `color` - color/rgb/hex code
• `size` - size of each dot
• `opacity` - opacity across the entire plot
• `xgap` or `ygap` - gap between rows and columns

Note: `size` is scaled automatically to fit the plots dimensions.

Capture events:

The library provides click, hover (mouseover) and selection events for interactivity with the plot. The default behavior logs the events to the console

            plot.hoverCallback = function(point) {
                # do something when a point is hovered
                console.log(point);
            }
        

Interactions:

currently supports

• pan: for pan/zoom operations on canvas
• box: box selection of data points
• lasso: lasso selection

            plot.setInteraction("lasso");
      

Tick Plots

Tick plots are extremely fast at quickly rendering large amounts of data. They are useful for exploring the overall patterns in the dataset. This example renders the full expression matrix from the pbmc 3k dataset.

        import * as pbmc from './pbmc.js';
        let plot3 = new TickplotGL(".tickcanvas");
        plot3.setInput(pbmc.data);
        plot3.render();
      

For more documentation, visit GitHub repository

Github Commit graph

someone is a profilic programmer