This project provides a system that uses annotations on provided data and SVG file to create a dynamic vector graphic.

Quick Start

Include the dynamic vector graphic library in your html page:

<script src="https://unpkg.com/dynamic-vector-graphics/dist/dvg.min.js"></script>

Inject an SVG file into a container element:

const elem = document.getElementById('container')
const graphic = new dvg.DVG(elem, {
  svg: './graphic.svg',
})

Use the update()method to pass data to the graphic:

graphic.update({
  values: [
    ['A', 'B', 'C'],
    [1, 2, 3],
  ],
  columns: ['Character', 'Number {{0..100}}'],
})

Documentation

Usage
Various ways to intialize SVG files and proivde data updates.

Demo Examples
Demonstration page showing the dynamic svg features in action.

Editing SVG Files
How to create SVGs appropriate for use with the Dynamic Vector Graphics system using common vector editors.

SVG Annotation Syntax
Syntax needed for annotating the SVGs files.

Data Annotation Syntax
Syntax needed for annotating the headers of the data.