vueplotlib

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

• Demo
• Documentation

Features

• Declarative: declare scales, data, and styling options
• Interactive: hover and click events, axis brushing, downloading (to SVG)
• Fast: canvas plots
• Linked: declarative API enables automatic linking of scales across plots
• History: record interactions for forward/backward navigation, import/export (via JSON)
• Composable: axes and legends are separate from plots, mix and match
• Customizable: extend the scale classes (see GenomeScale, BinaryScale). extend the history capabilities.

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/