Press "Enter" to skip to content

Declarative, Interactive Linked Chart & Graph Components | vueplotlib

vueplotlib is a repository that will serve as a place for Vue’s reusable plot components (created with D3). These components were developed for use in ExploSig.

chart js interactive examples, interactive graph javascript, chart js cdn

Features

  • Introductory: Announcing metrics, data, and design options
  • Interactive: hover and click events, hub cleanup, download (to SVG)
  • Fast: canvas plots
  • Linked: Demonstration API enables automatic linking of metrics across plots
  • History: Record interactions for forward/backward navigation, import/export (via JSON)
  • COMPATIBLE: Axes and Legends separate plots, mix, and match
  • Customizable: Expand scale classes (see GenomeScale, BinaryScale). Expand history capabilities.

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

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-declarative-plots

# NPM
$ npm install vue-declarative-plots --save

chart-js-interactive

interactive chart & graph components, vueplotlib Plugin/Github


See Demo And Download

Official Website(keller-mark): Click Here

This superior jQuery/javascript plugin is developed by keller-mark. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.