Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including protvista-variation with all npm packages installed. Try it out:

require("d3/package.json"); // d3 is a peer dependency. var protvistaVariation = require("protvista-variation")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

protvista-variation v2.6.1

Variation viewer for the ProtVista tool

protvista-variation

Published on NPM

This custom element displays a matrix of amino-acid changes at a given position on the protein sequence. The advantage of a matrix-based approach is that even with a large number of variants (every single amino-acid change per location) the space taken by the visualisation on the screen doesn't change.

Demo

Usage

<protvista-variation length="270"></protvista-variation>

Setting the data through property

const track = document.querySelector('#my-track-id');
track.data = myDataObject

Setting data through <data-loader>

<protvista-variation length="770">
    <protvista-variation-adapter>
        <data-loader>
          <source src="https://www.ebi.ac.uk/proteins/api/variation/P05067" />
        </data-loader>
    </protvista-variation-adapter>
</protvista-variation>

API Reference

Properties

data: Object

{
      sequence: string,
      variants: [{
          accession: String,
          start: Number,
          end: Number,
          color?: String,
          tooltipContent?: String
      }]
}

height?: number (default 430)

The height of the visualisation (in px).

also see protvista-track

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free