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 clanviewer with all npm packages installed. Try it out:

var clanviewer = require("clanviewer")

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

clanviewer v0.1.11

A component to visualise the relationships between the Pfam families in a clan


NPM version Build Status Coverage Status

A component to visualise the relationships between the Pfam families in a clan

Getting Started

Install the module with: npm install clanviewer

import ClanViewer from '../lib/index';
import data from './example.json';

const rootDiv = document.getElementById('container');
const instance = new ClanViewer({element: rootDiv, directional: true});




The 'constructor' method is responsible for capturing the parameters and setting up the space.

All the options are optional including the option parameter itself.

Parameter: options Type: Object Default: {} Example: {"el":"body"}

Parameter: options.el Type: String Default: "body" Example: ""

Parameter: options.width Type: Integer Default: 900 Example: 800

Parameter: options.height Type: Integer Default: 500 Example: 600

Parameter: options.r Type: Integer Default: 5 Example: 8

How to use this method

const instance = new ClanViewer({element: rootDiv, directional: true});


The 'paint' method receives a json object and generates a force-directed layout that maps the memebers with ith interactions.

Parameter: data Type: Object Example:

      { "accession":"PF03061", "link":"", "id":"4HBT", "num_occurrences":88944, "percentage_hits":34.7 },
      { "accession":"PF01643", "link":"", "id":"Acyl-ACP_TE", "num_occurrences":7178, "percentage_hits":2.8 },
      { "member_id_1":"4HBT", "member_id_2":"Acyl-ACP_TE", "e_value":8.2e-6 }

How to use this method



All contributions are welcome.


If you have any problem or suggestion please open an issue here.


This software is licensed under the Apache 2 license, quoted below.

Copyright (c) 2015, gsalazar

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

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