YAPV track sample

Sample for rendering basic YAPV tracks

by mycql

HTML

<script src="https://unpkg.com/@yapv/[email protected]/lib/index.umd.js"></script>
<script src="https://unpkg.com/@yapv/[email protected]/lib/index.umd.js"></script>
<div id="workspace">
</div>

CSS

#workspace > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

const data = {
  name: 'pCMV-CLuc 2',
  displayConfig: {
    height: 350,
    width: 350,
    viewBox: {
      height: 350,
      width: 350
    }
  },
  sequenceConfig: {
    length: 6905
  },
  labels: [{
      text: 'pCMV-Cluc 2',
      displayConfig: {
        type: 'text',
        style: 'text-anchor: middle; font: 20px "Arial", sans-serif; fill: black;'
      }
    },
    {
      text: '6905 bp',
      displayConfig: {
        type: 'text',
        style: 'text-anchor: middle; font: 16px "Courier", monotype; fill: black;',
        vOffset: 20,
        hOffset: 0
      }
    }
  ],
  tracks: [{
    displayConfig: {
      distance: 120,
      width: 16,
      style: 'stroke: transparent; fill: transparent;'
    },
    axes: [{
      displayConfig: {
        distance: 20,
        width: 2,
        style: 'fill: black;',
        scales: [{
          width: 10,
          distance: 6,
          total: 10,
          style: 'stroke: black; stroke-width: 2;',
          label: {
            type: 'text',
            style: 'text-anchor: start; font: 10px "Courier", monotype; fill: black;',
            distance: 24
          }
        }]
      }
    }],
    markers: [{
        displayConfig: {
          width: 14,
          style: 'stroke: black; fill: violet; stroke-opacity: 0.4; stroke-width: 2; stroke-linejoin: round;',
          anchor: {
            width: 20,
            height: 30
          }
        },
        location: {
          start: 209,
          end: 863
        },
        direction: '+',
        labels: [{
          text: 'pCMV',
          displayConfig: {
            type: 'path',
            style: 'text-anchor: middle; font: 10px "Courier New", monospace; stroke: black; letter-spacing: 5px;'
          }
        }]
      },
      {
        displayConfig: {
          width: 14,
          style: 'stroke: black; fill: red; stroke-width: 1;',
          anchor: {
            width: 20,
            height: 30
          }
        },
        location: {
   ...