Vega-Lite Annotation

Overview

Vega-Lite Annotation is a library and playground for adding custom annotations to Vega-Lite visualizations. This project extends the capabilities of Vega-Lite by providing a simple, declarative way to add various types of annotations to your charts.

Features

• Extend Vega-Lite specifications with custom annotations
• Convert annotated Vega-Lite specs to standard Vega specifications
• Interactive playground for testing and experimenting with annotations
• Support for various annotation types and positioning strategies

Project Structure

This is a monorepo containing:

• vega-lite-annotation-library: The core library that provides the annotation functionality
• vega-lite-annotation-playground: An interactive web application for experimenting with annotations

Getting Started

Installation

# Clone the repository
git clone https://github.com/rahatzamancse/vega-lite-annotation.git
cd vega-lite-annotation

# Install dependencies
pnpm install

Development

# Start the playground development server
pnpm --filter vega-lite-annotation-playground dev

# Build the library
pnpm --filter vega-lite-annotation-library build

Usage

Note: This project will soon be submitted to npm. Once published, you'll be able to install it directly from the npm registry.

To use the library in your own project:

npm install vega-lite-annotation-library

import { vlaToV } from 'vega-lite-annotation-library';

// Your Vega-Lite spec with annotations
const annotatedSpec = {
  // ...your Vega-Lite spec
  annotations: [
    // Your annotations
  ]
};

// Convert to standard Vega spec
const vegaSpec = vlaToV(annotatedSpec);

Playground

The playground provides an interactive environment to experiment with Vega-Lite annotations. You can:

• Create and edit Vega-Lite specifications with annotations
• See the resulting visualization in real-time
• Export your work for use in other applications

Visit the playground to try it out.

Documentation

Note: Documentation is not yet available. When documentation is available, it will be linked here.

For detailed documentation on the annotation types and options, refer to the documentation.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgements

• Vega
• Vega-Lite