28-11-2018
Lukas Bartonek
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
<svg id="charge_example" width="1050" height="330"></svg>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"
}drawingProfiles(data, "#charge_example");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
<svg id="charge_movie" width="1050" height="330"></svg>data = {
"seq": [
{
"scale": "charge_pH4",
"sequence": "MDLTVEPNLHSLITSTTHKWIFVGGKGGVGKTTSSCSIAIQMALSQPNKQFL[...]",
"window": 31,
"thickness": 2, ..., ..., ...
}, {...}, {...}, {...}, {...}, {...}, {...}], "title": "title"
}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);