vueplotlib

⚠️ vue-declarative-plots is changing its name to vueplotlib in version 2.0 ⚠️

This repository will serve as a place for reusable Vue plot components (built with D3). These components were developed for use in iMuSE.

• Demo
• Documentation

Features

• Declarative
• Interactive: hover and click events. axis brushing.
• Fast: WebGL and Canvas rendering via pixi
• History: record interactions for forward/backward navigation, import/export via JSON
• Composable: axes are separate from plots. subplots via Vue slots.
• Customizable: extend the scale classes (see our GenomeScale). extend the history events (see iMuSE).

Installation

yarn add vueplotlib

Example Usage

Please see the vueplotlib-examples repository for minimal examples of usage.

Plot Components

• BarPlot
• StackedBarPlot
• ScatterPlot
• TrackPlot
• MultiTrackPlot
• BoxPlot
• MultiBoxPlot
• HierarchicalMultiTrackPlot

Stratified Plot Components

• StratifiedBoxPlot
• StratifiedScatterPlot
• StratifiedSinaPlot
• StratifiedKaplanMeierPlot

Genome Plot Components

• GenomeScatterPlot
• GenomeStackedBarPlot
• GenomeTrackPlot
• GenomeMultiTrackPlot

Axis Components

• Axis
• GenomeAxis
• DendrogramAxis

Legend Components

• CategoricalLegend
• ContinuousLegend

Other Components

• PlotContainer
• SortOptions

Future Plans for Components

• GenomeBarPlot
• GroupedBarPlot
• ViolinPlot
• SinaPlot
• BeeswarmPlot
• JitterPlot
• HorizontalBarPlot
• HorizontalStackedBarPlot
• HorizontalBoxPlot
• HorizontalMultiBoxPlot
• LinePlot
• KaryotypePlot
• GenomeGenePlot

Development

Install dependencies:

yarn

Serve for development at http://localhost:8080:

yarn run serve

Build for production (generates /dist and /examples):

yarn run build

Run tests with jest:

yarn run test

Compile documentation with documentationjs:

yarn run docs

This was inspired by the following projects:

• https://altair-viz.github.io/
• https://vega.github.io/vega-lite/
• https://matplotlib.org/