@yapv/svg

SVG based renderer for YAPV

Usage no npm install needed!

<script type="module">
  import yapvSvg from 'https://cdn.skypack.dev/@yapv/svg';
</script>

README

@yapv/svg

Build Status lerna npm version

Renders a plasmid map in SVG using a virtual dom, updating the SVG nodes on every draw request only when needed.

Usage

import YAPV from '@yapv/core';
import SVG from '@yapv/svg';

const data = { ... }
const workspace = document.querySelector('#workspace');
// Attaches the viewer to the HTML element with the specified selector
const plasmidViewer = YAPV.create(workspace);
// Use the SVG renderer
plasmidViewer.use(SVG.circular);
// Draw it!
plasmidViewer.draw(data);

The 'data' instance is a JS object that conforms to the schema specified here. There are several sample files you can use as a reference.