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

• 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.

yarn add vueplotlib

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

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

• StratifiedBoxPlot ✅
• StratifiedScatterPlot ✅
• StratifiedSinaPlot ✅
• StratifiedKaplanMeierPlot ✅

• GenomeScatterPlot ✅
• GenomeStackedBarPlot ✅
• GenomeTrackPlot ✅
• GenomeMultiTrackPlot ✅

• Axis ✅
• GenomeAxis ✅
• DendrogramAxis ✅

• CategoricalLegend ✅
• ContinuousLegend ✅

• PlotContainer ✅
• SortOptions ✅

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

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/