plasmid.js - Interactive plasmids

It is always cubersome to create vector maps, and then putting the static images on the web. We thought it would be a lot more fun to just autogenerate interactive plasmids dynamically from data. That's why we wrote plasmid.js, a JavaScript library to generate interactive vector maps for web pages.

Why should you use it?

It is dead simple to use!

The includes

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<scripr src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="plasmid.js" type="text/javascript" charset="utf-8"></script>

Or, if you are working with an iGEM Wiki

{{Heidelberg/js/plasmid.js}}

The placeholders

<div id="canvas"></div>
<div id="info"></div>

Or, if you are on a iGEM Wiki

{{Heidelberg/js/plasmid.js}}|

The JavaScript

$(function() {
    // You could also load your data via AJAX
    var inserts = [
    {
        size: 40, // Size in angles! (there are 360 of them available)
        color: "#0F0", // You can use any valid css format
        label: "GFP", // The label to display in the legend
        description: "Green Fluorescent Protein", // The description to put in the infobox
        gap: false, // If not given this defaults to true
        promoter: true // This is a promoter, defaults to false
    },
    {
        size: 10,
        color: "#F00",
        label: "Brow Fox",
        description: "He likes jumping over dogs.",
        gap: true
    },
    {
        size: 46,
        color: "#00F",
        label: "Lazy Dog",
        description: "He likes beeing jumped over."
    },
    {
        size: 19,
        color: "#0FF",
        label: "Short one",
        description: "Wirklich, Wirklich kurz nun auch wieder nicht.",
        promoter: true
    },
    {
        size: 1,
        color: "#FF0",
        label: "Even shorter one",
        description: "Und knackig",
        gap: false,
        promoter: true
    }];

    // Required parameters are: id of the canvas, id of the infobox,
    // the inserts and the diameter of the plasmid. Note, that there
    // is spacing and a legend added (default: width + 575, height + 50)
    // These values can be changed easily, see below.
    var plasmid = new Plasmid('canvas', 'info', inserts, 500);
    plasmid.draw();
});

Plus, it also looks great!

Further options

There are two ways to specify optional settings. You can either pass them via the constructor or set the corresponding attributes after the object is created (it's JavaScript, ...). Below you can see a annotated version of the constructor.

function Plasmid(canvas, infobox, inserts, diameter, legendWidth, insertWidth, defaultText, insertBoxAttr, fontSize, spacing, startAngle) {
    // Are all required parameters given?
    // [...]
    this.canvas = canvas; // The id of the canvas placeholder div
    this.inserts = inserts; // The array whith the given inserts (see above)
    this.diameter = diameter; // The diameter of the plasmid, this is *not* the size of the canvas
    this.infobox = infobox; // The id of the infobox to put the descriptions in

    // Set sane defaults for optional parameters
    this.legendWidth = legendWidth || 500; // The width of the legend
    this.radiusOfInsertBox = insertWidth || diameter / 13; // how "thick" the boxes of the inserts are drawn
    this.defaultText = defaultText || "Hover over an insert to get more information!"; // default text in infobox
    this.fontSize = fontSize || 20; // The font size for legend entries
    this.spacing = spacing || 25; // spacing is the number of pixels put above and below the plasmid and left to the legend
    this.startAngle = startAngle || -40; // The angle at which the first plasmid starts
    this.insertBoxAttr = insertBoxAttr || { // The attributes to set on the boxes representing an insert
        stroke: "#666",
        opacity: 0.7,
        "stroke-width": 1,
        "stroke-linejoin": "round"
    };

    // [...]
}