Vizly

Reusable Vue 3 + D3 visualization components for proteomics data.

Installation

npm install vizly

Peer dependencies

The following packages must be present in the consuming application:

npm install vue@^3.5 d3@^7.9

Usage

Import components directly by name:

import { CoveragePlot, LollipopPlot, DotMatrix } from 'vizly'

A helper for modification type colors is also exported:

import { defaultModificationColors } from 'vizly'

Example

<CoveragePlot
  :sequence="proteinSequence"
  :items="peptideList"
  :modificationColors="defaultModificationColors"
  :showXAxis="true"
/>

Components

Component	Description
CoveragePlot	Peptide coverage track with optional modification markers, color scaling, and row labels
CoveragePlotGrouped	Coverage track with peptides grouped by overlap
CoveragePlotLine	Minimal coverage track rendered as lines
DotMatrix	Matrix of modification dots per project and sequence position
DotPlot	Dot plot of mutations along the sequence
StackedDotPlot	Stacked dot plot of modifications per position
LollipopPlot	Lollipop plot for positional data with zoom/pan
LinesChart	Line chart of biophysical properties per residue
SequenceAxis	Shared sequence axis with zoom/pan controls
NetworkComponent	Force-directed protein network (Canvas-based)
NetworkComponentD3	Force-directed protein network (SVG/D3-based) with residue labels and modification coloring

All sequence-based components accept a sequence (String) prop and emit a zoomed event so multiple components can share a synchronized zoom state.

Storybook

Interactive component documentation is available via Storybook:

npm run storybook

To build a static Storybook:

npm run build-storybook

Development

npm install
npm run dev       # dev server
npm run build     # build library

Publishing

1. Update version in package.json.
2. Run npm run build.
3. Run npm login.
4. Run npm publish --access public.