VOLPES

A clientside JavaScript implementation of interactive profile visualizations

28-11-2018
Lukas Bartonek

Interactive Plots made easy

pH dependent charge profiles

Charge profiles of the yeast ATPase GET3 at pH 4 (red) to pH 10 (blue) in steps of pH 1. The change in charge from a slightly positively charged protein in an acidic environment to a strongly negative charge protein in a basic environment is clearly visible. In addition to identifying the total charge the visualization as a profile allows to identify regions in a sequence that show a stronger change in charge.

Note: this example shows the minimal setup for a graph using this library - only utilizing an SVG element, a data object and a single call to the drawingProfiles() function.

Data: Uniprot ID Q12154

easy, right?

.html


<svg id="charge_example" width="1050" height="330"></svg>

data.json


data = {
    "seq": [
        {
            "type": "protein",
            "scale": "charge_pH4",
            "sequence": "MDLTVEPNLHSLITSTTHKWIFVGGKGGVGKTTSSCSIAIQMALSQPNKQFL[...]",
            "window": 31,
            "shift": 0,
            "smoothing_method": "boxcar",
            "name": "ATPase GET3 - pH 4",
            "organism": "S. cerevisiae",
            "thickness": 2,
            "color": "#df9a8c",
            "active": true,
            "visible": true,
            "profile": []
        }, {...}, {...}, {...}, {...}, {...}, {...}], "title": "title"
}

.js


drawingProfiles(data, "#charge_example");

How about animations?

pH dependent charge profiles

Charge profiles of the yeast ATPase GET3 at pH 4 (red) to pH 10 (blue) in steps of pH 1. The smoothing window gets gradually changed from 1 to the length of the full protein, until in the end only the total charge remains on the canvas.

Data: Uniprot ID Q12154

.html


<svg id="charge_movie" width="1050" height="330"></svg>

data.json


data = {
    "seq": [
        {
            "scale": "charge_pH4",
            "sequence": "MDLTVEPNLHSLITSTTHKWIFVGGKGGVGKTTSSCSIAIQMALSQPNKQFL[...]",
            "window": 31,
            "thickness": 2, ..., ..., ...
        }, {...}, {...}, {...}, {...}, {...}, {...}], "title": "title"
}

.js


var animation = setInterval( function() {
    for (element in data.seq) {
        if (data.seq[element].window < data.seq[element].sequence.length) {
            data.seq[element].window += 1;
        } else {
            data.seq[element].sequence = element.toString().repeat(data.seq[element].window);
            data.seq[element].scale = 'chargeExample';
            data.seq[element].thickness = 20;
        }
    }
    drawingProfiles(data, "#charge_movie");
    if (data.seq[0].thickness == 20) {
        clearInterval(animation);
    }
}, 1000/fps);