Skip to content

Instantly share code, notes, and snippets.

@IbrahimTanyalcin

IbrahimTanyalcin/.block

Last active September 12, 2017 02:55
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Raw
.block
license: cc-by-nc-nd-4.0
height: 1000
width: 1000
scrolling: yes
Raw
README.md

This is an example of how you can use lexicon-rainbow for data visualization in Biology. There are 3 proteins, each with domains, sequence and sequence information. Use the GUI to switch between proteins and data to show about selected protein. You can also get the d3 v3 version here.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/e2a8a5a0/dev/lexiconRainbow.d3v4.dev.js"></script>
<style type ="text/css">
</style>
</head>
<body>
<div id="containerDiv" style="margin:auto;"></div>
<script type="text/javascript">
!function(){
////////////////////////////////////////////////////////////////////
/////////////////////////DEFINE SOME DATA///////////////////////////
////////////////////////////////////////////////////////////////////
function smallToLarge(a,b){return a-b}; //used for sorting
var AAColors = {R:"#8694fa",K:"#baaafc",E:"#f93333",D:"#fb7979",I:"#ffff4f",L:"#ffff79",V:"#ffffab",A:"#ffffc9",C:"#e3f9ad",H:"#d5f6fb",M:"#c3ed27",N:"#ee72a7",Q:"#f9c3e3",F:"#c7c88a",Y:"#7dafb9",W:"#85b0cd",S:"#ca9ec8",T:"#f0e4ef",G:"#c0c0c0",P:"#f1f2f3"},
AALetters = Object.keys(AAColors).sort(),
//protein 1 - 1+Math.random()*5 => at least 1 element
protein1 = Array.apply(null,Array(1000)).map(function(d,i){return AALetters[Math.random()*20 << 0]}),//random sequence
protein1_benign = Array.apply(null,Array(1+Math.random()*100 << 0)).map(function(){return Math.random()*1000 << 0}).sort(smallToLarge),//random benign mutations
protein1_deleterious = Array.apply(null,Array(1+Math.random()*100 << 0)).map(function(){return Math.random()*1000 << 0}).sort(smallToLarge),//random deleterious mutations
//protein 2
protein2 = Array.apply(null,Array(500)).map(function(d,i){return AALetters[Math.random()*20 << 0]}),//random sequence
protein2_benign = Array.apply(null,Array(1+Math.random()*50 << 0)).map(function(){return Math.random()*500 << 0}).sort(smallToLarge),//random benign mutations
protein2_deleterious = Array.apply(null,Array(1+Math.random()*50 << 0)).map(function(){return Math.random()*500 << 0}).sort(smallToLarge),//random deleterious mutations
//protein 3
protein3 = Array.apply(null,Array(50)).map(function(d,i){return AALetters[Math.random()*20 << 0]}),//random sequence
protein3_benign = Array.apply(null,Array(1+Math.random()*5 << 0)).map(function(){return Math.random()*50 << 0}).sort(smallToLarge),//random benign mutations
protein3_deleterious = Array.apply(null,Array(1+Math.random()*5 << 0)).map(function(){return Math.random()*50 << 0}).sort(smallToLarge);//random deleterious mutations
////////////////////////////////////////////////////////////////////
/////////////////////////////THE DATASET////////////////////////////
////////////////////////////////////////////////////////////////////
var sample = {
"ordinal": [
{
"name": "Domains",
"categories": {
"Domain-X": 1,
"Domain-Y": 2,
"Domain-Z": 3,
"Domain-T": 4,
"Domain-\u03b1":5,
"Domain-\u03b2":6
}
},
{
"name": "Mutations",
"categories": {
"Deleterious": 2,
"Benign": 1,
},
"colors":{
"Benign":["Green","orange"],
"Deleterious":["Red","Orange"]
},
"mode":"stackEqual"
},
{
"name": "Sequence-1",
"categories": {
"Protein-1": 1
},
"colors":{
"Protein-1": Array.prototype.concat.apply(["orange"],[protein1.map(function(d,i){return AAColors[d]}),["orange"]])
},
"mode":"stackEqual"
},
{
"name": "Sequence-2",
"categories": {
"Protein-2": 1
},
"colors":{
"Protein-2": Array.prototype.concat.apply(["orange"],[protein2.map(function(d,i){return AAColors[d]}),["orange"]])
},
"mode":"stackEqual"
},
{
"name": "Sequence-3",
"categories": {
"Protein-3": 1
},
"colors":{
"Protein-3": Array.prototype.concat.apply(["orange"],[protein3.map(function(d,i){return AAColors[d]}),["orange"]])
},
"mode":"stackEqual"
}
],
"linear": [
{
"glyph":"./protein1.jpeg",
"domain": [0,1000],
"name": "Protein-1",
"categories": {
"Domain-X": {intervals:[[250,350]],names:["Domain-X"]},
"Domain-Y": {intervals:[[400,700]],names:["Domain-Y"]},
"Protein-1": {intervals:protein1.map(function(d,i){return [i,i+1]}),names:protein1.map(function(d,i){return d+i})},
"Benign": {intervals:protein1_benign},
"Deleterious":{intervals:protein1_deleterious}
}
},
{
"glyph":"./protein2.jpg",
"domain": [0,500],
"name": "Protein-2",
"categories": {
"Domain-Z": {intervals:[[50,150]],names:["Domain-Z"]},
"Domain-T": {intervals:[[300,500]],names:["Domain-T"]},
"Protein-2": {intervals:protein2.map(function(d,i){return [i,i+1]}),names:protein2.map(function(d,i){return d+i})},
"Benign": {intervals:protein2_benign},
"Deleterious":{intervals:protein2_deleterious}
}
},
{
"glyph":"./protein3.png",
"domain": [0,50],
"name": "Protein-3",
"categories": {
"Domain-\u03b1": {intervals:[[10,20]],names:["Domain-\u03b1"]},
"Domain-\u03b2": {intervals:[[30,50]],names:["Domain-\u03b2"]},
"Protein-3": {intervals:protein3.map(function(d,i){return [i,i+1]}),names:protein3.map(function(d,i){return d+i})},
"Benign": {intervals:protein3_benign},
"Deleterious":{intervals:protein3_deleterious}
}
}
]
};
////////////////////////////////////////////////////////////////////
/////////////////////////CREATE AN INSTANCE/////////////////////////
////////////////////////////////////////////////////////////////////
(new LexiconRainbow)
.container("#containerDiv")
.forceStyle()
.w(600)
.h(200)
.sW("90%")
.sH("auto")
.position("relative")
.sTop("0px")
.sLeft("0px")
.sMargin("100px auto 0px auto")
.lexID("lexiconRainbow")
.input(sample)
.enableOnPick("noLineAnim")
.shapeRendering("crispEdges")
.dispersion(0.003)
.append(true)
.render();
}()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment