A typical I-PV output. I-PV aims to allow the scientists to browse through the sequence features of a given protein. It combines several disciplines together with d3 and static svg. For more information visit the official I-PV website or here.
Reference: Ibrahim Tanyalcin, Carla Al Assaf, Alexander Gheldof, Katrien Stouffs, Willy Lissens, and Anna C. Jansen. I-PV: a CIRCOS module for interactive protein sequence visualization. Bioinformatics first published online October 10, 2015 doi:10.1093/bioinformatics/btv579
Relevant code:
<script type="text/javascript">
var svg = d3.select("#master").append("svg:g").attr("id","annotation");
svg;
//***Filters***
d3.select("#master").append("svg:defs").attr("id","ExtraS");
d3.select("#ExtraS").append("defs:filter").attr("id","NeonGlow").attr("x",0).attr("y",0);
d3.select("#NeonGlow").append("filter:feColorMatrix").attr("in","SourceGraphic").attr("type","matrix").attr("values","1 0 0 0 0.33, 0 1 0 0 0.33, 0 0 1 0 0.33, 0.5 0.5 0.5 0.5 0.05").attr("result","feColorMatrixOut");
d3.select("#NeonGlow").append("filter:feGaussianBlur").attr("in","feColorMatrixOut").attr("stdDeviation",10).attr("result","feGaussianBlurOut");
d3.select("#NeonGlow").append("filter:feBlend").attr("in","SourceGraphic").attr("in2","feGaussianBlurOut").attr("result","feBlendOut").attr("mode","screen");
//***Filters***
//***Global Variables for Graphpad
var GoldenRatio = 1.618;
var Relocate = 0;
var MouseOut = 1;
var GraphWdefault = 2000;
var GraphHdefault = GraphWdefault/GoldenRatio;
var GraphHnew = GraphHdefault;
var GraphWnew = GraphWdefault;
var GraphNewLocation = [2000,2375];
var GraphOpen = "no";
var GraphWindowSize = 50;
var GraphData = [];
//***Global Variables for Graphpad
var cdna = ["A","T","G","C","G","A","C","C","C","T","C","C","G","G","G","A","C","G","G","C","C","G","G","G","G","C","A","G","C","G","C","T","C","C","T","G","G","C","G","C","T","G","C","T","G","G","C","T","G","C","G","C","T","C","T","G","C","C","C","G","G","C","G","A","G","T","C","G","G","G","C","T","C","T","G","G","A","G","G","A","A","A","A","G","A","A","A","G","T","T","T","G","C","C","A","A","G","G","C","A",
"C","G","A","G","T","A","A","C","A","A","G","C","T","C","A","C","G","C","A","G","T","T","G","G","G","C","A","C","T","T","T","T","G","A","A","G","A","T","C","A","T","T","T","T","C","T","C","A","G","C","C","T","C","C","A","G","A","G","G","A","T","G","T","T","C","A","A","T","A","A","C","T","G","T","G","A","G","G","T","G","G","T","C","C","T","T","G","G","G","A","A","T","T","T","G","G","A","A","A","T",
"T","A","C","C","T","A","T","G","T","G","C","A","G","A","G","G","A","A","T","T","A","T","G","A","T","C","T","T","T","C","C","T","T","C","T","T","A","A","A","G","A","C","C","A","T","C","C","A","G","G","A","G","G","T","G","G","C","T","G","G","T","T","A","T","G","T","C","C","T","C","A","T","T","G","C","C","C","T","C","A","A","C","A","C","A","G","T","G","G","A","G","C","G","A","A","T","T","C","C","T",
"T","T","G","G","A","A","A","A","C","C","T","G","C","A","G","A","T","C","A","T","C","A","G","A","G","G","A","A","A","T","A","T","G","T","A","C","T","A","C","G","A","A","A","A","T","T","C","C","T","A","T","G","C","C","T","T","A","G","C","A","G","T","C","T","T","A","T","C","T","A","A","C","T","A","T","G","A","T","G","C","A","A","A","T","A","A","A","A","C","C","G","G","A","C","T","G","A","A","G","G",
"A","G","C","T","G","C","C","C","A","T","G","A","G","A","A","A","T","T","T","A","C","A","G","G","A","A","A","T","C","C","T","G","C","A","T","G","G","C","G","C","C","G","T","G","C","G","G","T","T","C","A","G","C","A","A","C","A","A","C","C","C","T","G","C","C","C","T","G","T","G","C","A","A","C","G","T","G","G","A","G","A","G","C","A","T","C","C","A","G","T","G","G","C","G","G","G","A","C","A","T",
"A","G","T","C","A","G","C","A","G","T","G","A","C","T","T","T","C","T","C","A","G","C","A","A","C","A","T","G","T","C","G","A","T","G","G","A","C","T","T","C","C","A","G","A","A","C","C","A","C","C","T","G","G","G","C","A","G","C","T","G","C","C","A","A","A","A","G","T","G","T","G","A","T","C","C","A","A","G","C","T","G","T","C","C","C","A","A","T","G","G","G","A","G","C","T","G","C","T","G","G",
"G","G","T","G","C","A","G","G","A","G","A","G","G","A","G","A","A","C","T","G","C","C","A","G","A","A","A","C","T","G","A","C","C","A","A","A","A","T","C","A","T","C","T","G","T","G","C","C","C","A","G","C","A","G","T","G","C","T","C","C","G","G","G","C","G","C","T","G","C","C","G","T","G","G","C","A","A","G","T","C","C","C","C","C","A","G","T","G","A","C","T","G","C","T","G","C","C","A","C","A",
"A","C","C","A","G","T","G","T","G","C","T","G","C","A","G","G","C","T","G","C","A","C","A","G","G","C","C","C","C","C","G","G","G","A","G","A","G","C","G","A","C","T","G","C","C","T","G","G","T","C","T","G","C","C","G","C","A","A","A","T","T","C","C","G","A","G","A","C","G","A","A","G","C","C","A","C","G","T","G","C","A","A","G","G","A","C","A","C","C","T","G","C","C","C","C","C","C","A","C","T",
"C","A","T","G","C","T","C","T","A","C","A","A","C","C","C","C","A","C","C","A","C","G","T","A","C","C","A","G","A","T","G","G","A","T","G","T","G","A","A","C","C","C","C","G","A","G","G","G","C","A","A","A","T","A","C","A","G","C","T","T","T","G","G","T","G","C","C","A","C","C","T","G","C","G","T","G","A","A","G","A","A","G","T","G","T","C","C","C","C","G","T","A","A","T","T","A","T","G","T","G",
"G","T","G","A","C","A","G","A","T","C","A","C","G","G","C","T","C","G","T","G","C","G","T","C","C","G","A","G","C","C","T","G","T","G","G","G","G","C","C","G","A","C","A","G","C","T","A","T","G","A","G","A","T","G","G","A","G","G","A","A","G","A","C","G","G","C","G","T","C","C","G","C","A","A","G","T","G","T","A","A","G","A","A","G","T","G","C","G","A","A","G","G","G","C","C","T","T","G","C","C",
"G","C","A","A","A","G","T","G","T","G","T","A","A","C","G","G","A","A","T","A","G","G","T","A","T","T","G","G","T","G","A","A","T","T","T","A","A","A","G","A","C","T","C","A","C","T","C","T","C","C","A","T","A","A","A","T","G","C","T","A","C","G","A","A","T","A","T","T","A","A","A","C","A","C","T","T","C","A","A","A","A","A","C","T","G","C","A","C","C","T","C","C","A","T","C","A","G","T","G","G",
"C","G","A","T","C","T","C","C","A","C","A","T","C","C","T","G","C","C","G","G","T","G","G","C","A","T","T","T","A","G","G","G","G","T","G","A","C","T","C","C","T","T","C","A","C","A","C","A","T","A","C","T","C","C","T","C","C","T","C","T","G","G","A","T","C","C","A","C","A","G","G","A","A","C","T","G","G","A","T","A","T","T","C","T","G","A","A","A","A","C","C","G","T","A","A","A","G","G","A","A",
"A","T","C","A","C","A","G","G","G","T","T","T","T","T","G","C","T","G","A","T","T","C","A","G","G","C","T","T","G","G","C","C","T","G","A","A","A","A","C","A","G","G","A","C","G","G","A","C","C","T","C","C","A","T","G","C","C","T","T","T","G","A","G","A","A","C","C","T","A","G","A","A","A","T","C","A","T","A","C","G","C","G","G","C","A","G","G","A","C","C","A","A","G","C","A","A","C","A","T","G",
"G","T","C","A","G","T","T","T","T","C","T","C","T","T","G","C","A","G","T","C","G","T","C","A","G","C","C","T","G","A","A","C","A","T","A","A","C","A","T","C","C","T","T","G","G","G","A","T","T","A","C","G","C","T","C","C","C","T","C","A","A","G","G","A","G","A","T","A","A","G","T","G","A","T","G","G","A","G","A","T","G","T","G","A","T","A","A","T","T","T","C","A","G","G","A","A","A","C","A","A",
"A","A","A","T","T","T","G","T","G","C","T","A","T","G","C","A","A","A","T","A","C","A","A","T","A","A","A","C","T","G","G","A","A","A","A","A","A","C","T","G","T","T","T","G","G","G","A","C","C","T","C","C","G","G","T","C","A","G","A","A","A","A","C","C","A","A","A","A","T","T","A","T","A","A","G","C","A","A","C","A","G","A","G","G","T","G","A","A","A","A","C","A","G","C","T","G","C","A","A","G",
"G","C","C","A","C","A","G","G","C","C","A","G","G","T","C","T","G","C","C","A","T","G","C","C","T","T","G","T","G","C","T","C","C","C","C","C","G","A","G","G","G","C","T","G","C","T","G","G","G","G","C","C","C","G","G","A","G","C","C","C","A","G","G","G","A","C","T","G","C","G","T","C","T","C","T","T","G","C","C","G","G","A","A","T","G","T","C","A","G","C","C","G","A","G","G","C","A","G","G","G",
"A","A","T","G","C","G","T","G","G","A","C","A","A","G","T","G","C","A","A","C","C","T","T","C","T","G","G","A","G","G","G","T","G","A","G","C","C","A","A","G","G","G","A","G","T","T","T","G","T","G","G","A","G","A","A","C","T","C","T","G","A","G","T","G","C","A","T","A","C","A","G","T","G","C","C","A","C","C","C","A","G","A","G","T","G","C","C","T","G","C","C","T","C","A","G","G","C","C","A","T",
"G","A","A","C","A","T","C","A","C","C","T","G","C","A","C","A","G","G","A","C","G","G","G","G","A","C","C","A","G","A","C","A","A","C","T","G","T","A","T","C","C","A","G","T","G","T","G","C","C","C","A","C","T","A","C","A","T","T","G","A","C","G","G","C","C","C","C","C","A","C","T","G","C","G","T","C","A","A","G","A","C","C","T","G","C","C","C","G","G","C","A","G","G","A","G","T","C","A","T","G",
"G","G","A","G","A","A","A","A","C","A","A","C","A","C","C","C","T","G","G","T","C","T","G","G","A","A","G","T","A","C","G","C","A","G","A","C","G","C","C","G","G","C","C","A","T","G","T","G","T","G","C","C","A","C","C","T","G","T","G","C","C","A","T","C","C","A","A","A","C","T","G","C","A","C","C","T","A","C","G","G","A","T","G","C","A","C","T","G","G","G","C","C","A","G","G","T","C","T","T","G",
"A","A","G","G","C","T","G","T","C","C","A","A","C","G","A","A","T","G","G","G","C","C","T","A","A","G","A","T","C","C","C","G","T","C","C","A","T","C","G","C","C","A","C","T","G","G","G","A","T","G","G","T","G","G","G","G","G","C","C","C","T","C","C","T","C","T","T","G","C","T","G","C","T","G","G","T","G","G","T","G","G","C","C","C","T","G","G","G","G","A","T","C","G","G","C","C","T","C","T","T",
"C","A","T","G","C","G","A","A","G","G","C","G","C","C","A","C","A","T","C","G","T","T","C","G","G","A","A","G","C","G","C","A","C","G","C","T","G","C","G","G","A","G","G","C","T","G","C","T","G","C","A","G","G","A","G","A","G","G","G","A","G","C","T","T","G","T","G","G","A","G","C","C","T","C","T","T","A","C","A","C","C","C","A","G","T","G","G","A","G","A","A","G","C","T","C","C","C","A","A","C",
"C","A","A","G","C","T","C","T","C","T","T","G","A","G","G","A","T","C","T","T","G","A","A","G","G","A","A","A","C","T","G","A","A","T","T","C","A","A","A","A","A","G","A","T","C","A","A","A","G","T","G","C","T","G","G","G","C","T","C","C","G","G","T","G","C","G","T","T","C","G","G","C","A","C","G","G","T","G","T","A","T","A","A","G","G","G","A","C","T","C","T","G","G","A","T","C","C","C","A","G",
"A","A","G","G","T","G","A","G","A","A","A","G","T","T","A","A","A","A","T","T","C","C","C","G","T","C","G","C","T","A","T","C","A","A","G","G","A","A","T","T","A","A","G","A","G","A","A","G","C","A","A","C","A","T","C","T","C","C","G","A","A","A","G","C","C","A","A","C","A","A","G","G","A","A","A","T","C","C","T","C","G","A","T","G","A","A","G","C","C","T","A","C","G","T","G","A","T","G","G","C",
"C","A","G","C","G","T","G","G","A","C","A","A","C","C","C","C","C","A","C","G","T","G","T","G","C","C","G","C","C","T","G","C","T","G","G","G","C","A","T","C","T","G","C","C","T","C","A","C","C","T","C","C","A","C","C","G","T","G","C","A","G","C","T","C","A","T","C","A","C","G","C","A","G","C","T","C","A","T","G","C","C","C","T","T","C","G","G","C","T","G","C","C","T","C","C","T","G","G","A","C",
"T","A","T","G","T","C","C","G","G","G","A","A","C","A","C","A","A","A","G","A","C","A","A","T","A","T","T","G","G","C","T","C","C","C","A","G","T","A","C","C","T","G","C","T","C","A","A","C","T","G","G","T","G","T","G","T","G","C","A","G","A","T","C","G","C","A","A","A","G","G","G","C","A","T","G","A","A","C","T","A","C","T","T","G","G","A","G","G","A","C","C","G","T","C","G","C","T","T","G","G",
"T","G","C","A","C","C","G","C","G","A","C","C","T","G","G","C","A","G","C","C","A","G","G","A","A","C","G","T","A","C","T","G","G","T","G","A","A","A","A","C","A","C","C","G","C","A","G","C","A","T","G","T","C","A","A","G","A","T","C","A","C","A","G","A","T","T","T","T","G","G","G","C","T","G","G","C","C","A","A","A","C","T","G","C","T","G","G","G","T","G","C","G","G","A","A","G","A","G","A","A",
"A","G","A","A","T","A","C","C","A","T","G","C","A","G","A","A","G","G","A","G","G","C","A","A","A","G","T","G","C","C","T","A","T","C","A","A","G","T","G","G","A","T","G","G","C","A","T","T","G","G","A","A","T","C","A","A","T","T","T","T","A","C","A","C","A","G","A","A","T","C","T","A","T","A","C","C","C","A","C","C","A","G","A","G","T","G","A","T","G","T","C","T","G","G","A","G","C","T","A","C",
"G","G","G","G","T","G","A","C","C","G","T","T","T","G","G","G","A","G","T","T","G","A","T","G","A","C","C","T","T","T","G","G","A","T","C","C","A","A","G","C","C","A","T","A","T","G","A","C","G","G","A","A","T","C","C","C","T","G","C","C","A","G","C","G","A","G","A","T","C","T","C","C","T","C","C","A","T","C","C","T","G","G","A","G","A","A","A","G","G","A","G","A","A","C","G","C","C","T","C","C",
"C","T","C","A","G","C","C","A","C","C","C","A","T","A","T","G","T","A","C","C","A","T","C","G","A","T","G","T","C","T","A","C","A","T","G","A","T","C","A","T","G","G","T","C","A","A","G","T","G","C","T","G","G","A","T","G","A","T","A","G","A","C","G","C","A","G","A","T","A","G","T","C","G","C","C","C","A","A","A","G","T","T","C","C","G","T","G","A","G","T","T","G","A","T","C","A","T","C","G","A",
"A","T","T","C","T","C","C","A","A","A","A","T","G","G","C","C","C","G","A","G","A","C","C","C","C","C","A","G","C","G","C","T","A","C","C","T","T","G","T","C","A","T","T","C","A","G","G","G","G","G","A","T","G","A","A","A","G","A","A","T","G","C","A","T","T","T","G","C","C","A","A","G","T","C","C","T","A","C","A","G","A","C","T","C","C","A","A","C","T","T","C","T","A","C","C","G","T","G","C","C",
"C","T","G","A","T","G","G","A","T","G","A","A","G","A","A","G","A","C","A","T","G","G","A","C","G","A","C","G","T","G","G","T","G","G","A","T","G","C","C","G","A","C","G","A","G","T","A","C","C","T","C","A","T","C","C","C","A","C","A","G","C","A","G","G","G","C","T","T","C","T","T","C","A","G","C","A","G","C","C","C","C","T","C","C","A","C","G","T","C","A","C","G","G","A","C","T","C","C","C","C",
"T","C","C","T","G","A","G","C","T","C","T","C","T","G","A","G","T","G","C","A","A","C","C","A","G","C","A","A","C","A","A","T","T","C","C","A","C","C","G","T","G","G","C","T","T","G","C","A","T","T","G","A","T","A","G","A","A","A","T","G","G","G","C","T","G","C","A","A","A","G","C","T","G","T","C","C","C","A","T","C","A","A","G","G","A","A","G","A","C","A","G","C","T","T","C","T","T","G","C","A",
"G","C","G","A","T","A","C","A","G","C","T","C","A","G","A","C","C","C","C","A","C","A","G","G","C","G","C","C","T","T","G","A","C","T","G","A","G","G","A","C","A","G","C","A","T","A","G","A","C","G","A","C","A","C","C","T","T","C","C","T","C","C","C","A","G","T","G","C","C","T","G","A","A","T","A","C","A","T","A","A","A","C","C","A","G","T","C","C","G","T","T","C","C","C","A","A","A","A","G","G",
"C","C","C","G","C","T","G","G","C","T","C","T","G","T","G","C","A","G","A","A","T","C","C","T","G","T","C","T","A","T","C","A","C","A","A","T","C","A","G","C","C","T","C","T","G","A","A","C","C","C","C","G","C","G","C","C","C","A","G","C","A","G","A","G","A","C","C","C","A","C","A","C","T","A","C","C","A","G","G","A","C","C","C","C","C","A","C","A","G","C","A","C","T","G","C","A","G","T","G","G",
"G","C","A","A","C","C","C","C","G","A","G","T","A","T","C","T","C","A","A","C","A","C","T","G","T","C","C","A","G","C","C","C","A","C","C","T","G","T","G","T","C","A","A","C","A","G","C","A","C","A","T","T","C","G","A","C","A","G","C","C","C","T","G","C","C","C","A","C","T","G","G","G","C","C","C","A","G","A","A","A","G","G","C","A","G","C","C","A","C","C","A","A","A","T","T","A","G","C","C","T",
"G","G","A","C","A","A","C","C","C","T","G","A","C","T","A","C","C","A","G","C","A","G","G","A","C","T","T","C","T","T","T","C","C","C","A","A","G","G","A","A","G","C","C","A","A","G","C","C","A","A","A","T","G","G","C","A","T","C","T","T","T","A","A","G","G","G","C","T","C","C","A","C","A","G","C","T","G","A","A","A","A","T","G","C","A","G","A","A","T","A","C","C","T","A","A","G","G","G","T","C",
"G","C","G","C","C","A","C","A","A","A","G","C","A","G","T","G","A","A","T","T","T","A","T","T","G","G","A","G","C","A"];
var aminoacids_degenerateCode = {"A":["GCT","GCC","GCA","GCG"], "R":["CGT","CGC","CGA","CGG","AGA","AGG"], "N":["AAT","AAC"], "D":["GAT","GAC"], "C":["TGT","TGC"], "Q":["CAA","CAG"], "E":["GAA","GAG"], "G":["GGT","GGC","GGA","GGG"], "H":["CAT","CAC"], "I":["ATT","ATC","ATA"], "L":["TTA","TTG","CTT","CTC","CTA","CTG"], "K":["AAA","AAG"], "M":["ATG"], "F":["TTT","TTC"], "P":["CCT","CCC","CCA","CCG"], "S":["TCT","TCC","TCA","TCG","AGT","AGC"], "T":["ACT","ACC","ACA","ACG"], "W":["TGG"], "Y":["TAT","TAC"], "V":["GTT","GTC","GTA","GTG"], "X":["TAA","TGA","TAG"]};
var fasta = [];
var fasta_sorted = [];
var aminoacids = {"A":["Alanine","Nonpolar"],"R":["Arginine","Positive"],"N":["Asparagine","Polar"],"D":["Aspartic-Acid","Negative"],"C":["Cysteine","Polar"],"Q":["Glutamine","Polar"],"E":["Glutamic-Acid","Negative"],"G":["Glycine","Nonpolar"],"H":["Histidine","Positive"],"I":["Isoleucine","Nonpolar"],"L":["Leucine","Nonpolar"],"K":["Lysine","Positive"],"M":["Methionine","Nonpolar"],"F":["Phenylalanine","Aromatic"],"P":["Proline","Nonpolar"],"S":["Serine","Polar"],"T":["Threonine","Polar"],"W":["Tryptophan","Aromatic"],"Y":["Tyrosine","Aromatic"],"V":["Valine","Nonpolar"]};
var aminoacids_OtherProperties = {"A":["Hydrophobic","Aliphatic"],"R":["Hydrophilic","H-bonding","Basic","Ionizable"],"N":["Hydrophilic"],"D":["Hydrophilic","H-bonding","Acidic","Ionizable"],"C":["Hydrophilic","H-bonding","Sulfur-containing","Acidic","Ionizable","Disulfide-bond"],"Q":["Hydrophilic","H-bonding"],"E":["Hydrophilic","H-bonding","Acidic","Ionizable"],"G":["Hydrophobic","Aliphatic"],"H":["Hydrophilic","H-bonding","Basic","Ionizable","All-aromatic"],"I":["Hydrophobic","Aliphatic"],"L":["Hydrophobic","Aliphatic"],"K":["Hydrophilic","H-bonding","Basic","Ionizable"],"M":["Hydrophobic","Sulfur-containing"],"F":["Hydrophobic","All-aromatic"],"P":["Hydrophobic","Aliphatic","Cyclic"],"S":["Hydrophilic","H-bonding"],"T":["Hydrophilic","H-bonding"],"W":["Hydrophobic","H-bonding","All-aromatic"],"Y":["Hydrophobic","H-bonding","Ionizable","All-aromatic"],"V":["Hydrophobic","Aliphatic"]};
var screen_aspect = 16/9;
var R_Click = 0;
var coordinates = [0,0];
var coordinates_time = [];
d3.select("#master")
.attr("onmouseup",function(){return "enlargeEndMU(evt)"})
.on("mousemove", function(){
coordinates = d3.mouse(this);
if (R_Click == 1) {
if (coordinates_time.length >= 4) {
coordinates_time.shift();
coordinates_time.shift();
coordinates_time.push(coordinates[0]);
coordinates_time.push(coordinates[1]);
} else {
coordinates_time.push(coordinates[0]);
coordinates_time.push(coordinates[1]);
}
var distance = Math.sqrt(Math.pow((coordinates_time[2]-coordinates_time[0]),2)+Math.pow((coordinates_time[3]-coordinates_time[1]),2));
var distance_origin = Math.sqrt(Math.pow((coordinates[0]-3000),2)+Math.pow((coordinates[1]-3000),2));
var sensitivity = 0.01;
var radius_max = 3000*Math.sqrt(2);
var factorX = 0.2+0.5*Math.pow((distance_origin/radius_max),2);
var factorY = screen_aspect*factorX;
var Xdiff = (coordinates_time[2]-coordinates_time[0]);
var Ydiff = (coordinates_time[3]-coordinates_time[1]);
var sine = Math.abs(Ydiff/Math.sqrt(Math.pow(Xdiff,2)+Math.pow(Ydiff,2)));
var cosine = Math.abs(Xdiff/Math.sqrt(Math.pow(Xdiff,2)+Math.pow(Ydiff,2)));
var constantX = factorX*Math.pow(cosine,4/7);
var constantY = factorY*Math.pow(sine,4/7);
var Xpos = constantX*Xdiff;
var Ypos = constantY*Ydiff;
if (distance >= sensitivity) {
window.scrollBy(Xpos/4,Ypos/4);
}
}
})
.on("contextmenu", function (){
d3.select("#rightclick1").remove();
d3.select("#rightclick2").remove();
if (R_Click == 0) {
R_Click = 1;
} else {
R_Click = 0;
//hide or show overview tabs to prevent overlap
hideOrshowhtmlElements("1",true);
}
if (R_Click == 1) {
d3.select("#annotation").append("text").text("Use the outer region to scroll.").attr("id","rightclick1").attr("text-anchor","middle").attr("x", 3000).attr("y", 3200).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("Right-click to cancel autoscroll.").attr("id","rightclick2").attr("text-anchor","middle").attr("x", 3000).attr("y", 3000).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#rightclick1").transition().attr("fill-opacity",0.9).delay(500).duration(500);
d3.select("#rightclick2").transition().attr("fill-opacity",0.9).delay(500).duration(500);
//hide or show overview tabs to prevent overlap
hideOrshowhtmlElements("0",true);
}
})
.on("click", function () {
if ((Relocate == 1)&&(MouseOut == 1)) {
d3.select("#GraphSvg").transition().attr("x",function () {return coordinates[0]-50;}).attr("y",function () {return coordinates[1]-50;}).delay(0).duration(500);
GraphNewLocation = [];
GraphNewLocation.push(coordinates[0]-50);
GraphNewLocation.push(coordinates[1]-50);
Relocate = 0;
}
if (relocateWindow !== "") {
d3.select(relocateWindow).transition().attr("x",function(){return coordinates[0]-50;}).attr("y",function(){return coordinates[1]-50;}).delay(0).duration(500);
relocateWindow = "";
}
});
//***Tile and SNV databases***
//default = "dbSNP","ClinVar","HGMD"
var TileDB = ["All","None","dbSNP","ClinVar","HGMD","substitution","deletion","insertion","frameshift"];
var MutDB = ["All","Stop","Synonymous","Nonsynonymous","pXtoY","None","dbSNP","ClinVar","HGMD"];
//***Tile and SNV databases***
var list_seq = d3.select(document.body).select("#master").selectAll(".sequence");
var list_scat = d3.select(document.body).select("#master").selectAll(".scatter");
var list_con = d3.select(document.body).select("#master").select("#plot0").selectAll("*");
var domainList = ["All","Coil"];
var list_mut = d3.select(document.body).select("#master").selectAll(".mut");
var list_connector = d3.select(document.body).select("#master").selectAll(".connector");
var list_tile = d3.select(document.body).select("#master").selectAll(".tile");
var ids = {"seq":[],"scat":[],"con":[],"mut":[],"connector":[],"tile":[]};
for (var i = 0;i<list_seq[0].length;i++) {
var individual_id = d3.select(list_seq[0][i]).attr("id");
ids["seq"].push("#"+individual_id);
}
for (var i = 0;i<list_scat[0].length;i++) {
var individual_id = d3.select(list_scat[0][i]).attr("id");
ids["scat"].push("#"+individual_id);
}
(function () {for (var i = 1;i<list_con[0].length;i++) {
var individual_id = d3.select(list_con[0][i]).attr("id");
ids["con"].push("#"+individual_id);
if(d3.select("#"+individual_id).attr("class") !== null && d3.select("#"+individual_id).attr("class") !== undefined) {
var clss = d3.select("#"+individual_id).attr("class");
if (!(domainList.some(function(d){return d===clss}))) {
domainList.push(clss);
}
clss = clss+" allCons";
d3.select("#"+individual_id).attr("class",clss);
} else {
d3.select("#"+individual_id).attr("class","allCons");
}
}})();
for (var i = 0;i<list_mut[0].length;i++) {
var individual_id = d3.select(list_mut[0][i]).attr("id");
ids["mut"].push("#"+individual_id);
var database_source = d3.select(list_mut[0][i]).attr("dbsource");
var regexp = new RegExp(database_source,"i");
if ((MutDB.some(function(x){return x.match(regexp);})) || MutDB.length >= 20){
} else {
MutDB.push(database_source);
}
}
for (var i = 0;i<list_connector[0].length;i++) {
var individual_id = d3.select(list_connector[0][i]).attr("id");
ids["connector"].push("#"+individual_id);
}
//Original Tile Properties
var Or_Tile_Stroke_Color = [];
var Or_Tile_Stroke_Width = [];
var Or_Tile_Coordinates = [];
var Or_Tile_FrameCharacter = [];
var Or_Tile_Fill_Color = [];
//Original Tile Properties
for (var i = 0;i<list_tile[0].length;i++) {
var individual_id = d3.select(list_tile[0][i]).attr("id");
var stroke_color = d3.select(list_tile[0][i]).style("stroke");
if (stroke_color == null | stroke_color === 'undefined') {
stroke_color = d3.select(list_tile[0][i]).style("fill");
}
var stroke_width = d3.select(list_tile[0][i]).style("stroke-width");
if (stroke_width == null | stroke_color === 'undefined') {
stroke_width = 0;
}
ids["tile"].push("#"+individual_id);
Or_Tile_Stroke_Color.push(stroke_color);
Or_Tile_Stroke_Width.push(stroke_width);
var TileHash = {};
var TilePathElements = d3.select(ids["tile"][i]).attr("d").split(/[MLAZ,]|\s+/);
TileHash["TopLeftCornerx"] = TilePathElements[20];
TileHash["TopLeftCornery"] = TilePathElements[21];
TileHash["TopRightCornerx"] = TilePathElements[12];
TileHash["TopRightCornery"] = TilePathElements[13];
Or_Tile_Coordinates.push(TileHash);
var frameshift;
if (individual_id.match(/frameshift/)) {
frameshift = " with frameshift";
} else {
frameshift = "";
}
Or_Tile_FrameCharacter.push(frameshift);
Or_Tile_Fill_Color.push(d3.select(list_tile[0][i]).style("fill"));
var database_source = d3.select(ids["tile"][i]).attr("dbsource");
var regexp = new RegExp(database_source,"i");
if ((TileDB.some(function(x){return x.match(regexp);})) || TileDB.length >= 20){
} else {
TileDB.push(database_source);
}
}
//***Fasta***
for (var i = 0;i<list_seq[0].length;i++) {
var individual_id = d3.select(list_seq[0][i]).attr("id");
fasta.push(individual_id);
}
for (var i = 0;i<fasta.length;i++) {
fasta[i] = fasta[i].replace(/^seq_/,"");
fasta[i] = fasta[i].split("_");
}
for (var i = 0;i<fasta.length;i++) {
for (var j = 0;j<fasta.length;j++) {
if (fasta[j][1]==i+1) {
fasta_sorted.push(fasta[j]);
}
}
}
for (var i = 0;i<fasta_sorted.length;i++) {
fasta_sorted[i] = fasta_sorted[i][0];
for (var j in aminoacids) {
if (aminoacids[j][0] == fasta_sorted[i])
fasta_sorted[i] = j;
}
}
//***Fasta***
//***Original Radial Positioning of Conservation Elements***
var HalfTheWidthAngleOfElement = 355/(2*fasta_sorted.length);
//***There is a linearly increasing angle mistake that is maximized towards the end to approximately 1 degrees.
//***I calibrated this using CALR and BRCA1 and seems to work well. Some elements in the formula below is redundant however I will keep it explicit.
var CorrectionFactor = 1.25*fasta_sorted.length/417*HalfTheWidthAngleOfElement/fasta_sorted.length;
//***Original Radial Positioning of Conservation Elements***
//***Original Properties of Drawing elements***
var Or_Seq_Font_Size = d3.select(ids["seq"][0]).attr("font-size");
var Or_Scat_Stroke_Width = d3.select(ids["scat"][0]).attr("stroke-width");
var Or_Scat_Stroke_Color = d3.select(ids["scat"][0]).attr("stroke");
var Or_Scat_Size = 45;
var Or_Con_Stroke_Width = d3.select(ids["con"][0]).style("stroke-width");
var Or_Con_Stroke_Color = [];
(function (){
for (var i = 0;i<ids["con"].length;i++) {
Or_Con_Stroke_Color.push(d3.select(ids["con"][i]).style("stroke"));
}
})();
var Or_Con_Fill_Color = [];
(function (){
for (var i = 0;i<ids["con"].length;i++) {
Or_Con_Fill_Color.push(d3.select(ids["con"][i]).style("fill"));
}
})();
var Or_Mut_Font_Size = d3.select(ids["mut"][0]).attr("font-size");
var Or_Mut_Fill_Color = [];
(function (){
for (var i = 0;i<ids["mut"].length;i++) {
Or_Mut_Fill_Color.push(d3.select(ids["mut"][i]).style("fill"));
}
})();
var Or_Connector_Font_Size = d3.select(ids["connector"][0]).attr("font-size");
//***Original Properties of Drawing elements***
var code = "";
var w = 6000;
var h = 6000;
var padding = 200;
d3.select("body").style("background-color", "white");
//***Options Control***
var optionStatus = "open";
d3.select("#annotation").append("text").text("Hide Options").attr("id","HideOptions").attr("text-anchor","middle").attr("x", 200).attr("y", 200).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#HideOptions")
.on("mouseover",function() {
d3.select("#HideOptions").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#HideOptions").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
d3.selectAll(".Options").transition().attr("fill-opacity",0.0).delay(0).duration(500);
d3.selectAll(".Options_Circle").data(function () {return d3.keys(aminoacids);}).each(function(d,i) {d3.select("#AminoacidsChoiceCircle_"+String(d)).transition().attr("stroke-opacity",function(d,i) {if (aminoacids[d][2]=="Clicked"){return 0.0;}else{return 0.0}}).delay(0).duration(500);});
d3.select("#LHlight").transition().attr("stroke-opacity",0.0).delay(0).duration(500);
//d3.select("#LEbulb").transition().attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#RHlight").transition().attr("stroke-opacity",0.0).delay(0).duration(500);
//d3.select("#REbulb").transition().attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#LHtext").transition().attr("fill-opacity",0.0).attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#RHtext").transition().attr("fill-opacity",0.0).attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#LHtext2").transition().attr("fill-opacity",0.0).attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#RHtext2").transition().attr("fill-opacity",0.0).attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#LIbulb").transition().attr("stroke-opacity",0.0).delay(0).duration(500);
d3.select("#RIbulb").transition().attr("stroke-opacity",0.0).delay(0).duration(500);
d3.selectAll(".DropDownRect").transition().attr("fill-opacity",0.0).delay(0).duration(500);
d3.selectAll(".DropDownText").transition().attr("fill-opacity",0.0).delay(0).duration(500);
d3.selectAll(".DropDownRectSnv").transition().attr("fill-opacity",0.0).delay(0).duration(500);
d3.selectAll(".DropDownTextSnv").transition().attr("fill-opacity",0.0).delay(0).duration(500);
d3.selectAll(".DropDownRectTile").transition().attr("fill-opacity",0.0).delay(0).duration(500);
d3.selectAll(".DropDownTextTile").transition().attr("fill-opacity",0.0).delay(0).duration(500);
//d3.selectAll(".DropDownRectExtract").transition().attr("fill-opacity",0.0).delay(0).duration(500);-->passed to hideOrshow function..
d3.select("#HideOptions").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#ShowOptions").transition().attr("visibility","visible").delay(0).duration(0);
//#ipvWatchIcon
d3.select("#ipvWatchIcon").style("opacity",0).style("visibility","hidden");
//#ipvWatchIcon
//#colorCoding
d3.select("#colorCoding").style("opacity",0).style("visibility","hidden");
//#colorCoding
//#neonEffect
d3.select("#neonEffect").style("opacity",0).style("visibility","hidden");
//#neonEffect
//#htmlElements and Input boxes
hideOrshowhtmlElements("0",false,false,true);
//#htmlElements and Input boxes
//overview tabs
d3.selectAll(".overviews").style("opacity",0).style("visibility","hidden");
//overview tabs
//Update option status
optionStatus = "closed";
//Update option status
//File Upload Elements
d3.selectAll(".actionOptions").transition().attr("fill-opacity",0.0).attr("visibility","hidden").delay(0).duration(500);
d3.select("#fileUploadIcon").style("opacity",0).attr("visibility","hidden");
//File Upload Elements
});
d3.select("#annotation").append("text").text("Show Options").attr("id","ShowOptions").attr("text-anchor","middle").attr("x", 200).attr("y", 200).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","hidden");
d3.select("#ShowOptions")
.on("mouseover",function() {
d3.select("#ShowOptions").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#ShowOptions").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
d3.selectAll(".Options").transition().attr("fill-opacity", 0.9).delay(0).duration(500);
d3.selectAll(".Options_Circle").data(function () {return d3.keys(aminoacids);}).each(function(d,i) {d3.select("#AminoacidsChoiceCircle_"+String(d)).transition().attr("stroke-opacity",function(d,i) {if (aminoacids[d][2]=="Clicked"){return 0.9;}else{return 0.0}}).delay(0).duration(500);});
d3.select("#LHlight").transition().attr("stroke-opacity",0.5).delay(0).duration(500);
//d3.select("#LEbulb").transition().attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#RHlight").transition().attr("stroke-opacity",0.5).delay(0).duration(500);
//d3.select("#REbulb").transition().attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#LHtext").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#RHtext").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#LHtext2").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#RHtext2").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#LIbulb").transition().attr("stroke-opacity",0.5).delay(0).duration(500);
d3.select("#RIbulb").transition().attr("stroke-opacity",0.5).delay(0).duration(500);
d3.selectAll(".DropDownRect").transition().attr("fill-opacity",0.9).delay(0).duration(500);
d3.selectAll(".DropDownText").transition().attr("fill-opacity",0.9).delay(0).duration(500);
d3.selectAll(".DropDownRectSnv").transition().attr("fill-opacity",0.9).delay(0).duration(500);
d3.selectAll(".DropDownTextSnv").transition().attr("fill-opacity",0.9).delay(0).duration(500);
d3.selectAll(".DropDownRectTile").transition().attr("fill-opacity",0.9).delay(0).duration(500);
d3.selectAll(".DropDownTextTile").transition().attr("fill-opacity",0.9).delay(0).duration(500);
//d3.selectAll(".DropDownRectExtract").transition().attr("fill-opacity",0.9).delay(0).duration(500);-->passed to hideOrshow function..
d3.select("#ShowOptions").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#HideOptions").transition().attr("visibility","visible").delay(0).duration(0);
//#ipvWatchIcon
d3.select("#ipvWatchIcon").style("opacity",0.62).style("visibility","visible");
//#ipvWatchIcon
//#colorCoding
d3.select("#colorCoding").style("opacity",1.0).style("visibility","visible");
//#colorCoding
//#neonEffect
d3.select("#neonEffect").style("opacity",1.0).style("visibility","visible");
//#neonEffect
//#htmlElements and Input boxes
hideOrshowhtmlElements("1",false,false,true);
//#htmlElements and Input boxes
//overview tabs
d3.selectAll(".overviews").style("opacity",1.0).style("visibility","visible");
//overview tabs
//Update option status
optionStatus = "open";
//Update option status
//File Upload Elements
d3.selectAll(".actionOptions").transition().attr("fill-opacity",0.9).attr("visibility","visible").delay(0).duration(500);
d3.select("#fileUploadIcon").style("opacity",0.62).attr("visibility","visible");
//File Upload Elements
});
//***Options Control***
//***background***
d3.select("#annotation").append("text").text("background:black").attr("class","Options").attr("id","backgroundblack").attr("text-anchor","middle").attr("x", 3000).attr("y", 2000).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("background:white").attr("class","Options").attr("id","backgroundwhite").attr("text-anchor","middle").attr("x", 3000).attr("y", 2000).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","hidden");
d3.select("#backgroundblack").on("mouseover", function (){
d3.select("#backgroundblack").transition().attr("fill","Orange").delay(0).duration(100);
})
.on("mouseout", function(){
d3.select("#backgroundblack").transition().attr("fill","DimGray").delay(0).duration(100);
})
.on("click", function (){
d3.select("#backgroundblack").transition("backgroundControlChangeFadeout").attr("visibility","hidden").delay(0).duration(100);
d3.select("body").transition("backgroundBodyChange").style("background-color", "black").delay(100).duration(100);
d3.select("html").transition("backgroundHtmlChange").style("background-color", "black").delay(100).duration(100);
d3.select("#backgroundwhite").transition("backgroundControlChangeFadein").attr("visibility","visible").delay(200).duration(100);
d3.selectAll(".Options_Lights").transition("backgroundLightsChange").attr("fill","DodgerBlue").attr("stroke","DodgerBlue").delay(300).duration(250);
//Html Input Background
d3.selectAll(".htmlElementsInputs").style("background","rgba(30,144,255,0.4)");
//Html Input Background
});
d3.select("#backgroundwhite").on("mouseover", function (){
d3.select("#backgroundwhite").transition().attr("fill","Orange").delay(0).duration(100);
})
.on("mouseout", function(){
d3.select("#backgroundwhite").transition().attr("fill","DimGray").delay(0).duration(100);
})
.on("click", function (){
d3.select("#backgroundwhite").transition("backgroundControlChangeFadeout").attr("visibility","hidden").delay(0).duration(100);
d3.select("body").transition("backgroundBodyChange").style("background-color", "white").delay(100).duration(100);
d3.select("html").transition("backgroundHtmlChange").style("background-color", "white").delay(100).duration(100);
d3.select("#backgroundblack").transition("backgroundControlChangeFadein").attr("visibility","visible").delay(200).duration(100);
d3.selectAll(".Options_Lights").transition("backgroundLightsChange").attr("fill","Orange").attr("stroke","Orange").delay(300).duration(250);
//Html Input Background
d3.selectAll(".htmlElementsInputs").style("background","rgba(255,165,0,0.4)");
//Html Input Background
});
//***background***
//***Aminoacid Properties***
var AminoAcidProperties = ["Nonpolar","Polar","Positive","Negative","Aromatic","All-aromatic","Aliphatic","Cyclic","Hydrophobic","Hydrophilic","Acidic","Basic","Ionizable","H-bonding","Disulfide-bond","Sulfur-containing","All","None","Sequence Display"];
var AminoAcidPropertiesCount = 16;
var DropDownClick = 0;
var WhatsClicked = [];
d3.select("#annotation").append("text").text(function() {return AminoAcidProperties[AminoAcidPropertiesCount];}).attr("class","Options").attr("id","PropChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2275).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible")//.transition().attr("fill-opacity",0.9).delay(0).duration(750)
.on("click",function() {
if (DropDownClick == 0) {
d3.select("#annotation").call(DropDown);
} else {
d3.selectAll(".DropDownRect").remove();
d3.selectAll(".DropDownText").remove();
}
if (DropDownClick == 0) {
DropDownClick = 1;
} else {
DropDownClick = 0;
}
});
d3.select("#PropChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.select("#annotation").append("path").attr("d","M 2700,2200 L 2675,2250 L 2700,2300 Z").attr("class","Options").attr("id","Ltriangle").attr("fill","DimGray").attr("fill-opacity", 0.8)
.on("mouseover",function() {
d3.select("#Ltriangle").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#Ltriangle").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
if (AminoAcidPropertiesCount == 0) {
AminoAcidPropertiesCount = 18;
} else {
AminoAcidPropertiesCount = AminoAcidPropertiesCount - 1;
}
d3.select("#PropChoice").remove();
d3.select("#annotation").append("text").text(function(){return AminoAcidProperties[AminoAcidPropertiesCount];}).attr("class","Options").attr("id","PropChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2275).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("click",function() {
if (DropDownClick == 0) {
d3.select("#annotation").call(DropDown);
} else {
d3.selectAll(".DropDownRect").remove();
d3.selectAll(".DropDownText").remove();
}
if (DropDownClick == 0) {
DropDownClick = 1;
} else {
DropDownClick = 0;
}
});
d3.select("#PropChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.selectAll(".scatter").data(ids["scat"]).each(function(d,i) {var ResidueNumber = d.replace(/^.*scat_.*_/,"");d3.select(d).transition().attr("fill-opacity",function (){var aminoacid = fasta_sorted[ResidueNumber-1];if(AminoAcidProperties[AminoAcidPropertiesCount] == "All" || d.match(AminoAcidProperties[AminoAcidPropertiesCount]) || aminoacids_OtherProperties[fasta_sorted[ResidueNumber-1]].some(function(x){return x.match(AminoAcidProperties[AminoAcidPropertiesCount]);}) || (AminoAcidProperties[AminoAcidPropertiesCount] == "Sequence Display" && aminoacids[aminoacid][2] == "Clicked")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
WhatsClicked = [];
for (i=0;i<d3.keys(aminoacids).length;i++) {
if(aminoacids[d3.keys(aminoacids)[i]][2]=="Clicked") {
WhatsClicked.push(d3.keys(aminoacids)[i]);
}
}
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
});
d3.select("#annotation").append("path").attr("d","M 3300,2200 L 3325,2250 L 3300,2300 Z").attr("class","Options").attr("id","Rtriangle").attr("fill","DimGray").attr("fill-opacity", 0.8)
.on("mouseover",function() {
d3.select("#Rtriangle").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#Rtriangle").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
if (AminoAcidPropertiesCount == 18) {
AminoAcidPropertiesCount = 0;
} else {
AminoAcidPropertiesCount = AminoAcidPropertiesCount + 1;
}
d3.select("#PropChoice").remove();
d3.select("#annotation").append("text").text(function(){return AminoAcidProperties[AminoAcidPropertiesCount];}).attr("class","Options").attr("id","PropChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2275).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("click",function() {
if (DropDownClick == 0) {
d3.select("#annotation").call(DropDown);
} else {
d3.selectAll(".DropDownRect").remove();
d3.selectAll(".DropDownText").remove();
}
if (DropDownClick == 0) {
DropDownClick = 1;
} else {
DropDownClick = 0;
}
});
d3.select("#PropChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.selectAll(".scatter").data(ids["scat"]).each(function(d,i) {var ResidueNumber = d.replace(/^.*scat_.*_/,"");d3.select(d).transition().attr("fill-opacity",function (){var aminoacid = fasta_sorted[ResidueNumber-1];if(AminoAcidProperties[AminoAcidPropertiesCount] == "All" || d.match(AminoAcidProperties[AminoAcidPropertiesCount]) || aminoacids_OtherProperties[fasta_sorted[ResidueNumber-1]].some(function(x){return x.match(AminoAcidProperties[AminoAcidPropertiesCount]);}) || (AminoAcidProperties[AminoAcidPropertiesCount] == "Sequence Display" && aminoacids[aminoacid][2] == "Clicked")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
WhatsClicked = [];
for (i=0;i<d3.keys(aminoacids).length;i++) {
if(aminoacids[d3.keys(aminoacids)[i]][2]=="Clicked") {
WhatsClicked.push(d3.keys(aminoacids)[i]);
}
}
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
});
//***Aminoacid Properties***
//***Aminoacid Choice
//***letters
d3.select("#annotation")
.selectAll("letters")
.data(function () {return d3.keys(aminoacids);})
.enter()
.append("text")
.text(function (d,i) {return d;})
.attr("text-anchor","middle")
.attr("x",function (d,i) {return 2400+(i%10)*133;})
.attr("y",function (d,i) {return 2550+parseInt((i+1)/11)*100;})
.attr("font-size","60px")
.attr("fill","DimGray")
.attr("stroke","DimGray")
.attr("fill-opacity",0.9)
.attr("stroke-opacity",0.0)
.attr("id",function(d,i) {return "AminoacidsChoice_"+String(d);})
.attr("class","Options");
//***letter;
//***circles***
d3.select("#annotation")
.selectAll("circles")
.data(function () {return d3.keys(aminoacids);})
.enter()
.append("circle")
.attr("r","42px")
.attr("cx",function (d,i) {return 2400+(i%10)*133;})
.attr("cy",function (d,i) {return 2525+parseInt((i+1)/11)*100;})
.attr("fill","DimGray")
.attr("stroke","DimGray")
.attr("stroke-width", "13px")
.attr("fill-opacity",0.0)
.attr("stroke-opacity",function(d,i) {if (aminoacids[d][2]=="Clicked"){return 0.9;}else{return 0.0;}})
.attr("id",function(d,i) {return "AminoacidsChoiceCircle_"+String(d);})
.attr("class","Options_Circle")
.on("mouseover",function(d,i) {
if (optionStatus === "open") {
d3.select(this).transition().attr("stroke","Orange").attr("r","100px").delay(0).duration(250);
d3.select("#AminoacidsChoice_"+String(d)).transition().attr("fill","Orange").attr("font-size","150px").delay(0).duration(250);
}
})
.on("mouseout",function(d,i) {
if (optionStatus === "open") {
d3.select(this).transition().attr("stroke",function(d,i) {if (aminoacids[d][2]=="Clicked"){return "Orange";}else{return "DimGray";}}).attr("stroke-opacity",function(d,i) {if (aminoacids[d][2]=="Clicked"){return 0.9;}else{return 0.0;}}).attr("r","42px").delay(0).duration(250);
d3.select("#AminoacidsChoice_"+String(d)).transition().attr("fill",function(d,i) {if (aminoacids[d][2]=="Clicked"){return "Orange";}else{return "DimGray";}}).attr("font-size","60px").delay(0).duration(250);
}
})
.on("click",function(d,i) {
if (optionStatus === "open") {
var LetterOfSubject = d;
d3.select(this).transition().attr("stroke",function(d,i) {if (aminoacids[d][2]=="Clicked"){return "DimGray";}else{return "Orange";}}).attr("stroke-opacity",function(d,i) {if (aminoacids[d][2]=="Clicked"){return 0.0;}else{return 0.9;}}).attr("r","42px").delay(0).duration(250);
d3.select("#AminoacidsChoice_"+String(d)).transition().attr("fill",function(d,i) {if (aminoacids[d][2]=="Clicked"){return "DimGray";}else{return "Orange";}}).attr("font-size","60px").delay(0).duration(250);
if (aminoacids[d][2]=="Clicked") {
d3.selectAll(".sequence").data(ids["seq"]).each(function(d,i) {var IdOfSubject = d3.select(d).attr("id"); if(IdOfSubject.match(aminoacids[LetterOfSubject][0])){d3.select(d).transition().attr("fill-opacity",0.0).attr("visibility","hidden").delay(0).duration(750);}});
} else {
d3.selectAll(".sequence").data(ids["seq"]).each(function(d,i) {var IdOfSubject = d3.select(d).attr("id"); if(IdOfSubject.match(aminoacids[LetterOfSubject][0])){d3.select(d).transition().attr("fill-opacity",1.0).attr("visibility","visible").delay(0).duration(750);}});
}
if (aminoacids[d][2]=="Clicked") {
aminoacids[d].pop();
} else {
aminoacids[d][2] = "Clicked";
}
}
});
//***circles***
//***Mass Selection***
d3.select("#annotation").append("path").attr("d","M 1900,2500 L 2300,2550 L 2350,2650").attr("class","Options_Lights").attr("id","LHlight").attr("fill","Orange").attr("fill-opacity", 0.0).attr("stroke","Orange").attr("stroke-opacity",0.5).attr("stroke-width","10px");
//d3.select("#annotation").append("path").attr("d","M 1920,2595, Q 1950,2620, 1980,2595").attr("class","Options_Lights").attr("id","LEbulb").attr("fill","Orange").attr("fill-opacity", 0.0).attr("stroke","Orange").attr("stroke-opacity",0.5).attr("stroke-width","10px");
d3.select("#annotation").append("path").attr("d","M 4100,2500 L 3700,2550 L 3650,2650").attr("class","Options_Lights").attr("id","RHlight").attr("fill","Orange").attr("fill-opacity", 0.0).attr("stroke","Orange").attr("stroke-opacity",0.5).attr("stroke-width","10px");
//d3.select("#annotation").append("path").attr("d","M 4080,2595, Q 4050,2620, 4020,2595").attr("class","Options_Lights").attr("id","REbulb").attr("fill","Orange").attr("fill-opacity", 0.0).attr("stroke","Orange").attr("stroke-opacity",0.5).attr("stroke-width","10px");
d3.select("#annotation").append("text").text("Clear").attr("class","Options_Lights").attr("id","LHtext").attr("text-anchor","middle").attr("x", 2000).attr("y", 2575).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.5).attr("stroke-opacity",0.5).attr("visibility","visible")
.on("mouseover",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#LHtext").transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);
d3.select("#LHlight").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").attr("filter",function() {if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)){return "url(#NeonGlow)";}else{return null;}}).delay(0).duration(750);
//d3.select("#LEbulb").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("mouseout",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#LHtext").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(750);
d3.select("#LHlight").transition().attr("stroke-opacity",0.5).attr("stroke-width","10px").attr("filter",null).delay(0).duration(750);
//d3.select("#LEbulb").transition().attr("stroke-opacity",0.5).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("click",function() {
d3.selectAll(".Options_Circle").transition().attr("stroke","DimGray").attr("stroke-opacity",0.0).attr("r","42px").delay(0).duration(250);
d3.selectAll(".sequence").transition().attr("fill-opacity",0.0).attr("visibility","hidden").delay(0).duration(750);
for (var key in aminoacids) {
d3.select("#AminoacidsChoice_"+String(key)).transition().attr("fill","DimGray").attr("font-size","60px").delay(0).duration(250);
if (aminoacids[key][2] == "Clicked") {
aminoacids[key].pop();
} else {
}
}
});
d3.select("#annotation").append("text").text("entirE").attr("class","Options_Lights").attr("id","RHtext").attr("text-anchor","middle").attr("x", 4000).attr("y", 2575).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.5).attr("stroke-opacity",0.5).attr("visibility","visible")
.on("mouseover",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#RHtext").transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);
d3.select("#RHlight").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").attr("filter",function() {if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)){return "url(#NeonGlow)";}else{return null;}}).delay(0).duration(750);
//d3.select("#REbulb").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("mouseout",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#RHtext").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(750);
d3.select("#RHlight").transition().attr("stroke-opacity",0.5).attr("stroke-width","10px").attr("filter",null).delay(0).duration(750);
//d3.select("#REbulb").transition().attr("stroke-opacity",0.5).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("click",function() {
d3.selectAll(".Options_Circle").transition().attr("stroke","Orange").attr("stroke-opacity",0.9).attr("r","42px").delay(0).duration(250);
d3.selectAll(".sequence").transition().attr("fill-opacity",1.0).attr("visibility","visible").delay(0).duration(750);
for (var key in aminoacids) {
d3.select("#AminoacidsChoice_"+String(key)).transition().attr("fill","Orange").attr("font-size","60px").delay(0).duration(250);
if (aminoacids[key][2] == "Clicked") {
} else {
aminoacids[key][2] = "Clicked";
}
}
});
//***Mass Selection***
//***Aminoacid Choice
//***FontControl***
var FontSpectrum = ["1.0x","1.5x","2x","2.5x","3x","3.5x","4.0x","4.5x","5.0x"];
var FontSpectrumCount = 0;
d3.select("#annotation").append("text").text(function() {return "Font-Size: "+String(FontSpectrum[FontSpectrumCount]);}).attr("class","Options").attr("id","FontChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2425).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.select("#annotation").append("path").attr("d","M 2600,2350 L 2575,2400 L 2600,2450 Z").attr("class","Options").attr("id","Ltriangle2").attr("fill","DimGray").attr("fill-opacity", 0.8)
.on("mouseover",function() {
d3.select("#Ltriangle2").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#Ltriangle2").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
if (FontSpectrumCount == 0) {
FontSpectrumCount = 8;
} else {
FontSpectrumCount = FontSpectrumCount - 1;
}
d3.select("#FontChoice").remove();
d3.select("#annotation").append("text").text(function() {return "Font-Size: "+String(FontSpectrum[FontSpectrumCount]);}).attr("class","Options").attr("id","FontChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2425).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.selectAll(".sequence").transition().attr("font-size",function() {return parseFloat(Or_Seq_Font_Size)*parseFloat(FontSpectrum[FontSpectrumCount]);}).delay(0).duration(500);
});
d3.select("#annotation").append("path").attr("d","M 3400,2350 L 3425,2400 L 3400,2450 Z").attr("class","Options").attr("id","Rtriangle2").attr("fill","DimGray").attr("fill-opacity", 0.8)
.on("mouseover",function() {
d3.select("#Rtriangle2").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#Rtriangle2").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
if (FontSpectrumCount == 8) {
FontSpectrumCount = 0;
} else {
FontSpectrumCount = FontSpectrumCount + 1;
}
d3.select("#FontChoice").remove();
d3.select("#annotation").append("text").text(function() {return "Font-Size: "+String(FontSpectrum[FontSpectrumCount]);}).attr("class","Options").attr("id","FontChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2425).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.selectAll(".sequence").transition().attr("font-size",function() {return parseFloat(Or_Seq_Font_Size)*parseFloat(FontSpectrum[FontSpectrumCount]);}).delay(0).duration(500);
});
//***FontControl***
//***ConservationControl***
var ConservationSpectrum = ["10","20","30","40","50","60","70","80","90","100"];
var ConservationSpectrumCount = 9;
var ConservationValues = [];
for (var i = 0;i<ids["con"].length;i++) {
var value = d3.select(ids["con"][i]).attr("id");
value = value.replace(/^.*_Conservation-Score_/,"");
value = parseFloat(value);
ConservationValues.push(value);
}
var Max_Con_Value = d3.max(ConservationValues);
d3.select("#annotation").append("text").text(function() {if (ConservationSpectrum[ConservationSpectrumCount] == "100") {return "All";} else {return "%"+String(100-ConservationSpectrum[ConservationSpectrumCount])+" max";}}).attr("class","Options").attr("id","ConsChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2137).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.select("#annotation").append("path").attr("d","M 2800,2075 L 2775,2125 L 2800,2175 Z").attr("class","Options").attr("id","Ltriangle3").attr("fill","DimGray").attr("fill-opacity", 0.8)
.on("mouseover",function() {
d3.select("#Ltriangle3").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#Ltriangle3").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
if (ConservationSpectrumCount == 9) {
ConservationSpectrumCount = 0;
} else {
ConservationSpectrumCount = ConservationSpectrumCount + 1;
}
d3.select("#ConsChoice").remove();
d3.select("#annotation").append("text").text(function() {if (ConservationSpectrum[ConservationSpectrumCount] == "100") {return "All";} else {return "%"+String(100-ConservationSpectrum[ConservationSpectrumCount])+" max";}}).attr("class","Options").attr("id","ConsChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2137).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible").transition().attr("fill-opacity",0.9).delay(0).duration(750);
var Cons_code = "";
for (var i=0;i<ids["con"].length;i++) {
var Cons_code_piece = 'd3.select(ids["con"]['+i+']).transition().attr("fill-opacity",function() {var value = ConservationValues['+i+']; var threshold = (100 - parseFloat(ConservationSpectrum[ConservationSpectrumCount]))/100*Max_Con_Value; if(value < threshold){return 0.0;}else{return 1.0;}}).attr("stroke-opacity",function() {var value = ConservationValues['+i+']; var threshold = (100 - parseFloat(ConservationSpectrum[ConservationSpectrumCount]))/100*Max_Con_Value; if(value < threshold){return 0.0;}else{return 1.0;}}).delay(0).duration(500);';
Cons_code = Cons_code+Cons_code_piece+" ";
}
eval(Cons_code);
});
d3.select("#annotation").append("path").attr("d","M 3200,2075 L 3225,2125 L 3200,2175 Z").attr("class","Options").attr("id","Rtriangle3").attr("fill","DimGray").attr("fill-opacity", 0.8)
.on("mouseover",function() {
d3.select("#Rtriangle3").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#Rtriangle3").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function() {
if (ConservationSpectrumCount == 0) {
ConservationSpectrumCount = 9;
} else {
ConservationSpectrumCount = ConservationSpectrumCount - 1;
}
d3.select("#ConsChoice").remove();
d3.select("#annotation").append("text").text(function() {if (ConservationSpectrum[ConservationSpectrumCount] == "100") {return "All";} else {return "%"+String(100-ConservationSpectrum[ConservationSpectrumCount])+" max";}}).attr("class","Options").attr("id","ConsChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2137).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible").transition().attr("fill-opacity",0.9).delay(0).duration(750);
var Cons_code = "";
for (var i=0;i<ids["con"].length;i++) {
var Cons_code_piece = 'd3.select(ids["con"]['+i+']).transition().attr("fill-opacity",function() {var value = ConservationValues['+i+']; var threshold = (100 - parseFloat(ConservationSpectrum[ConservationSpectrumCount]))/100*Max_Con_Value; if(value < threshold){return 0.0;}else{return 1.0;}}).attr("stroke-opacity",function() {var value = ConservationValues['+i+']; var threshold = (100 - parseFloat(ConservationSpectrum[ConservationSpectrumCount]))/100*Max_Con_Value; if(value < threshold){return 0.0;}else{return 1.0;}}).delay(0).duration(500);';
Cons_code = Cons_code+Cons_code_piece+" ";
}
eval(Cons_code);
});
//***ConservationControl***
//***Database Control***
var DropDownClickSnv = 0;
var DropDownClickTile = 0;
d3.select("#annotation").append("text").text("Snv").attr("class","Options_Lights").attr("id","LHtext2").attr("text-anchor","middle").attr("x", 2175).attr("y", 2600).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.5).attr("stroke-opacity",0.5).attr("visibility","visible")
.on("mouseover",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#LHtext2").transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);
d3.select("#LIbulb").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("mouseout",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#LHtext2").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(750);
d3.select("#LIbulb").transition().attr("stroke-opacity",0.5).attr("stroke-width","12px").delay(0).duration(750);
}
});
d3.select("#annotation").append("path").attr("d","M 2110,2615 Q 2140,2640, 2170,2615 L 2140,2640 Z").attr("class","Options_Lights").attr("id","LIbulb").attr("fill","Orange").attr("fill-opacity", 0.0).attr("stroke","Orange").attr("stroke-opacity",0.5).attr("stroke-width","10px")
.on("mouseover",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#LHtext2").transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);
d3.select("#LIbulb").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("mouseout",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#LHtext2").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(750);
d3.select("#LIbulb").transition().attr("stroke-opacity",0.5).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("click",function() {
if (DropDownClickSnv == 0) {
d3.select("#annotation").call(DropDownSnv);
} else {
d3.selectAll(".DropDownRectSnv").remove();
d3.selectAll(".DropDownTextSnv").remove();
}
if (DropDownClickSnv == 0) {
DropDownClickSnv = 1;
} else {
DropDownClickSnv = 0;
}
});
d3.select("#annotation").append("text").text("tilE").attr("class","Options_Lights").attr("id","RHtext2").attr("text-anchor","middle").attr("x", 3825).attr("y", 2600).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.5).attr("stroke-opacity",0.5).attr("visibility","visible")
.on("mouseover",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#RHtext2").transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);
d3.select("#RIbulb").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("mouseout",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#RHtext2").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(750);
d3.select("#RIbulb").transition().attr("stroke-opacity",0.5).attr("stroke-width","12px").delay(0).duration(750);
}
});
d3.select("#annotation").append("path").attr("d","M 3880,2615 Q 3850,2640, 3820,2615 L 3850,2640 Z").attr("class","Options_Lights").attr("id","RIbulb").attr("fill","Orange").attr("fill-opacity", 0.0).attr("stroke","Orange").attr("stroke-opacity",0.5).attr("stroke-width","10px")
.on("mouseover",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#RHtext2").transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);
d3.select("#RIbulb").transition().attr("stroke-opacity",1.0).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("mouseout",function() {
var HideMode = d3.select("#ShowOptions").attr("visibility");
if (HideMode == "hidden") {
d3.select("#RHtext2").transition().attr("fill-opacity",0.5).attr("stroke-opacity",0.5).delay(0).duration(750);
d3.select("#RIbulb").transition().attr("stroke-opacity",0.5).attr("stroke-width","12px").delay(0).duration(750);
}
})
.on("click",function() {
if (DropDownClickTile == 0) {
d3.select("#annotation").call(DropDownTile);
} else {
d3.selectAll(".DropDownRectTile").remove();
d3.selectAll(".DropDownTextTile").remove();
}
if (DropDownClickTile == 0) {
DropDownClickTile = 1;
} else {
DropDownClickTile = 0;
}
});
//***Database Control***
//***Conceal All Sequence***
d3.selectAll(".sequence").transition().attr("fill-opacity",0.0).attr("visibility","hidden").delay(0).duration(0);
//***Conceal All Sequence***
for (var i=0;i<ids["seq"].length;i++) {
var code_piece = 'd3.select(ids["seq"]['+i+']).on("mouseover", function () {d3.select("#annotation").append("text").text(function () {return d3.select(ids["seq"]['+i+']).attr("id").replace("seq_","").replace(/_/g," ");}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","200px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);d3.select(ids["seq"]['+i+']).transition().attr("font-size", function() {return parseFloat(Or_Seq_Font_Size)*9;}).style("text-shadow",Neonizer(ids["seq"]['+i+'])).delay(100).duration(300);lotusFadein(ids["seq"]['+i+']);}).on("mouseout", function () {d3.select(".text2").remove();d3.select(ids["seq"]['+i+']).transition().attr("font-size",function() {return parseFloat(Or_Seq_Font_Size)*parseFloat(FontSpectrum[FontSpectrumCount]);}).style("text-shadow","none").delay(50).duration(300);lotusFadeout();});';
code = code+code_piece+" ";
}
for (var i=0;i<ids["scat"].length;i++) {
var code_piece = 'd3.select(ids["scat"]['+i+']).on("mouseover", function () {d3.select("#annotation").append("text").text(function () {return d3.select(ids["scat"]['+i+']).attr("id").replace("scat_","").replace(/_/g," ");}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","200px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select("#annotation").append("text").text(function () {var ResidueNumber = ids["scat"]['+i+'].replace(/^.*scat_.*_/,"");return "identity: "+aminoacids[fasta_sorted[ResidueNumber-1]][0];}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-125;} else {return coordinates[1]+375;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.selectAll(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);d3.select(ids["scat"]['+i+']).transition().attr("stroke-width",Or_Scat_Size/4).attr("stroke","Orange").delay(0).duration(500);}).on("mouseout", function () {d3.selectAll(".text2").remove();d3.select(ids["scat"]['+i+']).transition().attr("stroke-width",Or_Scat_Stroke_Width).attr("stroke",Or_Scat_Stroke_Color).delay(50).duration(300);});';
code = code+code_piece+" ";
}
for (var i=0;i<ids["con"].length;i++) {
var code_piece = 'd3.select(ids["con"]['+i+']).on("mouseover", function () {d3.select("#annotation").append("text").text(function () {return d3.select(ids["con"]['+i+']).attr("id").replace("_Con",", Con").replace(/_/g," ");}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-425;} else {return coordinates[0]+425;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select("#annotation").append("text").text(function () {var ClassOfSubject = d3.select(ids["con"]['+i+']).attr("class").split(" ")[0]; if (ClassOfSubject == null || ClassOfSubject==="allCons"){return "";}else{return "domain: "+String(ClassOfSubject.replace(/_/g," "));}}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-425;} else {return coordinates[0]+425;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-125;} else {return coordinates[1]+375;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");showNewHistogramValue(ids["con"]['+i+']);d3.selectAll(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);d3.select(ids["con"]['+i+']).transition().style("stroke-width","20px").delay(0).duration(500);var ClassOfSubject = d3.select(ids["con"]['+i+']).attr("class").split(" ")[0];ClassOfSubject = "."+String(ClassOfSubject); if ((ClassOfSubject !== ".") && (ClassOfSubject !== ".allCons") && (ClassOfSubject != null)){d3.selectAll(ClassOfSubject).filter(function(){if("#"+String(d3.select(this).attr("id")) == ids["con"]['+i+']){return false;}else{return true;}}).attr("filter","url(#NeonGlow)");}}).on("mouseout", function () {var ClassOfSubject = d3.select(ids["con"]['+i+']).attr("class").split(" ")[0];ClassOfSubject = "."+String(ClassOfSubject); if ((ClassOfSubject !== ".") && (ClassOfSubject !== ".allCons") && (ClassOfSubject != null)){d3.selectAll(ClassOfSubject).attr("filter",null);}d3.selectAll(".text2").remove();d3.select(ids["con"]['+i+']).transition().style("stroke-width",Or_Con_Stroke_Width).delay(50).duration(300);}).on("click", function() { if ((ExtractionPane == "open") && (SetWhichPos != "none")){var Pos = parseInt(d3.select(ids["con"]['+i+']).attr("id").replace(/Residue_/i,"")); eval(SetWhichPos+" = "+String(Pos)); var selection = "#"+SetWhichPos; d3.select(selection).remove(); d3.select("#annotation").append("text").text(function () {return String(eval(SetWhichPos));}).attr("class","DropDownRectExtract").attr("id",SetWhichPos).attr("text-anchor","middle").attr("x", function() {if (SetWhichPos == "ExtractPosX"){return 2450;}else{return 2750;}}).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible").on("mouseover",function(){d3.select(selection).transition().attr("fill","Orange").attr("font-size",80).delay(0).duration(250);}).on("mouseout",function(){d3.select(selection).transition().attr("fill","LightGray").attr("font-size",60).delay(0).duration(250);}).on("click",function() {SetWhichPos = d3.select(this).attr("id");d3.select("#ExtractPosMessage").remove();d3.select("#annotation").append("text").text(function () {if (SetWhichPos == "ExtractPosX"){return "Select from the conservation track a start residue";}else{return "Select from the conservation track an end residue";}}).attr("class","DropDownRectExtract").attr("id","ExtractPosMessage").attr("text-anchor","middle").attr("x", 3000).attr("y", 3400).attr("font-family","Arial").attr("font-size","100px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select("#ExtractPosMessage").transition().attr("fill-opacity",0.5).delay(0).duration(750);}); d3.select("#ExtractPosMessage").remove(); SetWhichPos ="none";}});';
code = code+code_piece+" ";
}
for (var i=0;i<ids["mut"].length;i++) {
var code_piece = 'd3.select(ids["mut"]['+i+']).on("mouseover", function () {d3.select("#annotation").append("text").text(function () {return d3.select(ids["mut"]['+i+']).attr("id").replace(/_rsID.*/g,"").replace(/[A-Z]/,function() {var id = d3.select(ids["mut"]['+i+']).attr("id"); var first =id.substring(0,1); return aminoacids[first][0]+" ";}).replace(/[A-Z]$/,function () {var id = d3.select(ids["mut"]['+i+']).attr("id"); var id = id.replace(/_rsID.*/,"");var last = id.slice(-1);if (last != "X"){return " to "+aminoacids[last][0];}else{return " to Stop codon";}}) ;}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-500;} else {return coordinates[0]+500;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-200;} else {return coordinates[1]+200;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");returnPredictionScores(predictionDatabase,ids["mut"]['+i+']);d3.selectAll(".text2").transition().attr("fill-opacity",0.9).style("opacity",0.9).delay(500).duration(500);d3.select(ids["mut"]['+i+']).transition().attr("font-size", function () {return parseFloat(Or_Mut_Font_Size)*3;}).style("text-shadow",Neonizer(ids["mut"]['+i+'])).delay(100).duration(300);}).on("mouseout", function () {d3.selectAll(".text2").remove();d3.select(ids["mut"]['+i+']).transition().attr("font-size",Or_Mut_Font_Size).style("text-shadow","none").delay(50).duration(300);}).on("click",function() {var rsID = d3.select(ids["mut"]['+i+']).attr("id"); rsID = rsID.replace(/.*_rsID_rs/,"").replace(/_[1-9]+[0-9]*_[0-9]+$/,""); var link = String("http://www.ncbi.nlm.nih.gov/projects/SNP/snp_ref.cgi?rs=")+ String(rsID); window.open(link);});';
code = code+code_piece+" ";
}
for (var i=0;i<ids["connector"].length;i++) {
var code_piece = 'd3.select(ids["connector"]['+i+']).on("mouseover", function () {d3.select("#annotation").append("text").text(function () {var IdOfConnectorText = d3.select(ids["connector"]['+i+']).attr("id"); IdOfConnectorText=IdOfConnectorText.replace("Connector_","").split("-"); if(IdOfConnectorText[0] == IdOfConnectorText[1]){return "Residue "+String(IdOfConnectorText[0]);}else{return "Residues "+String(IdOfConnectorText[0])+" to "+String(IdOfConnectorText[1]);}}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","200px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);d3.select(ids["connector"]['+i+']).transition().attr("font-size", function() {return parseFloat(Or_Connector_Font_Size)*3;}).style("text-shadow",Neonizer(ids["connector"]['+i+'])).delay(100).duration(300);}).on("mouseout", function () {d3.select(".text2").remove();d3.select(ids["connector"]['+i+']).transition().attr("font-size",function() {return parseFloat(Or_Connector_Font_Size);}).style("text-shadow","none").delay(50).duration(300);});';
code = code+code_piece+" ";
}
for (var i=0;i<ids["tile"].length;i++) {
var id = d3.select(ids["tile"][i]).attr("id");
if (id.match(/sub/)) {
var code_piece = 'd3.select(ids["tile"]['+i+']).on("mouseover",function() {d3.select(ids["tile"]['+i+']).transition().style("stroke","Orange").style("stroke-width","10px").delay(0).duration(500); var cDNA_pos = parseFloat(d3.select(ids["tile"]['+i+']).attr("id").replace(/tile[0-9]*_/,"")); var protein_pos; if (cDNA_pos % 3 != 0) {protein_pos = parseInt(cDNA_pos/3);} else {protein_pos = parseInt(cDNA_pos/3)-1;} d3.select("#annotation").append("path").attr("d",function () {return "M "+String((parseFloat(Or_Tile_Coordinates['+i+']["TopLeftCornerx"])+parseFloat(Or_Tile_Coordinates['+i+']["TopRightCornerx"]))/2)+","+String((parseFloat(Or_Tile_Coordinates['+i+']["TopLeftCornery"])+parseFloat(Or_Tile_Coordinates['+i+']["TopRightCornery"]))/2)+" L "+String((parseFloat(Or_Tile_Coordinates['+i+']["TopLeftCornerx"])+parseFloat(Or_Tile_Coordinates['+i+']["TopRightCornerx"]))/2)+","+String((parseFloat(Or_Tile_Coordinates['+i+']["TopLeftCornery"])+parseFloat(Or_Tile_Coordinates['+i+']["TopRightCornery"]))/2);}).attr("id","TileLineToDestination").attr("class","TileLines").attr("stroke","Orange").attr("stroke-width","8px").attr("stroke-opacity",0.75); d3.select("#TileLineToDestination").transition().attr("d",function () {return "M "+String((parseFloat(Or_Tile_Coordinates['+i+']["TopLeftCornerx"])+parseFloat(Or_Tile_Coordinates['+i+']["TopRightCornerx"]))/2)+","+String((parseFloat(Or_Tile_Coordinates['+i+']["TopLeftCornery"])+parseFloat(Or_Tile_Coordinates['+i+']["TopRightCornery"]))/2)+" L "+String(3000+2250*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180))+","+String(3000-2250*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180));}).delay(0).duration(500); d3.select("#annotation").append("text").text(function () {return "Substitution at position "+String(protein_pos+1);}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);}).on("mouseout",function() {d3.select(ids["tile"]['+i+']).transition().style("stroke",Or_Tile_Stroke_Color['+i+']).style("stroke-width",Or_Tile_Stroke_Width['+i+']).delay(0).duration(500); d3.selectAll(".TileLines").remove(); d3.selectAll(".text2").remove();}).on("click",function() {var rsID = d3.select(ids["tile"]['+i+']).attr("tilersid"); rsID = rsID.replace(/^rs/,""); var link = String("http://www.ncbi.nlm.nih.gov/projects/SNP/snp_ref.cgi?rs=")+ String(rsID); window.open(link);});';
code = code+code_piece+" ";
} else if (id.match(/in/)) {
var code_piece = 'd3.select(ids["tile"]['+i+']).on("mouseover",function() {d3.select(ids["tile"]['+i+']).transition().style("stroke","Orange").style("stroke-width","10px").delay(0).duration(500); var cDNA_pos = parseFloat(d3.select(ids["tile"]['+i+']).attr("id").replace(/tile[0-9]*_/,"")); var protein_pos; if (cDNA_pos % 3 != 0) {protein_pos = parseInt(cDNA_pos/3);} else {protein_pos = parseInt(cDNA_pos/3)-1;} var ChangeLength = parseInt(d3.select(ids["tile"]['+i+']).attr("id").replace(/tile[0-9]*_[0-9]*_/,"")); d3.select("#annotation").append("path").attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopLeftCornerx"]+","+Or_Tile_Coordinates['+i+']["TopLeftCornery"]+" L "+Or_Tile_Coordinates['+i+']["TopLeftCornerx"]+","+Or_Tile_Coordinates['+i+']["TopLeftCornery"];}).attr("id","TileLineToDestination1").attr("class","TileLines").attr("stroke","Orange").attr("stroke-width","8px").attr("stroke-opacity",0.75); d3.select("#annotation").append("path").attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopRightCornerx"]+","+Or_Tile_Coordinates['+i+']["TopRightCornery"]+" L "+Or_Tile_Coordinates['+i+']["TopRightCornerx"]+","+Or_Tile_Coordinates['+i+']["TopRightCornery"];}).attr("id","TileLineToDestination2").attr("class","TileLines").attr("stroke","Orange").attr("stroke-width","8px").attr("stroke-opacity",0.75);d3.select("#TileLineToDestination1").transition().attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopLeftCornerx"]+","+Or_Tile_Coordinates['+i+']["TopLeftCornery"]+" L "+String(3000+2250*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180))+","+String(3000-2250*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180));}).delay(0).duration(500); d3.select("#TileLineToDestination2").transition().attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopRightCornerx"]+","+Or_Tile_Coordinates['+i+']["TopRightCornery"]+" L "+String(3000+2250*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180))+","+String(3000-2250*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180));}).delay(0).duration(500); d3.select("#annotation").append("text").text(function () {return "Insertion of "+ChangeLength+" aa "+"at position "+String(protein_pos+1)+String(Or_Tile_FrameCharacter['+i+']);}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);}).on("mouseout",function() {d3.select(ids["tile"]['+i+']).transition().style("stroke",Or_Tile_Stroke_Color['+i+']).style("stroke-width",Or_Tile_Stroke_Width['+i+']).delay(0).duration(500); d3.selectAll(".TileLines").remove(); d3.selectAll(".text2").remove();}).on("click",function() {var rsID = d3.select(ids["tile"]['+i+']).attr("tilersid"); rsID = rsID.replace(/^rs/,""); var link = String("http://www.ncbi.nlm.nih.gov/projects/SNP/snp_ref.cgi?rs=")+ String(rsID); window.open(link);});';
code = code+code_piece+" ";
} else if (id.match(/del/)) {
var code_piece = 'd3.select(ids["tile"]['+i+']).on("mouseover",function() {d3.select(ids["tile"]['+i+']).transition().style("stroke","Orange").style("stroke-width","10px").delay(0).duration(500); var cDNA_pos = parseFloat(d3.select(ids["tile"]['+i+']).attr("id").replace(/tile[0-9]*_/,"")); var protein_pos; if (cDNA_pos % 3 != 0) {protein_pos = parseInt(cDNA_pos/3);} else {protein_pos = parseInt(cDNA_pos/3)-1;} var ChangeLength = parseInt(d3.select(ids["tile"]['+i+']).attr("id").replace(/tile[0-9]*_[0-9]*_/,"")); d3.select("#annotation").append("path").attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopLeftCornerx"]+","+Or_Tile_Coordinates['+i+']["TopLeftCornery"]+" L "+Or_Tile_Coordinates['+i+']["TopLeftCornerx"]+","+Or_Tile_Coordinates['+i+']["TopLeftCornery"];}).attr("id","TileLineToDestination1").attr("class","TileLines").attr("stroke","Orange").attr("stroke-width","8px").attr("stroke-opacity",0.75); d3.select("#annotation").append("path").attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopRightCornerx"]+","+Or_Tile_Coordinates['+i+']["TopRightCornery"]+" L "+Or_Tile_Coordinates['+i+']["TopRightCornerx"]+","+Or_Tile_Coordinates['+i+']["TopRightCornery"];}).attr("id","TileLineToDestination2").attr("class","TileLines").attr("stroke","Orange").attr("stroke-width","8px").attr("stroke-opacity",0.75);d3.select("#TileLineToDestination1").transition().attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopLeftCornerx"]+","+Or_Tile_Coordinates['+i+']["TopLeftCornery"]+" L "+String(3000+2250*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180))+","+String(3000-2250*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*protein_pos))-CorrectionFactor*protein_pos)/180));}).delay(0).duration(500); d3.select("#TileLineToDestination2").transition().attr("d",function () {return "M "+Or_Tile_Coordinates['+i+']["TopRightCornerx"]+","+Or_Tile_Coordinates['+i+']["TopRightCornery"]+" L "+String(3000+2250*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(protein_pos+ChangeLength)))-CorrectionFactor*protein_pos)/180))+","+String(3000-2250*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(protein_pos+ChangeLength)))-CorrectionFactor*protein_pos)/180));}).delay(0).duration(500); d3.select("#annotation").append("text").text(function () {return "Deletion of "+ChangeLength+" aa "+"at position "+String(protein_pos+1)+String(Or_Tile_FrameCharacter['+i+']);}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-250;} else {return coordinates[0]+250;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-250;} else {return coordinates[1]+250;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");d3.select(".text2").transition().attr("fill-opacity",0.9).delay(500).duration(500);}).on("mouseout",function() {d3.select(ids["tile"]['+i+']).transition().style("stroke",Or_Tile_Stroke_Color['+i+']).style("stroke-width",Or_Tile_Stroke_Width['+i+']).delay(0).duration(500); d3.selectAll(".TileLines").remove(); d3.selectAll(".text2").remove();}).on("click",function() {var rsID = d3.select(ids["tile"]['+i+']).attr("tilersid"); rsID = rsID.replace(/^rs/,""); var link = String("http://www.ncbi.nlm.nih.gov/projects/SNP/snp_ref.cgi?rs=")+ String(rsID); window.open(link);});';
code = code+code_piece+" ";
}
}
eval(code);
//***Email and Logo***
var logo = "data:image/png;base64,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";
d3.select("#master").append("svg:image").attr("xlink:href",logo).attr("title","contact").attr("alt","contact").attr("x",25).attr("y",700).attr("width","500px").attr("height","282px").attr("id","logo").attr("style","opacity:0.4")
.on("mouseover",function() {
if(flash == 0) {
d3.select(this).transition().attr("style","outline:6px solid rgba(255,165,0,0.5); opacity:1.0;").delay(0).duration(250);
}
})
.on("mouseout",function() {
if(flash == 0) {
d3.select(this).transition().attr("style","outline:none; opacity:0.4;").delay(0).duration(250);
}
})
.on("click",function() {
if(flash == 0) {
window.open("mailto:ibrahim.tanyalcin@i-pv.org?subject= &body=");
}
});
//***Email and Logo***
//***Missense Link Control***
d3.select("#annotation").append("text").text("Hide missense links").attr("class","LinkControl").attr("id","MissenseLinkControl").attr("text-anchor","middle").attr("x", 290).attr("y", 400).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover",function() {
d3.select("#MissenseLinkControl").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#MissenseLinkControl").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click", function () {
d3.select("#MissenseLinkControl").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#MissenseLinkControl2").transition().attr("visibility","visible").delay(0).duration(0);
d3.select(document.body).select("#master").select("#plot3").selectAll("*").filter(function () {if (d3.select(this).attr("id")){return 0;}else{return 1;}}).each(function () {d3.select(this).transition().attr("fill-opacity",0.0).attr("stroke-opacity",0.0).delay(0).duration(750);});
});
d3.select("#annotation").append("text").text("Show missense links").attr("class","LinkControl").attr("id","MissenseLinkControl2").attr("text-anchor","middle").attr("x", 290).attr("y", 400).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","hidden")
.on("mouseover",function() {
d3.select("#MissenseLinkControl2").transition().attr("fill","Orange").delay(0).duration(0);
})
.on("mouseout",function() {
d3.select("#MissenseLinkControl2").transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click", function () {
d3.select("#MissenseLinkControl").transition().attr("visibility","visible").delay(0).duration(0);
d3.select("#MissenseLinkControl2").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select(document.body).select("#master").select("#plot3").selectAll("*").filter(function () {if (d3.select(this).attr("id")){return 0;}else{return 1;}}).each(function () {d3.select(this).transition().attr("fill-opacity",1.0).attr("stroke-opacity",1.0).delay(0).duration(750);});
});
//***Missense Link Control***
//***AminoAcidLength and Extract***
var ExtractionPane = "closed";
var ExtractPosX = 1;
var ExtractPosY = parseInt(fasta_sorted.length);
var ItemsPerLine = 50;
var SetWhichPos = "none";
var DropDownClickExtract = 0;
var ExtractRectCount = ["1","2","3"];
d3.select("#annotation").append("text").text(function() {return "length: "+String(fasta_sorted.length)+" aa";}).attr("class","Options").attr("id","OverviewLength").attr("text-anchor","middle").attr("x", 3000).attr("y", 2800).attr("font-family","Arial").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover",function() {
d3.select("#OverviewLength").transition().attr("font-size","120px").attr("fill","Orange").delay(0).duration(500);
d3.selectAll(".overviews").style("opacity",0);
})
.on("mouseout",function() {
d3.select("#OverviewLength").transition().attr("font-size","60px").attr("fill","DimGray").delay(0).duration(500);
d3.selectAll(".overviews").style("opacity",1);
})
.on("click",function() {
if (DropDownClickExtract == 0) {
//Close other open overview tabs
if (MarkPane === "open") {
d3.selectAll(".htmlElements").remove();
d3.selectAll(".DropDownRectMark").remove();
DropDownClickMark = 0;
MarkPane = "closed";
}
//Close other open overview tabs
d3.select("#annotation").call(DropDownExtract);
} else {
d3.selectAll(".DropDownRectExtract").remove();
ExtractionPane = "closed";
}
if (DropDownClickExtract == 0) {
DropDownClickExtract = 1;
} else {
DropDownClickExtract = 0;
}
});
//***AminoAcidLength and Extract***
//***Print***
var flash = 0;
d3.select("#annotation").append("text").text("Snapshot").attr("class","Print").attr("id","Snapshot").attr("text-anchor","middle").attr("x", 175).attr("y", 600).attr("font-family","Arial").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover",function() {
d3.selectAll(".Cell").remove();
d3.select("#annotation").append("path").attr("d", "M 550,450 L 550,450 L 550,450 L 550,450 L 550,450 L 550,450 L 550,450 L 550,450 L 550,450 L 550,450 L 550,450 Z").attr("class","Cell").attr("id","CellPhone").attr("fill-opacity",0.0).attr("stroke-width",10).attr("stroke","Orange");
d3.select("#CellPhone").transition().attr("d","M 550,450 L 500,450 Q 450,450, 450,500 L 450,700 Q 450,750, 500,750 L 550,750 L 600,750 Q 650,750, 650,700 L 650,500 Q 650,450 600,450 L 550,450 Z").delay(0).duration(500);
d3.select("#annotation").append("circle").attr("class","Cell").attr("id","CellPhoneCam").attr("cx",600).attr("cy",500).attr("r",10).attr("fill","DodgerBlue").attr("fill-opacity",0).attr("stroke","Orange").attr("stroke-opacity",0).attr("stroke-width",6);
d3.select("#CellPhoneCam").transition().attr("stroke-opacity",0.9).delay(500).duration(250);
d3.select("#Snapshot").transition().attr("font-size","80px").attr("fill","Orange").delay(0).duration(500);
})
.on("mouseout",function() {
d3.select("#Snapshot").transition().attr("font-size","60px").attr("fill","DimGray").delay(0).duration(500);
if (flash == 0) {
d3.selectAll(".Cell").remove();
} else {
d3.select("#logo").transition().attr("style","opacity:0.75;").delay(2000).duration(0);
var SetTimeOut = function () {
d3.selectAll(".Cell").remove();
flash = 0;
return true;
};
d3.timer(SetTimeOut,2000);
}
})
.on("click", function () {
d3.select("#logo").transition().attr("style","opacity:0;").delay(0).duration(0);
d3.select("#print_script").remove();
d3.select("#annotation").append("circle").attr("class","Cell").attr("id","CellPhoneFlash").attr("cx",350).attr("cy",450).attr("r",450).attr("fill","White").attr("fill-opacity",1).attr("stroke","Orange").attr("stroke-opacity",0).attr("stroke-width",6);
flash = 1;
var SetTimeOut = function() {
d3.select(document.head).append("head:script").attr("id","print_script").attr("type","text/javascript").attr("src","https://nytimes.github.io/svg-crowbar/svg-crowbar.js");
return true;
};
d3.timer(SetTimeOut,250);
});
//***Print***
//***Subs***
//***This is for Aminoacid Property selection
function DropDown(selection) {
selection
.selectAll("rectanglesDropDown")
.data(AminoAcidProperties)
.enter()
.append("rect")
.attr("x",2700)
.attr("y",function (d,i) {return 2350+i*101;})
.attr("height",100)
.attr("width",600)
.attr("fill","DimGray")
.attr("fill-opacity",0.0)
.attr("stroke","DimGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownRect"+String(i);})
.attr("class","DropDownRect")
.on("mouseover",function(d,i) {
d3.select("#DropDownRect"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRect"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function (d,i){
var selected = i;
AminoAcidPropertiesCount = i;
d3.select("#PropChoice").remove();
d3.select("#annotation").append("text").text(function(){return AminoAcidProperties[AminoAcidPropertiesCount];}).attr("class","Options").attr("id","PropChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2275).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("click",function() {
if (DropDownClick == 0) {
d3.select("#annotation").call(DropDown);
} else {
d3.selectAll(".DropDownRect").remove();
d3.selectAll(".DropDownText").remove();
}
if (DropDownClick == 0) {
DropDownClick = 1;
} else {
DropDownClick = 0;
}
});
d3.select("#PropChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.selectAll(".scatter").data(ids["scat"]).each(function(d,i) {var ResidueNumber = d.replace(/^.*scat_.*_/,"");d3.select(d).transition().attr("fill-opacity",function (){var aminoacid = fasta_sorted[ResidueNumber-1];if(AminoAcidProperties[selected] == "All" || d.match(AminoAcidProperties[selected]) || aminoacids_OtherProperties[fasta_sorted[ResidueNumber-1]].some(function(x){return x.match(AminoAcidProperties[selected]);}) || (AminoAcidProperties[AminoAcidPropertiesCount] == "Sequence Display" && aminoacids[aminoacid][2] == "Clicked")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
WhatsClicked = [];
for (i=0;i<d3.keys(aminoacids).length;i++) {
if(aminoacids[d3.keys(aminoacids)[i]][2]=="Clicked") {
WhatsClicked.push(d3.keys(aminoacids)[i]);
}
}
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
});
d3.selectAll(".DropDownRect").data(AminoAcidProperties).each(function(d,i) {d3.select("#DropDownRect"+String(i)).transition("fadein").attr("fill-opacity",0.7).delay(function() {return (500/(AminoAcidProperties.length-1))*i;}).duration(500);});
selection
.selectAll("textsDropDown")
.data(AminoAcidProperties)
.enter()
.append("text")
.attr("x",3000)
.attr("y",function (d,i) {return 2425+i*100;})
.text(function(d,i) {return AminoAcidProperties[i];})
.attr("text-anchor","middle")
.attr("font-family","sans-serif")
.attr("font-size","55px")
.attr("fill","LightGray")
.attr("fill-opacity",0.0)
.attr("stroke","LightGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownText"+String(i);})
.attr("class","DropDownText")
.on("mouseover",function(d,i) {
d3.select("#DropDownRect"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRect"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function (d,i){
var selected = i;
AminoAcidPropertiesCount = i;
d3.select("#PropChoice").remove();
d3.select("#annotation").append("text").text(function(){return AminoAcidProperties[AminoAcidPropertiesCount];}).attr("class","Options").attr("id","PropChoice").attr("text-anchor","middle").attr("x", 3000).attr("y", 2275).attr("font-family","sans-serif").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("click",function() {
if (DropDownClick == 0) {
d3.select("#annotation").call(DropDown);
} else {
d3.selectAll(".DropDownRect").remove();
d3.selectAll(".DropDownText").remove();
}
if (DropDownClick == 0) {
DropDownClick = 1;
} else {
DropDownClick = 0;
}
});
d3.select("#PropChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
d3.selectAll(".scatter").data(ids["scat"]).each(function(d,i) {var ResidueNumber = d.replace(/^.*scat_.*_/,"");d3.select(d).transition().attr("fill-opacity",function (){var aminoacid = fasta_sorted[ResidueNumber-1];if(AminoAcidProperties[selected] == "All" || d.match(AminoAcidProperties[selected]) || aminoacids_OtherProperties[fasta_sorted[ResidueNumber-1]].some(function(x){return x.match(AminoAcidProperties[selected]);}) || (AminoAcidProperties[AminoAcidPropertiesCount] == "Sequence Display" && aminoacids[aminoacid][2] == "Clicked")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
WhatsClicked = [];
for (i=0;i<d3.keys(aminoacids).length;i++) {
if(aminoacids[d3.keys(aminoacids)[i]][2]=="Clicked") {
WhatsClicked.push(d3.keys(aminoacids)[i]);
}
}
//+++Dynamically Keeps Track of Clicked aminoacids AT THE TIME OF FEATURE SELECTION (either by clicking arrows or the dropdown) which changes the scatter track+++
});
d3.selectAll(".DropDownText").data(AminoAcidProperties).each(function(d,i) {d3.select("#DropDownText"+String(i)).transition("fadein").attr("fill-opacity",0.9).delay(function() {return (500/(AminoAcidProperties.length-1))*i;}).duration(500);});
}
//***This is for SNVs***
function DropDownSnv(selection) {
selection
.selectAll("rectanglesDropDownSnv")
.data(MutDB)
.enter()
.append("rect")
.attr("x",2100)
.attr("y",function (d,i) {return 2700+i*101;})
.attr("height",100)
.attr("width",600)
.attr("fill","DimGray")
.attr("fill-opacity",0.0)
.attr("stroke","DimGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownRectSnv"+String(i);})
.attr("class","DropDownRectSnv")
.on("mouseover",function(d,i) {
d3.select("#DropDownRectSnv"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRectSnv"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function (d,i){
var selected = MutDB[i];
d3.selectAll(".mut").data(ids["mut"]).each(function(d,i) {var database_source = d3.select(ids["mut"][i]).attr("dbsource");var regexp = new RegExp(selected,"i");d3.select(d).transition().attr("fill-opacity",function (){if((database_source.match(regexp) || (selected == "All") || ((selected == "Stop")&&(d3.select(ids["mut"][i]).attr("id").match(/x/i))) || (selected.match(/synonymous/gi)&&(selected===synOrNonsyn(d))) || (selected==="pXtoY" && pXtoY(d)))&&(selected != "None")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
});
d3.selectAll(".DropDownRectSnv").data(MutDB).each(function(d,i) {d3.select("#DropDownRectSnv"+String(i)).transition("fadein").attr("fill-opacity",0.7).delay(function() {return (500/(MutDB.length))*i;}).duration(500);});
selection
.selectAll("textsDropDownSnv")
.data(MutDB)
.enter()
.append("text")
.attr("x",2400)
.attr("y",function (d,i) {return 2775+i*100;})
.text(function(d,i) {return MutDB[i];})
.attr("text-anchor","middle")
.attr("font-family","sans-serif")
.attr("font-size","55px")
.attr("fill","LightGray")
.attr("fill-opacity",0.0)
.attr("stroke","LightGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownTextSnv"+String(i);})
.attr("class","DropDownTextSnv")
.on("mouseover",function(d,i) {
d3.select("#DropDownRectSnv"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRectSnv"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function (d,i){
var selected = MutDB[i];
d3.selectAll(".mut").data(ids["mut"]).each(function(d,i) {var database_source = d3.select(ids["mut"][i]).attr("dbsource");var regexp = new RegExp(selected,"i");d3.select(d).transition().attr("fill-opacity",function (){if((database_source.match(regexp) || (selected == "All") || ((selected == "Stop")&&(d3.select(ids["mut"][i]).attr("id").match(/x/i))) || (selected.match(/synonymous/gi)&&(selected===synOrNonsyn(d))) || (selected==="pXtoY" && pXtoY(d)))&&(selected != "None")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
});
d3.selectAll(".DropDownTextSnv").data(MutDB).each(function(d,i) {d3.select("#DropDownTextSnv"+String(i)).transition("fadein").attr("fill-opacity",0.9).delay(function() {return (500/(MutDB.length))*i;}).duration(500);});
}
//***This is for tiles***
function DropDownTile(selection) {
selection
.selectAll("rectanglesDropDownTile")
.data(TileDB)
.enter()
.append("rect")
.attr("x",3300)
.attr("y",function (d,i) {return 2700+i*101;})
.attr("height",100)
.attr("width",600)
.attr("fill","DimGray")
.attr("fill-opacity",0.0)
.attr("stroke","DimGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownRectTile"+String(i);})
.attr("class","DropDownRectTile")
.on("mouseover",function(d,i) {
d3.select("#DropDownRectTile"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRectTile"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function (d,i){
var selected = TileDB[i];
d3.selectAll(".tile").data(ids["tile"]).each(function(d,i) {var database_source = d3.select(ids["tile"][i]).attr("dbsource");var id = d3.select(ids["tile"][i]).attr("id");var regexp = new RegExp(selected,"i");d3.select(d).transition().attr("fill-opacity",function (){if((database_source.match(regexp) || id.match(regexp) || (selected == "All"))&&(selected != "None")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
});
d3.selectAll(".DropDownRectTile").data(TileDB).each(function(d,i) {d3.select("#DropDownRectTile"+String(i)).transition("fadein").attr("fill-opacity",0.7).delay(function() {return (500/(TileDB.length))*i;}).duration(500);});
selection
.selectAll("textsDropDownTile")
.data(TileDB)
.enter()
.append("text")
.attr("x",3600)
.attr("y",function (d,i) {return 2775+i*100;})
.text(function(d,i) {return TileDB[i];})
.attr("text-anchor","middle")
.attr("font-family","sans-serif")
.attr("font-size","55px")
.attr("fill","LightGray")
.attr("fill-opacity",0.0)
.attr("stroke","LightGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownTextTile"+String(i);})
.attr("class","DropDownTextTile")
.on("mouseover",function(d,i) {
d3.select("#DropDownRectTile"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRectTile"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})
.on("click",function (d,i){
var selected = TileDB[i];
d3.selectAll(".tile").data(ids["tile"]).each(function(d,i) {var database_source = d3.select(ids["tile"][i]).attr("dbsource");var id = d3.select(ids["tile"][i]).attr("id");var regexp = new RegExp(selected,"i");d3.select(d).transition().attr("fill-opacity",function (){if((database_source.match(regexp) || id.match(regexp) || (selected == "All"))&&(selected != "None")){return 1.0;} else {return 0.0;}}).delay(0).duration(750);});
});
d3.selectAll(".DropDownTextTile").data(TileDB).each(function(d,i) {d3.select("#DropDownTextTile"+String(i)).transition("fadein").attr("fill-opacity",0.9).delay(function() {return (500/(TileDB.length))*i;}).duration(500);});
}
//***This is for sequence extraction***
function DropDownExtract(selection) {
ExtractionPane = "open";
var FeatureHash = {"Fasta":'fasta_sorted',"Conservation":'ids["con"]',"SNVs":'ids["mut"]',"Feature":'ids["scat"]',"cDNA":'cdna',"bases":'cdna'};
var SelectedFeatureNumber = 0;
selection
.selectAll("rectanglesDropDownExtract")
.data(ExtractRectCount)
.enter()
.append("rect")
.attr("width",function(d,i) {return 1300-i*1300/Math.pow(GoldenRatio,2)})
.attr("height",100)
.attr("x",function(d,i) {return 3000-(1300-i*1300/Math.pow(GoldenRatio,2))/2;})
.attr("y",function (d,i) {return 2850+i*101;})
//here I add some attr to make the corners rounded
.attr("rx",15)
.attr("ry",15)
//here I add some attr to make the corners rounded
.attr("fill","DimGray")
.attr("fill-opacity",0.0)
.attr("stroke","DimGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownRectExtract"+String(i);})
.attr("class","DropDownRectExtract")
/*.on("mouseover",function(d,i) {
d3.select("#DropDownRectExtract"+String(i)).transition().attr("fill","Gray").delay(0).duration(0);
})
.on("mouseout",function(d,i){
d3.select("#DropDownRectExtract"+String(i)).transition().attr("fill","DimGray").delay(0).duration(0);
})*/;
d3.selectAll(".DropDownRectExtract").data(ExtractRectCount).each(function(d,i) {d3.select("#DropDownRectExtract"+String(i)).transition().attr("fill-opacity",0.9).delay(0).duration(100);});
d3.select("#annotation").append("text").text("Extract").attr("class","DropDownRectExtract").attr("id","Extract").attr("text-anchor","start").attr("x", 2600).attr("y", 3025).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover", function() {
d3.select(this).transition().attr("fill","Orange").attr("font-size",80).delay(0).duration(250);
})
.on("mouseout", function() {
d3.select(this).transition().attr("fill","LightGray").attr("font-size",60).delay(0).duration(250);
})
.on("click",function() {
if (ExtractPosX < ExtractPosY) {
var TheOutput = "";
var SelectedFeature = eval(FeatureHash[d3.keys(FeatureHash)[SelectedFeatureNumber]]);
var FileName = String(d3.keys(FeatureHash)[SelectedFeatureNumber])+".txt";
var HeaderExtract = "";
if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "Feature") {
if (String(AminoAcidProperties[AminoAcidPropertiesCount]) == "Sequence Display") {
var WhatsOnDisplay = "("+WhatsClicked.join()+")";
HeaderExtract = HeaderExtract + ">Start: "+String(ExtractPosX)+",End: "+String(ExtractPosY)+",Feature: "+String(AminoAcidProperties[AminoAcidPropertiesCount])+WhatsOnDisplay+",+ = match,- = no_match,:\n";
} else {
HeaderExtract = HeaderExtract + ">Start: "+String(ExtractPosX)+",End: "+String(ExtractPosY)+",Feature: "+String(AminoAcidProperties[AminoAcidPropertiesCount])+",+ = match,- = no_match,:\n";
}
} else {
HeaderExtract = HeaderExtract + ">Start: "+String(ExtractPosX)+",End: "+String(ExtractPosY)+","+String(d3.keys(FeatureHash)[SelectedFeatureNumber])+":\n";
}
TheOutput = TheOutput+HeaderExtract;
if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "Fasta") {
for (var i = ExtractPosX;i<=ExtractPosY;i++) {
TheOutput = TheOutput + fasta_sorted[i-1];
if ((i-ExtractPosX+1) % ItemsPerLine == 0) {
TheOutput = TheOutput + "\n";
}
}
} else if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "Conservation") {
for (var i = ExtractPosX;i<=ExtractPosY;i++) {
var MatchedElement;
for (var j = 0;j<ids["con"].length;j++) {
var ResidueNumber = d3.select(ids["con"][j]).attr("id");
ResidueNumber = parseInt(ResidueNumber.replace(/Residue_/i,""));
if (ResidueNumber == i) {
MatchedElement = j;
break;
}
}
TheOutput = TheOutput + String(parseInt(d3.select(ids["con"][MatchedElement]).attr("id").replace(/.*Conservation-Score_/i,""))) + ",";
if ((i-ExtractPosX+1) % ItemsPerLine == 0) {
TheOutput = TheOutput + "\n";
}
}
} else if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "SNVs") {
var MatchedElements = [];
for (var i = ExtractPosX;i<=ExtractPosY;i++) {
for (var j = 0;j<ids["mut"].length;j++) {
var ResidueNumber = d3.select(ids["mut"][j]).attr("id");
var Mutation = String(ResidueNumber.replace(/_.*$/ig,""));
ResidueNumber = parseInt(ResidueNumber.replace(/[A-Z]/i,""));
if (ResidueNumber == i) {
MatchedElements.push(Mutation);
}
}
}
for (var k = 1;k<=MatchedElements.length;k++) {
TheOutput = TheOutput + String(MatchedElements[k-1]) + ",";
if (k % ItemsPerLine == 0) {
TheOutput = TheOutput + "\n";
}
}
} else if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "Feature") {
for (var i = ExtractPosX;i<=ExtractPosY;i++) {
var MatchedElement;
for (var j = 0;j<ids["scat"].length;j++) {
var ResidueNumber = d3.select(ids["scat"][j]).attr("id");
ResidueNumber = parseInt(ResidueNumber.replace(/.*_/ig,""));
if (ResidueNumber == i) {
MatchedElement = j;
break;
}
}
var PlusOrMinus = parseInt(d3.select(ids["scat"][MatchedElement]).attr("fill-opacity"));
if (PlusOrMinus == 0) {
PlusOrMinus = "-";
} else {
PlusOrMinus = "+";
}
TheOutput = TheOutput + PlusOrMinus;
if ((i-ExtractPosX+1) % ItemsPerLine == 0) {
TheOutput = TheOutput + "\n";
}
}
} else if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "cDNA") {
for (var i = ExtractPosX;i<=ExtractPosY;i++) {
TheOutput = TheOutput + cdna[(i-1)*3] + cdna[(i-1)*3+1] + cdna[(i-1)*3+2];
if ((i-ExtractPosX+1)*3 % (ItemsPerLine*3) == 0) {
TheOutput = TheOutput + "\n";
}
}
} else if (String(d3.keys(FeatureHash)[SelectedFeatureNumber]) == "bases") {
for (var i = ExtractPosX,baseCounter = 1,AAcap = ExtractPosX;AAcap<=ExtractPosY;baseCounter++) {
TheOutput = TheOutput + cdna[(i-1)*3+baseCounter-1];
if (baseCounter % ItemsPerLine == 0) {
TheOutput = TheOutput + "\n";
}
if (baseCounter % 3 == 0) {
AAcap++;
}
}
}
download(TheOutput,FileName,"text/plain");
}
});
d3.select("#annotation").append("path").attr("d","M 2900,2975 L 2850,3000 L 2900,3025 Z").attr("class","DropDownRectExtract").attr("id","LExtractChoiceTriangle").attr("fill","LightGray").attr("fill-opacity", 0.9)
.on("mouseover", function() {
d3.select("#LExtractChoiceTriangle").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout",function() {
d3.select("#LExtractChoiceTriangle").transition().attr("fill","LightGray").delay(0).duration(250);
})
.on("click", function () {
d3.select("#ExtractChoice").remove();
if (SelectedFeatureNumber == 0) {
SelectedFeatureNumber = 5;
} else {
SelectedFeatureNumber = SelectedFeatureNumber - 1;
}
d3.select("#annotation").append("text").text(function () {return d3.keys(FeatureHash)[SelectedFeatureNumber];}).attr("class","DropDownRectExtract").attr("id","ExtractChoice").attr("text-anchor","middle").attr("x", 3113).attr("y", 3025).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ExtractChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
});
d3.select("#annotation").append("path").attr("d","M 3325,2975 L 3375,3000 L 3325,3025 Z").attr("class","DropDownRectExtract").attr("id","RExtractChoiceTriangle").attr("fill","LightGray").attr("fill-opacity", 0.9)
.on("mouseover", function() {
d3.select("#RExtractChoiceTriangle").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout",function() {
d3.select("#RExtractChoiceTriangle").transition().attr("fill","LightGray").delay(0).duration(250);
})
.on("click", function () {
d3.select("#ExtractChoice").remove();
if (SelectedFeatureNumber == 5) {
SelectedFeatureNumber = 0;
} else {
SelectedFeatureNumber = SelectedFeatureNumber + 1;
}
d3.select("#annotation").append("text").text(function () {return d3.keys(FeatureHash)[SelectedFeatureNumber];}).attr("class","DropDownRectExtract").attr("id","ExtractChoice").attr("text-anchor","middle").attr("x", 3113).attr("y", 3025).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ExtractChoice").transition().attr("fill-opacity",0.9).delay(0).duration(750);
});
d3.select("#annotation").append("text").text(function () {return d3.keys(FeatureHash)[SelectedFeatureNumber];}).attr("class","DropDownRectExtract").attr("id","ExtractChoice").attr("text-anchor","middle").attr("x", 3113).attr("y", 3025).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
//d3.select("#annotation").append("text").text("pos").attr("class","DropDownRectExtract").attr("text-anchor","middle").attr("x", 2400).attr("y", 2925).attr("font-family","Arial").attr("font-size","30px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text(function () {return String(ExtractPosX);}).attr("class","DropDownRectExtract").attr("id","ExtractPosX").attr("text-anchor","middle").attr("x", 2450).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover", function () {
d3.select("#ExtractPosX").transition().attr("fill","Orange").attr("font-size", 80).delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#ExtractPosX").transition().attr("fill","LightGray").attr("font-size", 60).delay(0).duration(250);
})
.on("click", function () {
SetWhichPos = 'ExtractPosX';
d3.select("#ExtractPosMessage").remove();
d3.select("#annotation").append("text").text("Select from the conservation track a start residue").attr("class","DropDownRectExtract").attr("id","ExtractPosMessage").attr("text-anchor","middle").attr("x", 3000).attr("y", 3400).attr("font-family","Arial").attr("font-size","100px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ExtractPosMessage").transition().attr("fill-opacity",0.9).delay(0).duration(750);
});
d3.select("#annotation").append("text").text("to").attr("class","DropDownRectExtract").attr("text-anchor","middle").attr("x", 2600).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text(function () {return String(ExtractPosY);}).attr("class","DropDownRectExtract").attr("id","ExtractPosY").attr("text-anchor","middle").attr("x", 2750).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover", function () {
d3.select("#ExtractPosY").transition().attr("fill","Orange").attr("font-size", 80).delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#ExtractPosY").transition().attr("fill","LightGray").attr("font-size", 60).delay(0).duration(250);
})
.on("click", function () {
SetWhichPos = 'ExtractPosY';
d3.select("#ExtractPosMessage").remove();
d3.select("#annotation").append("text").text("Select from the conservation track an end residue").attr("class","DropDownRectExtract").attr("id","ExtractPosMessage").attr("text-anchor","middle").attr("x", 3000).attr("y", 3400).attr("font-family","Arial").attr("font-size","100px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ExtractPosMessage").transition().attr("fill-opacity",0.9).delay(0).duration(750);
});
d3.select("#annotation").append("path").attr("d","M 2975,2875 L 2925,2900 L 2975,2925 Z").attr("class","DropDownRectExtract").attr("id","LItemPerLineTriangle1").attr("fill","LightGray").attr("fill-opacity", 0.9)
.on("mouseover", function () {
d3.select("#LItemPerLineTriangle1").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#LItemPerLineTriangle1").transition().attr("fill","LightGray").delay(0).duration(250);
})
.on("click",function () {
if (ItemsPerLine -1 < 1) {
ItemsPerLine = 100;
} else {
ItemsPerLine = ItemsPerLine -1;
}
d3.select("#ItemsPerLine").remove();
d3.select("#annotation").append("text").text(function () {return String(ItemsPerLine);}).attr("class","DropDownRectExtract").attr("id","ItemsPerLine").attr("text-anchor","middle").attr("x", 3050).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ItemsPerLine").transition().attr("fill-opacity",0.9).delay(0).duration(250);
});
d3.select("#annotation").append("path").attr("d","M 2925,2875 L 2875,2900 L 2925,2925 Z").attr("class","DropDownRectExtract").attr("id","LItemPerLineTriangle2").attr("fill","LightGray").attr("fill-opacity", 0.9)
.on("mouseover", function () {
d3.select("#LItemPerLineTriangle2").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#LItemPerLineTriangle2").transition().attr("fill","LightGray").delay(0).duration(250);
})
.on("click",function () {
if (ItemsPerLine - 10 < 1) {
ItemsPerLine = 100;
} else {
ItemsPerLine = ItemsPerLine -10;
}
d3.select("#ItemsPerLine").remove();
d3.select("#annotation").append("text").text(function () {return String(ItemsPerLine);}).attr("class","DropDownRectExtract").attr("id","ItemsPerLine").attr("text-anchor","middle").attr("x", 3050).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ItemsPerLine").transition().attr("fill-opacity",0.9).delay(0).duration(250);
});
d3.select("#annotation").append("text").text(function () {return String(ItemsPerLine);}).attr("class","DropDownRectExtract").attr("id","ItemsPerLine").attr("text-anchor","middle").attr("x", 3050).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("path").attr("d","M 3125,2875 L 3175,2900 L 3125,2925 Z").attr("class","DropDownRectExtract").attr("id","RItemPerLineTriangle1").attr("fill","LightGray").attr("fill-opacity", 0.9)
.on("mouseover", function () {
d3.select("#RItemPerLineTriangle1").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#RItemPerLineTriangle1").transition().attr("fill","LightGray").delay(0).duration(250);
})
.on("click",function () {
if (ItemsPerLine + 1 > 100) {
ItemsPerLine = 1;
} else {
ItemsPerLine = ItemsPerLine +1;
}
d3.select("#ItemsPerLine").remove();
d3.select("#annotation").append("text").text(function () {return String(ItemsPerLine);}).attr("class","DropDownRectExtract").attr("id","ItemsPerLine").attr("text-anchor","middle").attr("x", 3050).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ItemsPerLine").transition().attr("fill-opacity",0.9).delay(0).duration(250);
});
d3.select("#annotation").append("path").attr("d","M 3175,2875 L 3225,2900 L 3175,2925 Z").attr("class","DropDownRectExtract").attr("id","RItemPerLineTriangle2").attr("fill","LightGray").attr("fill-opacity", 0.9)
.on("mouseover", function () {
d3.select("#RItemPerLineTriangle2").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#RItemPerLineTriangle2").transition().attr("fill","LightGray").delay(0).duration(250);
})
.on("click",function () {
if (ItemsPerLine + 10 > 100) {
ItemsPerLine = 1;
} else {
ItemsPerLine = ItemsPerLine +10;
}
d3.select("#ItemsPerLine").remove();
d3.select("#annotation").append("text").text(function () {return String(ItemsPerLine);}).attr("class","DropDownRectExtract").attr("id","ItemsPerLine").attr("text-anchor","middle").attr("x", 3050).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#ItemsPerLine").transition().attr("fill-opacity",0.9).delay(0).duration(250);
});
d3.select("#annotation").append("text").text("items per line").attr("class","DropDownRectExtract").attr("text-anchor","middle").attr("x", 3450).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("Graph").attr("class","DropDownRectExtract").attr("id","Graph").attr("text-anchor","start").attr("x", 2900).attr("y", 3126).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible")
.on("mouseover", function () {
d3.select(this).transition().attr("font-size",80).attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select(this).transition().attr("font-size",60).attr("fill","LightGray").delay(0).duration(250);
})
.on("click", function () {
if (GraphOpen == "no") {
d3.select("annotation").call(InsertGraph,[GraphWdefault,GraphHdefault,2000,2375]);
} else {
d3.select("#GraphSvg").remove();
GraphOpen = "no";
GraphHnew = GraphHdefault;
GraphWnew = GraphWdefault;
GraphNewLocation = [2000,2375];
}
});
}
//***Function for Graphpad
function InsertGraph() {
GraphData = [];
var Parameters = String(arguments[1]);
Parameters = Parameters.split(",");
GraphOpen = "yes";
var GraphPadding = Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50;
var GraphW = parseInt(eval(Parameters[0]));
var GraphH = parseInt(eval(Parameters[1]));
d3.select("#annotation").append("svg").attr("id","GraphSvg").attr("x",function () {return parseInt(Parameters[2]);}).attr("y",function() {return parseInt(Parameters[3]);}).attr("width",GraphW).attr("height",GraphH).attr("draggable","true").attr("ondragstart","dragStart(event,'#GraphSvg')").attr("ondrag","dragMe(event,'#GraphSvg')").attr("ondragend","dragEnd(event,'#GraphSvg')").attr("onmouseover","hideOrshowhtmlElements('0')").attr("onmouseout","hideOrshowhtmlElements('1')");
d3.select("#GraphSvg").append("rect").attr("id","GraphBackgroundRect").attr("x",0).attr("y",0).attr("width",GraphW).attr("height",GraphH).attr("fill","DimGray").attr("fill-opacity",0.5);
d3.select("#GraphSvg").append("rect").attr("id","GraphInnerRect").attr("x",GraphPadding).attr("y",GraphPadding).attr("width",GraphW-2*GraphPadding).attr("height",GraphH-2*GraphPadding).attr("fill","LightGray").attr("fill-opacity",0.5);
d3.select("#GraphSvg").append("path").attr("id","GraphVerticalLine").attr("d",function() {return "M "+String(2*GraphPadding)+","+String(GraphPadding)+" L "+String(2*GraphPadding)+","+String(GraphH-GraphPadding);}).attr("stroke","DimGray").attr("stroke-width",6);
d3.select("#GraphSvg").append("path").attr("id","GraphHorizontalLine").attr("d",function() {return "M "+String(2*GraphPadding)+","+String(GraphH/2)+" L "+String(GraphW-GraphPadding)+","+String(GraphH/2);}).attr("stroke","DimGray").attr("stroke-width",6);
d3.select("#GraphSvg").append("path").attr("id","GraphQuattro").attr("d",function() {return "M "+String(2*GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*1)+" L "+String(GraphW-GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*1);}).attr("stroke","DimGray").attr("stroke-width",4).attr("stroke-dasharray","10,10");
d3.select("#GraphSvg").append("path").attr("id","GraphDouble").attr("d",function() {return "M "+String(2*GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*2)+" L "+String(GraphW-GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*2);}).attr("stroke","DimGray").attr("stroke-width",4).attr("stroke-dasharray","10,10");
d3.select("#GraphSvg").append("path").attr("id","GraphHalf").attr("d",function() {return "M "+String(2*GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*4)+" L "+String(GraphW-GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*4);}).attr("stroke","DimGray").attr("stroke-width",4).attr("stroke-dasharray","10,10");
d3.select("#GraphSvg").append("path").attr("id","GraphQuarter").attr("d",function() {return "M "+String(2*GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*5)+" L "+String(GraphW-GraphPadding)+","+String(GraphPadding+(GraphH/2-GraphPadding)/3*5);}).attr("stroke","DimGray").attr("stroke-width",4).attr("stroke-dasharray","10,10");
d3.select("#GraphSvg").append("text").text("x").attr("id","GraphClose").attr("x",GraphW*0.98).attr("y",GraphPadding*0.9).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*60;}).attr("fill","DodgerBlue")
.on("mouseover", function () {
d3.select("#GraphClose").transition().attr("fill", "Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#GraphClose").transition().attr("fill", "DodgerBlue").delay(0).duration(250);
})
.on("click", function () {
d3.select("#GraphSvg").remove();
GraphOpen = "no";
GraphHnew = GraphHdefault;
GraphWnew = GraphWdefault;
GraphNewLocation = [2000,2375];
//Reveal the Tabs when graph closed
hideOrshowhtmlElements ("1");
//Reveal the Tabs when graph closed
});
d3.select("#GraphSvg").append("text").text("relocate").attr("id","GraphRelocate").attr("x",GraphW*0.05).attr("y",GraphPadding*0.9).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*40;}).attr("fill","DodgerBlue")
.on("mouseover", function () {
MouseOut = 0;
d3.select("#GraphRelocate").transition().attr("fill", "Orange").delay(0).duration(250);
})
.on("mouseout", function () {
MouseOut = 1;
d3.select("#GraphRelocate").transition().attr("fill", "DodgerBlue").delay(0).duration(250);
})
.on("click", function () {
Relocate = 1;
});
d3.select("#GraphSvg").append("text").text("refresh").attr("id","GraphRefresh").attr("x",GraphW*0.15).attr("y",GraphPadding*0.9).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*40;}).attr("fill","DodgerBlue")
.on("mouseover", function () {
d3.select("#GraphRefresh").transition().attr("fill", "Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#GraphRefresh").transition().attr("fill", "DodgerBlue").delay(0).duration(250);
})
.on("click", function () {
d3.select("#GraphSvg").remove();
d3.select("annotation").call(InsertGraph,[GraphWnew,GraphHnew,GraphNewLocation[0],GraphNewLocation[1]]);
});
d3.select("#GraphSvg").append("text").text("+").attr("id","GraphEnlarge").attr("x",GraphW*0.95).attr("y",GraphPadding*0.9).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*60;}).attr("fill","DodgerBlue")
.on("mouseover", function () {
d3.select("#GraphEnlarge").transition().attr("fill", "Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#GraphEnlarge").transition().attr("fill", "DodgerBlue").delay(0).duration(250);
})
.on("click", function () {
GraphWnew = GraphWnew*1.25;
GraphHnew = GraphHnew*1.25;
d3.select("#GraphSvg").remove();
d3.select("annotation").call(InsertGraph,[GraphWnew,GraphHnew,GraphNewLocation[0],GraphNewLocation[1]]);
});
d3.select("#GraphSvg").append("text").text("-").attr("id","GraphMinimize").attr("x",GraphW*0.92).attr("y",GraphPadding*0.9).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*60;}).attr("fill","DodgerBlue")
.on("mouseover", function () {
d3.select("#GraphMinimize").transition().attr("fill", "Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select("#GraphMinimize").transition().attr("fill", "DodgerBlue").delay(0).duration(250);
})
.on("click", function () {
GraphWnew = GraphWnew*0.8;
GraphHnew = GraphHnew*0.8;
d3.select("#GraphSvg").remove();
d3.select("annotation").call(InsertGraph,[GraphWnew,GraphHnew,GraphNewLocation[0],GraphNewLocation[1]]);
});
d3.select("#GraphSvg").append("text").text(function () {return String(GraphWindowSize)+"AA";}).attr("id","GraphWindowSizeIndicator").attr("x",GraphWnew*0.5).attr("y",GraphPadding*0.8).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50;}).attr("fill","DodgerBlue");
d3.select("#GraphSvg").append("path").attr("id","GraphWindowSizeLTriangle").attr("d",function() {return "M "+String(GraphWnew*0.5-Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*100)+","+String(GraphPadding*0.2)+" L "+String(GraphWnew*0.5-Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*125)+","+String(GraphPadding*0.5)+" L"+String(GraphWnew*0.5-Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*100)+","+String(GraphPadding*0.8)+" Z";}).attr("stroke","DodgerBlue").attr("stroke-width",0).attr("fill","DodgerBlue").attr("fill-opacity",0.9)
.on("mouseover", function() {
d3.select(this).transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function() {
d3.select(this).transition().attr("fill","DodgerBlue").delay(0).duration(250);
})
.on("click", function() {
if (GraphWindowSize > 10) {
GraphWindowSize = GraphWindowSize-10;
} else {
GraphWindowSize = 100;
}
d3.select("#GraphSvg").remove();
d3.select("annotation").call(InsertGraph,[GraphWnew,GraphHnew,GraphNewLocation[0],GraphNewLocation[1]]);
});
d3.select("#GraphSvg").append("path").attr("id","GraphWindowSizeRTriangle").attr("d",function() {return "M "+String(GraphWnew*0.5+Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*100)+","+String(GraphPadding*0.2)+" L "+String(GraphWnew*0.5+Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*125)+","+String(GraphPadding*0.5)+" L"+String(GraphWnew*0.5+Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*100)+","+String(GraphPadding*0.8)+" Z";}).attr("stroke","DodgerBlue").attr("stroke-width",0).attr("fill","DodgerBlue").attr("fill-opacity",0.9)
.on("mouseover", function() {
d3.select(this).transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function() {
d3.select(this).transition().attr("fill","DodgerBlue").delay(0).duration(250);
})
.on("click", function () {
if (GraphWindowSize < 100) {
GraphWindowSize = GraphWindowSize+10;
} else {
GraphWindowSize = 10;
}
d3.select("#GraphSvg").remove();
d3.select("annotation").call(InsertGraph,[GraphWnew,GraphHnew,GraphNewLocation[0],GraphNewLocation[1]]);
});
//***When you click on Graph, what is clicked on the sequence is noted. If nothing is chosen, there is nothing to show. This is necessary due to the fact that when "Clicked" items are 0 and the feature count is 0, that graph point will be 0 instead of -3 (nothing on sequence, but feature != 0) which makes a spike.
var WhatsClickedSequence = [];
for (i=0;i<d3.keys(aminoacids).length;i++) {
if(aminoacids[d3.keys(aminoacids)[i]][2]=="Clicked") {
WhatsClickedSequence.push(d3.keys(aminoacids)[i]);
}
}
//***When you click on Graph, what is clicked on the sequence is noted. If nothing is chosen, there is nothing to show. This is necessary due to the fact that when "Clicked" items are 0 and the feature count is 0, that graph point will be 0 instead of -3 (nothing on sequence, but feature != 0) which makes a spike.
//***Crating Data Points
if (!(AminoAcidProperties[AminoAcidPropertiesCount].match(/^All$|^None$/)) && (WhatsClickedSequence.length != 0)) {
for (var i = 0; i < fasta_sorted.length/GraphWindowSize;i++) {
var AAscore = 0;
var FeatureScore = 0;
for (var j = i*GraphWindowSize;j<i*GraphWindowSize+GraphWindowSize;j++) {
if (fasta_sorted[j] !== undefined) {
if (aminoacids[fasta_sorted[j]][2] == "Clicked") {
AAscore++;
}
}
}
if(!(AminoAcidProperties[AminoAcidPropertiesCount].match(/^Sequence Display$/))) {
for (var k = i*GraphWindowSize;k<i*GraphWindowSize+GraphWindowSize;k++) {
if (fasta_sorted[k] !== undefined) {
if ((aminoacids[fasta_sorted[k]].some(function(x){return x.match(AminoAcidProperties[AminoAcidPropertiesCount]);})) || (aminoacids_OtherProperties[fasta_sorted[k]].some(function(x){return x.match(AminoAcidProperties[AminoAcidPropertiesCount]);}))) {
FeatureScore++;
}
}
}
} else {
for (var k = i*GraphWindowSize;k<i*GraphWindowSize+GraphWindowSize;k++) {
var MatchedElement;
for (var iPrime = 0;iPrime<ids["scat"].length;iPrime++) {
if(parseInt(ids["scat"][iPrime].replace(/.*_/,""))-1 == k) {
MatchedElement = iPrime;
break;
}
}
if (fasta_sorted[k] !== undefined) {
if (d3.select(ids["scat"][MatchedElement]).attr("fill-opacity") != 0) {
FeatureScore++;
}
}
}
}
var point;
if ((AAscore != 0) && (FeatureScore == 0)) {
point = 3;
} else if ((AAscore == 0) && (FeatureScore != 0)) {
point = -3;
} else if ((AAscore == 0) && (FeatureScore == 0)) {
point = 0;
} else {
point = Math.log(AAscore/FeatureScore)/Math.log(2);
point = parseFloat(point.toFixed(2));
if (point > 3) {
point = 3;
} else if (point < -3) {
point = -3;
}
}
GraphData.push(point);
}
}
if (GraphData.length != 0) {
d3.select("#GraphSvg")
.selectAll("GraphLineElements")
.data(GraphData)
.enter()
.append("path")
.attr("d",function (d,i) {
var x = 2*GraphPadding+((GraphW-3*GraphPadding)/GraphData.length)/2+i*((GraphW-3*GraphPadding)/GraphData.length);
var y = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(d-3);
return "M "+String(x)+","+String(y)+" L "+String(x)+","+String(y);
})
.attr("stroke","Orange")
.attr("stroke-width",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*12;})
.attr("class","GraphLines")
.on("mouseover", function (d,i) {
var x = 2*GraphPadding+((GraphW-3*GraphPadding)/GraphData.length)/2+i*((GraphW-3*GraphPadding)/GraphData.length);
var y = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(d-3);
d3.select(this).transition().attr("stroke-width",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*18;}).attr("stroke","DarkSalmon").delay(0).duration(250);
d3.select("#GraphSvg").append("circle").attr("id","GraphLinesStartPoint").attr("cx",function() {return x;}).attr("cy",function () {return y;}).attr("r", function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*30;}).attr("fill","DarkSalmon").attr("fill-opacity",0.75).attr("stroke","DarkSalmon").attr("stroke-opacity",0).attr("stroke-width",0);
d3.select("#GraphSvg").append("text").text(function() {return "log2 value = "+String(GraphData[i]);}).attr("id","GraphLinesLog2Value").attr("x",function() {var radius = parseFloat(d3.select("#GraphLinesStartPoint").attr("r"));if (i <= GraphData.length/2){return x+1*radius;}else {return x-15*radius;}}).attr("y",function() {var radius = parseFloat(d3.select("#GraphLinesStartPoint").attr("r"));if (GraphData[i] <= 0){return y-3*radius;}else{return y+3*radius;}}).attr("text-anchor",function() {if (i <= GraphData.length/2){return "start";}else {return "end";}}).attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*70;}).attr("fill","Black");
d3.select("#GraphSvg").append("text").text(function() {return "Aminoacids "+String(1+i*GraphWindowSize)+" to "+String(GraphWindowSize+i*GraphWindowSize);}).attr("id","GraphLinesAAindicator").attr("x",function() {return GraphWnew/2;}).attr("y",function() {if (d >= 0) {return GraphHnew*4/5;} else {return GraphHnew*1/5;}}).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*200;}).attr("fill","DarkSalmon").attr("fill-opacity",0.8);
})
.on("mouseout",function() {
d3.select(this).transition().attr("stroke-width",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*12;}).attr("stroke","Orange").delay(0).duration(250);
d3.select("#GraphLinesStartPoint").remove();
d3.select("#GraphLinesLog2Value").remove();
d3.select("#GraphLinesAAindicator").remove();
});
d3.selectAll(".GraphLines").data(GraphData).each(function(d,i) {
d3.select(this)
.transition()
.attr("d", function (){
if (i != GraphData.length-1) {
var x = 2*GraphPadding+((GraphW-3*GraphPadding)/GraphData.length)/2+i*((GraphW-3*GraphPadding)/GraphData.length);
var y = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(d-3);
var x_prime = 2*GraphPadding+((GraphW-3*GraphPadding)/GraphData.length)/2+(i+1)*((GraphW-3*GraphPadding)/GraphData.length);
var y_prime = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(GraphData[i+1]-3);
return "M "+String(x)+","+String(y)+" L "+String(x_prime)+","+String(y_prime);
}
})
.delay(function () {
var RenderLength = parseFloat((2500/(GraphData.length-1)).toFixed(0));
return i*RenderLength;
})
.duration(function () {
var RenderLength = parseFloat((2500/(GraphData.length-1)).toFixed(0));
return RenderLength;
});
});
}
//***Crating Data Points
//***blosum62squarematrix
var AminoacidsSquareMatrixNumber = {"A":["1"],"R":["2"],"N":["3"],"D":["4"],"C":["5"],"Q":["6"],"E":["7"],"G":["8"],"H":["9"],"I":["10"],"L":["11"],"K":["12"],"M":["13"],"F":["14"],"P":["15"],"S":["16"],"T":["17"],"W":["18"],"Y":["19"],"V":["20"]};
blosum62 = [
[ 4, -1, -2, -2, 0, -1, -1, 0, -2, -1, -1, -1, -1, -2, -1, 1, 0, -3, -2, 0],
[-1, 5, 0, -2, -3, 1, 0, -2, 0, -3, -2, 2, -1, -3, -2, -1, -1, -3, -2, -3],
[-2, 0, 6, 1, -3, 0, 0, 0, 1, -3, -3, 0, -2, -3, -2, 1, 0, -4, -2, -3],
[-2, -2, 1, 6, -3, 0, 2, -1, -1, -3, -4, -1, -3, -3, -1, 0, -1, -4, -3, -3],
[ 0, -3, -3, -3, 9, -3, -4, -3, -3, -1, -1, -3, -1, -2, -3, -1, -1, -2, -2, -1],
[-1, 1, 0, 0, -3, 5, 2, -2, 0, -3, -2, 1, 0, -3, -1, 0, -1, -2, -1, -2],
[-1, 0, 0, 2, -4, 2, 5, -2, 0, -3, -3, 1, -2, -3, -1, 0, -1, -3, -2, -2],
[ 0, -2, 0, -1, -3, -2, -2, 6, -2, -4, -4, -2, -3, -3, -2, 0, -2, -2, -3, -3],
[-2, 0, 1, -1, -3, 0, 0, -2, 8, -3, -3, -1, -2, -1, -2, -1, -2, -2, 2, -3],
[-1, -3, -3, -3, -1, -3, -3, -4, -3, 4, 2, -3, 1, 0, -3, -2, -1, -3, -1, 3],
[-1, -2, -3, -4, -1, -2, -3, -4, -3, 2, 4, -2, 2, 0, -3, -2, -1, -2, -1, 1],
[-1, 2, 0, -1, -3, 1, 1, -2, -1, -3, -2, 5, -1, -3, -1, 0, -1, -3, -2, -2],
[-1, -1, -2, -3, -1, 0, -2, -3, -2, 1, 2, -1, 5, 0, -2, -1, -1, -1, -1, 1],
[-2, -3, -3, -3, -2, -3, -3, -3, -1, 0, 0, -3, 0, 6, -4, -2, -2, 1, 3, -1],
[-1, -2, -2, -1, -3, -1, -1, -2, -2, -3, -3, -1, -2, -4, 7, -1, -1, -4, -3, -2],
[ 1, -1, 1, 0, -1, 0, 0, 0, -1, -2, -2, 0, -1, -2, -1, 4, 1, -3, -2, -2],
[ 0, -1, 0, -1, -1, -1, -1, -2, -2, -1, -1, -1, -1, -2, -1, 1, 5, -2, -2, 0],
[-3, -3, -4, -4, -2, -2, -3, -2, -2, -3, -2, -3, -1, 1, -4, -3, -2, 11, 2, -3],
[-2, -2, -2, -3, -2, -1, -2, -3, 2, -1, -1, -2, -1, 3, -3, -2, -2, 2, 7, -1],
[ 0, -3, -3, -3, -1, -2, -2, -3, -3, 3, 1, -2, 1, -1, -2, -2, 0, -3, -1, 4]];
//***blosum62squarematrix
//***Axes***
if ((WhatsClickedSequence.length != 0) && !(AminoAcidProperties[AminoAcidPropertiesCount].match(/^All$|^None$/))) {
//***Y-axis labels
d3.select("#GraphSvg").append("text").text(function() {var array = WhatsClickedSequence; return "More "+array.toString();}).attr("id","YaxisSequence").attr("x",GraphPadding*0.8).attr("y",GraphH*0.25).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {if (WhatsClickedSequence.length <= 5) {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50;}else{return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50*1/Math.sqrt(WhatsClickedSequence.length/5);}}).attr("fill","DodgerBlue").attr("transform",function () {return "rotate(-90 "+String(GraphPadding*0.8)+","+String(GraphH*0.25)+")";});
d3.select("#GraphSvg").append("text").text(function() {if(!(AminoAcidProperties[AminoAcidPropertiesCount].match(/^All$|^None$|^Sequence Display$/))){return "More "+String(AminoAcidProperties[AminoAcidPropertiesCount]);}else if (AminoAcidProperties[AminoAcidPropertiesCount].match(/^Sequence Display$/)){var array = WhatsClicked; return "More "+array.toString();} else {return "";}}).attr("id","YaxisFeature").attr("x",GraphPadding*0.8).attr("y",GraphH*0.75).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {if (!(AminoAcidProperties[AminoAcidPropertiesCount].match(/^Sequence Display$/))) {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50;} else if (WhatsClicked.length <= 5) {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50;} else {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*50*1/Math.sqrt(WhatsClicked.length/5);}}).attr("fill","DodgerBlue").attr("transform",function () {return "rotate(-90 "+String(GraphPadding*0.8)+","+String(GraphH*0.75)+")";});
//***Y-axis labels
//***X-axis scale
d3.select("#GraphSvg")
.selectAll("GraphTickElements")
.data(GraphData)
.enter()
.append("rect")
.attr("x",function(d,i) {
var TickWidth = GraphPadding/10;
return 2*GraphPadding+((GraphW-3*GraphPadding)/GraphData.length)/2+i*((GraphW-3*GraphPadding)/GraphData.length)-TickWidth/2;
})
.attr("y",GraphH/2)
.attr("width",function (d,i) {
var TickWidth = GraphPadding/10;
if (i % 5 == 0) {
return 2*TickWidth;
} else {
return TickWidth;
}
})
.attr("height",function (d,i) {
if (i % 5 == 0) {
return 2*GraphHnew*12/GraphHdefault;
} else {
return GraphHnew*12/GraphHdefault;
}
})
.attr("fill","DimGray");
//***X-axis scale
}
//***Axes***
//***If only one aminoacid is clicked on the sequence and the feature track than this part calculates possible aggreement between graph and blosum62 scores.
if ((WhatsClickedSequence.length == 1) && (WhatsClicked.length == 1) && (String(AminoAcidProperties[AminoAcidPropertiesCount]) == "Sequence Display")) {
//***Score of the single AA->AA substitution from blosum62 matrix***
var Blosum62Value = blosum62[parseInt(AminoacidsSquareMatrixNumber[WhatsClickedSequence[0]])-1][parseInt(AminoacidsSquareMatrixNumber[WhatsClicked[0]])-1];
//***Score of the single AA->AA substitution from blosum62 matrix***
var ColorScale = {"0":"rgb(255,255,204)","1":"rgb(194,230,153)","2":"rgb(120,198,121)","3":"rgb(35,132,67)"};
//***below is agreement value. It is 1 minus the p value times two. 1.65 p value is around 0.05 so it is 1-0.1 = 0.9.
var Zthresholds = {"1.65":"90","1.29":"80","1.04":"70","0.85":"60","0.68":"50","0.53":"40","0.39":"30","0.26":"20","0.13":"10"};
//***Dynamically calculate max and min of the square matrix and linearly map absolute values of log ratios to this range***
var blosum62MinMax = [0,0];
for (var i = 0;i<blosum62.length;i++){
var min = d3.min(blosum62[i]);
var max = d3.max(blosum62[i]);
if (min < blosum62MinMax[0]) {
blosum62MinMax[0] = min;
}
if(max > blosum62MinMax[1]) {
blosum62MinMax[1] = max;
}
}
var LinearMapStep = (blosum62MinMax[1]-blosum62MinMax[0])/3;
var Blosum62AgreementData = [];
for (var i = 0;i<GraphData.length;i++) {
var LinearProjectionLogValue = blosum62MinMax[1] - LinearMapStep*Math.abs(GraphData[i]);
var AgreementQuotient = 3 - Math.abs(LinearProjectionLogValue - Blosum62Value)/LinearMapStep;
//***If the value is smaller than a threshold set by random similarity (7.5(scale of 0 to 15 which corresponds to 1.5 of scale of 0 to 3) in this case, midpoint of 0(no difference) and 15 (max difference)), than the quotient is 0***
if (AgreementQuotient < 3/2) {
AgreementQuotient = 0;
}
//***If the value is smaller than a threshold set by random similarity (7.5(scale of 0 to 15 which corresponds to 1.5 of scale of 0 to 3) in this case, midpoint of 0(no difference) and 15 (max difference)), than the quotient is 0***
Blosum62AgreementData.push(AgreementQuotient);
}
//***Dynamically calculate max and min of the square matrix and linearly map absolute values of log ratios to this range***
//***Draw Agreement Graph***
d3.select("#GraphSvg")
.selectAll("GraphLineBlosum62Elements")
.data(Blosum62AgreementData)
.enter()
.append("path")
.attr("d",function (d,i) {
var x = 2*GraphPadding+((GraphW-3*GraphPadding)/Blosum62AgreementData.length)/2+i*((GraphW-3*GraphPadding)/Blosum62AgreementData.length);
var y = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(d-3);
return "M "+String(x)+","+String(y)+" L "+String(x)+","+String(y);
})
.attr("stroke",function(d,i) {return ColorScale[String(parseInt(d))];})
.attr("stroke-width",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*12;})
.attr("class","GraphBlosum62Lines")
.on("mouseover",function(d,i) {
d3.select("#Blosum62Window").remove();
d3.select("#Blosum62PvalueIndicator").remove();
d3.select("#GraphSvg")
.append("rect")
.attr("x",function() {return 2*GraphPadding+((GraphW-3*GraphPadding)/Blosum62AgreementData.length)/2+i*((GraphW-3*GraphPadding)/Blosum62AgreementData.length);})
.attr("y",GraphPadding)
.attr("width",function() {return ((GraphW-3*GraphPadding)/Blosum62AgreementData.length);})
.attr("height",function() {return GraphH-2*GraphPadding;})
.attr("fill",function() {return ColorScale[String(parseInt(d))];})
.attr("fill-opacity",0.5)
.attr("id","Blosum62Window")
.on("mouseover",function() {
var thresholds = d3.keys(Zthresholds).sort(d3.descending);
var p_value;
for (var i = 0;i<thresholds.length;i++) {
var StandardDeviation = 0.5;
var Mean = 1.5;
var DistanceToMean =(d-Mean)/StandardDeviation;
if (parseFloat(thresholds[i])<DistanceToMean) {
p_value = (100-Zthresholds[thresholds[i]])/200;
break;
}
if((i == thresholds.length - 1) && (p_value === undefined)) {
p_value = "insignificant";
}
}
d3.select("#GraphSvg").append("text").text(function() {return "Blosum62 agreement score: "+String(d.toFixed(2))+",p-value<="+String(p_value);}).attr("id","Blosum62PvalueIndicator").attr("x",function() {return GraphWnew/2;}).attr("y",function() {if (d >= 0) {return GraphHnew*4/5;} else {return GraphHnew*1/5;}}).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*80;}).attr("fill","DarkSalmon").attr("fill-opacity",0.8);
})
.on("mouseout",function() {
d3.select("#Blosum62Window").remove();
d3.select("#Blosum62PvalueIndicator").remove();
});
});
d3.selectAll(".GraphBlosum62Lines").data(Blosum62AgreementData).each(function(d,i) {
d3.select(this)
.transition()
.attr("d", function (){
if (i != Blosum62AgreementData.length-1) {
var x = 2*GraphPadding+((GraphW-3*GraphPadding)/Blosum62AgreementData.length)/2+i*((GraphW-3*GraphPadding)/Blosum62AgreementData.length);
var y = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(d-3);
var x_prime = 2*GraphPadding+((GraphW-3*GraphPadding)/Blosum62AgreementData.length)/2+(i+1)*((GraphW-3*GraphPadding)/Blosum62AgreementData.length);
var y_prime = GraphPadding+(GraphH-2*GraphPadding)/6*Math.abs(Blosum62AgreementData[i+1]-3);
return "M "+String(x)+","+String(y)+" L "+String(x_prime)+","+String(y_prime);
}
})
.delay(function () {
var RenderLength = parseFloat((2500/(Blosum62AgreementData.length-1)).toFixed(0));
return i*RenderLength;
})
.duration(function () {
var RenderLength = parseFloat((2500/(Blosum62AgreementData.length-1)).toFixed(0));
return RenderLength;
});
});
//***Draw Agreement Graph***
//***Incase of AA->AA change give options to hide either of two graphs
d3.select("#GraphSvg").append("text").text("hide Blosum62").attr("id","hideBlosum62").attr("x",GraphW*0.33).attr("y",GraphH-GraphPadding*0.2).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*45;}).attr("fill","DodgerBlue")
.on("mouseover", function() {
d3.select("#hideBlosum62").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function() {
d3.select("#hideBlosum62").transition().attr("fill","DodgerBlue").delay(0).duration(250);
})
.on("click", function() {
d3.select("#hideBlosum62").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#showBlosum62").transition().attr("visibility","visible").delay(0).duration(0);
d3.selectAll(".GraphBlosum62Lines").transition().attr("visibility","hidden").delay(0).duration(0);
});
d3.select("#GraphSvg").append("text").text("show Blosum62").attr("id","showBlosum62").attr("x",GraphW*0.33).attr("y",GraphH-GraphPadding*0.2).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*45;}).attr("fill","DodgerBlue").attr("visibility","hidden")
.on("mouseover", function() {
d3.select("#showBlosum62").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function() {
d3.select("#showBlosum62").transition().attr("fill","DodgerBlue").delay(0).duration(250);
})
.on("click", function() {
d3.select("#showBlosum62").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#hideBlosum62").transition().attr("visibility","visible").delay(0).duration(0);
d3.selectAll(".GraphBlosum62Lines").transition().attr("visibility","visible").delay(0).duration(0);
});
d3.select("#GraphSvg").append("text").text("hide LogPlot").attr("id","hideLogPlot").attr("x",GraphW*0.66).attr("y",GraphH-GraphPadding*0.2).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*45;}).attr("fill","DodgerBlue")
.on("mouseover", function() {
d3.select("#hideLogPlot").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function() {
d3.select("#hideLogPlot").transition().attr("fill","DodgerBlue").delay(0).duration(250);
})
.on("click", function() {
d3.select("#hideLogPlot").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#showLogPlot").transition().attr("visibility","visible").delay(0).duration(0);
d3.selectAll(".GraphLines").transition().attr("visibility","hidden").delay(0).duration(0);
});
d3.select("#GraphSvg").append("text").text("show LogPlot").attr("id","showLogPlot").attr("x",GraphW*0.66).attr("y",GraphH-GraphPadding*0.2).attr("text-anchor","middle").attr("font-family","Arial").attr("font-size",function () {return Math.sqrt((GraphWnew*GraphHnew)/(GraphWdefault*GraphWdefault))*45;}).attr("fill","DodgerBlue").attr("visibility","hidden")
.on("mouseover", function() {
d3.select("#showLogPlot").transition().attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function() {
d3.select("#showLogPlot").transition().attr("fill","DodgerBlue").delay(0).duration(250);
})
.on("click", function() {
d3.select("#showLogPlot").transition().attr("visibility","hidden").delay(0).duration(0);
d3.select("#hideLogPlot").transition().attr("visibility","visible").delay(0).duration(0);
d3.selectAll(".GraphLines").transition().attr("visibility","visible").delay(0).duration(0);
});
//***Incase of AA->AA change give options to hide either of two graphs
}
//***If only one aminoacid is clicked on the sequence and the feature track than this part calculates possible aggreement between graph and blosum62 scores.
}
//This one is for sequence/SNV/connector neon affect.
//The function below is called (not from d3, that makes the arguments complicated) for ids["seq"], ids["mut"] and ids["connector"]. You give 1 argument, the id of the element and it return what kind of text shadow it shall get.
//declare a global variable that I will later design some illustration for user control:
var NeonizeMe = 1;
//***Add a global controller where the user can choose to turn on/off Neon Effect***
var neonEffect= "On";
d3.select("#annotation").append("text").text(function() {return "Neon "+neonEffect;}).attr("x",5950).attr("y",375).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","middle").style("fill","DimGray").attr("id","neonEffect")
.on("mouseover",function () {
d3.select("#neonEffect").style("fill","Orange");
})
.on("mouseout",function () {
d3.select("#neonEffect").style("fill","DimGray");
})
.on("click",function () {
d3.select("#neonEffect").transition().attr("fill-opacity",0).each("end",function() {
if (neonEffect == "On") {
neonEffect = "Off";
NeonizeMe = 0;
} else {
neonEffect = "On";
NeonizeMe = 1;
}
document.getElementById("neonEffect").textContent = "Neon "+neonEffect;
d3.select("#neonEffect").transition().attr("fill-opacity",1.0).delay(0).duration(500);
}).delay(0).duration(500);
});
//***Add a global controller above where the user can choose to turn on/off Neon Effect***
function Neonizer() {
if ((NeonizeMe == 1) && !(d3.select(arguments[0]).style("fill") === "none")) {
if(String(arguments[0]).match(/rsID|connector/ig)) {
var rgb = d3.select(arguments[0]).style("fill");
rgb = !(rgb.match(/#/g)) ? rgb : convertHexToRgb(rgb);
rgb = rgb.replace(/rgb\(|\)/ig,"");
return "0px 0px 15px "+String("rgba("+rgb+", 1)")+",0px 0px 2px rgba(255,250,250,0.6),0 0 10px "+String("rgba("+rgb+", 1)")+",0px 0px 16px "+String("rgba("+rgb+", 1)")+",0px 0px 43px "+String("rgba("+rgb+", 1)")+",0px 0px 69px "+String("rgba("+rgb+", 1)")+",0px 0px 111px "+String("rgba("+rgb+", 1)");
} else {
var rgb = d3.select(arguments[0]).style("fill");
rgb = !(rgb.match(/#/g)) ? rgb : convertHexToRgb(rgb);
rgb = rgb.replace(/rgb\(|\)/ig,"");
return "0px 0px 10px "+String("rgba("+rgb+", 0.8)")+",0px 0px 3px white,0px 0px 5px white,0px 0px 8px white,0px 0px 10px "+String("rgba("+rgb+", 1)")+",0px 0px 18px "+String("rgba("+rgb+", 0.9)")+",0px 0px 25px "+String("rgba("+rgb+", 0.7)")+",0px 0px 38px "+String("rgba("+rgb+", 0.6)");
}
} else {
return "none";
}
}
function convertHexToRgb (hex) {
hex = hex.replace("#","");
var r = parseInt(hex.slice(0,2),16);
var g = parseInt(hex.slice(2,4),16);
var b = parseInt(hex.slice(4,6),16);
return "rgb("+r+", "+g+", "+b+")";
}
//The function above is called (not from d3, that makes the arguments complicated) for ids["seq"], ids["mut"] and ids["connector"]. You give 1 argument, the id of the element and it return what kind of text shadow it shall get.
<!--Prediction Related Stuff-->
//***Add a global controller where the user can choose to color/figure code SNV predictions***
var colorCoding= "On";
d3.select("#annotation").append("text").text(function() {return "Color-coding "+colorCoding;}).attr("x",5950).attr("y",275).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","middle").style("fill","DimGray").attr("id","colorCoding")
.on("mouseover",function () {
d3.select("#colorCoding").style("fill","Orange");
})
.on("mouseout",function () {
d3.select("#colorCoding").style("fill","DimGray");
})
.on("click",function () {
d3.select("#colorCoding").transition().attr("fill-opacity",0).each("end",function() {
if (colorCoding == "On") {
colorCoding = "Color-blind";
} else {
colorCoding = "On";
}
document.getElementById("colorCoding").textContent = "Color-coding "+colorCoding;
d3.select("#colorCoding").transition().attr("fill-opacity",1.0).delay(0).duration(500);
}).delay(0).duration(500);
});
//***Add a global controller above where the user can choose to color/figure code SNV predictions***
//***this is the database hash: the array has the keyword and the threshold for deleteriousness***
var predictionDatabase = {"1":["polyphen2","0.85"],"2":["sift","0.05","inverse"]};
var logoAngelAltCb = "data:image/png;base64,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";
var logoAngelAlt ="data:image/png;base64,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";
var logoDemonAlt ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKsAAAAXCAYAAAB04L8XAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAADEwAAAxMBPWaDxwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAk6SURBVGiB7Zt7sFdVFcc/i6e8BARF8SqYoCQ2Slwge8gjjXhkaFgzEDoKhtEYUFk2Q+okRIkJJOAEJY5RkpANKFhOWoqlEN3A4CYqD3kYXBEu8rpwkW9/7N/Pe+7+7fM753ef//Cd2QNn7+/aa5191m8/1trXBDvIj9NABXAM2AVsAJYibUmQqzuYbQLaRmp+grSwAfS2BIqQtta7rrQwKwJe8WpvQXq5McxpSDQDuhXA7wuMAu7DbBXwDaT/1Ytl1dGN6s56dr1rNBsNPAg8Asyud33pEfpmrRrDkIZGkxrKGTASKMGsuA7taXyYfRKzl4FlwCWNbc4ZVKFZoK4St+QDtInhZHE+8EfM+iDtr2vjGgnrgKaNbcQZ5CI0sy5H6pApzXEOewHQD1gCfOjxi4B59Wtmg6Kmq01DYTduxo+WlxrVogZC8oeRjiHtRVqPNA74FHDKY92M2cfqw8Az8CCdQtrhlYrGNqshkG+JD0Naj9lc4LuR2ibAHcAPgzJmBtwCDAKuBnoBx4FtwCrgUaS9BdsS1tUG+BZQnNHVDSgHNgFPA78OflyzJ3F7cfNaxmE2IPP/J5BWB2SLgTEZfVcBLYEy4K/AYiT/9B6VnQ70iNTMAkqBnwJDga7AG8AipEWYnYs79EUxE2ljHh29gfG48b8Q6Igbky248V+E9H4e+btxh+ssSpAejOEuobpfLUb6c4B3Fs5nhuNW5yLcuL2HG7t/AL9EKv1IRiCv/E4SeQu0Exz35NbGcLsKng/oiZYjgvF59B32+N+L4fUXvJmga6fgmoDs6QQ5CaZ6Mk0F0wSVCXJLBa1ibF7rcUcJlgX6eDHD7x5oG5rnOy1J8V4fCCblGf+VHn9VHu5Jj3tXgHO9YE8KuyR4OCtXM2cND3KloLXH6SnYn9IoCSbW2FnhphROky1HBf1r5azQRLC6gHd7QdA0xTiuj5G/rSBnhU5K/uH6ZU69OytcKjhYoF0zJNXqMPGW99wMdxDLTvMGPAl0inAEPAbcBtyNW4aimI1Zz4ItMeua6Te6/BwBZgLjgOm4ZS+L1sATmaB/Fhszxce7kbaySP13gGEedx0wGZiA23JEMYTqW6c4RJfbo5l/jwPLU8hGsRjwx7IceAZYAKzBfY8oJmM2oUA9heIeoEPk+d/At4FPA32AKbhtTxRTMOtcm5l1QUC2b6R9VKB9nNdHK8FrHufRgmdWeMhrPya4wuNcJCj3eGNTbAemBjitlbtirBA083j3eJwyQfOEmVVyW5X+AhMUVxu3NDMr3BDgrBF09XhDBQc83n7B2fU4s27w2kcF+uglt/ptFfxBbqvVvTbO+vOA7OBI+3KvbV1MP9d5vHL5y2Wys+712mfH6Lrf4z1XQ2f9SuDdewR4zQXveryRKZx1TJ5xT+Osz3rtRwQXxPR3Z6C/b9ajs2702t8UjBd09ngt/L5rsw1oE6g7Gvn/Z7y29TH9rPWe2wOXpbbC7FKgi1f7zxj2a95zv9R6qsN/t0NIb+ewpErgX15t/4S+D+C2TzWDWQvgi17t48SnxX+FO4FH4W9v6hKves89MzaUYbYJs3mYjSQQqSo8dFWFUH7+AABmzXHZrSi+itmQmL5E9ZDRFcB/U9pxUaDuZ5jdG6hv6T13wqwL0r6UuuJ0tsbM32dl4Y9D74S+dyCpQHui6E5uBm5zLFs6hVkpMDBSW/i5oQpJE+AvgJuBc7x6w41Nb1zosQKzF4AHkNZC7ZzVf6FTuMMIQLsAvxPVD1v50L4AO0I/mqIC5NsDhTqrr7M5cHkNZX3UNt4cGuM9CTI7veeOCfyzgrXuUJ0/VS2VYjYMdwC9MEHHCGA4ZguR7qyZs5q1BT7h1ZYgZe8UlOPuGDSPtO8B0t4fOJpM+Qj+EgYuylCfWZ0y7/kokLsNCGN3Qntt7Q45u79N8uE7zcEEfmgyAmiRIOcgrcOsO3ADLnIyEBehCcGAiZi9XtOZ9fvkLqnPR4w5jdk7VM/MPI40rYb68mFboG4K0p/qqH8/owWw3Xveh3R1Hek7UUv5PeRuq+LPAG42/LhXm3R/N85Z066cbvvhZtenM9vG/sDgTBlI7gx9a+EHLLMe5MYLK4D5Xp0/04QPFmaXYTYWsz6YFX4v0+03j6TUNRCzGzG7HLO4H+pJ7zk0W/jv1h2z8wL6mmI2HrNBwfZ0+guDdBKXqozidszilvYxROPjDv4P3R/fOGftk2ifWRfMrsVsAmYzMGuFVIn0d6TpSJ/H7bvXeJJXhkJXywQdIuV8wZWCQYJ5goqAzNxACONrAd7wAG9NpP1DQamgbYGhq0e89kOCIo/TSfB+hHNCsCxgT5nX1/QA52zlZmF+E+BN8jj7BV9KCF09lhAyTBO6mhDgrBS093jFyg2tlQs6eLz5HueUYIDHOUewLaD3rghndKD9xzHvOc/jlYSctdCyQaG8t0tHbvG4JwT3CQYIhgl+G+gvN+WX7KwXKze+ty/z0a4SfF3wSkDX6ICurR7noGCWXHD6jgjvgUB/z8oF2osF9yo3CbFT0LIBnLW1YHOAt1MumfMDufsKJwKcyQGdYwO8dwRTBUMy71oa4x9RZ22qXIeuEEzOvFdLueTNRLmkQJQ3q7bOukVwSZ6BHab0+fpsf50D/aS5G+AH/JPKCoEF+nkqj8zcCK+jcn+M+cpJ+bNqfTmr4/WSW2EKGZPFMTrbC95LIX9Y8B+vzk8KDJHLMBZi12ZBu5omBQ4Dc4C+SNtjWdJzuD3RoRR9vg5cS03/4kC6H5hB7uXwEH4PjEZSoG0h7o8kQ6gKiUkHgetwue0kHANuQnomBbduIL2Bu7KY5mJ2JfAj4PaYvg7hrhjmO/ztB24kKT4uvYi7FhiK4oSwHvgy0uFmJL+McIP9AS4eVwKsRjqcSpW0DLOXcBc8RuCCvtnDzUHcPdP5uL9QiHO0NVQPbeyK0TUNs6eASbi7oN1wp2LhYqmvAg+T736p9JdM8mIm7m5qVu9W/IOLtAuzfsCtwGjgc1T9YeMJ3F8OLwXmI8V9nBLcRZUs4pILWVSQ+80OxLzLdswGA1/A3Se+Hjg3wngbd591DtKOvFqllZhdg7uzPIKqcdmNy7g9hFSG2Wc9+3JDddLfMLsYGIu71NQDOA/3rSozMm8BC5BWZMX+D3e4AEZ07XSAAAAAAElFTkSuQmCC";
//Supply 2 arguments, 1: the database hash, 2: the id of the element
function returnPredictionScores() {
var argument0 = arguments[0];
var argument1 = arguments[1];
//alert (arguments[0][String(1)][0]+","+arguments[1]+","+String(argument0)+","+String(argument1)+","+argument0[String(1)][0]);
for (var i = 1;i <= d3.keys(argument0).length;i++) {
d3.select("#annotation")
.append("text")
.text(function(){
var prediction = "";
var keyword = argument0[String(i)][0];
if(d3.select(argument1).attr(keyword).match(/^\s*[0-9]+[.]?[0-9]*\s*$/)) {
var predictionScore = parseFloat(d3.select(argument1).attr(keyword));
var benignOrDeleterious ;
if((argument0[String(i)][2] !== undefined)&&(argument0[String(i)][2].match(/inverse/i))) {
if (predictionScore > parseFloat(argument0[String(i)][1])) {
angelOrDemon("angel",i);
} else {
angelOrDemon("demon",i);
}
} else {
if (predictionScore < parseFloat(argument0[String(i)][1])) {
angelOrDemon("angel",i);
} else {
angelOrDemon("demon",i);
}
}
prediction = String(prediction)+argument0[String(i)][0]+" score: "+predictionScore.toFixed(2);
}
return prediction;
})
.attr("class","text2")
.attr("text-anchor","middle")
.attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-500;} else {return coordinates[0]+500;}})
.attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-200+i*250;} else {return coordinates[1]+200+i*250;}})
.attr("font-family","sans-serif")
.attr("font-size","100px")
.attr("fill","Orange")
.attr("stroke","Orange")
.attr("fill-opacity",0.0)
.attr("stroke-opacity",0.0)
.attr("visibility","visible")
}
}
//Supply 1:angel or demon, 2: the number of the prediction algorithm
//The logos has to be placed a bit right of the normal x coordinate and at the same y coordinate of the prediction text
function angelOrDemon () {
//alert(arguments[0]+","+arguments[1]);
var argument1 = arguments[1];
if (arguments[0].match(/angel/i)) {
d3.select("#annotation").append("svg:image").attr("xlink:href",function(){if(colorCoding.match(/on/i)){return logoAngelAlt;}else{return logoAngelAltCb;}}).attr("title","benign").attr("alt","benign").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]+50;} else {return coordinates[0]+1050;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-75+(parseInt(argument1)-1)*250;} else {return coordinates[1]+325+(parseInt(argument1)-1)*250;}}).attr("width","300px").attr("height","200px").attr("fill-opacity",0).style("opacity",0).attr("class","text2");
} else {
d3.select("#annotation").append("svg:image").attr("xlink:href",logoDemonAlt).attr("title","deleterious").attr("alt","deleterious").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]+50;} else {return coordinates[0]+1050;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-145+(parseInt(argument1)-1)*255;} else {return coordinates[1]+255+(parseInt(argument1)-1)*255;}}).attr("width","480px").attr("height","320px").attr("fill-opacity",0).style("opacity",0).attr("class","text2");
}
}
<!--Prediction Related Stuff-->
<!--Some unnecessary geek stuff -->
var ipvWatchOnOff = 0;
var currentTime;
var currentHourDial;
var currentSecondDial;
var ipvWatch = "data:image/png;base64,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";
d3.select("#annotation").append("svg:image").attr("xlink:href",ipvWatch).attr("title","ipvWatch").attr("alt","ipvWatch").attr("x",5550).attr("y",200).attr("width","100px").attr("height","100px").style("opacity",0.62).attr("id","ipvWatchIcon");
d3.select("#ipvWatchIcon")
.on("mouseover", function () {
d3.select(this).style("opacity",1);
})
.on("mouseout", function () {
d3.select(this).style("opacity",0.62);
})
.on("click",function () {
if (ipvWatchOnOff == 0) {
openWatch();
ipvWatchOnOff = 1;
//hide overview tabs
hideOrshowhtmlElements("0",false,true);
} else {
clearInterval(currentTime);
clearInterval(currentHourDial);
clearInterval(currentSecondDial);
d3.selectAll(".geekWatch").remove();
ipvWatchOnOff = 0;
//hide overview tabs
hideOrshowhtmlElements("1",false,true);
}
});
function openWatch() {
var date;
var time;
currentTime = setInterval(function () {
d3.select("#ipvWatch").remove();
d3.select("#annotation").append("text").text(timeFunction()).attr("x",3000).attr("y",3350).style("font-family","Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New").style("font-size","90px").attr("text-anchor","middle").attr("fill","Lime").attr("id","ipvWatch").attr("class","geekWatch");
},1000);
d3.select("#annotation").append("circle").attr("r",424).attr("cx",3000).attr("cy",3350).attr("fill-opacity",0).attr("fill","DeepPink").attr("stroke","DeepPink").attr("stroke-opacity",0.62).attr("stroke-width","28px").attr("class","geekWatch");
d3.select("#annotation").append("path").attr("d","M 3000,2926 L 3000,1600").attr("stroke-width","14px").attr("stroke","DeepPink").attr("stroke-opacity",0.62).attr("id","ipvHourDial").attr("class","geekWatch");
d3.select("#annotation").append("circle").attr("r",400).attr("cx",3000).attr("cy",3350).attr("fill-opacity",0).attr("fill","Orange").attr("stroke","Orange").attr("stroke-opacity",0.62).attr("stroke-width","20px").attr("class","geekWatch");
d3.select("#annotation").append("path").attr("d","M 3000,2950 L 3000,750").attr("stroke-width","10px").attr("stroke","Orange").attr("stroke-opacity",0.62).attr("id","ipvSecondDial").attr("class","geekWatch");
currentHourDial = setInterval(function () {
d3.select("#ipvHourDial").transition().attr("d",function() {var xPrime = 3000+(424+28/2-1)*Math.cos(watch("hour")); var yPrime = 3350-(424+28/2-1)*Math.sin(watch("hour")); var x = 3000+1400*Math.cos(watch("hour")); var y = 3000-1400*Math.sin(watch("hour")); return "M "+String(xPrime)+","+String(yPrime)+" L "+String(x)+","+String(y);}).delay(0).duration(618);
},1000);
currentSecondDial = setInterval(function () {
d3.select("#ipvSecondDial").transition().attr("d",function() {var xPrime = 3000+(400+20/2-1)*Math.cos(watch("default")); var yPrime = 3350-(400+20/2-1)*Math.sin(watch("default")); var x = 3000+2250*Math.cos(watch("default")); var y = 3000-2250*Math.sin(watch("default")); return "M "+String(xPrime)+","+String(yPrime)+" L "+String(x)+","+String(y);}).delay(0).duration(618);
},1000);
function timeFunction() {
date = new Date();
time = date.toLocaleTimeString();
return time;
}
function watch() {
var angle = parseInt(time.split(/:|\s/)[2]);
/*if (angle == 0) {
angle = 60;
}*/
if (arguments[0].match(/seconds/)){
return angle;
} else {
if (arguments[0].match(/hour/)) {
var minutes = parseInt(time.split(/:|\s/)[1]);
var hours = parseInt(time.split(/:|\s/)[0]);
var totalSeconds = minutes*60+angle;
var angleHour = totalSeconds/3600*30+hours*30;
angleHour = angleHour/360*2*Math.PI;
angleHour = Math.PI/2-angleHour;
return angleHour;
} else {
angle = 6*angle;
angle = angle/360*2*Math.PI;
angle = Math.PI/2-angle;
return angle;
}
}
}
}
<!--Some unnecessary geek stuff -->
<!--Drag mechanism -->
//Global Drag variables that will be automatically refreshed for each new draggable element
var dragOffsetX = 0;
var dragOffsetY = 0;
var dragX = 0;
var dragY = 0;
//Global Drag variables that will be automatically refreshed for each new draggable element
//Supply the drag event handler and also the id of the element to be operated on.
function dragStart(event) {
//alert(event.target.id);--> Check for bubbling
dragX = parseFloat(event.pageX)*4.67-500;
dragY = parseFloat(event.pageY)*4;
dragOffsetX = dragX-parseFloat(d3.select(arguments[1]).attr("x"));
dragOffsetY = dragY-parseFloat(d3.select(arguments[1]).attr("y"));
}
//Supply the drag event handler and also the id of the element to be operated on.
function dragMe(event) {
dragX = parseFloat(event.pageX)*4.67-500;
dragY = parseFloat(event.pageY)*4;
d3.select(arguments[1]).attr("x",function () {return dragX-dragOffsetX}).attr("y",function() {return dragY-dragOffsetY});
}
//Supply the drag event handler and also the id of the element to be operated on.
//below function will have to be modified at some point if I add new draggable elements since it also sets GrapNewLocation array.
function dragEnd(event) {
dragX = parseFloat(event.pageX)*4.67-500;
dragY = parseFloat(event.pageY)*4;
d3.select(arguments[1]).attr("x",function () {GraphNewLocation[0] = dragX-dragOffsetX; return dragX-dragOffsetX}).attr("y",function() {GraphNewLocation[1] = dragY-dragOffsetY; return dragY-dragOffsetY});
}
<!--Drag mechanism -->
<!--A new Tab #2: Mark Tab -->
var htmlDivIdCounter = -1;
var markCounter = 0;
var inputBackgroundColor = "rgba(255,165,0,0.4)";
var overviewTabArray = [{"id":"OverviewLength"},{"id":"OverviewMark"}];
var markHash = {};
//Inserts a single input box at the specified left and top style values. The center of the input box is aligned with the style value.
function insertInput() {
var inputHash;
eval('inputHash = '+ arguments[0]);
if((inputHash["flushCounter"] !== undefined)&&(inputHash["flushCounter"].match(/yes/i))) {
htmlDivIdCounter = -1;
}
if(inputHash["prefix"] === undefined) {
inputHash["prefix"] = "default";
}
htmlDivIdCounter++;
d3.select(document.body).append("div").attr("id",function() {return inputHash["prefix"]+"htmlDiv"+htmlDivIdCounter;}).attr("class",inputHash["class"]).attr("style",function () {return 'position:absolute;'+'top:'+(parseFloat(inputHash["top"])-parseFloat(inputHash["height"])/2)+'px;left:'+(parseFloat(inputHash["left"])-parseFloat(inputHash["width"])/2)+'px;height:'+inputHash["height"]+';width:'+inputHash["width"]+';background:transparent;'});
d3.select("#"+inputHash["prefix"]+"htmlDiv"+htmlDivIdCounter).append("div:form").attr("style",function() {return 'position:absolute;top:0px;left:0px;height:'+inputHash["height"]+';width:'+inputHash["width"]+';background:transparent';}).attr("id",function() {return inputHash["prefix"]+"htmlForm"+htmlDivIdCounter;}).attr("class",inputHash["class"]);
if(inputHash["check"] === "number") {
d3.select("#"+inputHash["prefix"]+"htmlForm"+htmlDivIdCounter).append("form:input").attr("id",function() {return inputHash["prefix"]+"htmlInput"+htmlDivIdCounter;}).attr("class",function () {return inputHash["class"]+"Inputs";}).attr("type","text").attr("style",function () {if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)) {inputBackgroundColor = "rgba(30,144,255,0.4)";} else {inputBackgroundColor = "rgba(255,165,0,0.4)";};return 'position:absolute;margin:0px;top:'+(parseFloat(inputHash["height"])*0.1)+'px;left:0px;height:'+(parseFloat(inputHash["height"])*0.8-4)+'px;padding:0px;width:'+(parseFloat(inputHash["width"])-4)+'px;background:'+inputBackgroundColor+';border-radius:5px;border-width:2px;border-color:rgba(105,105,105,0.6);border-style:solid;color:NavajoWhite;outline:none;font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;font-weight:bold;'}).attr("onfocus",function () {return "inputFocus('"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"')"}).attr("onblur",function () {return "inputCheckNumber("+"'"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"'"+",'number'"+")";});
} else if(inputHash["check"] === "radius") {
d3.select("#"+inputHash["prefix"]+"htmlForm"+htmlDivIdCounter).append("form:input").attr("id",function() {return inputHash["prefix"]+"htmlInput"+htmlDivIdCounter;}).attr("class",function () {return inputHash["class"]+"Inputs";}).attr("type","text").attr("style",function () {if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)) {inputBackgroundColor = "rgba(30,144,255,0.4)";} else {inputBackgroundColor = "rgba(255,165,0,0.4)";};return 'position:absolute;margin:0px;top:'+(parseFloat(inputHash["height"])*0.1)+'px;left:0px;height:'+(parseFloat(inputHash["height"])*0.8-4)+'px;padding:0px;width:'+(parseFloat(inputHash["width"])-4)+'px;background:'+inputBackgroundColor+';border-radius:5px;border-width:2px;border-color:rgba(105,105,105,0.6);border-style:solid;color:NavajoWhite;outline:none;font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;font-weight:bold;'}).attr("onfocus",function () {return "inputFocus('"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"')"}).attr("onblur",function () {return "inputCheckNumber("+"'"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"'"+",'radius'"+")";});
} else if (inputHash["check"] === "color"){
d3.select("#"+inputHash["prefix"]+"htmlForm"+htmlDivIdCounter).append("form:input").attr("id",function() {return inputHash["prefix"]+"htmlInput"+htmlDivIdCounter;}).attr("class",function () {return inputHash["class"]+"Inputs";}).attr("type","text").attr("style",function () {if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)) {inputBackgroundColor = "rgba(30,144,255,0.4)";} else {inputBackgroundColor = "rgba(255,165,0,0.4)";};return 'position:absolute;margin:0px;top:'+(parseFloat(inputHash["height"])*0.1)+'px;left:0px;height:'+(parseFloat(inputHash["height"])*0.8-4)+'px;padding:0px;width:'+(parseFloat(inputHash["width"])-4)+'px;background:'+inputBackgroundColor+';border-radius:5px;border-width:2px;border-color:rgba(105,105,105,0.6);border-style:solid;color:NavajoWhite;outline:none;font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;font-weight:bold;'}).attr("onfocus",function () {return "inputFocus('"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"')"}).attr("onblur",function () {return "inputCheckColor("+"'"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"'"+")";});
} else {
d3.select("#"+inputHash["prefix"]+"htmlForm"+htmlDivIdCounter).append("form:input").attr("id",function() {return inputHash["prefix"]+"htmlInput"+htmlDivIdCounter;}).attr("class",function () {return inputHash["class"]+"Inputs";}).attr("type","text").attr("style",function () {if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)) {inputBackgroundColor = "rgba(30,144,255,0.4)";} else {inputBackgroundColor = "rgba(255,165,0,0.4)";};return 'position:absolute;margin:0px;top:'+(parseFloat(inputHash["height"])*0.1)+'px;left:0px;height:'+(parseFloat(inputHash["height"])*0.8-4)+'px;padding:0px;width:'+(parseFloat(inputHash["width"])-4)+'px;background:'+inputBackgroundColor+';border-radius:5px;border-width:2px;border-color:rgba(105,105,105,0.6);border-style:solid;color:NavajoWhite;outline:none;font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;font-weight:bold;'}).attr("onfocus",function () {return "inputFocus('"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"')"}).attr("onblur",function () {return "inputBlur('"+inputHash["prefix"]+"htmlInput"+htmlDivIdCounter+"')"});
}
}
//Inserts a single input box at the specified left and top style values. The center of the input box is aligned with the style value.
//Check number
function inputCheckNumber() {
var ID = arguments[0];
inputBlur(ID);
if (!(isNaN(parseFloat(document.getElementById(ID).value)))) {
if (arguments[1].match(/number/i)) {
if(document.getElementById(ID).value.match(/[a-z]+/i)) {
document.getElementById(ID).value = "";
alert ("no letters!");
return 0;
} else if (parseFloat(document.getElementById(ID).value) < 0.5) {
document.getElementById(ID).value = "0.5";
alert ("minimum value is 0.5!");
return 0;
} else if (parseInt(document.getElementById(ID).value) > fasta_sorted.length) {
document.getElementById(ID).value = String(fasta_sorted.length);
alert ("maximum is protein length!");
return 0;
} else {
return 1;
}
} else if (arguments[1].match(/radius/i)) {
if ((parseFloat(document.getElementById(ID).value).toFixed(3)) < 0.38) {
document.getElementById(ID).value = "0.38";
alert ("radius can't be smaller than 0.38!");
return 0;
} else if ((parseFloat(document.getElementById(ID).value).toFixed(3)) > 1.07) {
document.getElementById(ID).value = "1.070";
alert ("maximum is 1.07 radius!");
return 0;
} else {
return 1;
}
}
} else if (document.getElementById(ID).value !== "") {
document.getElementById(ID).value = "";
alert ("numbers only!");
return 0;
}
}
//Check number
//Check color
function inputCheckColor() {
var ID = arguments[0];
inputBlur(ID);
if(document.getElementById(ID).value.match(/^\s*[a-z]+\s*$|^\s*[a-z]+\s*[,;]\s*(1|1[.]0|0[.][0-9]+|0)\s*$|^\s*rgb[a]?\s*\(\s*[1-9]?[0-9]?[0-9]{1}\s*[,]\s*[1-9]?[0-9]?[0-9]{1}\s*[,]\s*[1-9]?[0-9]?[0-9]{1}\s*([,]1|[,]1[.]0|[,]0[.][0-9]+)?\)\s*$/i)) {
return 1;
} else if (document.getElementById(ID).value !== "") {
document.getElementById(ID).value = "";
alert ("I don't get this color :(");
return 0;
}
}
//Check color
//***GLOBAL TAB CONTROLLER***
//The conditional in this function is very important. Argument0 designates either show or hide. Argument1 is master control that bypasses other conditionals, provide anything that translates to true for immunity. Argument2 is sub-master control that bypasses all conditions except the rightmost one, usage same as the previous one.
function hideOrshowhtmlElements () {
if (arguments[0].match(/0/ig)) {
if (arguments[1] || ((arguments[2] || ((arguments[3]||(((ExtractionPane == "open")||(MarkPane == "open"))&& (optionStatus == "open")))&&(ipvWatchOnOff == 0)))&&(R_Click == 0))) {
d3.selectAll(".htmlElements").style("opacity",0).style("visibility","hidden");
d3.selectAll(".DropDownRectMark").style("opacity",0).style("visibility","hidden");
d3.selectAll(".DropDownRectExtract").style("opacity",0).style("visibility","hidden");
}
} else {
if (arguments[1] || ((arguments[2] || ((arguments[3]||(((ExtractionPane == "open")||(MarkPane == "open"))&& (optionStatus == "open")))&&(ipvWatchOnOff == 0)))&&(R_Click == 0))) {
d3.selectAll(".htmlElements").style("opacity",1).style("visibility","visible");
d3.selectAll(".DropDownRectMark").style("opacity",1).style("visibility","visible");
d3.selectAll(".DropDownRectExtract").style("opacity",1).style("visibility","visible");
}
}
}
//***GLOBAL TAB CONTROLLER***
//This is the actual function that inserts a highlight element. Provide an object from the markHash with name,start,end,r1,r2 and color
var minimizeHighlightIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAnwAAAJ8B8Iwk5wAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAApTSURBVHic7Z1fiBXXHcc/M7urG2FNqihoStlaaUJqSVDbIo0Pi1Zl8R4tbU1Igg82IJFiBCkqFYWgqA8F3Qfz0vogGBqlZu9vpVRxEWraJdam9p8Qa8MmNLvFoG2a4qZS7/ThnLt7d/fund/cO3N37t75wGX3wpnfOfP73jMz58/8fl4QBKQZY8w8YDGwyH1K/y/9DjAMDLm/w2W+D4nIvXq2Pype2gQxxrQAq4HNwCagM+YqBoE80AtcFZGHMduviVQIYoyZA6zHirARmFenqu8BF7DiXBSR+3Wqd0qmTRBjzAIghxVhLfDItDRkjBHgMlacPhH5eDoaUXdBjDFzgT3ALmBOXSvXcx84DhwTkX/Xs+K6CWKMmQXsAPYD8+tSae3cBQ4BJ0XkQT0qTFwQY4wHvIA9sc5EK0uOQewP6Q0RSdRhiQpijFkPHAWeSayS+nID2CsiF5OqIBFBjDFfAE4Ba2I3ng76gW0i8mHchmMXxBjzLPBzYGGMZu8ANxkb5JX7C2ODxHJ/n0qgTd8RkbdjtBmvIMaY7wMngVkxmLuNfQTtBQZEpFBj23xgFfYxezOwtOYWwgNgh4j8NAZbQEyCuNH1j4FXazATANdxIojIzZobVgFjzFOMibMS8GowdwLYHceov2ZBjDGPAW8C66o08RnQA/SIyEc1NaZKjDGPAzvdp71KM5eA50TkX7W0pSZBjDFPAAJ8uYrDHwKngQMi8veqGxEjxpjPA68BW4GWKkzcAoyIvFdtG6oWxBjTBbwFPFrF4X3APhH5S1WVJ4wx5ivAEezUTlQ+Ab4tIleqqbsqQVzPeIfoYgwAe0TkauRKpwFjzGrgGPZhIAqfAN+opqdEFsTdM94h2mWqAPxIRI5GqiwlGGP2AocBP8Jht7CiRLqnRBLEPU39gmg38E+BF0WkL0rD0oYxJgecAToiHHYJ6I7y9BVFcbCPtlHEeB9Y1ehiALhzWIU9Jy3rsD5To+4hbtD3kwi2rwDfE5G7URqUdowx84FzQFeEw17WDh5VgrjpkH70I/DXgZ0i8j9l+YbCGNOKHTu9ojzkAbBGM80SKoibKPwt+nmg10Vkh7JsQ2OMOYlelDvA18ImJDX3kFPoxbiCHe02Czux56xhIdaXFanYQ9x6xi+VFb4PfH2m3TPCcPeUa8AS5SEbKq2nTCmIW+l7F93i0qfYp6lUjryTxo3sB9A9Et8Alk+18ljpkvUCOjEK2HFGU4oB4M79RawvwngG69uylO0hbkPCe+jWwPc16gg8btyI/oii6CDwRLmNE1P1kB3oxBjIxBjD+WJAUbQT6+NJTBLE7Zvar2zDHmW5ZkLrk/3O1+Mo10P2oNs31dcos7b1xPlEM1U0nzLijRPEbe/cpTD2ENinaWCTsg/rozB2OZ+PMrGH5NBt7zzdzE9VYTjfnFYUncOERbCJgmxWGPkMOKBrWlNzAOurMMb5fFQQ90rAWoWBnrSsgacZ56MeRdG1zvfA+B6ynvBXAgJlJRmWHqzPKvEI1vfAeEE0l6vr07VVpxFxvrquKDrqex9Gl2Y3Kg7sra5pTY3GZxudBqM9ZDW618gyQaKj8dk8rAajgmguV7eT3t45E3E+u60ouhnGBNmkOCDrHdWj8d0mAN+9B94Zk9GM8mh812mMmedj350I4w66WcyM8gxgfRjG4lbGoiBU4mat72cAdHV1tc+dO3dFoVBoq9VW3ARB8NDzvH/09fX9NW7bIlIwxtwkfG/CIq0gQ+FFytPd3b2gpaVlo+d5pqOjY10QBHM8r5ZXMZKh2CZjzCXP8w7n8/lfxVyFxoeLWtFdsoaraUEul3u6tbX1N6T3ffRyrAuCYJ0x5m3gVRF5Nya7Gh8u9kmoh2zYsGGe53lv0VhilPIscGb79u1xXV5VPUQrSKQesmXLlpZZs2b9DPhilONSyJPDw8M/iMmWxodqQSL1kJGRkW3At6Ick2IOdnd3LwgvFoq6h8R+D/E8rzNK+ZTzaFtb28sx2Jm+e4jnefUKr1QXCoXCf2Mwo+4hsRMEQaMEl1Hh+37dtsf6KLtSFKNBEMyurjnppFAoxBEWUHVr8FF2pSg1+74f6a2htOP7/gcxmFHdGhLpIW6UezbKMSnmaD6f/2MMdtQ9RPV8XEUDfogNm9ewBEFwub29XbuLMwzVeC+RHgIgIh96nvcSEPtkXZ34oK2t7fmzZ8/GFbV0+u4hRfL5/PkVK1Y8GQTB88AfqrFRZ+56nnca+G57e/uy8+fPx/l0pbqHtJJQDyly8ODBAjY4zZu5XO5pz/MeC4IgddO9vu//Z/bs2b+PsUdMRNVDvFwutwz4U0jBO8CiONZEmhEXq2uY8PWQr2ovWQuJHu8jY4xV6F6cHfJdLPRBRWHNzpSM8mh8Nygi94pTJ/mYjGaUR+O7PIxtA9LsiljqwuJlRMD5TBPfsRfGBLmKDUwfRtZLoqPx2T2sBlYQFz7oQkzGM8aj8dmFYgin0ul3zWVrpQsYmaHA+Wqlouio70sFuUj43JNHc8UyqZWdhIefHcH6HigRxCUzuaypxEXvzKiA85Hmx3u5NJHMxBVDzWWrHRtKNaMyr6GLATzO5xMF6cMmMwljqwu4klEG55utiqL3mfBO+zhBXJqf4wpDLehiejQrR9AFYj4+MbVSuU0Ox7CZZcLIubi2GSU4n2gCMN/F+nockwRxOZcOKeufZDBD7ZND5fJbTbUN6CS6CcdVLiRRBqPhmTSz4oNYH0+irCAujpN2LfmwCzLc1DgfHFYW3z9VkrFKG+XewIajC8MHzjTzU5c79zPogorewPq2LFMacDEBtZejDkBcQMimwp2zoA9BvrdSpreKirromf3KipYA51yQ4abAnes59BFJ+8MyvGm62DZ0LyyCDb/dTLFQetCHHL+D9WVFslDjVZBkqHHV7ndnKEr48FeASzPxnuLO6RJ6McBmclOl11O/juCi+5+I0Igu4NpMevpy53KNaJkRTkRJqxf1/ZDd2F+HliXAwEwYp7hzGEB/Awfrq91R6okkiFtmfA6bzkdLB9DbyCN61/ZeomXXuYVNoxdpJ2SWFKwCDZEUrEiWNm9K6p82r0iWWHIS05dYskiWenWU6U+9WiTG5MS/w9488yLy55obVgFjzDJs0LDNwApmSnLiUmJO3/037H7XPPDrWk/W/Wi+iRVhE/ClmluY1vTdpSSU4P6f2LiFH1X4ADxe4bMU+FyMbUp/gvsiLrPbKWBN7MbTQT+wLSzjWjUkIkgRl1TsKLrUSY3ADex6RsUp9FpIJLRGEdfw5cBL6Nbo08og9hyWJykGJNxDSnF5rXZg1+obZRb4LnYHzsmp1sDjpm6CFHFpfvZgE8ekNdrcfeyGwWPltuokSd0FKeIyy+Sw44C1hGdmSJoR7GbzXmw6p49DyifCtAlSisufsR4rzkZ0cejj4B72RaVe4GLpLvTpIhWClOIGcKux4mxCF3U7CoPYwWYvcDWO0XWcpE6QibhQ6IuxoSkWTfi/9DvYl/OH3N/hMt+H3GvgqeX/RRTTNNuPuaEAAAAASUVORK5CYII=";
var closeHighlightIcon = "data:image/png;base64,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";
var minimizeHighlightIconOrange = "data:image/png;base64,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";
var closeHighlightIconOrange = "data:image/png;base64,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";
var highlightGradualFade;
var lastMouseoverMarkElementID;
var highlightTopRound = false;
var highlightBottomRound = false;
//refer to File API section to see how below value is changed.
var captureClass = "";
function residuesToHighlight () {
var textDescription = String(arguments[0][0]);
var start = parseFloat(arguments[0][1])-1;
var end = parseFloat(arguments[0][2])-1;
var r1 = parseFloat(arguments[0][3])*3000;
var r2 = parseFloat(arguments[0][4])*3000;
var color = String(arguments[0][5]);
var opacity;
if (color.split(/[,;]/g).length > 3) {
opacity = parseFloat(color.split(/[,;]/g)[3]);
} else if (color.split(/[,;]/g).length === 2) {
opacity = parseFloat(color.split(/[,;]/g)[1]);
color = String(color.split(/[,;]/g)[0]);
} else {
opacity = 0.5;
}
//***Minimize/Close Icon coordinates***
var startMinimize = ((start+end)/2-(5/360*fasta_sorted.length)/2);
var rotationMinimize = startMinimize/fasta_sorted.length*360;
var startClose = ((start+end)/2+(5/360*fasta_sorted.length)/2);
var rotationClose = startClose/fasta_sorted.length*360;
var rMinMaxIcon = (r1+r2)/2;
var PointMinimize = [parseInt(3000+rMinMaxIcon*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*startMinimize))-CorrectionFactor*startMinimize)/180)),parseInt(3000-rMinMaxIcon*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*startMinimize))-CorrectionFactor*startMinimize)/180))];
var PointClose = [parseInt(3000+rMinMaxIcon*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*startClose))-CorrectionFactor*startClose)/180)),parseInt(3000-rMinMaxIcon*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*startClose))-CorrectionFactor*startClose)/180))];
//***Minimize/Close Icon coordinates***
d3.select("#annotation").append("path").attr("d", function() {return highlightPathGenerator((start+end)/2,(start+end)/2,r1,r2);}).attr("stroke-width",5).attr("stroke",function() {return color;}).attr("stroke-opacity",function() {if (opacity*GoldenRatio > 1.0) {return 1.0;} else if (opacity*GoldenRatio == 0) {return 0.5*GoldenRatio;} else {return opacity*GoldenRatio;}}).attr("fill",function() {return color;}).attr("fill-opacity",function() {if (color.match(/rgba/ig)) {return 1.0} else {return opacity;} }).attr("stroke-linejoin","round").attr("id",function () {return "mark"+markCounter;}).attr("class",function(){if (captureClass !== ""){return "markElements"+" "+captureClass;} else {return "markElements";}}).style("opacity",0)
.on("mouseover",function () {
hideOrshowhtmlElements("0");
clearTimeout(highlightGradualFade);
d3.select(this).transition().attr("stroke-width",25).delay(0).duration(250);
d3.select("#annotation").append("text").text(function () {return textDescription;}).attr("class","text2").attr("text-anchor","middle").attr("x",function() {if (coordinates[0]>3000) {return coordinates[0]-500;} else {return coordinates[0]+500;}}).attr("y",function() {if (coordinates[1]>3000) {return coordinates[1]-200;} else {return coordinates[1]+200;}}).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","Orange").attr("stroke","Orange").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.selectAll(".text2").transition().attr("fill-opacity",0.9).style("opacity",0.9).delay(500).duration(500);
//***Minimize/Close***
if (lastMouseoverMarkElementID !== d3.select(this).attr("id")) {
d3.selectAll(".highlightIcons").remove();
lastMouseoverMarkElementID = d3.select(this).attr("id");
d3.select("#annotation").append("svg:image").attr("xlink:href",minimizeHighlightIcon).attr("title","minimize").attr("alt","minimize").attr("x",function() {return PointMinimize[0]-50;}).attr("y",function() {return PointMinimize[1]-50;}).attr("width","100px").attr("height","100px").style("opacity",0).attr("class","highlightIcons").attr("transform",function () {var x= parseFloat(d3.select(this).attr("x"));var y = parseFloat(d3.select(this).attr("y"));return "rotate("+rotationMinimize+","+(x+50)+","+(y+50)+")";});
d3.select("#annotation").append("svg:image").attr("xlink:href",closeHighlightIcon).attr("title","close").attr("alt","close").attr("x",function() {return PointClose[0]-50;}).attr("y",function() {return PointClose[1]-50;}).attr("width","100px").attr("height","100px").style("opacity",0).attr("class","highlightIcons").attr("transform",function () {var x= parseFloat(d3.select(this).attr("x"));var y = parseFloat(d3.select(this).attr("y"));return "rotate("+rotationClose+","+(x+50)+","+(y+50)+")";});
}
//***I had to add the hideOrshowhtmlElements(1) at the beginning of onclick event below because when you click on the x icon, mouseout event does not fire in firefox. This is not true for Chrome.
d3.selectAll(".highlightIcons").transition().style("opacity",0.9).each("end",function() {d3.select(this).on("mouseover",function(){hideOrshowhtmlElements("0");clearTimeout(highlightGradualFade);d3.selectAll(".highlightIcons").transition().style("opacity",0.9).delay(0).duration(0);d3.select(this).attr("xlink:href",function() {return eval(String(d3.select(this).attr("title"))+"HighlightIconOrange");});}).on("mouseout",function(){hideOrshowhtmlElements("1"); highlightGradualFade = setTimeout(function() {d3.selectAll(".highlightIcons").transition().style("opacity",0).delay(0).duration(0);},2000);d3.select(this).attr("xlink:href",function() {return eval(String(d3.select(this).attr("title"))+"HighlightIcon");});}).on("click",function(){hideOrshowhtmlElements("1"); var type = d3.select(this).attr("title"); highlightIconsOnClick(type);});}).delay(0).duration(0);
//***Minimize/Close***
})
.on("mouseout",function() {
hideOrshowhtmlElements("1");
d3.select(this).transition().attr("stroke-width",5).delay(0).duration(250);
d3.selectAll(".text2").remove();
highlightGradualFade = setTimeout(function() {d3.selectAll(".highlightIcons").transition().style("opacity",0).delay(0).duration(0);},2000);
});
//Fade in/out effect
d3.select("#mark"+markCounter).transition("numberOneFanBrush").attrTween("d",function () {var interpolator = d3.interpolateArray([(start+end)/2,(start+end)/2,r1,r2],[start,end,r1,r2]); return function(t){return highlightPathGenerator(interpolator(t)[0],interpolator(t)[1],interpolator(t)[2],interpolator(t)[3]);}}).delay(0).duration(1500);
d3.select("#mark"+markCounter).transition("fadeInOut").style("opacity",1).delay(0).duration(1500);
function highlightIconsOnClick() {
var highlightSelected = d3.select("#"+lastMouseoverMarkElementID);
if (arguments[0].match(/min/ig)) {
if (highlightSelected.attr("class").split(/\s/).length === 1) {
if (parseFloat(highlightSelected.style("opacity")) > 0) {
highlightSelected.transition("minSingleFadeout").style("opacity",0).delay(0).duration(1500);
} else {
highlightSelected.transition("minSingleFadein").style("opacity",1).delay(0).duration(1500);
}
} else {
var classSelected = d3.selectAll("."+highlightSelected.attr("class").split(/\s/)[1]);
if (parseFloat(highlightSelected.style("opacity")) > 0) {
classSelected.transition("minMultiFadeout").style("opacity",0).delay(0).duration(1500);
} else {
classSelected.transition("minMultiFadein").style("opacity",1).delay(0).duration(1500);
}
}
} else {
if (highlightSelected.attr("class").split(/\s/).length === 1) {
d3.selectAll(".highlightIcons").remove();
highlightSelected.remove();
delete markHash[lastMouseoverMarkElementID];
}
else {
d3.selectAll(".highlightIcons").remove();
var classOfSubject = highlightSelected.attr("class").split(/\s/)[1];
for (var key in markHash) {
if (d3.select("#"+key).attr("class").split(/\s/)[1] === classOfSubject) {
delete markHash[key];
}
}
d3.selectAll("."+classOfSubject).remove();
}
}
}
}
//This is the actual function that inserts a highlight element. Provide an object from the markHash with name,start,end,r1,r2 and color
//***Highlight Path Generator used by above function***
var lineBasis = d3.svg.line().interpolate("basis");
function highlightPathGenerator(start,end,r1,r2) {
//horizontalRoundness parameter is the amount of degrees between the start and end of the horizontal (paralel to the axis of the highlight) b-spline, measure from the center of the figure.
//don't touch too much to this parameter, as seven is a heavenly number. You will be stricken by Tyriel.
var horizontalRoundness;
var horizontalRoundnessParameter = 7;
//***Below if clause is calibrated using tuba1a (451aa) and brca2 (3418aa). The right side of the test condition changes based on the length of the protein. ..*fasta_sorted.length/451 and its powers are the calibration factors. Minimum threshold is 16.***
if ((Math.abs(start-end) > 2*(Math.pow((fasta_sorted.length/451),3/2) + horizontalRoundnessParameter*(fasta_sorted.length/451) + 1)) && (Math.abs(start-end) > 16)) {
horizontalRoundness = parseInt(fasta_sorted.length/355*horizontalRoundnessParameter);
} else {
horizontalRoundness = (end-start)*(GoldenRatio-1)/2;
}
//Similar to above, verticalRoundness is the 'ratio' of the vertical distance between start and end of the vertical b-spline to the height of the highlight.
var verticalRoundness = (GoldenRatio-1)/2;
var Point1 = [parseInt(3000+r1*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180)),parseInt(3000-r1*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180))];
var Point2 = [parseInt(3000+r2*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180)),parseInt(3000-r2*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180))];
var Point3 = [parseInt(3000+r2*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180)),parseInt(3000-r2*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180))];
var Point4 = [parseInt(3000+r1*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180)),parseInt(3000-r1*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180))];
var Point1Inner = [parseInt(3000+r1*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(start+horizontalRoundness)))-CorrectionFactor*(start+horizontalRoundness))/180)),parseInt(3000-r1*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(start+horizontalRoundness)))-CorrectionFactor*(start+horizontalRoundness))/180))];
var Point2Inner = [parseInt(3000+r2*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(start+horizontalRoundness)))-CorrectionFactor*(start+horizontalRoundness))/180)),parseInt(3000-r2*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(start+horizontalRoundness)))-CorrectionFactor*(start+horizontalRoundness))/180))];
var Point3Inner = [parseInt(3000+r2*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(end-horizontalRoundness)))-CorrectionFactor*(end-horizontalRoundness))/180)),parseInt(3000-r2*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(end-horizontalRoundness)))-CorrectionFactor*(end-horizontalRoundness))/180))];
var Point4Inner = [parseInt(3000+r1*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(end-horizontalRoundness)))-CorrectionFactor*(end-horizontalRoundness))/180)),parseInt(3000-r1*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*(end-horizontalRoundness)))-CorrectionFactor*(end-horizontalRoundness))/180))];
var Point1Outer = [parseInt(3000+(r1-(r1-r2)*verticalRoundness)*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180)),parseInt(3000-(r1-(r1-r2)*verticalRoundness)*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180))];
var Point2Outer = [parseInt(3000+(r2+(r1-r2)*verticalRoundness)*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180)),parseInt(3000-(r2+(r1-r2)*verticalRoundness)*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*start))-CorrectionFactor*start)/180))];
var Point3Outer = [parseInt(3000+(r2+(r1-r2)*verticalRoundness)*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180)),parseInt(3000-(r2+(r1-r2)*verticalRoundness)*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180))];
var Point4Outer = [parseInt(3000+(r1-(r1-r2)*verticalRoundness)*Math.cos(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180)),parseInt(3000-(r1-(r1-r2)*verticalRoundness)*Math.sin(Math.PI*(90-(2.5+(HalfTheWidthAngleOfElement+2*HalfTheWidthAngleOfElement*end))-CorrectionFactor*end)/180))];
if (Math.abs(start-end) <= fasta_sorted.length*360/355/2) {
if(highlightTopRound && highlightBottomRound) {
return lineBasis([Point1Inner,Point1,Point1Outer])+"L"+Point2Outer+lineBasis([Point2Outer,Point2,Point2Inner]).replace(/^M/,"L")+"A"+r2+","+r2+" 0 0,1 "+Point3Inner+lineBasis([Point3Inner,Point3,Point3Outer]).replace(/^M/,"L")+"L"+Point4Outer+lineBasis([Point4Outer,Point4,Point4Inner]).replace(/^M/,"L")+"A"+r1+","+r1+" 0 0,0 "+Point1Inner+"Z";
} else if (highlightTopRound) {
return lineBasis([Point1Inner,Point1,Point1Outer])+"L"+Point2+"A"+r2+","+r2+" 0 0,1 "+Point3+"L"+Point4Outer+lineBasis([Point4Outer,Point4,Point4Inner]).replace(/^M/,"L")+"A"+r1+","+r1+" 0 0,0 "+Point1Inner+"Z";
} else if (highlightBottomRound) {
return "M"+Point1+"L"+Point2Outer+lineBasis([Point2Outer,Point2,Point2Inner]).replace(/^M/,"L")+"A"+r2+","+r2+" 0 0,1 "+Point3Inner+lineBasis([Point3Inner,Point3,Point3Outer]).replace(/^M/,"L")+"L"+Point4+"A"+r1+","+r1+" 0 0,0 "+Point1+"Z";
} else {
return "M"+Point1+"L"+Point2+"A"+r2+","+r2+" 0 0,1 "+Point3+"L"+Point4+"A"+r1+","+r1+" 0 0,0 "+Point1+"Z";
}
} else {
if(highlightTopRound && highlightBottomRound) {
return lineBasis([Point1Inner,Point1,Point1Outer])+"L"+Point2Outer+lineBasis([Point2Outer,Point2,Point2Inner]).replace(/^M/,"L")+"A"+r2+","+r2+" 0 1,1 "+Point3Inner+lineBasis([Point3Inner,Point3,Point3Outer]).replace(/^M/,"L")+"L"+Point4Outer+lineBasis([Point4Outer,Point4,Point4Inner]).replace(/^M/,"L")+"A"+r1+","+r1+" 0 1,0 "+Point1Inner+"Z";
} else if (highlightTopRound) {
return lineBasis([Point1Inner,Point1,Point1Outer])+"L"+Point2+"A"+r2+","+r2+" 0 1,1 "+Point3+"L"+Point4Outer+lineBasis([Point4Outer,Point4,Point4Inner]).replace(/^M/,"L")+"A"+r1+","+r1+" 0 1,0 "+Point1Inner+"Z";
} else if (highlightBottomRound) {
return "M"+Point1+"L"+Point2Outer+lineBasis([Point2Outer,Point2,Point2Inner]).replace(/^M/,"L")+"A"+r2+","+r2+" 0 1,1 "+Point3Inner+lineBasis([Point3Inner,Point3,Point3Outer]).replace(/^M/,"L")+"L"+Point4+"A"+r1+","+r1+" 0 1,0 "+Point1+"Z";
} else {
return "M"+Point1+"L"+Point2+"A"+r2+","+r2+" 0 1,1 "+Point3+"L"+Point4+"A"+r1+","+r1+" 0 1,0 "+Point1+"Z";
}
}
}
//***Highlight Path Generator used by above function***
//Global controller, similar to ExtractionPane
var MarkPane = "closed";
//Similar to DropDownExtract
function DropDownMark(selection) {
MarkPane = "open";
selection
.selectAll("rectanglesDropDownMark")
.data([0,1,2,3])
.enter()
.append("rect")
//i*(i-1)* == All will have the same x and width values, but the third will be similar to its correspondent in DropDownExtract
.attr("width",function(d,i) {if (i < 3) {return 1300;} else {return 1300-2*1300/Math.pow(GoldenRatio,2);} })
.attr("height", 100)
//i*(i-1)* == All will have the same x and width values, but the third will be similar to its correspondent in DropDownExtract
.attr("x",function(d,i) {if (i < 3) {return 3000-(1300)/2;} else {return 3000-(1300-2*1300/Math.pow(GoldenRatio,2))/2;}})
.attr("y",function (d,i) {return 2850+i*101;})
//here I add some attr to make the corners rounded
.attr("rx",15)
.attr("ry",15)
//here I add some attr to make the corners rounded
.attr("fill","DimGray")
.attr("fill-opacity",0.9)
.attr("stroke","DimGray")
.attr("stroke-opacity",0.0)
.attr("stroke-width",0.0)
.attr("id",function (d,i) {return "DropDownRectMark"+String(i);})
.attr("class","DropDownRectMark");
//***Input boxes
insertInput('{"left":"641","top":"751","height":"25px","width":"40px","class":"htmlElements","check":"number","flushCounter":"yes"}');
insertInput('{"left":"714","top":"751","height":"25px","width":"40px","class":"htmlElements","check":"number"}');
insertInput('{"left":"787","top":"751","height":"25px","width":"40px","class":"htmlElements","check":"radius"}');
insertInput('{"left":"860","top":"751","height":"25px","width":"40px","class":"htmlElements","check":"radius"}');
insertInput('{"left":"697","top":"772","height":"25px","width":"73px","class":"htmlElements","check":"color"}');
insertInput('{"left":"843","top":"772","height":"25px","width":"73px","class":"htmlElements","check":"none"}');
//***Input boxes
//***Descriptions of Inputs and the Mark Button***
d3.select("#annotation").append("text").text("Start").attr("class","DropDownRectMark").attr("text-anchor","middle").attr("x", 2475).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("End").attr("class","DropDownRectMark").attr("text-anchor","middle").attr("x", 2825).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("outer-R").attr("class","DropDownRectMark").attr("text-anchor","middle").attr("x", 3175).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("inner-R").attr("class","DropDownRectMark").attr("text-anchor","middle").attr("x", 3525).attr("y", 2925).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
//control the roundness of the generated highlights
d3.select("#annotation").append("circle").attr("class","DropDownRectMark higlightRoundnessControls").attr("id","highlightRoundnessTopControl").attr("r",20).attr("cx",3035).attr("cy",3010).style("fill",function () {if (highlightTopRound){return "Orange";}else{return "DimGray";}}).attr("fill-opacity",0.9).style("stroke","Orange").attr("stroke-opacity",0.6).attr("stroke-width",10).on("click",function() {d3.select("#highlightRoundnessTopControl").style("fill",function () {if (highlightTopRound){highlightTopRound = false; return "DimGray";}else{highlightTopRound = true; return "Orange";}});});
d3.select("#annotation").append("circle").attr("class","DropDownRectMark higlightRoundnessControls").attr("id","highlightRoundnessBottomControl").attr("r",20).attr("cx",3377).attr("cy",3010).style("fill",function () {if (highlightBottomRound){return "Orange";}else{return "DimGray";}}).attr("fill-opacity",0.9).style("stroke","Orange").attr("stroke-opacity",0.6).attr("stroke-width",10).on("click",function() {d3.select("#highlightRoundnessBottomControl").style("fill",function () {if (highlightBottomRound){highlightBottomRound = false; return "DimGray";}else{highlightBottomRound = true; return "Orange";}});});
//control the roundness of the generated highlights
d3.select("#annotation").append("text").text("Color:").attr("class","DropDownRectMark").attr("text-anchor","middle").attr("x", 2475).attr("y", 3126).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("Name:").attr("class","DropDownRectMark").attr("text-anchor","middle").attr("x", 3175).attr("y", 3126).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible");
d3.select("#annotation").append("text").text("Mark").attr("class","DropDownRectMark").attr("id","Mark").attr("text-anchor","middle").attr("x", 3000).attr("y", 3227).attr("font-family","Arial").attr("font-size","60px").attr("fill","LightGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).attr("visibility","visible").attr("font-weight","bold")
.on("mouseover", function () {
d3.select(this).transition().attr("font-size",80).attr("fill","Orange").delay(0).duration(250);
})
.on("mouseout", function () {
d3.select(this).transition().attr("font-size",60).attr("fill","LightGray").delay(0).duration(250);
})
.on("click", function () {
if (d3.selectAll(".htmlElementsInputs")[0].some(function(x){
if ((x.value === "")||(x.value === undefined)) {
return true;
}
})) {
alert ("Check your input values!\nStart: Start amino acid number (1-max length),\nEnd: End aminoacid number (1-max length),\nOuter-R: Outer radius of the highlight (0.38-1.07),\nInner-R: Inner radius of the highlight (0.38-1.07),\nColor: Enter a html color name with optional opacity value between 0-1.0 separated by comma such as->Green,0.5. Default opacity is 0.5,\nName: Indicate what you want to be displayed when you move your cursor over the highlight area.");
} else {
var name = document.getElementById("defaulthtmlInput5").value;
var start = document.getElementById("defaulthtmlInput0").value;
var end = document.getElementById("defaulthtmlInput1").value;
var r1 = document.getElementById("defaulthtmlInput2").value;
var r2 = document.getElementById("defaulthtmlInput3").value;
var color = document.getElementById("defaulthtmlInput4").value;
if (parseFloat(start) > parseFloat(end)){
alert ("Start cannot be bigger than end!");
} else if (parseFloat(r1) === parseFloat(r2)) {
alert ("Outer and inner radii cannot be the same!");
} else {
markHash[("mark"+markCounter)] = [name,start,end,r1,r2,color];
residuesToHighlight(markHash[("mark"+markCounter)]);
markCounter++;
}
}
});
//***Descriptions of Inputs and the Mark Button***
}
//Similar to DropDownExtract
//Calculate domain percentage
function calculateDomainPercentage () {
var count = 0;
for (var i = 0; i < ids["con"].length;i++) {
if(!(d3.select(ids["con"][i]).attr("class") === null) && !(d3.select(ids["con"][i]).attr("class") === "allCons")) {
count++;
}
}
var percentage = parseFloat(count/fasta_sorted.length*100).toFixed(1);
//alert (percentage+"percent of your protein is made up of domains!");
return percentage;
}
//Calculate domain percentage
//***Mark Tab***
var DropDownClickMark = 0;
d3.select("#annotation").append("text").text(function() {return "domain percentage: "+ calculateDomainPercentage();}).attr("class","Options").attr("id","OverviewMark").attr("text-anchor","middle").attr("x", 3000).attr("y", 2800).attr("font-family","Arial").attr("font-size","60px").attr("fill","DimGray").attr("stroke","DimGray").attr("fill-opacity",0.9).attr("stroke-opacity",0.0).style("visibility","hidden").style("opacity",0)
.on("mouseover",function() {
d3.select("#OverviewMark").transition().attr("font-size","120px").attr("fill","Orange").delay(0).duration(500);
d3.selectAll(".overviews").style("opacity",0);
})
.on("mouseout",function() {
d3.select("#OverviewMark").transition().attr("font-size","60px").attr("fill","DimGray").delay(0).duration(500);
d3.selectAll(".overviews").style("opacity",1);
})
.on("click",function() {
if (DropDownClickMark == 0) {
//Close other open overview tabs
if (ExtractionPane === "open") {
d3.selectAll(".DropDownRectExtract").remove();
DropDownClickExtract = 0;
ExtractionPane = "closed";
}
//Close other open overview tabs
d3.select("#annotation").call(DropDownMark);
} else {
d3.selectAll(".htmlElements").remove();
d3.selectAll(".DropDownRectMark").remove();
MarkPane = "closed";
}
if (DropDownClickMark == 0) {
DropDownClickMark = 1;
} else {
DropDownClickMark = 0;
}
});
//***Mark Tab***
//***Overview Tabs***
d3.select("#annotation").selectAll("overviewRects").data(overviewTabArray).enter()
.append("path")
.attr("d",function(d,i) {return "M"+(2320+(i+1)*1300/(overviewTabArray.length+1))+",2690L"+(2320+(i+1)*1300/(overviewTabArray.length+1)+45)+",2690A15,15 0 1,1 "+(2320+(i+1)*1300/(overviewTabArray.length+1)+45)+",2720L"+(2320+(i+1)*1300/(overviewTabArray.length+1))+",2720A15,15 0 1,1 "+(2320+(i+1)*1300/(overviewTabArray.length+1))+",2690Z"})
.attr("fill",function(d,i) {if (i == 0) {return "Orange";} else {return "DimGray";}})
.attr("fill-opacity",0.6)
.attr("stroke",function(d,i) {if (i == 0) {return "Orange";} else {return "DimGray";}})
.attr("stroke-opacity",1.0)
.attr("stroke-width",6)
.attr("stroke-linejoin","round")
.attr("class","overviews")
.attr("id",function (d,i) {return d.id+"Button";})
.on("click",function (d,i) {
var ID = d3.select(this).attr("id");
d3.selectAll(".overviews").filter(function() {if (d3.select(this).attr("id") == ID) {return 0;} else {return 1}}).each(function () {d3.select(this).style("fill","DimGray").style("stroke","DimGray");});
d3.select(this).style("fill","Orange").style("stroke","Orange");
for (var i =0;i<overviewTabArray.length;i++) {
if (overviewTabArray[i].id == (ID.replace("Button",""))) {
d3.select("#"+overviewTabArray[i].id).style("visibility","visible").style("opacity",1);
} else {
d3.select("#"+overviewTabArray[i].id).style("visibility","hidden").style("opacity",0);
}
}
});
//***Overview Tabs***
//***Input Focus and Blur***
function inputFocus() {
var ID = arguments[0];
ID = "#"+ID;
if (NeonizeMe == 1) {
if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)) {
d3.select(ID).style("border-width","4px").style("border-color","rgba(30,144,255,0.6)")
.style("box-shadow","0px 0px 10px DodgerBlue,0px 0px 16px DodgerBlue,0px 0px 26px DodgerBlue,0px 0px 42px DodgerBlue,0px 0px 68px DodgerBlue,0px 0px 110px DodgerBlue");
} else {
d3.select(ID).style("border-width","4px").style("border-color","rgba(255,165,0,0.6)")
.style("box-shadow","0px 0px 10px Orange,0px 0px 16px Orange,0px 0px 26px Orange,0px 0px 42px Orange,0px 0px 68px Orange,0px 0px 110px Orange");
}
} else {
if (d3.select("body").style("background-color").match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/i)) {
d3.select(ID).style("border-width","4px").style("border-color","rgba(30,144,255,0.6)");
} else {
d3.select(ID).style("border-width","4px").style("border-color","rgba(255,165,0,0.6)");
}
}
}
function inputBlur () {
var ID = arguments[0];
ID = "#"+ID;
d3.select(ID).style("border-width","2px").style("border-color","rgba(105,105,105,0.6)").style("box-shadow","none");
}
//***Input Focus and Blur***
<!--A new Tab #2: Mark Tab -->
<!--File API -->
insertInput('{"left":"1383","top":"1362","height":"25px","width":"25px","class":"htmlFileUploadElements","check":"none","prefix":"fileUpload"}');
fileUploadIcon = "data:image/png;base64,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";
//File Input
d3.select("#fileUploadhtmlDiv0").style("visibility","hidden");
d3.select("#fileUploadhtmlForm0").style("visibility","hidden");
d3.select("#fileUploadhtmlInput0").attr("type","file").attr("onchange","readFunc(event)").attr("accept","text/plain").attr("name","fileUploadArea").style("visibility","hidden");
//File Input
//Action Tab Lower Right Corner
d3.select("#annotation").append("text").text("Action:").attr("x",5800).attr("y",5975).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","start").style("fill","DimGray").attr("fill-opacity",0.9).attr("id","fileUploadActionOpts").attr("class","Options");
var actionHash = [{"action":"Mark","control":"MarkPane,fileLoadedStatus","function":pacedMarkPlacerFunc},{"action":"Hist","control":"HistogramPane,fileLoadedStatus","function":registerNewHistogram}];
d3.select("#annotation")
.selectAll("actionOptions")
.data(actionHash)
.enter()
.append("text")
.text(function(d,i){return d.action})
.attr("x",function(d,i) {return 6000+200*i;})
.attr("y",5975)
.attr("font-family","sans-serif")
.attr("font-size", 45)
.attr("text-anchor","start")
.style("fill","DimGray")
.style("opacity",0.2)
.attr("fill-opacity",0.9)
.attr("stroke-opacity",0)
.attr("id",function (d,i) {return "actionOption"+i;})
.attr("class","actionOptions")
.on("click",function (d,i) {
var controlElements = d.control.split(/,/);
if (controlElements.every(actionHashControlFunc)) {
d.function();
} else {
alert("Either the required pane is not open or the file is not loaded. Check if these conditions are met..");
}
});
//Action Tab Lower Right Corner
d3.select("#annotation").append("svg:image").attr("xlink:href",fileUploadIcon).attr("title","fileUploadIcon").attr("alt","fileUploadIcon").attr("x",5900).attr("y",5800).attr("width","100px").attr("height","100px").style("opacity",0.62).attr("id","fileUploadIcon");
d3.select("#fileUploadIcon")
.on("mouseover", function () {
d3.select(this).style("opacity",1);
})
.on("mouseout", function () {
d3.select(this).style("opacity",0.62);
})
.on("click", function () {
if (navigator.userAgent.match(/iphone|ipad|ipod/i)) {
alert("Unfortunately your device does not have file browsing system. You won't be able to use this option..");
}
else if (window.FileReader) {
document.getElementById("fileUploadhtmlInput0").click();
} else {
alert("Unfortunately your browser does not support FileReader, consider upgrading or switching to another browser..");
}
});
d3.select("#annotation").append("text").text("No files loaded").attr("x",6050).attr("y",5875).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","start").style("fill","DimGray").attr("fill-opacity",0.9).attr("id","fileUploadStatus").attr("class","Options");
var fileOutput;
var pace;
var fileLoadedStatus = 0;
function readFunc(event) {
var inputID = event.target.id;
var fileReader = new FileReader();
fileReader.onload = function () {
if (event.target.files[0].name.length > 15) {
document.getElementById("fileUploadStatus").textContent = event.target.files[0].name.substring(0,11)+"...";
} else {
document.getElementById("fileUploadStatus").textContent = event.target.files[0].name;
}
fileOutput = fileReader.result;
fileOutput = fileOutput.split(/\n/);
for (var i = fileOutput.length-1;i>=0;i--) {
if (fileOutput[i].match(/^\s*\t*\n*\r*$/)) {
fileOutput.pop()
} else {
break;
}
}
if (fileOutput[0].match(/pace/)) {
var firstLine = fileOutput.shift();
pace = parseInt(firstLine.replace(/^\s*\t*pace\s*\t*=\s*\t*/,""));
captureClass = firstLine.replace(/^\s*\t*pace\s*\t*=\s*\t*[0-9]+/,"").replace(/.*;?\t*\s*bind\s*\t*=\s*\t*/,"").trim();
}
fileLoadedStatus = 1;
d3.selectAll(".actionOptions").style("fill","Orange").style("opacity",0.9);
}
fileReader.readAsText(event.target.files[0]);
}
function pacedMarkPlacerFunc() {
if (pace === undefined || pace === null || typeof pace !== "number" || isNaN(pace)) {
alert ("You should explicity set 'pace' value in your file..\nSomething like: pace = 300")
} else {
d3.select("#fileUploadIcon").style("opacity",0).style("visibility","hidden");
d3.selectAll(".actionOptions").style("visibility","hidden");
d3.select(document.body).append("div").attr("style","width:280px;position:absolute;background:transparent;height:123px;left:610px;top:682px").attr("id","blockUserInteractionDiv");
var i = 0;
var pacedMarkPlacer = setInterval(function () {
var fields = fileOutput[i].split(/\t/);
var checkStatus = 0;
document.getElementById("defaulthtmlInput5").value = fields[5];
//nothing to check here
document.getElementById("defaulthtmlInput0").value = fields[0];
checkStatus += inputCheckNumber("defaulthtmlInput0","number");
document.getElementById("defaulthtmlInput1").value = fields[1];
checkStatus += inputCheckNumber("defaulthtmlInput1","number");
document.getElementById("defaulthtmlInput2").value = fields[2];
checkStatus += inputCheckNumber("defaulthtmlInput2","radius");
document.getElementById("defaulthtmlInput3").value = fields[3];
checkStatus += inputCheckNumber("defaulthtmlInput3","radius");
document.getElementById("defaulthtmlInput4").value = fields[4];
checkStatus += inputCheckColor("defaulthtmlInput4");
if(fields[6] !== undefined && fields[6].match(/round/i)) {
if (!highlightTopRound) {
d3.select("#highlightRoundnessTopControl").on("click")();
}
} else {
if (highlightTopRound) {
d3.select("#highlightRoundnessTopControl").on("click")();
}
}
if(fields[7] !== undefined && fields[7].match(/round/i)) {
if (!highlightBottomRound) {
d3.select("#highlightRoundnessBottomControl").on("click")();
}
} else {
if (highlightBottomRound) {
d3.select("#highlightRoundnessBottomControl").on("click")();
}
}
if (checkStatus === 5) {
d3.select("#Mark").on("click")();
}
i++;
if (i == fileOutput.length) {
clearInterval(pacedMarkPlacer);
pace = null;
captureClass = "";
fileOutput = null;
fileLoadedStatus = 0;
d3.select("#blockUserInteractionDiv").remove();
document.getElementById("fileUploadhtmlInput0").value = null;
document.getElementById("fileUploadStatus").textContent = "No files loaded";
d3.select("#fileUploadIcon").style("opacity",0.62).style("visibility","visible");
d3.selectAll(".actionOptions").style("fill","DimGray").style("opacity",0.2).style("visibility","visible");
}
},pace);
}
}
function actionHashControlFunc(value,index) {
if (value.match(/pane/i)) {
if (eval(value) === "open") {
return true;
} else {
return false;
}
} else if (typeof eval(value) === "number") {
if (eval(value) === 1) {
return true;
} else {
return false;
}
} else {
alert("Control function fails to check for conditions to trigger action..");
return false;
}
}
<!--File API -->
<!--Histogram-->
//HistogramPane is always open
var HistogramPane = "open";
var histogramMinAbsoluteHeight;
var histogramMaxAbsoluteHeight;
var histogramStepDistance;
var conservationScores = ids["con"].map(function(d,i){return parseInt(d.replace(/^.*Conservation-Score_/,""));});
var Or_Hist_Path_Data = {};
for (var i = 0;i< ids["con"].length;i++) {
var pathData = d3.select(ids["con"][i]).attr("d");
Or_Hist_Path_Data[ids["con"][i]] = pathData;
}
calculateHistogramStepDistance();
function calculateHistogramStepDistance() {
histogramMinAbsoluteHeight = d3.min(conservationScores);
histogramMaxAbsoluteHeight = d3.max(conservationScores);
var firstTopRightCornerX = extractHistCorners(ids["con"][0]).tRx;
var firstTopRightCornerY = extractHistCorners(ids["con"][0]).tRy;
var firstBottomRightCornerX = extractHistCorners(ids["con"][0]).bRx;
var firstBottomRightCornerY = extractHistCorners(ids["con"][0]).bRy;
if (histogramMinAbsoluteHeight === histogramMaxAbsoluteHeight) {
histogramStepDistance = Math.sqrt(Math.pow((firstTopRightCornerX- firstBottomRightCornerX),2)+Math.pow((firstTopRightCornerY-firstBottomRightCornerY),2));
} else {
histogramStepDistance = Math.sqrt(Math.pow((firstTopRightCornerX- firstBottomRightCornerX),2)+Math.pow((firstTopRightCornerY-firstBottomRightCornerY),2))/Math.round(1+(conservationScores[0]-histogramMinAbsoluteHeight)/(histogramMaxAbsoluteHeight-histogramMinAbsoluteHeight)*9);
}
}
function changeBarHeight(id,stepSize){
if (stepSize > 10) {
alert ("Maximum step size is 10!");
stepSize = 10;
}
var angleLeft = Math.atan(Math.abs((extractHistCorners(id).tLy-extractHistCorners(id).bLy)/(extractHistCorners(id).tLx-extractHistCorners(id).bLx)));
var angleRight = Math.atan(Math.abs((extractHistCorners(id).tRy-extractHistCorners(id).bRy)/(extractHistCorners(id).tRx-extractHistCorners(id).bRx)));
var neWtLx = extractHistCorners(id).bLx+(stepSize*histogramStepDistance*Math.cos(angleLeft))*Math.sign(extractHistCorners(id).tLx-extractHistCorners(id).bLx);
var neWtLy = extractHistCorners(id).bLy+(stepSize*histogramStepDistance*Math.sin(angleLeft))*Math.sign(extractHistCorners(id).tLy-extractHistCorners(id).bLy);
var neWtRx = extractHistCorners(id).bRx+(stepSize*histogramStepDistance*Math.cos(angleRight))*Math.sign(extractHistCorners(id).tRx-extractHistCorners(id).bRx);
var neWtRy = extractHistCorners(id).bRy+(stepSize*histogramStepDistance*Math.sin(angleRight))*Math.sign(extractHistCorners(id).tRy-extractHistCorners(id).bRy);
var neWpath = histPathRecompile (id,neWtLx,neWtLy,neWtRx,neWtRy);
d3.select(id).transition("histUpdate").attr("d",neWpath).delay(0).duration(1000);
}
function extractHistCorners(id) {
var hash = {};
hash.bLx = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[1]);
hash.bLy = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[2]);
hash.tLx = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[20]);
hash.tLy = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[21]);
hash.tRx = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[12]);
hash.tRy = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[13]);
hash.bRx = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[9]);
hash.bRy = parseFloat(Or_Hist_Path_Data[id].split(/[MLAZ,]|\s+/)[10]);
return hash;
}
function histPathRecompile (id,tLx,tLy,tRx,tRy) {
return "M"+extractHistCorners(id).bLx+","+extractHistCorners(id).bLy+" A2250.000,2250.000 40.000 0,1 "+extractHistCorners(id).bRx+","+extractHistCorners(id).bRy+" L"+tRx+","+tRy+" A2430.000,2430.000 0.000 0,0 "+tLx+","+tLy+" Z";
}
function histogramUpdate (array) {
var arraySign = array.map(function(x){if(Math.sign(parseFloat(x))===0){return 1;}else{return Math.sign(parseFloat(x));}});
array = array.map(function(x){return Math.abs(parseFloat(x));});
var min = d3.min(array);
var max = d3.max(array);
if (array.length === ids["con"].length) {
for (var i = 0;i<ids["con"].length;i++) {
var stepSize = Math.round(arraySign[i]*(1+(array[i]-min)/(max-min)*9));
changeBarHeight(ids["con"][i],stepSize);
}
} else {
alert("Input file has different number of entries compared to conservation track..");
}
}
var registeredHistograms = [];
var registeredHistogramID = -1;
var activeHistogram = [];
var histogramGradualFade;
function registerNewHistogram () {
var array = fileOutput;
if (registeredHistogramID === 2) {
registeredHistogramID = 0;
} else {
registeredHistogramID++;
}
if (registeredHistograms.length === 3) {
registeredHistograms.pop();
registeredHistograms.unshift([array,registeredHistogramID]);
} else {
registeredHistograms.unshift([array,registeredHistogramID]);
}
render();
function render() {
d3.selectAll(".registeredHistogramCircles").remove();
if (registeredHistograms.length === 0) {
activeHistogram = [];
histogramUpdate(conservationScores);
} else {
d3.select("#annotation").selectAll("registeredHistograms").data(registeredHistograms).enter().append("circle").attr("cx",3000).attr("cy",function(d,i){return 550+i*70}).attr("r",20).attr("fill-opacity",0).attr("fill","DimGray").attr("stroke-width",15).attr("stroke",function(d,i){return ["#1b9e77","#d95f02","#7570b3"][d[1]];}).attr("stroke-opacity",0.9).attr("class","registeredHistogramCircles").attr("id",function(d,i){return "registeredHistogramCircles"+i;}).style("opacity",0)
.on("mouseover",function(d,i){
d3.selectAll(".registeredHistogramCircles").transition().style("opacity",1).delay(0).duration(500);
var cx = parseFloat(d3.select(this).attr("cx"));
var cy = parseFloat(d3.select(this).attr("cy"));
var ID = d[1];
clearTimeout(histogramGradualFade);
d3.selectAll(".histogramIcons").remove();
d3.select("#annotation").append("svg:image").attr("xlink:href",closeHighlightIcon).attr("title","close").attr("alt","close").attr("x",function() {return cx+30;}).attr("y",function() {return cy-60;}).attr("width","50px").attr("height","50px").style("opacity",0).attr("class","histogramIcons");
d3.selectAll(".histogramIcons").transition().style("opacity",0.9).each("end",function() {d3.select(this).on("mouseover",function(){clearTimeout(histogramGradualFade);d3.select(this).attr("xlink:href",function() {return eval(String(d3.select(this).attr("title"))+"HighlightIconOrange");});}).on("mouseout",function(){histogramGradualFade = setTimeout(function() {d3.selectAll(".histogramIcons").remove();d3.selectAll(".registeredHistogramCircles").transition().style("opacity",0).delay(0).duration(0);},2000);d3.select(this).attr("xlink:href",function() {return eval(String(d3.select(this).attr("title"))+"HighlightIcon");});}).on("click",function(){clearTimeout(histogramGradualFade); d3.selectAll(".histogramIcons").remove(); var array = []; for (var i = 0;i<registeredHistograms.length;i++){if(registeredHistograms[i][1] !== ID){array.push(registeredHistograms[i]);}}; registeredHistograms = array; render();});}).delay(0).duration(0);
})
.on("mouseout",function(d,i){
histogramGradualFade = setTimeout(function() {d3.selectAll(".histogramIcons").remove();d3.selectAll(".registeredHistogramCircles").transition().style("opacity",0).delay(0).duration(0);},2000);
})
.on("click",function(d,i){
//alert ("My data:"+d[0]+","+"My index:"+d[1]);
d3.selectAll(".registeredHistogramCircles").transition().each("end",function(){if(d3.select(this).attr("id") === "registeredHistogramCircles"+i){d3.select(this).transition().attr("fill-opacity",0.9).delay(0).duration(500);}}).attr("fill-opacity",0).delay(0).duration(0);
activeHistogram = [d];
histogramUpdate(d[0]);
});
}
pace = null;
captureClass = "";
fileOutput = null;
fileLoadedStatus = 0;
document.getElementById("fileUploadhtmlInput0").value = null;
document.getElementById("fileUploadStatus").textContent = "No files loaded";
d3.selectAll(".actionOptions").style("fill","DimGray").style("opacity",0.2).style("visibility","visible");
}
}
function showNewHistogramValue(id) {
if (activeHistogram.length !== 0) {
var index = ids["con"].indexOf(id);
var XY = computeHypotheticalBarDistance(id);
d3.select("#annotation").append("text").text(function () {return activeHistogram[0][0][index];}).attr("class","text2").attr("text-anchor","middle").attr("x",XY[0]).attr("y",XY[1]).attr("font-family","sans-serif").attr("font-size","100px").attr("fill","DodgerBlue").attr("stroke","DodgerBlue").attr("fill-opacity",0.0).attr("stroke-opacity",0.0).attr("visibility","visible");
}
function computeHypotheticalBarDistance(id) {
var stepSize = 20;
var angleLeft = Math.atan(Math.abs((extractHistCorners(id).tLy-extractHistCorners(id).bLy)/(extractHistCorners(id).tLx-extractHistCorners(id).bLx)));
var angleRight = Math.atan(Math.abs((extractHistCorners(id).tRy-extractHistCorners(id).bRy)/(extractHistCorners(id).tRx-extractHistCorners(id).bRx)));
var neWtLy = extractHistCorners(id).bLy+(stepSize*histogramStepDistance*Math.sin(angleLeft))*Math.sign(extractHistCorners(id).tLy-extractHistCorners(id).bLy);
var neWtRx = extractHistCorners(id).bRx+(stepSize*histogramStepDistance*Math.cos(angleRight))*Math.sign(extractHistCorners(id).tRx-extractHistCorners(id).bRx);
var newX = (extractHistCorners(id).bLx+neWtRx)/2;
var newY = (neWtLy+extractHistCorners(id).bRy)/2;
return [newX,newY];
}
}
<!--Histogram-->
<!--WindowInterface-->
var sampleLoc = {"x":1500,"y":1500,"width":1500,"height":2000,"rx":100,"ry":100,"iconPadding":100,"iconSize":100,"minWidth":1500,"minHeight":2000,"maxWidth":5000,"maxHeight":5000};
//global window icons base64
var closeWindowIcon = "data:image/png;base64,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";
var enlargeWindowIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABMCAYAAAC1WDOdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAeSSURBVHic7Z1ZiBxFGMd/X8+hiYm4mhiTGK9oRHPIGvHAB40GTAQR8qAIUUGzNq6KBhQVFQV9EE8Qr04QzYsK4oXigYL6kMSIiUnwWDW4a2KI0cQjm2s3210+VA877s70dk9XT/fO9g+K6enjq5r5d1V31/dVtSilyAS2TAFOBmYAU4BjgTZgAjAROAIoVSUAF/D85FZ9r/7sBw5Vpcr3yj4DQ9ZXPg/66QDQ56/v978f8Lf1+9v2Avtwmv9nStMFtGU8cC5wNtAOnAXMBMY3tyDG8YB9QK+f/gF2A9uBP4E/gJ3ANuA3YAeO6o+baXMEtKUduBK4BDgPKCefaeZRaEF3MCj4v+gToQxY6BPiK2Ad8C2OGhhqJDkBbTkdWApcDZyWTCZjigPAo8DD1U21eQFtWQgsBxYDYtZ4DvAucB2O2gMmBbRlEfAYMNeMwZwAfgIuxFG7rNimbJmDLR8BH5KL1yxmAfdBnBpoSwm4H7iXwdv6nObRB8xqTEBbZgOvAvMMFyonGi9GF9CWK9DiTUiiRDmR2BTtGmjLncA75OJlhQhNqC2P4F84c7JDuBpoywPk4mWSkWugLXcATzelNDlRGQgW0JbLgA8IW1Nzms2P9YWx5VTgdXLxsszG2jXQFgtYDZzf7BLlhEYB8+vVruXk4mWdN3DUN8NroG46NwPj0ihVTij2Au04akuxxsaHSVe8PcCvaEfnDmAX2tG5B9jPYMiDAgroa3QR7QQt+cuWv63IYAhGucZy9WcZOAz92w/3lyvrx1WlQnI/PRQ/Aktw1BYY+hhhy1xgE83z4/0NfIH2Om8A1uOoXU3KuzFsqQg63k+VmJ0j0XE7E9HxPFP8NBUd53M8+qSIw9vA9Tiqt7JiaA18iOTF6wFeA94CNuAoL+H8zKLjWPrRrUJ4bBG0oCf4abr/fbKfJqFPAEELfTg61GI9OqRiHbBxaODUYA20ZQbQTXJNxJfokID3Rp1oGaa6BnaQjHjbgdtx1JuxLS2QIqdwAiWOx6UNoQ3hSKCEooxFAYWHQiHoM1MvV4ceVn/qZfFDEgUXF5cC+gTzKGLRh8tWhO4sNu/VNXAbup02yWtAJ476p2ELN8pECpyH0A6cSLrO414UH7FCfZpiGf6HFlDfvGw2bPtOHPVkw0d3yum4LEQxB8lYb5CwnjKreEb1pV2UShN6qWG7dzUs3s0yHcUSFHOAbMa1KebTx1RseRxH7U+zKBUBFxq0uQJHPRH5qKukQBtXAIvIpmxDmYbFYiD+tT0GlabJVLfZd8BtkY/qkCm0cTejLZbUYwHL5ag0i2D5g0qOMWTv1sjx/jfJLArci75BGW2U2M/laRagCMw2ZGsNjvo80hEdMh/hBtSwDoXRg3BGmtlbwCmGbK2KtHenzKPAMmQUiwfgMYmrJLX+UQuYZsjW56H3vFlOwqUDlbHHg0YQLKYxKa3sLXSfXFz2AVtC7XmLTMDlFlppiFlfet4bC91zHpee0P2bh1jqd3+1DuPYmVbWFtr9EZdwfYS2VLrEWolenlIH0srclIAj93XqwTBLDOSVLTx+SzN7UwKO7BsTLgZSfehNiI/TzNzCzDiH4Bq4QIp4LDKQT7aw6GKl+iHdIpiZHeLvwK1n0o602IAYhYcOcUiVImYCmPYGbj3ERaOohzMMvcAKXlA9aRekiI69iEt9v1intCEtNEuF0IPFizyvgludJlEJwYtLfQEHmJdI7VMMYNGNyx/AvxQ5iIuLhSBYuH5ooUUBoej3t+p1HmUKFFAU8CghfkihRRlF2d+3hCDAQTy2At2U6OF7fuaz4fO1pIWpfsj6z0EW8zA7k8k+PN5nHKuz4BFPm2QFFBFsZhrKA6CLIit5TgVfc8cQpgSsXROWcSzKWD/hD/zEs1lqvrKAKW9AbSeuxwwj1hV9wMu5eMNJVsCSMTfLFzgqWiT0GMGUgIdqrhVDoRplvjZipwVJugmN7zYS+pjMtth2WpSka+ARsS0rfufBfCxFPUwJWPtJTxkQMOoooDFG0jEpJsYx5M98ASRbA01EnCnyR4cATAlY+xrlGRiuVqhzfc0BzAno1rFee32OMZKtgfXXh0e1mCfRMMnexHgGaqA3yiO3EyZZAcXADYhKfVqPTJP0Y4SJG5BcwACyL6DVQiH4CZD0NTC+gJILGETS18DYL3dC5QIGkX0B83dSBJJ0E5oLmDDJ9oVaAdFq4cnvQgMwJWDt8XHKiCchdycFYBHfXbMzYCqtrTFtg8fu2DZaGAv4PqaN+qNzXAMCFkIOHh2jWOjJeeLQVXfLS6oXGWHk0kh4/Brr+BbHAlZS7yZkZAaAZwP38FjToG2ALaxQcU+wlsbCUWuBlxs8/nmcEf7g6XyAnvs6OgPpzkM2Gqjchd7DSIM0h/MXeormYB5UA3isImotV6zjJfVLxDKNObSAjvoTPQHB9pDH9QCX44QcI7dSdSOsAg6G2l/4hOm8ErIsY5qhs9a3Ac8B1wQc8wbQ0VCoe6e04XIt9edn6wVexVEbItseo9R79c4FwAXAOegX7nahZ01fi6Pih7kvkxMpMxWX47A42p+qowuHbZDUi+1bk/8AzCYzYMEpspMAAAAASUVORK5CYII=";
var relocateWindowIcon = "data:image/png;base64,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";
var dragWindowIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABfCAYAAAANiCLOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAvDSURBVHic7d1/kF1lfcfx13NusvnFj4DaQEKtovwqCBTICFRkQGpxUKFqigMKKS53k0xDscNYR2yb2rGl1g52Ij9yE1r5oTM2tlAqlIqCzACjQEVIEQmILRAgAvlhQshms/fpH/dustncu3vv3vNjd9n3zP5xzzn3+33mfvY55znf5/t8n2CSXcQFuuzvSCWHiw4XvEM0F2/HfvW/2QjYgdexBa+JXhI8JVgrWOM1D4fVdqTdxpC2wfFC/KwZXnciTsKJOA5HYmpKLrbhQdwp8c1wvV+lYfRNI1hcYh/93o8zRKfhBOmJMxJ9+E/B18MKd3diaEILFsvegw/hbLxPfgINx334Yqi4fzRfnlCCxQVK3uI0VX+A89SePWOT4Buiy0PF5va+NgGI3U6WuBCfwEFFt6cNnle1MKxyT6tfGLeCxUXmqboYC3FYwc3phJ24PFRc08rF40qwSNDjLNESfBhTim5TakTLrfQngTjcZeNCsPoQ/CJcrjb0nqhco2LpcKKNacFitzlKlogW421Ftycn/j5UfK7ZyTEpWFzsUP0+h4sxvej25E50UVjp5kanxpRg9YHEMrWBxMR5PrXPG6JTw0o/HXpiTAgWFyg50BWiP8esotszRnjCRicMjUcmRbVmgHiJfR3gVtFVJsUazNEOdOXQg4X2sNjtnRJ34fAi2zGG2YHfDhW/GDhQWA+Ll9hX4naTYg1HF740+EBxt8SpVuGYwvyPHz4ZF+3+nQoRLF5qvmhBEb7HIYnost0fimnCXxgjI9RxQXRBXGg2BQgWF5ou+kDefsc5s3T5BEX0sCnmY0bufsc/H6GIaELwG7n7bJ8NeFT0GH6OtRIv6rI+LPdriMskXvA2wdsxX+LjojMzbNNZcaHpuT9HYo9PiY3jZAXypOg+iQfs9KNwg2dGYySWnYObcUC6zasTnFpED3th+BmfXNgquBt3CO4K11uXhtFQcUdc5AOq7sO+adjcg2h+/j2s2xyJl+Q/StwguhX/arp7wnK9WTmKPf5I9E8ZmF5VyNA6lj2IU3Jw1Yvvim6yyV0DgdS4yO+o+ihOU8sBOVhtqn49XsAPlfx7uM5To3EaCcoeVct1TJPvFyVYD67P0MUvcB1uDBWvUv8RL3W+4K+0Hg57BFeGiu+124BYdhn+sd3vjcDTRQk2FWtwRLqGPSD4qrluD8tUB/k7UnCL6MRR2r1bcHGoeKnlr5SdgP8elb/mvFpYtCFe6vT6g7/T5M4ouENwVbjeA3udLPsgvq2WE98JL4rOCys93FKjPuNAJa916HMovcVOr5QtxjVGNwCJ+A7+OlSsaWL/vPo1pVE3ck/ewBmh4scjNm6BLgekPrCpFh7Pq7+XrcK0Nr72JMrDpTvHbkdJ/EhtxUmavKxqfljlheEuqmd6bUvZd1/hM85hhVskTqKlB/t6wWJzHTusWEtNq8+1pS0WHCTxzRGv2pKJ72JviUOJPY4T/SHei3lqobOX8YToVpvc28qaq1h2Oa7OtrHODSvd3vR0t2MlHkvZ67oxJVgaxE+bZYZnyTxm+T8qjm2W9Bl7nCu6LWWfawq/JabOdOfIXiw4Rs8wrwnR0Rn4XDfxBAu1aYicGM7XCRn4e2HiCcZZOfr64DDnTk7dW/TUhBIsLjUNc/Jz2HjBYCx7l9qgKW1+PqEE0+dg+c4CzIkLGryUh4xSIKZ6bGIJtjP31IOSAxq88EfnZOBrfbjW8xNLsKleztnj5lDZM5oRP2sGmfSwHzMGcuvTJFxno1q8Ly9e3OvINh+SxRqB4EEmmGB1Hs3NU/CTBkc/lYmvfvcxjgSLrQ8m/iPThgzjK3abk9Hza5NDPMIYXTQXF5ptmqNUHYEDBfsJumLVNoktqtZLPGmmteHqvW6Bt+FvZD9a3K7Xf+1xJNGttoAhbe4Jy+xkjKVLx25z8PtKLS8878dDSu4N19q6y07Zd/DxLNo4iD3WIselpun1S7X8kHQJLgkr/DNj5JYYFyjFxT4qcVkbYlGbmDzFTlfE7kGRhegLakk1WbHZVH+3x5Fel8pCLPr1u3PgQ+E9LJbNxAWCQzs2FjzsNbeH1fpj2V9iWcc2G7MwVNw48KE+Wfm0LKIb0Q/DSmcMfCy0h8WFpqMnFbEgmm+2T0aCii8J/iUVu3ty9WCxwFaXyyYUBasHfyhuBWYUdDlfSLn+RuJoPc4MRCWfwV0pWr/R3D1raMQlDhL8WYo+BrNj6D9dcT2sljWVbprbAMGZcbFDw7W22ujD4pDnTfv0Cz4fKhYOjNZ20Wc59u/QfmOCOwbyKgcoZgVm2UzB+7NzIKg6OxLCav1hpc8LzhJGlSf4fVXvDSv2Fj2WLRBq67YyoWrl0EPFJJL2OJsMBdvNLWGFn+3yW0uhPhfnqxW9bJaruF70XdG3mpXGi90OqedsHJh6q2s8a67DBifEUsCLcySIjs/lXyU6nt2CBaKK23BbLJsqcYyquThY3JVb/5x5nhz6Q+1hdoEuiW/LTixY3qgN+Uc6lppnRyYpYI04PC4zZa/nDkJFn1rcsf3Y4wGW49TOm9eUDaZY1ehE/s+w7d6Vm6+gy8sOSdNkvNQVKKdpswHLB0duBlPEGudsRlTNiOn5iz3OF3wlLXtN2GiHrzU7mb9gMYOVicPRn87tN5a9R3SD7AdqXw3fsKnZyfwFq+b83Ew691cPn/2b7IuXraN576IIwYItufqr1lb9d0SwCO/uvDEjcuXQlIOhFPHinK9gHf6DxKWmic1LuqZG9ICKm0a6LH/B+odfppMqUTS1Qd5FO7zhd2Wf69gnWjJSRW2KECzxjKq+XHwFzzcbHrdMkkOZpeBvwyqPt3Jp7oKFij4la3Nx1u+JFKz8Zgo2huMxG3y51YuLidZX3SNmXF4let0MD6VgKcuR4RuiC9vZZ6wQwULFS2LjdcnpOUmpeEpMZ9+vhgR/Gla2dxdo6x0lftoswXQzTbdTMEOv1213g60htNljtrnTLO8QMogrVv3SplR6F8GTqdjZm5vDivZrlYz41h4Xmq3kEFPMUW2Su17Sh19JvORa61sZ7UD8Y3P16pGkuK9XtMkU13Y82BgwV9v04BnpRjgexftGeudqRNNGxCX2scMRQtuZQFsEa1stQhLLjsT5QltVBBpTtcF2N4Wb072NxR4/SLG03jpVJ49UhaAZDQWLi8wTHafawTMues5Ka1q5VdYLhl0kdFS27n+VfCutnjWYelWbh3Re72OLxOnh+tGnk+8lWFziKH0pTYEkXhM9Up97Gpa4QJfZTsHpkrb2W9ksuNdBHhlu0rFTYtmX8YUOTPQKzgkr/KCTduwhWOxxWD09Oj2CV6zwUKuDkrjEPnY6XnSU4LeEBr28qk/iadHPzPV4ownKtKmnF9yCC0bx9c2qPtbOTnzN2CVY/bZ0kpjB9EHi2cG5Fa1Sz1ucbYb99Zkm8Xo9t35jK702beIyiRctwxe1Pgh5Bh9rVl6pXQL1zWpmO0OWWz/Ncn/4WvN5nvFEfc/Nq3D6MJdtxldM8w9pFtOsCbbEu/VlvPNd8EorRbXGE3GxI+z0EcExagHibXhOcI8u38ui6mmIyyTW+T157HHc5/7hZlMnGZnE/3mLvDak7hpXW/aOSRLTcq1rkZ+vCUqi2nGlznbYt2Fdi0laJkklJNQOjepaTNIyifYqgXZOaVKwTkhU9efqcUrO/iYYCbbn6vHlnP1NMBIh1x+w3+r8Q0oTiUTJKzn6e7XVyc1JGpPoz7GgVrA+N18TlCRUbFOyMXtPdtqYe7W1CUdtrqkvs0ST3VQ920461ySNSSDcYINqhulcUa95ns3M/puI3bO5v/ZTMfWtJ2ormnf4SR6zwm8GdgkWVtthhkckqf+wa8JNqe/y86Zl7yScC+1nXyfpN7Mjy7UYyuOjTeeapDGN09yWmqbPcfpHucNCyVZVj4aKzR21bpK9GDaRJJa9FUeKLU/BbBestcLzbaduT9ISLWX+1FPP5uCtoulKpuuXiHoF20UbRevdYONkJCNb/h+SMU/VteTIRgAAAABJRU5ErkJggg==";
var magnifyWindowIcon ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAACECAYAAACJZOXoAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAABFdSURBVHic7Z15lBzVdYe/3+se0MIegQ7EC2HRaKYHBZAxYDZhg8CcBAiggCEcDAfkYBx8OBAWoxmeZgARwGAWcYwACwkMMZgcbINJIBjFWFgcE0yEeoYRmyBYxAKxSUiMprtu/uge0NLVXd1d3T2M+vtz3q17b83tevW2e0vUGZvRtidJtx8EE8FNAPbAbHtgG6SxBDYKxwfAatAaLHgDtBSpH7SEDz94Vje+tbbeftcT1dqAXdy6NaPc8UhTkQ7H7C+rUigGQIsI7CmMn6unNx2Tq8OGmgTFPA7ajsbc6YjjMBtdCzt5XsC4F5e8R37xihraqRuxBsWmT25hlzXfwnQJ0B6n7pJIazG7CwU/lH9pWV1tx0xsQTHfdgroGowvx6WzIsQgxlyUuVx+6bsN9aVCqg6KzehoIxHcCnw9Bn/i5D2MH+B675AnaLQz5VBxUAyEb78QuBqjpULrK0FLIViGaRXwEbIssBVoDMZ4YAKwK5Cs0NXfkXGn6qol/1vh9XWnoqCYnzAOS84Djinz0l6kJyBYwMDgQs165Z1o9lJbgCZBMAU0BbNvAKMiWxUrCXSmutO/KtPfhlB2UKyzPUWCxzC+GNHCnzHuIdC96kn/T9keFvLhkt22ZctRJ+B0BmaHRbsIw9Et3+vj8KGWlBUU8x1fg+ARjO1La9brBMF1uLVz5Zd9UrGHpXzqTO2HCy4FHQ+4CJfMobf3u3qQbK18qpbIQTGfOhqzh4AxJTSuAnmWj7pFc/57sFoHo2K+bV9Ms4EDIkj/G2+POaWe/pVDpKCY7/gaFjxBqYDAwyh7nnz/8updK5/8pPUs0A0YWxcVlu7Bp88QWJ3ci0zJoFhnewrHb4EdimgZAF2ET88eDjdpfuIEcP+KsU9RQek6+fTFdXIrMkWDYn7COEg+X+KlvoJAf6Oe9B9i9q0qzO86ChtzF3BqcUH+Ud29t9fHq2iEvhgNBMk7SwRkGQoOGW4BAZBf9gkze/8B6bqigo6brLO9+BNVZ8JHKz51AcZxoe3S6yh7kPxLS2vhWBwILN89XR0qZGxJQvebT21VP8+KUzAoNqO1FbNZRa5bQSY4qlEv9LKZ2TsDdGdou1mp+60rBd8p5lOPY3ZkyBUDZBVrl2W+dRcseS6yw3LL/O4VzOaru/ex2GxMI0Gq/VGMowoKSFngK/LpF+KyWSmbBMV86iTMHgy9wjhf3b23xOVAfv5zP7Ddpt7pZywfdXpc8wnzk3aCzAsYOxcUEAvxvYc0egS5QfdlfkoSuDZUWvyC7t5b4zKe7yYfolBAAMxOZudPwv0pE/nFKwh0GoSsGhsH4VMnxmWvUjZ6p6w4BbO/KigpVjGYOS/WX1EiMYOSE1L7nvlJX4jLpLrTTyHNDTdnl1sdtsmL8WlQco6o2ESqW1ct/VOs1sU3I0glCTKF32+VMjBwGeL9kNa96UpNjdVemXz2pHSlpmK2V4jcMpaPvilOwzZ9cgvGX0SU3iVO25r1yjsEXBUq4LgwTnvl8llQnJ0eKiW7LvbFu11WJiLLuhp0J2uSPwYKbxebfcMun1DdqZsqcAD5idPxITIr+HBVeB/8OUXXL/4YMTuk2ZFInlJXhzYwDhDYcRhjQ2Tmj9zDb8k7CRuJqcSaWQ1xeQeODpWQflovZ+qN/OK3EP9VsNHYJzevqT9DQSm8pSr6hsMMt7bYfQX/LATZQ+vsDADOZnTsXmQl+D/r6k0jGOSJ8MZgSt38WA+Hs68WaV5QN08ahK7qewPp9cKtLsLWcvw4nLWGtg588nQdfWkcZgtDGibU15EcyZzhgtOAd6OeyxrCfGoPzC5HHBW66PepcDmK1WNXtPeUkPoE6Y8E3E53en5Zy0GyfqzA/8DY2n7QtrOu7nu7DG+rxmHsWbBFerkcReY7poK9AHy7ZEBqwyjMDkR2N1e0P2DTiD45DdQf2rZFyP+nhjhQyIGIYFlUJeZbdwF7oMhcp96cRCp1eWRp50LeKUCxAyM1wiGFHMXRR5G1WOI8zLaNyad4MLvQ/K4Rj7Zmityr6r5N7IDCRo2PI2sJm+c0lm1gq30jSa7TqtC2wIqfH6sBDrOwE/PrImux+jsekWi/8i2y4Yutji3jciYqDqnwE6Ey3g9lDgrqRmYwol8uPHgB4U9RjXCYFTZa6tjn+gQ2DNfH7Bld2V/sBf4Z2aL3ujoef6LjQo1KO0bW0t33MPDLeFyKAfExcudFl0+MK9IYfcATEw6pcIaTWeTxucDQmpPzZ6sam8omXiUbHFneQmqRmbvxZgxelUUSgqWgQnvgu9n0yS1RdxzzOSjn2IyOa0hmj8L0RVRomjyEJTEXbdtV9jTwTAmp9wj0ItrpCfUsyETS+6l+woISkFjzalm6YiBJoP6QzdYk49d2AH8sR6GuXPIqcFspudwcYkzUvfDH5fuujCbaG1Hleoh9Ci7KSG/UMuEpDAdaEtoqTamfK40hdzqfAws3Bg2pZuFY9eGiXH5JAWRT6utOI9jqAMKSWqXCu5I1xunGt9ZiPBvSfoRd3DpcJ4YxYWEHRmjUftLQEaMw42MY4/6uTr7UndwxXSt8akX6kPSSst6ncZHfo3cPhUqYws+Dfd4JVhyZL6CwKcYvGpVB7ADklyxGejFE5gjzbdEW9j5viItC2yy4t46ebMBnJyQDwpdKzP1zPZwJJYg/NcF86quE1ZMRb9PX95u4bUZlvWOrzAMKj8nFNOucGHbOuDLSywaBiJM8tyZW2wBYd3iT7mpk8YNPgyKf/j/EvIJSZgmcuy3OFIH8TYfPkTZ0YHFcdgHMtx0fmtEFa1g3cHOc9splo/yUxLWE/3oPxrefFqt12R2lZXiZvt4FcZk0P3kMphvD7emOcg+MxM0GQZF/8TXEPaHSxi3mJ+4an/nxc4B/LyKwhmxwRqxdia29hVypqkKsZnCweIp3Hdg0O3iduwz4IER+O8zdb9MnV1bfayPkF2R4b93xiB+yyfvMniMIDlXPS7+PwxaAdbWfBpwV7pCuij0xqgJCsoPbz8cITxKS3SHfNz1OR8zvsQ1By/44xpJJ9OvKJX2x6u9M7Yez3xC+RbwUaS/5dPRt8BoREpQpSVjxDMZ+4Vdaj3xfV808i5F8LeSFmIVt3AVIR8qnGzYMXp+CxQ3kF2QgcQrSh6FXmjrNtw27YjMbYz61B0n3H0UCAnDNcAkIlCqY09U+DfFACR03o94LhmPxTOucOJmEezR0KSXHIt4efehwqv1VtJKcunsfzL+Ei3E+1v4zu2S3YXUYz3z735NwT5UIyJtkMicNp4BAlHpfuaqq92CUmqO8RqBTGl3RyC74wmi22eZHQKmByHtIh8inK9iqrC3RKuNNn9zCLmt/VWQWPKRtELiZNdmZura/7uelzLcdg+kmYI8SomuQO1J+Sal9/4ZQRg3JXUfB2Pswi7K/shzZFeDm12OIaZ2pv8ZZN3BsSWHxPln9rXrSITkpjae8aqvTSNDefhulu4Yh3sJ0A+vc3brmxbAKDxWR61Y7DgO7iMCOyeUobihQ4O7eIuDo4f4licqKRXelLkF2JVGraosBjMcQ9zMQPKlZL62syO40EkxM7YuzE8iVIfxSGZe/QMYd+3mo5F15WfXO1EE4u4/y/jEAAeJFTAsRfbmy6pllkPgIWM3yUQPssG4rkuu2Q8lxyCbgrDVXpFOHAttU4G4AWsTM9MGNLhsVhaqW4s2ndsDsJozTNuk+hhvCCPQddadLr0w3mFj+kdbZfgjObs3Vox+mGCCtQYlW+cVvffrnzvb9SWgsqxPP6vrF0XNyakiUMuQlUU/v02j8ZMzORgzPtAgBshaCzBwA8x2TrKv9eRyLMHuSrbJ/ym8RN5zYu5x8rcYTMS4E6nWT74HNxzgO575EYInQOzMAPYQLjsecgeUGK2ZZcO8xsHZP/ctr4Wt+daCm7wGb0dpK0p0GOhVj91iVS2vBHiHgpzg9Jp9eZ50TD0RuYRXvtwzY3ZrZd06svpZJ3V7ONqNjd5LZw3PfP2F/yv1QjViJ2Yu5o6RuAaxeVOjwtXWlbkN2Tlm6N1CA4WyqfF/DSqA0bMSU+1CN240g2BPYAReMJXBb44KW/OmV1WAfgL3JgL0cdW5jF7duzejEUkw7IoueSz+ELIu5t/k4MbFRL/7hPYytEOtq/ybi11WoyIBu0Mz0JbE5VQaxjL6GH0piIZkE0UhCcJH5jq/E5lIZjKgnxfyEcQSJu0HHIIxqfnRShsD6cTvtnduJrR8j5kkxPyWJtTyNc1Pzo6/cvRVbVCnaZkmcJhKsqPuR3RETFHjnCGStmxRrKNYXlOonzBLATJvRGl5+qwaMnKAEwWiCIj/9SpchHZBMzs19Wqo+jJygOPcE0seh//xK355GCxbsT9D2nUpdK5cRExT59GqkC3E1WJo3OeSut8s7on3bskpGTFAA8Ok7QL9Fivd0igCzFloiHEiPgREVFIGRyZwJFn9uiWghsKOsK/Wt2HVvxIgKCkCuSI5dQalyJJV1coa4rdZFpEdcUHKMvyGXw6nwSd/GL/4oQRJCNhbLhOe3xMCImtGvj/mOSZB9HtOmi5KFT7qUaUDH1uqr3SP0SclnPKNr89+336ixavUB2O21KvwwYoMCwMp1MzG9XjAw1eFwGscoV5PPEI7Y7muIGHYjiyjHcDpUPv27ONWO7CcFyKfnzSFyengZOAsw5kUvtRtRbZzKhi1u3cXAu2Dx5tCYEljwZRj9gzjVjvjua4j8ifxHa6JcliWr/dTTG0uBnc3jSQHk+34NPFB07lIpJsPxk7Lq6xdhswkKAMqcB6zGYl+0TAKTSKW+H4eyzab7GsK62k7HaR5Wg3sXA6AO+fQr1ajZvJ4UQN199wCPYcSf52hKYDa32ho2m11QcuhcnAZrULAqiTgI335mNVo2y6DIp98ksEvBapSropur+aLqZhkUAFzvbKRniXtSaQhsC5KJOZWq2GyDIk9ANvvtGozE8vv6OsZ8xwmVXL7ZBgVAV/b3g3qQ4t+pdGYEwRy7dK/ty740dmc+b7gdZ2HWB8rE+syYhNiWUdlSFTs2YbObpxTCOlP7kbBFWA1+pIaBHaXuviJfXt2Q5pMCqCf9B4wfoRoswQjDubn5z8tHohmUITS6E7PlNdkQMxsP5iO7ErMDn2usK3U42JM12xCz4KAo5RebT8p6qDv9FM7m5wv/xEcuXTyLS/wkl8FWnGZQNmbtwPcxvY9iLConyC3BBHtCULKaYLP7KoB1pU5E9vOaKBeDoL2L1RlrPikFUHf6IbCHY+/GIDd/MeYVS61oBiUMuXMJq/1fFZZEti+kvhtqOn6jIwfzbWeD5tRoQ+wTMtn2Qh8IbT4pxfB9d4EW1KQbgwTJ5I8LNTSDUoRcbbDsWVCDz3YYLWBH5ku9b0AzKCWQf2kZ0EmtvvTqNHvj1IpmUKKQ7r0RWFyDSaXAxsDgBt9raQYlAnqQLHJngNViFbkF08nW1X7c0J+aQYlILrXCXZOrCxY7AdIc83tvB82glMfKgR7Qa5hlY95Edsi2Jxi8GprzlLIx33YAgZ6p3UoyhzWDUgF2Rdts0HQqLfQWhpTF7PfN7qsS1gaXAu8S9zDZLIE0uRmUCtC1/aswO5u438lSFqyv2X1Vgfm2+8CdtEnlpEqQBjEGCezrzSelGgbsnwis+tSKXMG458hm9lVP77PNoFSBZr20EqfvUeko1hhE+pjALoD0wbnDgc0hcSyYTz0CNjW3yBjpigCTAx7DJaevX+Yd4h7SbbZkpkNyKWYtpavtMYi0CmcXyPfNLyTS7L5iQL5/OQGXoCLZx0PnlR2/RJnWsIBAs/uKDfM4rG0hpsko340N1YARGdCfQWfJL3m8lK7mkxIT8gQoeSZOmU/z9R2Z/NLJbaxOtEYJCDSflNgxnzoYC2aDdgM9h4LL5PsWlaPj/wGLLCkT21IASwAAAABJRU5ErkJggg==";
var minifyWindowIcon ="data:image/png;base64,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";
//global window icons base64
var relocateWindow = "";
function renderWindow(type,ID,location,funcToCall,arg) {
var internalCoordinates;
var dragTransparency = d3.behavior.drag().origin(function(){var x = parseFloat(d3.select(this).attr("x"));var y = parseFloat(d3.select(this).attr("y"));return {"x":x,"y":y};}).on("drag", dragTransparencyFunc).on("dragstart",function (){d3.event.sourceEvent.stopPropagation();});
function dragTransparencyFunc() {
//console.log(d3.event.x);
//console.log(d3.event.y);
//d3.select(this).attr("x",internalCoordinates[0]).attr("y",internalCoordinates[1]);
//d3.select(this).attr("x",d3.event.x).attr("y",d3.event.y);
var minX = location.iconPadding;
var maxX = location.iconSize*2+location.iconPadding*3;
d3.select(this).attr("x",Math.max(minX,Math.min(d3.event.x,maxX)));
d3.select("#"+ID+"rect").attr("fill-opacity",function(){return (Math.max(minX,Math.min(d3.event.x,maxX))-minX)/(maxX-minX);});
}
//main svg
d3.select("#annotation").append(type).attr("id",ID).attr("x",function(){return parseInt(location.x);}).attr("y",function (){return parseInt(location.y);}).attr("width",function(){return parseInt(location.width);}).attr("height",function(){return parseInt(location.height);}).on("mousemove",function (){internalCoordinates = getInternalCoordinates("#"+ID)});
//background rect
d3.select("#"+ID).append("rect").attr("id",function(){return ID+"rect";}).attr("x",function(){return parseInt(location.width)/2;}).attr("y",function(){return parseInt(location.height)/2;}).attr("width",0).attr("height",0).attr("rx",function(){if(!(location.rx === undefined)){return parseInt(location.rx);}else{return 15;}}).attr("ry",function(){if(!(location.ry === undefined)){return parseInt(location.ry);}else{return 15;}}).attr("fill-opacity",0.25).attr("fill","DimGray");
warp(ID+"rect",location.width,location.height);
//add icons
d3.select("#"+ID).append("svg:image").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"enlarge";}).attr("xlink:href",enlargeWindowIcon).attr("title","enlargeWindowIcon").attr("alt","enlarge").attr("x",function() {return location.iconPadding;}).attr("y",function() {return location.iconPadding;}).attr("width",location.iconSize).attr("height",location.iconSize).style("opacity",0).attr("onmousedown",function(){return "enlargeStartMD(evt,'#"+ID+"')";}).attr("onmousemove",function(){var addionalArguments= ","+JSON.stringify(location);return "enlargeMeMM(evt,'#"+ID+"'"+addionalArguments+")";}).attr("onmouseout",function(){var addionalArguments= ","+JSON.stringify(location)+","+funcToCall+","+JSON.stringify(arg); return "enlargeEndMO(evt,'#"+ID+"'"+addionalArguments+")";}).attr("onmouseup",function(){return "enlargeEndMU(evt,'"+ID+"',"+funcToCall+","+JSON.stringify(arg)+")"}).on("mouseover",function(){iconMagify("enlarge")}).on("mouseout",function(){iconMagify("reset")});
d3.select("#"+ID).append("svg:image").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"relocate";}).attr("xlink:href",relocateWindowIcon).attr("title","relocateWindowIcon").attr("alt","relocate").attr("x",function() {return 2*(location.iconPadding)+location.iconSize;}).attr("y",function() {return location.iconPadding;}).attr("width",location.iconSize).attr("height",location.iconSize).style("opacity",0).on("mouseover",function(){iconMagify("relocate")}).on("mouseout",function(){iconMagify("reset")}).on("click",function(){d3.event.stopPropagation(); relocateWindow = "#"+ID;});
d3.select("#"+ID).append("svg:image").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"drag";}).attr("xlink:href",dragWindowIcon).attr("title","dragWindowIcon").attr("alt","drag").attr("x",function() {return 3*(location.iconPadding)+2*(location.iconSize);}).attr("y",function() {return location.iconPadding;}).attr("width",location.iconSize).attr("height",location.iconSize).style("opacity",0).attr("onmousedown",function(){return "dragStartMD(evt,'#"+ID+"')"}).attr("onmousemove",function(){return "dragMeMM(evt,'#"+ID+"')"}).attr("onmouseout",function(){return "dragEndMO(evt,'#"+ID+"')"}).attr("onmouseup",function(){return "dragEndMU(evt)"}).on("mouseover",function(){iconMagify("drag");}).on("mouseout",function(){iconMagify("reset");});
d3.select("#"+ID).append("svg:image").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"magnify";}).attr("xlink:href",magnifyWindowIcon).attr("title","magnifyWindowIcon").attr("alt","magnify").attr("x",function() {return 4*(location.iconPadding)+3*(location.iconSize);}).attr("y",function() {return location.iconPadding;}).attr("width",location.iconSize).attr("height",location.iconSize).style("opacity",0).on("mouseover",function(){iconMagify("magnify");}).on("mouseout",function(){iconMagify("reset");}).attr("onclick",function(){var addionalArguments= ","+JSON.stringify(location)+",1.1,"+funcToCall+","+JSON.stringify(arg); return "magnifyClick(evt,'#"+ID+"'"+addionalArguments+")";});
d3.select("#"+ID).append("svg:image").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"minify";}).attr("xlink:href",minifyWindowIcon).attr("title","minifyWindowIcon").attr("alt","minify").attr("x",function() {return 5*(location.iconPadding)+4*(location.iconSize);}).attr("y",function() {return location.iconPadding;}).attr("width",location.iconSize).attr("height",location.iconSize).style("opacity",0).on("mouseover",function(){iconMagify("minify");}).on("mouseout",function(){iconMagify("reset");}).attr("onclick",function(){var addionalArguments= ","+JSON.stringify(location)+",0.9,"+funcToCall+","+JSON.stringify(arg); return "magnifyClick(evt,'#"+ID+"'"+addionalArguments+")";});
d3.select("#"+ID).append("svg:image").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"close";}).attr("xlink:href",closeWindowIcon).attr("title","closeWindowIcon").attr("alt","closeWindow").attr("x",function() {return location.width-location.iconPadding-location.iconSize;}).attr("y",function() {return location.iconPadding;}).attr("width",location.iconSize).attr("height",location.iconSize).style("opacity",0).on("mouseover",function(){iconMagify("close")}).on("mouseout",function(){iconMagify("reset")}).on("click",function(){d3.select("#"+ID).remove();});
d3.select("#"+ID).append("rect").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"knobTrail";}).attr("x",location.iconPadding).attr("y",function(){return location.height-location.iconPadding+location.iconSize/4-7.5;}).attr("width",location.iconSize*2.5+location.iconPadding*2).attr("height",15).attr("rx",15).attr("ry",15).attr("fill-opacity",1).attr("fill","Orange").style("opacity",0);
d3.select("#"+ID).append("rect").attr("class",function(){return ID+"icons";}).attr("id",function(){return ID+"knob";}).attr("x",function(){return (location.iconPadding*11+location.iconSize*6)/5;}).attr("y",function(){return location.height-location.iconPadding;}).attr("width",location.iconSize/2).attr("height",location.iconSize/2).attr("rx",15).attr("ry",15).attr("fill-opacity",1).attr("fill","Orange").style("opacity",0).call(dragTransparency);
d3.select("#"+ID).selectAll(ID+"colorBoxes").data(["DimGray","Black","Red","LightSeaGreen","DodgerBlue","DeepPink"]).enter().append("rect").attr("class",function(){return ID+"icons "+ID+"colorBoxes";}).attr("id",function(d){return ID+d;}).attr("x",function (d,i){return location.width-((6-i)*(location.iconPadding/4+location.iconSize/2))-location.iconPadding*3/4;}).attr("y",function(){return location.height-location.iconPadding;}).attr("width",location.iconSize/2).attr("height",location.iconSize/2).attr("rx",15).attr("ry",15).attr("fill-opacity",0.65).attr("fill",function(d){return d;}).style("opacity",0).on("mouseover",function(d){d3.selectAll("."+ID+"colorBoxes").filter(function(){if (d3.select(this).datum() === d){return 0;}else{return 1;}}).call(generalMinifyRect,location.iconSize/2,location.iconSize/2);d3.select(this).call(generalMagnifyRect,location.iconSize/2,location.iconSize/2);}).on("mouseout",function(){d3.selectAll("."+ID+"colorBoxes").call(generalMinifyRect,location.iconSize,location.iconSize);}).on("click",function(d){d3.select("#"+ID+"rect").transition().attr("fill",function(){return d;}).delay(0).duration(1000);});
//initiate icon fade-in or magnify on mouseover
d3.selectAll("."+ID+"icons").data(["enlarge","relocate","drag","magnify","minify","close","knobTrail","knob","DimGray","Black","Red","LightSeaGreen","DodgerBlue","DeepPink"]).each(function(d,i){d3.select("#"+ID+d).transition().style("opacity",1).delay(i*150+100).duration(i*400+250);});
function iconMagify (iconName) {
d3.selectAll("."+ID+"icons").data(["enlarge","relocate","drag","magnify","minify","close"]).each(function(d,i){
d3.select("#"+ID+d).transition("iconMagnifyWidth").attr("width",function(){if(iconName.match(d)){return 1.5*location.iconSize;}else if(iconName.match("reset")){return location.iconSize;}else{return 0.5*location.iconSize;}}).ease("elastic").delay(0).duration(1000);
d3.select("#"+ID+d).transition("iconMagnifyHeight").attr("height",function(){if(iconName.match(d)){return 1.5*location.iconSize;}else if(iconName.match("reset")){return location.iconSize;}else{return 0.5*location.iconSize;}}).ease("elastic").delay(0).duration(1000);
});
}
function generalMinifyRect(selection,width,height) {
selection.transition("width").attr("width",width/2).ease("elastic").delay(0).duration(1000);
selection.transition("height").attr("height",height/2).ease("elastic").delay(0).duration(1000);
}
function generalMagnifyRect(selection,width,height) {
selection.transition("width").attr("width",width*1.5).ease("elastic").delay(0).duration(1000);
selection.transition("height").attr("height",height*1.5).ease("elastic").delay(0).duration(1000);
}
//call a function
if (funcToCall) {
funcToCall.apply(this,[ID,arg]);
}
}
//",[adjustWindowIcon,"+JSON.stringify(location)+",'#"+ID+"','close']"
//more gateways needed sire! xD..
function warp (ID,width,height) {
//console.log(ID+" "+width+" "+height+" !");
d3.select("#"+ID).transition("adjustX").attr("x",function(){var x = parseInt(d3.select(this).attr("x"));return x-width/2;}).delay(0).duration(500);
d3.select("#"+ID).transition("adjustY").attr("y",function(){var y = parseInt(d3.select(this).attr("y"));return y-height/2;}).delay(0).duration(500);
d3.select("#"+ID).transition("adjustW").attr("width",width).delay(0).duration(500);
d3.select("#"+ID).transition("adjustH").attr("height",height).delay(0).duration(500);
d3.select("#"+ID).transition("adjustFO").attr("fill-opacity",0.6).delay(0).duration(1000);
}
//adjust icon position
function adjustWindowIcon (location,ID,iconName) {
var p = location.iconPadding;
var s = location.iconSize;
var w = location.width;
var iconPlacement = {"enlarge":"p","relocate":"2p+s","drag":"3p+2s","close":"w-s-p"};
d3.select(ID+iconName).attr("x",function() {var x = eval(iconPlacement[iconName]);console.log(x);return x;});
console.log(p+" "+s+" "+w+" "+ID+iconName);
}
//get internal coordinates
function getInternalCoordinates (ID) {
var x = d3.select(ID).attr("x");
var y = d3.select(ID).attr("y");
return [coordinates[0]-x,coordinates[1]-y];
}
<!--Drag mechanism 2 -->
//Global Drag 2 variables that will be automatically refreshed for each new draggable element
var dragOffsetX_2 = 0;
var dragOffsetY_2 = 0;
var dragX_2 = 0;
var dragY_2 = 0;
var mousedown_2 = false;
//Global Drag 2 variables that will be automatically refreshed for each new draggable element
//Supply the drag event handler and also the id of the element to be operated on. stopPropagation() and preventDefault() will cancel accidental text selection if pointer/finger leaves the dragged element area.
function dragStartMD(event,ID) {
//alert(event.target.id);--> Check for id
//alert(event.pageX+","+event.pageY);
event.stopPropagation();
event.preventDefault();
dragX_2 = parseFloat(event.pageX)*4.67-500;
dragY_2 = parseFloat(event.pageY)*4.67-500;
dragOffsetX_2 = dragX_2-parseFloat(d3.select(arguments[1]).attr("x"));
dragOffsetY_2 = dragY_2-parseFloat(d3.select(arguments[1]).attr("y"));
mousedown_2 = true;
}
//Supply the drag event handler and also the id of the element to be operated on.
function dragMeMM(event,ID) {
event.stopPropagation();
event.preventDefault();
if(mousedown_2) {
dragX_2 = parseFloat(event.pageX)*4.67-500;
dragY_2 = parseFloat(event.pageY)*4.67-500;
d3.select(arguments[1]).attr("x",function () {return dragX_2-dragOffsetX_2}).attr("y",function() {return dragY_2-dragOffsetY_2});
}
}
function dragEndMO(event) {
event.stopPropagation();
event.preventDefault();
//mousedown_2 = false;
if(mousedown_2) {
dragX_2 = parseFloat(event.pageX)*4.67-500;
dragY_2 = parseFloat(event.pageY)*4.67-500;
d3.select(arguments[1]).attr("x",function () {return dragX_2-dragOffsetX_2}).attr("y",function() {return dragY_2-dragOffsetY_2});
}
}
function dragEndMU(event) {
event.stopPropagation();
event.preventDefault();
mousedown_2 = false;
}
<!--Drag mechanism 2-->
<!--Enlarge mechanism-->
//shares mostly same global variables with drag mechanism 2
var enlargeFixedDimensions ={"x1":0,"y1":0};
function enlargeStartMD(event,ID) {
event.stopPropagation();
event.preventDefault();
dragX_2 = parseFloat(event.pageX)*4.67-500;
dragY_2 = parseFloat(event.pageY)*4.67-500;
dragOffsetX_2 = dragX_2-parseFloat(d3.select(arguments[1]).attr("x"));
dragOffsetY_2 = dragY_2-parseFloat(d3.select(arguments[1]).attr("y"));
enlargeFixedDimensions.x1 = parseFloat(d3.select(arguments[1]).attr("x"))+parseFloat(d3.select(arguments[1]).attr("width"));
enlargeFixedDimensions.y1 = parseFloat(d3.select(arguments[1]).attr("y"))+parseFloat(d3.select(arguments[1]).attr("height"));
mousedown_2 = true;
}
function enlargeMeMM(event,ID,location,funcToCall,arg) {
event.stopPropagation();
event.preventDefault();
if(mousedown_2) {
var minWidth = location.minWidth;
var minHeight = location.minHeight;
var width = Math.abs(dragX_2-dragOffsetX_2-enlargeFixedDimensions.x1);
var height = Math.abs(dragY_2-dragOffsetY_2-enlargeFixedDimensions.y1);
dragX_2 = parseFloat(event.pageX)*4.67-500;
dragY_2 = parseFloat(event.pageY)*4.67-500;
d3.select(arguments[1]).attr("width",function () {return Math.max(minWidth,width);}).attr("height",function() {return Math.max(minHeight,height);}).attr("x",function () {return Math.min(dragX_2-dragOffsetX_2,enlargeFixedDimensions.x1-minWidth);}).attr("y",function() {return Math.min(dragY_2-dragOffsetY_2,enlargeFixedDimensions.y1-minHeight);});
d3.select(arguments[1]+"rect").attr("width",function () {return Math.max(minWidth,width);}).attr("height",function() {return Math.max(minHeight,height);});
d3.select(arguments[1]+"close").attr("x",function(){return Math.max(minWidth,width)-location.iconPadding-location.iconSize;});
d3.select(arguments[1]+"knob").attr("y",function(){return Math.max(minHeight,height)-location.iconPadding;});
d3.select(arguments[1]+"knobTrail").attr("y",function(){return Math.max(minHeight,height)-location.iconPadding+location.iconSize/4-7.5;});
d3.selectAll(arguments[1].replace("#",".")+"colorBoxes").data(["DimGray","Black","Red","LightSeaGreen","DodgerBlue","DeepPink"]).attr("x",function(d,i){return Math.max(minWidth,width)-((6-i)*(location.iconPadding/4+location.iconSize/2))-location.iconPadding*3/4;}).attr("y",function(){return Math.max(minHeight,height)-location.iconPadding;});
}
}
function enlargeEndMO(event,ID,location,funcToCall,arg) {
event.stopPropagation();
event.preventDefault();
//mousedown_2 = false;
if(mousedown_2) {
var minWidth = location.minWidth;
var minHeight = location.minHeight;
var width = Math.abs(dragX_2-dragOffsetX_2-enlargeFixedDimensions.x1);
var height = Math.abs(dragY_2-dragOffsetY_2-enlargeFixedDimensions.y1);
dragX_2 = parseFloat(event.pageX)*4.67-500;
dragY_2 = parseFloat(event.pageY)*4.67-500;
d3.select(arguments[1]).attr("width",function () {return Math.max(minWidth,width);}).attr("height",function() {return Math.max(minHeight,height);}).attr("x",function () {return Math.min(dragX_2-dragOffsetX_2,enlargeFixedDimensions.x1-minWidth);}).attr("y",function() {return Math.min(dragY_2-dragOffsetY_2,enlargeFixedDimensions.y1-minHeight);});
d3.select(arguments[1]+"rect").attr("width",function () {return Math.max(minWidth,width);}).attr("height",function() {return Math.max(minHeight,height);});
d3.select(arguments[1]+"close").attr("x",function(){return Math.max(minWidth,width)-location.iconPadding-location.iconSize;});
d3.select(arguments[1]+"knob").attr("y",function(){return Math.max(minHeight,height)-location.iconPadding;});
d3.select(arguments[1]+"knobTrail").attr("y",function(){return Math.max(minHeight,height)-location.iconPadding+location.iconSize/4-7.5;});
d3.selectAll(arguments[1].replace("#",".")+"colorBoxes").data(["DimGray","Black","Red","LightSeaGreen","DodgerBlue","DeepPink"]).attr("x",function(d,i){return Math.max(minWidth,width)-((6-i)*(location.iconPadding/4+location.iconSize/2))-location.iconPadding*3/4;}).attr("y",function(){return Math.max(minHeight,height)-location.iconPadding;});
if (funcToCall) {
funcToCall.apply(this,[ID.replace("#",""),arg]);
}
}
}
function enlargeEndMU(event,ID,funcToCall,arg) {
//I comment out propagation because master svg also fires this function on mouse up. This causes the machine to not properly fire mouseup event as a result dragged elements get stuck in mousedown mode.
//event.stopPropagation();
event.preventDefault();
mousedown_2 = false;
//sometimes it gets the object itself rather than the id.
if((ID)&&(funcToCall)) {
if (typeof ID === "object") {
ID = d3.select(ID).attr("id");
funcToCall.apply(this,[ID,arg]);
} else if (typeof ID === "string") {
funcToCall.apply(this,[ID,arg]);
} else {
}
}
}
<!--Enlarge mechanism-->
<!--Magnify/Minify mechanism-->
function magnifyClick(event,ID,location,magnificationRate,funcToCall,arg) {
event.stopPropagation();
event.preventDefault();
var minWidth = location.minWidth;
var minHeight = location.minHeight;
var maxHeight = location.maxHeight;
var maxWidth = location.maxWidth;
//10 percent magnification
var width = parseFloat(d3.select(ID).attr("width"))*magnificationRate;
var height = parseFloat(d3.select(ID).attr("height"))*magnificationRate;
d3.select(arguments[1]).attr("width",function () {return Math.max(minWidth,Math.min(width,maxWidth));}).attr("height",function() {return Math.max(minHeight,Math.min(height,maxHeight));});
d3.select(arguments[1]+"rect").attr("width",function () {return Math.max(minWidth,Math.min(width,maxWidth));}).attr("height",function() {return Math.max(minHeight,Math.min(height,maxHeight));});
d3.select(arguments[1]+"close").attr("x",function(){return Math.max(minWidth,Math.min(width,maxWidth))-location.iconPadding-location.iconSize;});
d3.select(arguments[1]+"knob").attr("y",function(){return Math.max(minHeight,Math.min(height,maxHeight))-location.iconPadding;});
d3.select(arguments[1]+"knobTrail").attr("y",function(){return Math.max(minHeight,Math.min(height,maxHeight))-location.iconPadding+location.iconSize/4-7.5;});
d3.selectAll(arguments[1].replace("#",".")+"colorBoxes").data(["DimGray","Black","Red","LightSeaGreen","DodgerBlue","DeepPink"]).attr("x",function(d,i){return Math.max(minWidth,Math.min(width,maxWidth))-((6-i)*(location.iconPadding/4+location.iconSize/2))-location.iconPadding*3/4;}).attr("y",function(){return Math.max(minHeight,Math.min(height,maxHeight))-location.iconPadding;});
if (funcToCall) {
funcToCall.apply(this,[ID.replace("#",""),arg]);
}
}
<!--Magnify/Minify mechanism-->
<!--WindowInterface-->
<!--Drawing Interface-->
<!--Draw equilateral triangle with given radius measured as the distance from center of gravity to one corner-->
//the x,y and r values are between 0 and 1, they represent the full width and the height of whatever container they are drawn in
function drawEqTriangle (IDtoDrawOn,objectHash,currentWidth,currentHeight) {
currentRadius = Math.min(currentWidth,currentHeight);
d3.select(IDtoDrawOn).append("polygon").attr("points",function(){return (objectHash.x*currentWidth)+","+(objectHash.y*currentHeight-objectHash.radius*currentRadius)+" "+(objectHash.x*currentWidth+objectHash.radius*currentRadius/2*Math.sqrt(3))+","+(objectHash.y*currentHeight+objectHash.radius*currentRadius/2)+" "+(objectHash.x*currentWidth-objectHash.radius*currentRadius/2*Math.sqrt(3))+","+(objectHash.y*currentHeight+objectHash.radius*currentRadius/2);}).attr("filter",function(){if(objectHash.filter){return "url(#NeonGlow)";}else{return null;}}).attr("stroke-linejoin","round").attr("fill",function(){if (objectHash.fill){return objectHash.fill;}else{return "DimGray";}}).attr("fill-opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).attr("stroke",function(){if (objectHash.stroke){return objectHash.stroke;}else{return "DimGray";}}).attr("stroke-opacity",function(){if (objectHash.strokeOpacity){return Math.sqrt(objectHash.strokeOpacity);}else{return 0.71;}}).attr("stroke-width",function(){if (objectHash.width){return objectHash.width;}else{return 2;}}).attr("id",function(){if (objectHash.id){return objectHash.id;}}).attr("class",function(){if (objectHash.class){return objectHash.class;}}).style("opacity",0).transition().style("opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).delay(function(){if(objectHash.delay){return objectHash.delay;}else{return 0;}}).duration(function(){if(objectHash.duration){return objectHash.duration;}else{return 0;}});
}
<!--Draw equilateral triangle with given radius measured as the distance from center of gravity to one corner-->
<!--Draw hexagon-->
function drawHexagon (IDtoDrawOn,objectHash,currentWidth,currentHeight) {
currentRadius = Math.min(currentWidth,currentHeight);
d3.select(IDtoDrawOn).append("polygon").attr("points",function(){return (objectHash.x*currentWidth+objectHash.radius*currentRadius/2)+","+(objectHash.y*currentHeight-objectHash.radius*currentRadius/2*Math.sqrt(3))+" "+(objectHash.x*currentWidth+objectHash.radius*currentRadius)+","+(objectHash.y*currentHeight)+" "+(objectHash.x*currentWidth+objectHash.radius*currentRadius/2)+","+(objectHash.y*currentHeight+objectHash.radius*currentRadius/2*Math.sqrt(3))+" "+(objectHash.x*currentWidth-objectHash.radius*currentRadius/2)+","+(objectHash.y*currentHeight+objectHash.radius*currentRadius/2*Math.sqrt(3))+" "+(objectHash.x*currentWidth-objectHash.radius*currentRadius)+","+(objectHash.y*currentHeight)+" "+(objectHash.x*currentWidth-objectHash.radius*currentRadius/2)+","+(objectHash.y*currentHeight-objectHash.radius*currentRadius/2*Math.sqrt(3));}).attr("filter",function(){if(objectHash.filter){return "url(#NeonGlow)";}else{return null;}}).attr("stroke-linejoin","round").attr("fill",function(){if (objectHash.fill){return objectHash.fill;}else{return "DimGray";}}).attr("fill-opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).attr("stroke",function(){if (objectHash.stroke){return objectHash.stroke;}else{return "DimGray";}}).attr("stroke-opacity",function(){if (objectHash.strokeOpacity){return Math.sqrt(objectHash.strokeOpacity);}else{return 0.71;}}).attr("stroke-width",function(){if (objectHash.width){return objectHash.width;}else{return 2;}}).attr("id",function(){if (objectHash.id){return objectHash.id;}}).attr("class",function(){if (objectHash.class){return objectHash.class;}}).style("opacity",0).transition().style("opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).delay(function(){if(objectHash.delay){return objectHash.delay;}else{return 0;}}).duration(function(){if(objectHash.duration){return objectHash.duration;}else{return 0;}});
}
<!--Draw hexagon-->
<!--Draw polygon-->
//within the object hash there will be a points array. All the points in this array are returned with the given offsets. The offsets are between 0 and 1.
function drawPolygon (IDtoDrawOn,objectHash,currentWidth,currentHeight,offsetX,offsetY) {
offsetX = offsetX || 0;
offsetY = offsetY || 0;
d3.select(IDtoDrawOn).append("polygon").attr("points",function(){
var points = "";
for (var i = 0;i < objectHash.points.length;i++) {
points = points+((objectHash.points[i][0]+offsetX)*currentWidth)+","+((objectHash.points[i][1]+offsetY)*currentHeight)+" ";
}
return points;
}).attr("filter",function(){if(objectHash.filter){return "url(#NeonGlow)";}else{return null;}}).attr("stroke-linejoin","round").attr("fill",function(){if (objectHash.fill){return objectHash.fill;}else{return "DimGray";}}).attr("fill-opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).attr("stroke",function(){if (objectHash.stroke){return objectHash.stroke;}else{return "DimGray";}}).attr("stroke-opacity",function(){if (objectHash.strokeOpacity){return Math.sqrt(objectHash.strokeOpacity);}else{return 0.71;}}).attr("stroke-width",function(){if (objectHash.width){return objectHash.width;}else{return 2;}}).attr("id",function(){if (objectHash.id){return objectHash.id;}}).attr("class",function(){if (objectHash.class){return objectHash.class;}}).style("opacity",0).transition().style("opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).delay(function(){if(objectHash.delay){return objectHash.delay;}else{return 0;}}).duration(function(){if(objectHash.duration){return objectHash.duration;}else{return 0;}});
}
<!--Draw polygon-->
<!--Draw circle-->
function drawCircle (IDtoDrawOn,objectHash,currentWidth,currentHeight) {
currentRadius = Math.min(currentWidth,currentHeight);
d3.select(IDtoDrawOn).append("circle").attr("cx",function(){return objectHash.x*currentWidth;}).attr("cy",function(){return objectHash.y*currentHeight;}).attr("r",function(){return objectHash.radius*currentRadius;}).attr("filter",function(){if(objectHash.filter){return "url(#NeonGlow)";}else{return null;}}).attr("fill",function(){if (objectHash.fill){return objectHash.fill;}else{return "DimGray";}}).attr("fill-opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).attr("stroke",function(){if (objectHash.stroke){return objectHash.stroke;}else{return "DimGray";}}).attr("stroke-opacity",function(){if (objectHash.strokeOpacity){return Math.sqrt(objectHash.strokeOpacity);}else{return 0.71;}}).attr("stroke-width",function(){if (objectHash.width){return objectHash.width;}else{return 2;}}).attr("id",function(){if (objectHash.id){return objectHash.id;}}).attr("class",function(){if (objectHash.class){return objectHash.class;}}).style("opacity",0).transition().style("opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).delay(function(){if(objectHash.delay){return objectHash.delay;}else{return 0;}}).duration(function(){if(objectHash.duration){return objectHash.duration;}else{return 0;}});
}
<!--Draw circle-->
<!--Draw text-->
function drawText (IDtoDrawOn,objectHash,currentWidth,currentHeight) {
currentRadius = Math.min(currentWidth,currentHeight);
d3.select(IDtoDrawOn).append("text").text(function(){if(objectHash.text){return objectHash.text;}else{return "undefined";}}).attr("x",function(){return objectHash.x*currentWidth;}).attr("y",function(){return objectHash.y*currentHeight;}).attr("font-size",function(){if(objectHash.fontSize){return objectHash.fontSize;}else{return "100px";}}).attr("font-family","sans-serif").attr("text-anchor","middle").attr("filter",function(){if(objectHash.filter){return "url(#NeonGlow)";}else{return null;}}).attr("fill",function(){if (objectHash.fill){return objectHash.fill;}else{return "DimGray";}}).attr("fill-opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).attr("stroke",function(){if (objectHash.stroke){return objectHash.stroke;}else{return "DimGray";}}).attr("stroke-opacity",function(){if (objectHash.strokeOpacity){return Math.sqrt(objectHash.strokeOpacity);}else{return 0.71;}}).attr("stroke-width",function(){if (objectHash.width){return objectHash.width;}else{return 2;}}).attr("id",function(){if (objectHash.id){return objectHash.id;}}).attr("class",function(){if (objectHash.class){return objectHash.class;}}).style("opacity",0).transition().style("opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).delay(function(){if(objectHash.delay){return objectHash.delay;}else{return 0;}}).duration(function(){if(objectHash.duration){return objectHash.duration;}else{return 0;}});
}
<!--Draw text-->
<!--Draw path-->
function drawPath (IDtoDrawOn,objectHash,currentWidth,currentHeight,funcToCall,args) {
d3.select(IDtoDrawOn).append("path").attr("d",function(){return pathStringGenerator(objectHash,currentWidth,currentHeight);}).attr("filter",function(){if(objectHash.filter){return "url(#NeonGlow)";}else{return null;}}).attr("stroke-linejoin","round").attr("stroke-linecap","round").attr("fill",function(){if (objectHash.fill){return objectHash.fill;}else{return "DimGray";}}).attr("fill-opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).attr("stroke",function(){if (objectHash.stroke){return objectHash.stroke;}else{return "DimGray";}}).attr("stroke-opacity",function(){if (objectHash.strokeOpacity){return Math.sqrt(objectHash.strokeOpacity);}else{return 0.71;}}).attr("stroke-width",function(){if (objectHash.width){return objectHash.width;}else{return 2;}}).attr("id",function(){if (objectHash.id){return objectHash.id;}}).attr("class",function(){if (objectHash.class){return objectHash.class;}}).style("opacity",0).transition("fadein").style("opacity",function(){if (objectHash.opacity){return Math.sqrt(objectHash.opacity);}else{return 0.71;}}).each(function(){if(funcToCall){funcToCall.apply(this,args);}}).delay(function(){if(objectHash.delay){return objectHash.delay;}else{return 0;}}).duration(function(){if(objectHash.duration){return objectHash.duration;}else{return 0;}});
}
function pathStringGenerator(objectHash,currentWidth,currentHeight) {
return "M"+(objectHash.x0*currentWidth)+","+(objectHash.y0*currentHeight)+"L"+(objectHash.x1*currentWidth)+","+(objectHash.y1*currentHeight);
}
function extendPath(ID,objectHash,currentWidth,currentHeight,funcToCall,args) {
d3.select(ID).transition("extend").attrTween("d",function(){var interpolator = d3.interpolateString(pathStringGenerator({x0:objectHash.x0,y0:objectHash.y0,x1:objectHash.x1,y1:objectHash.y1},currentWidth,currentHeight),pathStringGenerator({x0:objectHash.x1,y0:objectHash.y1,x1:objectHash.x2,y1:objectHash.y2},currentWidth,currentHeight));return function(t){return interpolator(t)};}).each("end",function(){if(funcToCall){funcToCall.apply(this,args);}}).delay(function(){if(objectHash.extensionDelay){return objectHash.extensionDelay;}else{return 0;}}).duration(function(){if(objectHash.extensionDuration){return objectHash.extensionDuration;}else{return 0;}});
}
//let the inception begin..
function extendTrailPath(IDtoDrawOn,IDarray,objectHash,trailArray,currentWidth,currentHeight,clear) {
if(clear) {
d3.selectAll(".lotusPathLines").remove();
}
if (IDarray.length !== 0) {
var currentID = IDarray.shift();
var objectHashMirror = objectHash;
var IDarrayMirror = IDarray;
objectHashMirror.x0 = trailArray[0][0];
objectHashMirror.y0 = trailArray[0][1];
objectHashMirror.x1 = trailArray[0][0];
objectHashMirror.y1 = trailArray[0][1];
objectHashMirror.x2 = trailArray[1][0];
objectHashMirror.y2 = trailArray[1][1];
objectHashMirror.id = currentID;
var trailArrayMirror = trailArray;
trailArrayMirror.shift();
drawPath(IDtoDrawOn,objectHashMirror,currentWidth,currentHeight,extendPath,["#"+currentID,objectHashMirror,currentWidth,currentHeight,extendTrailPath,[IDtoDrawOn,IDarrayMirror,objectHashMirror,trailArrayMirror,currentWidth,currentHeight]]);
}
if((IDarray.length < 1)&&(lotusMouseOut)) {
d3.selectAll(".lotusPathLines").remove();
}
}
//the dream collapses..
function collapseTrailPath (IDarray,objectHash,trailArray,currentWidth,currentHeight) {
if ((IDarray.length !== 0)&&(lotusMouseOut)) {
var currentID = IDarray.pop();
var objectHashMirror = objectHash;
var IDarrayMirror = IDarray;
objectHashMirror.x0 = trailArray[trailArray.length-2][0];
objectHashMirror.y0 = trailArray[trailArray.length-2][1];
objectHashMirror.x1 = trailArray[trailArray.length-2][0];
objectHashMirror.y1 = trailArray[trailArray.length-2][1];
var trailArrayMirror = trailArray;
trailArrayMirror.pop();
d3.select("#"+currentID).transition("collapse").attr("d",function(){return pathStringGenerator(objectHash,currentWidth,currentHeight);}).each("end",function(){d3.select(this).remove();if((IDarray.length < 1)&&(lotusMouseOut)){d3.selectAll(".lotusPathLines").remove();};collapseTrailPath(IDarrayMirror,objectHashMirror,trailArrayMirror,currentWidth,currentHeight);}).delay(function(){if(objectHash.extensionDelay){return objectHash.extensionDelay;}else{return 0;}}).duration(function(){if(objectHash.extensionDuration){return objectHash.extensionDuration;}else{return 0;}});
}
}
<!--Draw path-->
<!--Drawing Interface-->
<!--Lotus-->
var lotusMouseOut = false;
//I had to come up with the below function, d3s mouse events fire too late to capture this the way I want..
function lotusMouseOutFunc(status){
status === "1" ? lotusMouseOut = true : lotusMouseOut = false;
}
//clockwise numbering starting from the smallest angle taking 12 o'clock position as 0 degrees. keys mean renderingOrder_number.
var lotusData = {r1n0:{x0:"0.5",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5"},r1n1:{x0:"0.5",y0:"0.5",x1:"0.5-radius/Math.sqrt(7)/2",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r1n2:{x0:"0.5",y0:"0.5",x1:"0.5-radius/Math.sqrt(7)/2",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},
r2n0:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)*1.5",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n1:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)*2",y1:"0.5"},r2n2:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)*1.5",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n3:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n4:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},
r2n5:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n6:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},r2n7:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},r2n8:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*1.5",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n9:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)",y1:"0.5"},
r2n10:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},r2n11:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n12:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)",y1:"0.5"},r2n13:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*1.5",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},r2n14:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},
r3n0:{x0:"0.5",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},r3n1:{x0:"0.5+radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},r3n2:{x0:"0.5+radius/Math.sqrt(7)*1.5",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},
r3n3:{x0:"0.5+radius/Math.sqrt(7)*2",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)*2.5",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},r3n4:{x0:"0.5+radius/Math.sqrt(7)*2",y0:"0.5",x1:"0.5+radius/Math.sqrt(7)*2.5",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},
r3n5:{x0:"0.5+radius/Math.sqrt(7)*1.5",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},r3n6:{x0:"0.5+radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},r3n7:{x0:"0.5",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},
r3n8:{x0:"0.5-radius/Math.sqrt(7)",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)/2",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)*1.5"},r3n9:{x0:"0.5-radius/Math.sqrt(7)",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*2",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},
r3n10:{x0:"0.5-radius/Math.sqrt(7)*1.5",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*2",y1:"0.5"},r3n11:{x0:"0.5-radius/Math.sqrt(7)",y0:"0.5",x1:"0.5-radius/Math.sqrt(7)*2",y1:"0.5"},r3n12:{x0:"0.5-radius/Math.sqrt(7)*1.5",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*2",y1:"0.5"},
r3n13:{x0:"0.5-radius/Math.sqrt(7)",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*2",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},r3n14:{x0:"0.5-radius/Math.sqrt(7)",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)/2",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)*1.5"},
r4n0:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)*1.5"},r4n1:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)*2",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},r4n2:{x0:"0.5+radius/Math.sqrt(7)*2.5",y0:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)*2",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)"},
r4n3:{x0:"0.5+radius/Math.sqrt(7)*2.5",y0:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)*2",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},r4n4:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)*2",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)"},r4n5:{x0:"0.5+radius/Math.sqrt(7)",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)*1.5"},r4n6:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)*1.5",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)*1.5"},
r4n7:{x0:"0.5-radius/Math.sqrt(7)*2",y0:"0.5+radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*2.5",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r4n8:{x0:"0.5-radius/Math.sqrt(7)*2",y0:"0.5",x1:"0.5-radius/Math.sqrt(7)*2.5",y1:"0.5+radius/Math.sqrt(7)/2*Math.sqrt(3)"},r4n9:{x0:"0.5-radius/Math.sqrt(7)*2",y0:"0.5",x1:"0.5-radius/Math.sqrt(7)*2.5",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},r4n10:{x0:"0.5-radius/Math.sqrt(7)*2",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)",x1:"0.5-radius/Math.sqrt(7)*2.5",y1:"0.5-radius/Math.sqrt(7)/2*Math.sqrt(3)"},
r4n11:{x0:"0.5-radius/Math.sqrt(7)/2",y0:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)*1.5",x1:"0.5+radius/Math.sqrt(7)/2",y1:"0.5-radius/Math.sqrt(7)*Math.sqrt(3)*1.5"},
}
//var codonData = {aa:"A",seq:{full:"GCC",base1:{original:"G",alt1:"A",alt2:"T",alt3:"C"},base2:{original:"C",alt4:"G",alt5:"A",alt6:"T"},base3:{original:"C",alt7:"G",alt8:"A",alt9:"T"}},p:100};
//var codonData = {aa:"Y",seq:{full:"TAC",base1:{original:"T",alt1:"C",alt2:"G",alt3:"A"},base2:{original:"A",alt4:"T",alt5:"C",alt6:"G"},base3:{original:"C",alt7:"G",alt8:"A",alt9:"T"}},p:100};
function Lotus(ID,codonData){
d3.selectAll("."+arguments[0]+"drawnElements").remove();
var hashID = "#"+arguments[0];
var currentWidth = parseFloat(d3.select("#"+arguments[0]).attr("width"));
var currentHeight = parseFloat(d3.select("#"+arguments[0]).attr("height"));
var currentDims = Math.min(currentWidth,currentHeight);
var currentOffsetX = currentWidth<=currentHeight ? 0 : (currentWidth-currentHeight)/currentHeight/2;
var currentOffsetY = currentHeight<=currentWidth ? 0 : (currentHeight-currentWidth)/currentWidth/2;
//start the animation
var radius = 0.45;
d3.select("#"+arguments[0])
.selectAll("lotusAnimationElements")
.data(d3.keys(lotusData))
.enter()
.append("path")
.attr("d",function(d,i){
var objectHash = {};
objectHash.x0 = eval(lotusData[d].x0)+currentOffsetX;
objectHash.y0 = eval(lotusData[d].y0)+currentOffsetY;
objectHash.x1 = eval(lotusData[d].x0)+currentOffsetX;
objectHash.y1 = eval(lotusData[d].y0)+currentOffsetY;
return pathStringGenerator(objectHash,currentDims,currentDims);
})
.attr("stroke-width",10)
.attr("stroke","DodgerBlue")
.attr("stroke-opacity",0.85)
.attr("id",function(d){return ID+d;})
.attr("class",function(d){return ID+"drawnElements "+ID+"lotusAnimationLines";})
.transition("extend")
.attr("d",function(d){
var objectHash = {};
objectHash.x0 = eval(lotusData[d].x0)+currentOffsetX;
objectHash.y0 = eval(lotusData[d].y0)+currentOffsetY;
objectHash.x1 = eval(lotusData[d].x1)+currentOffsetX;
objectHash.y1 = eval(lotusData[d].y1)+currentOffsetY;
return pathStringGenerator(objectHash,currentDims,currentDims);
})
.each("end",function(d){
d3.select(this)
.transition("shrink")
.attr("d",function(){
var objectHash = {};
objectHash.x0 = eval(lotusData[d].x1)+currentOffsetX;
objectHash.y0 = eval(lotusData[d].y1)+currentOffsetY;
objectHash.x1 = eval(lotusData[d].x1)+currentOffsetX;
objectHash.y1 = eval(lotusData[d].y1)+currentOffsetY;
return pathStringGenerator(objectHash,currentDims,currentDims);
})
.each("end",function(){
d3.select(this).remove();
})
.delay(function(){
var renderOrder = parseInt(d.replace(/r|n.*/,""));
return (renderOrder-1)*0;
})
.duration(500);
})
.delay(function(d){
var renderOrder = parseInt(d.replace(/r|n.*/,""));
return (renderOrder-1)*250;
})
.duration(1000);
//end the animation
//some common variables
var aaPositions = ["r2n13","r2n14","r2n10","r2n0","r2n1","r2n2","r2n6","r2n7","r2n8"];
var aaSymbols = {Nonpolar:[drawCircle,"Gray"],Polar:[drawCircle,"DeepPink"],Positive:[drawEqTriangle,"Red"],Negative:[drawEqTriangle,"Blue"],Aromatic:[drawHexagon,"Green"]};
var standartObject = {filter:false,radius:0.025,"class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01};//this object is constantly changed by the aa element for-loop.
var standartPolygonObject = {filter:false,radius:0.025,"class":arguments[0]+"drawnElements",opacity:0.5,strokeOpacity:0.8,width:10};//this one as well by the polygon for-loop.
var trailPaths = [["r2n13","r1n2"],["r2n14","r1n2"],["r2n10","r1n2"],["r2n0","r1n0"],["r2n1","r1n0"],["r2n2","r1n0"],["r2n6","r1n1"],["r2n7","r1n1"],["r2n8","r1n1"]];
var polygonPositions = [["r2n12","r3n11","r3n11","r3n12","r2n13"],["r2n13","r3n12","r4n9","r4n9","r4n10","r3n13","r3n14","r4n11","r4n0","r3n0","r2n10"],["r2n10","r3n0","r3n0","r3n1","r2n11"],
["r2n4","r3n1","r3n1","r3n2","r2n0"],["r2n0","r3n2","r4n1","r4n1","r4n2","r3n3","r3n4","r4n3","r4n4","r3n5","r2n2"],["r2n2","r3n5","r3n5","r3n6","r2n3"],
["r2n5","r3n6","r3n6","r3n7","r2n6"],["r2n7","r3n7","r4n5","r4n5","r4n6","r3n8","r3n9","r4n7","r4n8","r3n10","r2n8"],["r2n8","r3n10","r3n10","r3n11","r2n9"]
];
//some common variables
//insert polygons
//first insert the center piece
drawPolygon(hashID,{filter:false,points:segmentToPoints(["r2n4","r2n3","r2n5","r2n9","r2n12","r2n11"]),radius:0.025,id:arguments[0]+"_r1n0_polygon","class":arguments[0]+"drawnElements",opacity:0.5,strokeOpacity:0.8,width:10,fill:aaSymbols[aminoacids[codonData["aa"]][1]][1],stroke:aaSymbols[aminoacids[codonData["aa"]][1]][1],delay:2000,duration:2000},currentDims,currentDims,currentOffsetX,currentOffsetY);
d3.select(hashID+"_r1n0_polygon").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n0"].x0)+currentOffsetX,y:eval(lotusData["r1n0"].y1)+currentOffsetY-standartObject.radius*4,fontSize:(50*currentDims/1200),fill:"Orange",stroke:"Orange",id:"lotusExplanation","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:"original aa: "+aminoacids[codonData["aa"]][1]},currentDims,currentDims);}).on("mouseout",function(){d3.select("#lotusExplanation").remove();d3.select(this).attr("filter",null);});
//first insert the center piece
for (var i = 0; i< aaPositions.length; i++) {
var data = codonData;
var base = "base"+(parseInt(i/3)+1);
var newSeq = calculateNewCodon(i);
var newAA;
var obj = standartPolygonObject;
for (var key in aminoacids_degenerateCode) {
if (aminoacids_degenerateCode[key].some(function(x){return x === newSeq;})){
newAA = key;
break;
}
}
obj.id = ID+"_"+aaPositions[i]+"_polygon";
obj.opacity = 0.5;
obj.strokeOpacity = 0.8;
obj.points = segmentToPoints(polygonPositions[i]);
obj.width = 10;
obj.delay = 2000;
obj.duration = 2000;
//render the polygon
if (newAA !== "X") {
obj.fill = aaSymbols[aminoacids[newAA][1]][1];
obj.stroke = aaSymbols[aminoacids[newAA][1]][1];
drawPolygon(hashID,obj,currentDims,currentDims,currentOffsetX,currentOffsetY);
} else {
obj.fill = "transparent";
obj.stroke = "Brown";
drawPolygon(hashID,obj,currentDims,currentDims,currentOffsetX,currentOffsetY);
}
//render the polygon
d3.select("#"+obj.id).attr("onmouseover",function(){
obj.fill = "Orange";
obj.stroke = "Orange";
obj.opacity = 0.9;
obj.strokeOpacity = 0.01;
if (newAA !== "X") {
obj.text = aminoacids[newAA][1]+" change";
} else {
obj.text = "stop codon";
}
obj.id = "lotusExplanation";
obj.fontSize = 50*currentDims/1200;
obj.width = 2;
obj.x = eval(lotusData[aaPositions[i]].x1)+currentOffsetX;
obj.y = eval(lotusData[aaPositions[i]].y1)+currentOffsetY-standartObject.radius*3;
obj.delay = 0;
obj.duration = 500;
var func1 = "drawText('"+hashID+"',"+JSON.stringify(obj)+","+currentDims+","+currentDims+")";
return func1;
})
.on("mouseout",function(){
d3.select("#lotusExplanation").remove();
d3.select(this).attr("filter",null);
})
.on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");});
}
//each array contains the names of the line segments from lotusData that circumvent the polygon. The order of these segments are clockwise starting from their birth point like in the animation. The polygons themselves are ordered like the aminoacids. First one starting around 10 o'clock position.
function segmentToPoints(array) {
var points = [];
for (var i = 0;i < array.length;i++){
if (checkEquality(points,[eval(lotusData[array[i]].x0),eval(lotusData[array[i]].y0)])) {
points.push([eval(lotusData[array[i]].x1),eval(lotusData[array[i]].y1)]);
} else {
points.push([eval(lotusData[array[i]].x0),eval(lotusData[array[i]].y0)]);
}
}
return points;
function checkEquality(ref,test) {
return ref.some(function(d,i,a){return ((d[0]===test[0])&&(d[1]===test[1]));});
}
}
//insert polygons
//insert aa elements
//first insert the center piece
aaSymbols[aminoacids[codonData["aa"]][1]][0](hashID,{filter:false,radius:0.025*GoldenRatio,x:eval(lotusData["r1n0"].x0)+currentOffsetX,y:eval(lotusData["r1n0"].y1)+currentOffsetY,fill:aaSymbols[aminoacids[codonData["aa"]][1]][1],stroke:aaSymbols[aminoacids[codonData["aa"]][1]][1],id:arguments[0]+"_r1n0","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:1,delay:0,duration:500},currentDims,currentDims);
d3.select(hashID+"_r1n0").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n0"].x0)+currentOffsetX,y:eval(lotusData["r1n0"].y1)+currentOffsetY+standartObject.radius*4,fontSize:(50*currentDims/1200),fill:"Orange",stroke:"Orange",id:"lotusExplanation","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:"original aa: "+codonData["aa"]+" ("+aminoacids[codonData["aa"]][0]+")"},currentDims,currentDims);}).on("mouseout",function(){d3.select("#lotusExplanation").remove();d3.select(this).attr("filter",null);});
//the amino acid number is static
drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n0"].x0)+currentOffsetX,y:eval(lotusData["r1n0"].y1)+currentOffsetY-standartObject.radius*2.5,fontSize:(35*currentDims/1200),fill:"Orange",stroke:"Orange","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:"p."+codonData["p"]},currentDims,currentDims);
drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n0"].x0)+currentOffsetX,y:eval(lotusData["r1n0"].y1)+currentOffsetY+standartObject.radius*0.5,fontSize:(40*currentDims/1200),fill:"Orange",stroke:"Orange","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:"..."+codonData["seq"]["full"]+"..."},currentDims,currentDims);
//first insert the center piece
for (var i = 0; i< aaPositions.length; i++) {
var data = codonData;
var base = "base"+(parseInt(i/3)+1);
var newSeq = calculateNewCodon(i);
var newAA;
var obj = standartObject;
for (var key in aminoacids_degenerateCode) {
if (aminoacids_degenerateCode[key].some(function(x){return x === newSeq;})){
newAA = key;
break;
}
}
obj.x = eval(lotusData[aaPositions[i]].x1)+currentOffsetX;
obj.y = eval(lotusData[aaPositions[i]].y1)+currentOffsetY;
obj.id = ID+"_"+aaPositions[i];
obj.delay = 1000;
obj.duration = 2000;
//render the symbol
if (newAA !== "X") {
obj.fill = aaSymbols[aminoacids[newAA][1]][1];
obj.stroke = aaSymbols[aminoacids[newAA][1]][1];
aaSymbols[aminoacids[newAA][1]][0].call(this,hashID,obj,currentDims,currentDims);
} else {
obj.fill = "Orange";
obj.stroke = "Orange";
obj.fontSize = 75*currentDims/1200;
obj.y = eval(lotusData[aaPositions[i]].y1)+currentOffsetY+standartObject.radius;
obj.text = "X";
drawText.call(this,hashID,obj,currentDims,currentDims);
}
//render the symbol
//define some variables before starting animations with the rendered symbol.
var trailPath = [[eval(lotusData[trailPaths[i][0]].x1)+currentOffsetX,eval(lotusData[trailPaths[i][0]].y1)+currentOffsetY],[eval(lotusData[trailPaths[i][0]].x0)+currentOffsetX,eval(lotusData[trailPaths[i][0]].y0)+currentOffsetY],[eval(lotusData[trailPaths[i][1]].x0)+currentOffsetX,eval(lotusData[trailPaths[i][1]].y0)+currentOffsetY]];
var objPath = {fill:"Orange",stroke:"Orange",strokeOpacity:1,filter:false,"class":ID+"drawnElements lotusPathLines",opacity:1,delay:0,duration:1000,width:20,extensionDuration:150};
d3.select("#"+obj.id).attr("onmouseover",function(){
obj.fill = "Orange";
obj.stroke = "Orange";
if (newAA !== "X") {
obj.text = newAA+" ("+aminoacids[newAA][0]+"): c."+((data["p"]-1)*3+1+Math.floor(i/3))+data["seq"][base]["original"]+">"+data["seq"][base]["alt"+(i+1)];
} else {
obj.text = "stop codon: c."+((data["p"]-1)*3+1+Math.floor(i/3))+data["seq"][base]["original"]+">"+data["seq"][base]["alt"+(i+1)];
}
obj.id = "lotusExplanation";
obj.fontSize = 50*currentDims/1200;
obj.y = eval(lotusData[aaPositions[i]].y1)+currentOffsetY-standartObject.radius*3;
obj.delay = 0;
obj.duration = 500;
var func1 = "drawText('"+hashID+"',"+JSON.stringify(obj)+","+currentDims+","+currentDims+")";
var func2 = "extendTrailPath('"+hashID+"',['lotusPath1','lotusPath2'],"+JSON.stringify(objPath)+","+JSON.stringify(trailPath)+","+currentDims+","+currentDims+","+true+")";
return "lotusMouseOutFunc('0');"+func1+";"+func2;
})
.attr("onmouseout",function(){
var func1 = "collapseTrailPath(['lotusPath1','lotusPath2'],"+JSON.stringify(objPath)+","+JSON.stringify(trailPath)+","+currentDims+","+currentDims+")";
return "lotusMouseOutFunc('1');"+func1;
})
.on("mouseout",function(){
d3.select("#lotusExplanation").remove();
d3.select(this).attr("filter",null);
})
.on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");});
}
//insert aa elements
//insert alt bases
//first insert the original bases
drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n2"].x1)+currentOffsetX,y:eval(lotusData["r1n2"].y1)+currentOffsetY+standartObject.radius,fontSize:(60*currentDims/1200),fill:"Orange",stroke:"Orange","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:codonData["seq"]["base1"]["original"]},currentDims,currentDims);
drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n0"].x1)+currentOffsetX,y:eval(lotusData["r1n0"].y1)+currentOffsetY+standartObject.radius,fontSize:(60*currentDims/1200),fill:"Orange",stroke:"Orange","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:codonData["seq"]["base2"]["original"]},currentDims,currentDims);
drawText(hashID,{filter:false,radius:0.025,x:eval(lotusData["r1n1"].x1)+currentOffsetX,y:eval(lotusData["r1n1"].y1)+currentOffsetY+standartObject.radius,fontSize:(60*currentDims/1200),fill:"Orange",stroke:"Orange","class":arguments[0]+"drawnElements",opacity:0.9,strokeOpacity:0.01,delay:0,duration:500,text:codonData["seq"]["base3"]["original"]},currentDims,currentDims);
//first insert the original bases
for (var i = 0; i< aaPositions.length; i++) {
var data = codonData;
var base = "base"+(parseInt(i/3)+1);
var obj = standartObject;
obj.x = (eval(lotusData[aaPositions[i]].x1)+eval(lotusData[aaPositions[i]].x0))/2+currentOffsetX;
obj.y = (eval(lotusData[aaPositions[i]].y1)+eval(lotusData[aaPositions[i]].y0))/2+currentOffsetY;
obj.id = ID+"_"+aaPositions[i]+"_bases";
obj.delay = 1000;
obj.duration = 2000;
obj.fill = "Orange";
obj.stroke = "Orange";
obj.opacity = 0.9;
obj.strokeOpacity = 0.01;
obj.fontSize = 30*currentDims/1200;
obj.text = data["seq"][base]["alt"+(i+1)];
drawText.call(this,hashID,obj,currentDims,currentDims);
}
//insert alt bases
//var someTestObject = {filter:false,points:[[0.4,0.4],[0.45,0.35],[0.5,0.4],[0.45,0.45],[0.4,0.7]],"class":arguments[0]+"drawnElements",id:"thePolygon",fill:"Orange",stroke:"Orange",opacity:0.9,strokeOpacity:1,delay:0,duration:2000};
//drawPolygon(hashID,someTestObject,currentDims,currentDims,currentOffsetX,currentOffsetY);
function calculateNewCodon(count) {
var base = "base"+(parseInt(count/3)+1);
var baseNumber = (parseInt(count/3));
var codonArray = data["seq"]["full"].split("");
codonArray[baseNumber] = data["seq"][base]["alt"+(count+1)];
var newSeq = codonArray.join("");
return newSeq;
}
//Keep text selection process minimal by disabling selection on lotus elements.
d3.selectAll("."+arguments[0]+"drawnElements").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
}
<!--Lotus-->
<!--Lotus Icon-->
var seqGradualFade;
var lastMouseoverSeqElementID;
var lotusIcon = "data:image/png;base64,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";
function lotusFadein(ID){
if ((lastMouseoverSeqElementID !== ID)||!(d3.select("#lotusIcon").node())) {
clearTimeout(seqGradualFade);
d3.select("#lotusIcon").remove();
var angle = Math.atan(Math.abs((parseFloat(d3.select(ID).attr("y"))-3000)/(parseFloat(d3.select(ID).attr("x"))-3000)));
var x = parseFloat(d3.select(ID).attr("x"))-500*Math.cos(angle)*Math.sign(parseFloat(d3.select(ID).attr("x"))-3000);
var y = parseFloat(d3.select(ID).attr("y"))-500*Math.sin(angle)*Math.sign(parseFloat(d3.select(ID).attr("y"))-3000);
d3.select("#annotation").append("svg:image").attr("xlink:href",lotusIcon).attr("title","lotusIcon").attr("alt","lotusIcon").attr("x",function() {return x;}).attr("y",function() {return y;}).attr("width","100px").attr("height","100px").style("opacity",0).attr("id","lotusIcon").transition("fade").style("opacity",0.9).delay(0).duration(1000);
d3.select("#lotusIcon").on("mouseover",function(){
clearTimeout(seqGradualFade);
d3.select(this).transition("fade").style("opacity",0.9).delay(0).duration(1000);
})
.on("mouseout",function(){
seqGradualFade = setTimeout(function(){d3.select("#lotusIcon").remove();},3000);
d3.select("#lotusIcon").transition("fade").style("opacity",0).delay(0).duration(3000);
})
.on("click",function(){
initiateLotus(ID,x,y);
});
lastMouseoverSeqElementID = ID;
}
clearTimeout(seqGradualFade);
d3.select("#lotusIcon").transition("fade").style("opacity",0.9).delay(0).duration(1000);
}
function lotusFadeout(){
seqGradualFade = setTimeout(function(){d3.select("#lotusIcon").remove();},3000);
d3.select("#lotusIcon").transition("fade").style("opacity",0).delay(0).duration(3000);
}
<!--Lotus Icon-->
<!--Lotus initiator-->
function initiateLotus(ID,x,y){
var location = {"x":x,"y":y,"width":2500,"height":2000,"rx":100,"ry":100,"iconPadding":100,"iconSize":100,"minWidth":1500,"minHeight":1200,"maxWidth":5000,"maxHeight":4000};
var aaNumber = Math.floor(ID.replace(/.*_/i,""));
var codonData = {};
codonData.p = aaNumber;
codonData.aa = d3.select(ID).node().textContent || d3.select(ID).node().innerHTML;
codonData.seq = {};
codonData.seq["full"] = cdna[(aaNumber-1)*3] + cdna[(aaNumber-1)*3+1] + cdna[(aaNumber-1)*3+2];
if (aminoacids_degenerateCode[codonData.aa].some(function(x){return x === codonData.seq["full"];})) {
for (var i = 0;i < 3;i++) {
var iterator = ["A","T","C","G"];
codonData.seq["base"+(i+1)] = {};
codonData.seq["base"+(i+1)]["original"] = cdna[(aaNumber-1)*3+i];
Innermost:
for (var k =0;k<1;) {
var regexp = new RegExp(codonData.seq["base"+(i+1)]["original"],"i");
if (iterator[k].match(regexp)) {
iterator.shift();
break Innermost;
} else {
var x = iterator.shift();
iterator.push(x);
}
//console.log(iterator);
}
for(var j=0;j< 3;j++) {
codonData.seq["base"+(i+1)]["alt"+((i*3)+j+1)] = iterator[j];
}
}
d3.select(ID+"_lotusWindow_").remove();
renderWindow.apply(this,["svg",ID.replace("#","")+"_lotusWindow_",location,Lotus,codonData]);
} else {
alert ("The cdna data does not match with the plotted aminoacid.\nPlease check the integrity of the html file.");
}
}
<!--Lotus initiator-->
<!--Change SNV/tile colors-->
var lastTileSNVcolor = {r:255,g:0,b:0};
var tileDBcolorCounter = 0;
var mutDBcolorCounter = 0;
var domainColorCounter = 0;
d3.select("#annotation").append("text").text("Change SNV colors").attr("x",5950).attr("y",475).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","middle").style("fill","DimGray").attr("id","changeSNVcolorText").attr("class","Options")
.on("mouseover",function () {
d3.select("#changeSNVcolorText").style("fill","Orange");
})
.on("mouseout",function () {
d3.select("#changeSNVcolorText").style("fill","DimGray");
})
.on("click",function() {
var ID = d3.select(this).attr("id")+"_SNVcolorWindow";
var location = {"x":4400,"y":475,"width":2000,"height":1500,"rx":100,"ry":100,"iconPadding":100,"iconSize":100,"minWidth":1500,"minHeight":1500,"maxWidth":4000,"maxHeight":4000};
d3.select("#"+d3.select(this).attr("id")+"_SNVcolorWindow").remove();
renderWindow.apply(this,["svg",ID,location,tileSNVcolorChanger]);
});
d3.select("#annotation").append("text").text("Change Tile colors").attr("x",5950).attr("y",575).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","middle").style("fill","DimGray").attr("id","changeTileColorText").attr("class","Options")
.on("mouseover",function () {
d3.select("#changeTileColorText").style("fill","Orange");
})
.on("mouseout",function () {
d3.select("#changeTileColorText").style("fill","DimGray");
})
.on("click",function() {
var ID = d3.select(this).attr("id")+"_TileColorWindow";
var location = {"x":4400,"y":575,"width":2000,"height":1500,"rx":100,"ry":100,"iconPadding":100,"iconSize":100,"minWidth":1500,"minHeight":1500,"maxWidth":4000,"maxHeight":4000};
d3.select("#"+d3.select(this).attr("id")+"_TileColorWindow").remove();
renderWindow.apply(this,["svg",ID,location,tileSNVcolorChanger]);
});
d3.select("#annotation").append("text").text("Change Domain colors").attr("x",5950).attr("y",675).style("font-family","sans-serif").style("font-size","45px").attr("text-anchor","middle").style("fill","DimGray").attr("id","changeDomainColorText").attr("class","Options")
.on("mouseover",function () {
d3.select("#changeDomainColorText").style("fill","Orange");
})
.on("mouseout",function () {
d3.select("#changeDomainColorText").style("fill","DimGray");
})
.on("click",function() {
var ID = d3.select(this).attr("id")+"_DomainColorWindow";
var location = {"x":4400,"y":675,"width":2000,"height":1500,"rx":100,"ry":100,"iconPadding":100,"iconSize":100,"minWidth":1500,"minHeight":1500,"maxWidth":4000,"maxHeight":4000};
d3.select("#"+d3.select(this).attr("id")+"_DomainColorWindow").remove();
renderWindow.apply(this,["svg",ID,location,tileSNVcolorChanger]);
});
function tileSNVcolorChanger (ID) {
d3.selectAll("."+arguments[0]+"drawnElements").remove();
var knobTrailData = {k1:["0.5-r/Math.sqrt(2)","0.5-ry/Math.sqrt(2)"],k2:["0.5-r/Math.sqrt(2)","0.5"],k3:["0.5-r/Math.sqrt(2)","0.5+ry/Math.sqrt(2)"]};
var currentWidth = parseFloat(d3.select("#"+arguments[0]).attr("width"));
var currentHeight = parseFloat(d3.select("#"+arguments[0]).attr("height"));
var currentDims = Math.min(currentWidth,currentHeight);
var currentOffsetX = currentWidth<=currentHeight ? 0 : (currentWidth-currentHeight)/currentHeight/2;
var currentOffsetY = currentHeight<=currentWidth ? 0 : (currentHeight-currentWidth)/currentWidth/2;
var r = 0.45;
var ry = 0.175;
d3.select("#"+arguments[0])
.selectAll("colorChangersKnobTrails")
.data(d3.keys(knobTrailData))
.enter()
.append("path")
.attr("d",function(d,i){
var objectHash = {};
objectHash.x0 = eval(knobTrailData[d][0]);
objectHash.y0 = eval(knobTrailData[d][1])+currentOffsetY;
objectHash.x1 = eval(knobTrailData[d][0]);
objectHash.y1 = eval(knobTrailData[d][1])+currentOffsetY;
return pathStringGenerator(objectHash,currentDims,currentDims);
})
.attr("stroke-width",10)
.attr("stroke","Orange")
.attr("stroke-opacity",0.85)
.attr("id",function(d){return ID+d;})
.attr("class",function(d){return ID+"drawnElements "+ID+"colorChangerAnimationLines";})
.transition("extend")
.attr("d",function(d,i){
var objectHash = {};
objectHash.x0 = eval(knobTrailData[d][0]);
objectHash.y0 = eval(knobTrailData[d][1])+currentOffsetY;
objectHash.x1 = eval(knobTrailData[d][0])+r/Math.sqrt(2);
objectHash.y1 = eval(knobTrailData[d][1])+currentOffsetY;
return pathStringGenerator(objectHash,currentDims,currentDims);
})
.delay(0)
.duration(1000);
drawPolygon("#"+ID,{filter:false,points:[[0.7,0.3],[0.9,0.3],[0.9,0.7],[0.7,0.7]],id:arguments[0]+"displayWhichColor","class":arguments[0]+"drawnElements",opacity:0.75,strokeOpacity:0.8,width:40,fill:compileCurrentColor(),stroke:compileCurrentColor(),delay:0,duration:1000},currentWidth,currentHeight,0,0);
drawPolygon("#"+ID,{filter:false,points:[[0.4,0.175],[0.4,0.225],[0.35,0.2]],id:arguments[0]+"leftSelector","class":arguments[0]+"drawnElements",opacity:0.75,strokeOpacity:0.8,width:0,fill:"Orange",stroke:"Orange",delay:0,duration:1000},currentWidth,currentHeight,0,0);
drawPolygon("#"+ID,{filter:false,points:[[0.9,0.175],[0.9,0.225],[0.95,0.2]],id:arguments[0]+"rightSelector","class":arguments[0]+"drawnElements",opacity:0.75,strokeOpacity:0.8,width:0,fill:"Orange",stroke:"Orange",delay:0,duration:1000},currentWidth,currentHeight,0,0);
drawText("#"+ID,{filter:false,x:0.8,y:0.5,id:arguments[0]+"applyColor","class":arguments[0]+"drawnElements",fontSize:currentDims/20,opacity:0.75,strokeOpacity:0.8,width:1,fill:"Orange",stroke:"Orange",delay:0,duration:1000,text:"Apply"},currentWidth,currentHeight);
d3.select("#"+arguments[0]+"applyColor").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
drawText("#"+ID,{filter:false,x:0.2,y:0.2,id:arguments[0]+"explanation","class":arguments[0]+"drawnElements",fontSize:currentDims/30,opacity:0.75,strokeOpacity:0.8,width:1,fill:"Orange",stroke:"Orange",delay:0,duration:1000,text:(function(){if(ID.match(/tile/gi)){return "Tile database"}else if (ID.match(/SNV/gi)){return "SNV database"}else{return "Domains"}})()},currentWidth,currentHeight);
d3.select("#"+arguments[0]+"explanation").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
drawText("#"+ID,{filter:false,x:0.65,y:0.2,id:arguments[0]+"displayWhichDB","class":arguments[0]+"drawnElements",fontSize:currentDims/30,opacity:0.75,strokeOpacity:0.8,width:1,fill:"Orange",stroke:"Orange",delay:0,duration:1000,text:(function(){if(ID.match(/tile/gi)){return TileDB[tileDBcolorCounter].slice(0,20)}else if (ID.match(/SNV/gi)){return MutDB[mutDBcolorCounter].slice(0,20)} else {return domainList[domainColorCounter].slice(0,20)}})()},currentWidth,currentHeight);
d3.select("#"+arguments[0]+"displayWhichDB").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
drawText("#"+ID,{filter:false,x:0.1,y:0.9,id:arguments[0]+"reset","class":arguments[0]+"drawnElements",fontSize:currentDims/25,opacity:0.75,strokeOpacity:0.8,width:1,fill:"Orange",stroke:"Orange",delay:0,duration:1000,text:"Reset"},currentWidth,currentHeight);
d3.select("#"+arguments[0]+"reset").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
drawPolygon("#"+ID,{filter:false,points:[[currentX(lastTileSNVcolor.r),0.45-ry/Math.sqrt(2)],[currentX(lastTileSNVcolor.r)+0.01,0.45-ry/Math.sqrt(2)],[currentX(lastTileSNVcolor.r)+0.01,0.55-ry/Math.sqrt(2)],[currentX(lastTileSNVcolor.r),0.55-ry/Math.sqrt(2)]],id:arguments[0]+"redKnob","class":arguments[0]+"drawnElements",opacity:1,strokeOpacity:0.7,width:30,fill:"Red",stroke:"Red",delay:0,duration:1000},currentDims,currentDims,0,currentOffsetY);
drawPolygon("#"+ID,{filter:false,points:[[currentX(lastTileSNVcolor.g),0.45],[currentX(lastTileSNVcolor.g)+0.01,0.45],[currentX(lastTileSNVcolor.g)+0.01,0.55],[currentX(lastTileSNVcolor.g),0.55]],id:arguments[0]+"greenKnob","class":arguments[0]+"drawnElements",opacity:1,strokeOpacity:0.7,width:30,fill:"Green",stroke:"Green",delay:0,duration:1000},currentDims,currentDims,0,currentOffsetY);
drawPolygon("#"+ID,{filter:false,points:[[currentX(lastTileSNVcolor.b),0.45+ry/Math.sqrt(2)],[currentX(lastTileSNVcolor.b)+0.01,0.45+ry/Math.sqrt(2)],[currentX(lastTileSNVcolor.b)+0.01,0.55+ry/Math.sqrt(2)],[currentX(lastTileSNVcolor.b),0.55+ry/Math.sqrt(2)]],id:arguments[0]+"blueKnob","class":arguments[0]+"drawnElements",opacity:1,strokeOpacity:0.7,width:30,fill:"Blue",stroke:"Blue",delay:0,duration:1000},currentDims,currentDims,0,currentOffsetY);
var drag = d3.behavior.drag().origin(function(){var x = Number(d3.select(this).attr("points").split(/\s+/).slice(0,1)[0].split(/,/)[0]);var y = Number(d3.select(this).attr("points").split(/\s+/).slice(0,1)[0].split(/,/)[1]);return {"x":x,"y":y};}).on("drag", dragFunc).on("dragstart",function (){d3.event.sourceEvent.stopPropagation();});
function compileCurrentColor(type) {
if (type !== "stroke") {
return "rgb("+lastTileSNVcolor.r+","+lastTileSNVcolor.g+","+lastTileSNVcolor.b+")";
} else {
var total = lastTileSNVcolor.r+lastTileSNVcolor.g+lastTileSNVcolor.b;
var squareSum = Math.pow(lastTileSNVcolor.r,2)+Math.pow(lastTileSNVcolor.g,2)+Math.pow(lastTileSNVcolor.b,2);
var k = total*1.2/squareSum;
return "rgb("+Math.min(Math.floor(Math.pow(lastTileSNVcolor.r,2)*k),255)+","+Math.min(Math.floor(Math.pow(lastTileSNVcolor.g,2)*k),255)+","+Math.min(Math.floor(Math.pow(lastTileSNVcolor.b,2)*k),255)+")";
}
}
function dragFunc() {
var minX = currentDims*(0.495-r/Math.sqrt(2));
var maxX = currentDims*(0.495);
var point = Math.max(minX,Math.min(d3.event.x,maxX));
var yUpper = Number(d3.select(this).attr("points").split(/\s+/).slice(0,1)[0].split(/,/)[1]);
d3.select(this).attr("points",function(){return point+","+yUpper+" "+(point+0.01*currentDims)+","+yUpper+" "+(point+0.01*currentDims)+","+(yUpper+0.1*currentDims)+" "+point+","+(yUpper+0.1*currentDims)});
lastTileSNVcolor[d3.select(this).attr("id").match(/red|blue|green/ig)[0].slice(0,1)] = Math.floor((point/currentDims-0.495+r/Math.sqrt(2))*255/(r/Math.sqrt(2)));
d3.select("#"+ID+"displayWhichColor").attr("fill",function () {return compileCurrentColor();}).attr("stroke", function () {return compileCurrentColor();});
}
function currentX(value){
return r/Math.sqrt(2)*(value/255-1)+0.495;
}
d3.select("#"+arguments[0]+"redKnob").call(drag);
d3.select("#"+arguments[0]+"redKnob").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);});
d3.select("#"+arguments[0]+"greenKnob").call(drag);
d3.select("#"+arguments[0]+"greenKnob").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);});
d3.select("#"+arguments[0]+"blueKnob").call(drag);
d3.select("#"+arguments[0]+"blueKnob").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);});
d3.select("#"+arguments[0]+"displayWhichColor").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);}).on("click",function(){colorFilter(ID);});
d3.select("#"+arguments[0]+"applyColor").on("mouseover",function(){d3.select("#"+ID+"displayWhichColor").attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select("#"+ID+"displayWhichColor").attr("filter",null);}).on("click",function(){colorFilter(ID);});
d3.select("#"+arguments[0]+"leftSelector").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);}).on("click",function(){selector(ID,"left");});
d3.select("#"+arguments[0]+"rightSelector").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);}).on("click",function(){selector(ID,"right");});
d3.select("#"+arguments[0]+"reset").on("mouseover",function(){d3.select(this).attr("filter","url(#NeonGlow)");}).on("mouseout",function(){d3.select(this).attr("filter",null);}).on("click",function(){colorFilter(ID,"reset");});
function colorFilter(ID,reset){
var selected;
if (reset !== "reset") {
if(ID.match(/tile/gi)) {
selected = TileDB[tileDBcolorCounter];
d3.selectAll(".tile").data(ids["tile"]).each(function(d,i) {var database_source = d3.select(ids["tile"][i]).attr("dbsource");var id = d3.select(ids["tile"][i]).attr("id");var regexp = new RegExp(selected,"i");d3.select(d).transition("changeColor").style("fill",function (){if((database_source.match(regexp) || id.match(regexp) || (selected == "All"))&&(selected != "None")){return compileCurrentColor();} else {return d3.select(this).style("fill");}}).delay(0).duration(750);});
} else if (ID.match(/SNV/gi)) {
selected = MutDB[mutDBcolorCounter];
d3.selectAll(".mut").data(ids["mut"]).each(function(d,i) {var database_source = d3.select(ids["mut"][i]).attr("dbsource");var regexp = new RegExp(selected,"i");d3.select(d).transition("changeColor").style("fill",function (){if((database_source.match(regexp) || (selected == "All") || ((selected == "Stop")&&(d3.select(ids["mut"][i]).attr("id").match(/x/i))) || (selected.match(/synonymous/gi)&&(selected===synOrNonsyn(d))) || (selected==="pXtoY" && pXtoY(d)))&&(selected != "None")){return compileCurrentColor();} else {return d3.select(this).style("fill");}}).delay(0).duration(750);});
} else {
selected = domainList[domainColorCounter]==="Coil"?"allCons":domainList[domainColorCounter];
d3.selectAll(".allCons").data(ids["con"]).each(function(d,i) {var clss = d3.select(ids["con"][i]).attr("class").split(" ")[0];var regexp = new RegExp(selected,"i");d3.select(d).transition("changeColor").style("fill",function (){if(clss.match(regexp) || selected==="All"){return compileCurrentColor();} else {return d3.select(this).style("fill");}}).delay(0).duration(750);d3.select(d).transition("changeStrokeColor").style("stroke",function (){if(clss.match(regexp) || selected==="All"){return compileCurrentColor("stroke");} else {return d3.select(this).style("stroke");}}).delay(0).duration(750);});
}
} else {
if(ID.match(/tile/gi)) {
selected = TileDB[tileDBcolorCounter];
d3.selectAll(".tile").data(ids["tile"]).each(function(d,i) {var database_source = d3.select(ids["tile"][i]).attr("dbsource");var id = d3.select(ids["tile"][i]).attr("id");var regexp = new RegExp(selected,"i");d3.select(d).transition("changeColor").style("fill",function (){if((database_source.match(regexp) || id.match(regexp) || (selected == "All"))&&(selected != "None")){return Or_Tile_Fill_Color[i];} else {return d3.select(this).style("fill");}}).delay(0).duration(750);});
} else if (ID.match(/SNV/gi)) {
selected = MutDB[mutDBcolorCounter];
d3.selectAll(".mut").data(ids["mut"]).each(function(d,i) {var database_source = d3.select(ids["mut"][i]).attr("dbsource");var regexp = new RegExp(selected,"i");d3.select(d).transition("changeColor").style("fill",function (){if((database_source.match(regexp) || (selected == "All") || ((selected == "Stop")&&(d3.select(ids["mut"][i]).attr("id").match(/x/i))) || (selected.match(/synonymous/gi)&&(selected===synOrNonsyn(d))) || (selected==="pXtoY" && pXtoY(d)))&&(selected != "None")){return Or_Mut_Fill_Color[i];} else {return d3.select(this).style("fill");}}).delay(0).duration(750);});
} else {
selected = domainList[domainColorCounter]==="Coil"?"allCons":domainList[domainColorCounter];
d3.selectAll(".allCons").data(ids["con"]).each(function(d,i) {var clss = d3.select(ids["con"][i]).attr("class").split(" ")[0];var regexp = new RegExp(selected,"i");d3.select(d).transition("changeColor").style("fill",function (){if(clss.match(regexp) || selected==="All"){return Or_Con_Fill_Color[i];} else {return d3.select(this).style("fill");}}).delay(0).duration(750);d3.select(d).transition("changeStrokeColor").style("stroke",function (){if(clss.match(regexp) || selected==="All"){return Or_Con_Stroke_Color[i];} else {return d3.select(this).style("stroke");}}).delay(0).duration(750);});
}
}
}
function selector(ID,direction) {
if (direction==="left") {
if(ID.match(/tile/gi)){
tileDBcolorCounter = tileDBcolorCounter === 0?TileDB.length-1:tileDBcolorCounter-1;
d3.select("#"+ID+"displayWhichDB").transition("textShuffle").tween("text",function(){var start = lexicalInterpolate(d3.select("#"+ID+"displayWhichDB").text(),1);var end = lexicalInterpolate(TileDB[tileDBcolorCounter],1);var interpolator = d3.interpolateString(start,end);return function(t){this.textContent=lexicalInterpolate(interpolator(t),0)};}).delay(0).duration(500);
}else if (ID.match(/SNV/gi)) {
mutDBcolorCounter = mutDBcolorCounter === 0?MutDB.length-1:mutDBcolorCounter-1;
d3.select("#"+ID+"displayWhichDB").transition("textShuffle").tween("text",function(){var start = lexicalInterpolate(d3.select("#"+ID+"displayWhichDB").text(),1);var end = lexicalInterpolate(MutDB[mutDBcolorCounter],1);var interpolator = d3.interpolateString(start,end);return function(t){this.textContent=lexicalInterpolate(interpolator(t),0)};}).delay(0).duration(500);
} else {
domainColorCounter = domainColorCounter === 0?domainList.length-1:domainColorCounter-1;
d3.select("#"+ID+"displayWhichDB").transition("textShuffle").tween("text",function(){var start = lexicalInterpolate(d3.select("#"+ID+"displayWhichDB").text(),1);var end = lexicalInterpolate(domainList[domainColorCounter],1);var interpolator = d3.interpolateString(start,end);return function(t){this.textContent=lexicalInterpolate(interpolator(t),0)};}).delay(0).duration(500);
}
} else {
if(ID.match(/tile/gi)){
tileDBcolorCounter = tileDBcolorCounter === TileDB.length-1?0:tileDBcolorCounter+1;
d3.select("#"+ID+"displayWhichDB").transition("textShuffle").tween("text",function(){var start = lexicalInterpolate(d3.select("#"+ID+"displayWhichDB").text(),1);var end = lexicalInterpolate(TileDB[tileDBcolorCounter],1);var interpolator = d3.interpolateString(start,end);return function(t){this.textContent=lexicalInterpolate(interpolator(t),0)};}).delay(0).duration(500);
}else if (ID.match(/SNV/gi)) {
mutDBcolorCounter = mutDBcolorCounter === MutDB.length-1?0:mutDBcolorCounter+1;
d3.select("#"+ID+"displayWhichDB").transition("textShuffle").tween("text",function(){var start = lexicalInterpolate(d3.select("#"+ID+"displayWhichDB").text(),1);var end = lexicalInterpolate(MutDB[mutDBcolorCounter],1);var interpolator = d3.interpolateString(start,end);return function(t){this.textContent=lexicalInterpolate(interpolator(t),0)};}).delay(0).duration(500);
} else {
domainColorCounter = domainColorCounter === domainList.length-1?0:domainColorCounter+1;
d3.select("#"+ID+"displayWhichDB").transition("textShuffle").tween("text",function(){var start = lexicalInterpolate(d3.select("#"+ID+"displayWhichDB").text(),1);var end = lexicalInterpolate(domainList[domainColorCounter],1);var interpolator = d3.interpolateString(start,end);return function(t){this.textContent=lexicalInterpolate(interpolator(t),0)};}).delay(0).duration(500);
}
}
}
}
function lexicalInterpolate(given,direction){
var alphabet = {A:1,a:1,B:2,b:2,C:3,c:3,D:4,d:4,E:5,e:5,F:6,f:6,G:7,g:7,H:8,h:8,I:9,i:9,J:10,j:10,K:11,k:11,L:12,l:12,M:13,m:13,N:14,n:14,O:15,o:15,P:16,p:16,Q:17,q:17,R:18,r:18,S:19,s:19,T:20,t:20,U:21,u:21,V:22,v:22,W:23,w:23,X:24,x:24,Y:25,y:25,Z:26,z:26,_:27,"-":28,"(":29,")":30,"[":31,"]":32,"*":33,"&":34,"#":35,"<":36,">":37,"0":38,"1":39,"2":40,"3":41,"4":42,"5":43,"6":44,"7":45,"8":46,"9":47};
var alphabetReverse = {0:"a",1:"a",2:"b",3:"c",4:"d",5:"e",6:"f",7:"g",8:"h",9:"i",10:"j",11:"k",12:"l",13:"m",14:"n",15:"o",16:"p",17:"q",18:"r",19:"s",20:"t",21:"u",22:"v",23:"w",24:"x",25:"y",26:"z",27:"_",28:"-",29:"(",30:")",31:"[",32:"]",33:"*",34:"&",35:"#",36:"<",37:">",38:"0",39:"1",40:"2",41:"3",42:"4",43:"5",44:"6",45:"7",46:"8",47:"9"};
var result;
if (direction===1) {
result = "";
var a = given.split("");
for (var i=0;i<a.length;i++){
if (i !== a.length-1) {
result += alphabet[a[i]]+",";
} else {
result += alphabet[a[i]];
}
}
return result;
} else {
result = "";
given = given.split(",");
for (var i=0;i<given.length;i++){
result += alphabetReverse[Math.floor(given[i])];
}
return result;
}
}
<!--Change SNV/tile colors-->
<!--New Modes for SNV db (MutDB)-->
function synOrNonsyn (d){
var text = d3.select(d).text();
text = text.replace("p.","");
var X = text.slice(0,1);
var Y = text.slice(-1);
if (X === Y) {
return "Synonymous";
} else {
return "Nonsynonymous";
}
}
function pXtoY (d) {
var text = d3.select(d).text();
text = text.replace(/\s*p\./,"");
var X = text.slice(0,1);
var Y = text.slice(-1);
var WhatsClickedSequence = [];
for (var i=0;i<d3.keys(aminoacids).length;i++) {
if(aminoacids[d3.keys(aminoacids)[i]][2]=="Clicked") {
WhatsClickedSequence.push(d3.keys(aminoacids)[i]);
}
}
return WhatsClickedSequence.some(function(x){return x===X;}) && queryAA(AminoAcidProperties[AminoAcidPropertiesCount]).some(function(y){return y===Y});
}
function queryAA (property) {
var result = [];
if (property !== "Sequence Display" && property !== "All") {
d3.keys(aminoacids).forEach(function(d,i){if(aminoacids[d].some(function(x){return x === property && !(result.some(function(x){return x===d;}))})){result.push(d);}});
d3.keys(aminoacids_OtherProperties).forEach(function(d,i){if(aminoacids_OtherProperties[d].some(function(x){return x === property && !(result.some(function(x){return x===d;}))})){result.push(d);}});
} else if (property === "All") {
result = d3.keys(aminoacids);
} else {
for (var i=0;i<WhatsClicked.length;i++) {
result.push(WhatsClicked[i]);
}
}
return result;
}
<!--New Modes for SNV db (MutDB)-->
//***Subs***
//Keep unintended text selection issue minimal by disabling selection on majority of text. My understanding is that some text selection is necessary because I am using html5's native eventlistener to translate an svg that is embedded in an another svg. Silencing listeners on the parent svg also silences listeners on the child in this case. I could not find any other solution than selecting a bit of text by Ctrl+A OR double-clicking on the GraphSvg. After this step everything works OK.
//The two elements that are OK to text select are the Graph and the tabs that open when "length: XY aa" is clicked.
d3.select("#master").selectAll(".mut").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
d3.select("#master").selectAll(".sequence").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
d3.select("#master").selectAll(".connector").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
d3.select("#ideograms").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
d3.select("#annotation").selectAll("*").style("user-select","none").style("-moz-user-select","none").style("-webkit-user-select","none").style("-ms-user-select","none");
//Keep text selection process minimal by disabling selection on majority of above text.
//notify that I have been going down the well with someone else's rope..Well ok, perhaps I didn't have one of my own but that still doesn't change the fact.
//alert("With the recent update of chrome there has been a performance issue.\nBefore you begin anything on the page, click on the 'All' above 'Font-Size:1.0x'.\nA dropdown menu will appear.\nRandomly click on the few of the choices.\nThen click back on the 'All' to close dropdown menu.\nThe issue will be resolved.\nYou can watch a demonstration at http://i-pv.org/gifs/chromeGood.gif\nThank you for your understanding,\n\nIbrahim Tanyalcin");
//notify that I have been going down the well with someone else's rope..Well ok, perhaps I didn't have one of my own but that still doesn't change the fact.
</script>
