genevalidator 1.6.1 → 1.6.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f07216ae6800450b5a4d0bfcf9abf98e076075ba
-  data.tar.gz: 9a610b7f1d9f8c9ad692e0b6502f2718d28b12e6
+  metadata.gz: 96ce3d3767132621e5b854bfbda040e4d9fdbf13
+  data.tar.gz: 647c391a49a6f066289cc97362c0374ef1aa56f3
 SHA512:
-  metadata.gz: 13c125b3ce9cf977c666d7e95ee12f2d9ae0198991fe65d0a25ae6d5c826b5c1e341bc84bbad6b37eb2ad8bd60d74ead430e0b294addb9090ab146df9b0795bf
-  data.tar.gz: 2964e12515bc80b1159e941e51d5be44da8ec36407259f45195350545f83ee319da30e6b8987058de86b085a7985617f88f0dd348bbaa99eb9d14ee5f59836f7
+  metadata.gz: 22452fd09598a352ad386011150a71ceb24dda54cdcbed1ae691b0e1a7258318479b80d83478003ddfc5e4e4b3fd60a5ffa07335bad55e2465ca83d338045d8a
+  data.tar.gz: 81ea0ebbeeaa81ffc18bd359b531cf0b8000019f37e266fad0fcd6ffa00867a49c8c1a2adfd37141dc0b052c16bc7a4d373d9e3ed9ab60b4ec32efc9613c7614

data/.gitignore

@@ -4,4 +4,6 @@
 .DS_Store
 Gemfile.lock
 # Gemnasium gem configuration file
-config/gemnasium.yml
+config/gemnasium.yml
+doc
+.yardoc

data/.travis.yml

@@ -10,6 +10,8 @@ before_install:
   - ruby -pi -e "gsub(/^PREFIX = \/usr\/local/, 'PREFIX = ~/mafft/')" ~/mafft-7.205-with-extensions/core/Makefile
   - (cd ~/mafft-7.205-with-extensions/core/ && make clean && make && make install)
   - export PATH=$PATH:~/mafft/bin
+cache: bundler
+sudo: false 
 script: bundle exec rake test
 addons:
   code_climate:

data/README.md

@@ -48,16 +48,16 @@ $ gem install genevalidator
 
 
 ## Usage 
-1) After installing, GeneValidator can be run by typing the following command in the terminal
+1) After installing, GeneValidator can be run by typing the following command in the terminal:
 
-```bash
 
+```bash
 USAGE:
     $ genevalidator [OPTIONS] Input_File
-
+    
 ARGUMENTS:
     Input_File: Path to the input fasta file containing the predicted sequences.
-
+    
 OPTIONAL ARGUMENTS
     -v, --validations <String>       The Validations to be applied.
                                      Validation Options Available (separated by coma):
@@ -72,59 +72,63 @@ OPTIONAL ARGUMENTS
     -d, --db [BLAST_DATABASE]        Path to the BLAST database
                                      GeneValidator also supports remote databases:
                                      e.g.   $ genevalidator -d "swissprot -remote" Input_File
-    -x, --blast_xml_file [FILE]      Provide GeneValidator with a pre-computed BLAST XML output
-                                     file (BLAST -outfmt option 5).
-    -t, --blast_tabular_file [FILE]  Provide GeneValidator with a pre-computed BLAST tabular output
-                                     file. (BLAST -outfmt option 6).
-    -o [Options],                    Custom format used in BLAST -outfmt argument
+    -e, --extract_raw_seqs           Produces a fasta file of the raw sequences of all BLAST hits in the
+                                     supplied BLAST output file. This fasta file can then be provided to
+                                     GeneValidator with the "-r", "--raw_sequences" argument
+    -j, --json_file [JSON_FILE]      Generate GV results from a json file (or a subset of a json file)
+                                     produced from GeneValidator
+    -x [BLAST_XML_FILE],             Provide GeneValidator with a pre-computed BLAST XML output
+        --blast_xml_file             file (BLAST -outfmt option 5).
+    -t [BLAST_TABULAR_FILE],         Provide GeneValidator with a pre-computed BLAST tabular output
+        --blast_tabular_file         file. (BLAST -outfmt option 6).
+    -o [BLAST_TABULAR_OPTIONS],      Custom format used in BLAST -outfmt argument
         --blast_tabular_options      See BLAST+ manual pages for more details
     -n, --num_threads num_of_threads Specify the number of processor threads to use when running
                                      BLAST and Mafft within GeneValidator.
     -f, --fast                       Run BLAST on all sequences together (rather than separately)
                                      to speed up the analysis.
-                                     The speed difference is more apparent on larger input files
+                                     However, this means that there will be a longer wait before the
+                                     results can be viewed (as GeneValidator will need to run BLAST
+                                     on all sequences before producing any results).
+                                     The speed difference will be more apparent on larger input files
+    -r, --raw_sequences [raw_seq]    Supply a fasta file of the raw sequences of all BLAST hits present
+                                     in the supplied BLAST XML or BLAST tabular file.
     -m, --mafft_bin [MAFFT_PATH]     Path to MAFFT bin folder (is added to $PATH variable)
     -b, --blast_bin [BLAST_PATH]     Path to BLAST+ bin folder (is added to $PATH variable)
         --version                    The version of GeneValidator that you are running.
     -h, --help                       Show this screen.
-
-
 ```
 
 Please type `genevalidator -h` into your terminal to see this information in your terminal. 
 
 ## Example Usage Scenarios
 
-##### Running GeneValidator with a local Database, with two threads
+##### Local Database, with custom number of threads (in this case 8)
 
 ```bash
-$ genevalidator -d 'Path-to-local-BLAST-db' -n 2 Input_FASTA_File
+$ genevalidator -d 'Path-to-local-BLAST-db' -n 8 Input_FASTA_File
 ```
-
-##### Running GeneValidator with a remote Database
+##### Local Database, with the fast mode, with custom number of threads (in this case 8)
+Internally, GV will run BLAST on all input sequences before analysing any sequences (instead of running BLAST on each sequence and then analysing the sequence).
 
 ```bash
-$ genevalidator -d 'swissprot -remote' Input_FASTA_File
+$ genevalidator -d 'Path-to-local-BLAST-db' -n 8 -f Input_FASTA_File
 ```
 
-##### Running GeneValidator with a pre-computed BLAST XML file
-
+##### Local Database, with pre-computed BLAST XML file, with custom number of threads (in this case 8)
 
 ```bash
-$  genevalidator -d 'local-or-remote-BLAST-db' -x 'Path-to-XML-file' Input_FASTA_File
+$  blast(p/x) -db SwissProt -out Path-to-XML-file -num_threads 8 -outfmt 5 -query Input_FASTA_File
+$  genevalidator -d 'local-or-remote-BLAST-db' -n 8 -x 'Path-to-XML-file' Input_FASTA_File
 ```
 
-##### Running GeneValidator with a pre-computed BLAST tabular file 
+##### Local Database, with pre-computed BLAST XML file, with custom number of threads (in this case 8)
 
 ```bash
-$ genevalidator -d 'local-or-remote-BLAST-db' -t 'Path-to-tabular-file' -o 'qseqid sseqid sacc slen qstart qend sstart send length qframe pident evalue' Input_FASTA_File 
+$ blast(p/x) -db SwissProt -out Path-to-tabular-file -num_threads 8 -outfmt "7 qseqid sseqid sacc slen qstart qend sstart send length qframe pident nident evalue qseq sseq" -query Input_FASTA_File
+$ genevalidator -d 'local-or-remote-BLAST-db' -n 8 -t 'Path-to-tabular-file' -o 'qseqid sseqid sacc slen qstart qend sstart send length qframe pident evalue' Input_FASTA_File 
 ```
 
-##### Running GeneValidator with the fast option 
-
-```bash
-$ genevalidator -d 'Path-to-local-BLAST-db' -n 2 -f Input_FASTA_File
-```
 
 ## Output
 The output produced by GeneValidator is presented in three manners.
@@ -132,12 +136,56 @@ The output produced by GeneValidator is presented in three manners.
 #### HTML Output 
 Firstly, the output is produced as a colourful, HTML file. This file is titled 'results.html' (found in the 'html' folder) and can be opened in a web browser (please use Mozilla Firefox). This file contains all the results in an easy-to-view manner with graphical visualisations. See exemplar html output [here](http://wurmlab.github.io/tools/genevalidator/exemplar_data/protein_input/) (protein input data) and [here](http://wurmlab.github.io/tools/genevalidator/exemplar_data/genetic_input/) (DNA input data).
 
-#### Yaml Output
-The output is also produced in YAML. This allows you to reuse the results and all the related global variables within your own programs.
+#### JSON Output
+The output is also produced in JSON. GeneValidator is able to re-generate results for any JSON files (or derived JSON files) with that were previously generated by the program. This means that you are able to use the JSON file in your own analysis pipelines and then use GeneValidator to produce the HTML output for the analysed JSON file.
 
 #### Terminal Output
 Lastly, a summary of the results is also outputted in the terminal to provide quick feedback on the results.
 
-### Other Resources
+
+## Analysing the JSON output
+
+There are numerous methods to analyse the JSON output including the [streamable JSON command line program](http://trentm.com/json/). The below examples use this tool.
+
+### Examplar JSON CLI Installation
+After installing node:
+
+```bash
+$ npm install -g json
+```
+
+### Filtering the results 
+
+- Extract sequences that have an overall score of 100
+
+```bash
+$ json -f INPUT_JSON_FILE -c 'this.overall_score == 100' > OUTPUT_JSON_FILE
+```
+
+- Extract sequences that have an overall score of over 70
+
+```bash
+$ json -f INPUT_JSON_FILE -c 'this.overall_score > 70' > OUTPUT_JSON_FILE
+```
+
+- Extract sequences that have more than 50 hits
+
+```bash
+$ json -f INPUT_JSON_FILE -c 'this.no_hits > 50' > OUTPUT_JSON_FILE
+```
+
+- Sort the JSON based on the overall score (ascending - 0 to 100)
+
+```bash
+$ json -f INPUT_JSON_FILE -A -e 'this.sort(function(a,b) {return (a.overall_score > b.overall_score) ? 1 : ((b.overall_score > a.overall_score) ? -1 : 0);} );' > OUTPUT_JSON_FILE
+```
+
+- Sort the JSON based on the overall score (decending - 100 to 0)
+
+```bash
+json -f INPUT_JSON_FILE -A -e 'this.sort(function(a,b) {return (a.overall_score < b.overall_score) ? 1 : ((b.overall_score < a.overall_score) ? -1 : 0);} );' > OUTPUT_JSON_FILE
+```
+
+## Other Resources
 
 * [Full Documentation](http://wurmlab.github.io/tools/genevalidator/documentation/v1/)

data/Rakefile

@@ -2,15 +2,18 @@ require 'rake/testtask'
 
 task default: [:build]
 
-desc 'Installs the ruby gem'
-task :build do
-  lib = File.expand_path('../lib', __FILE__)
-  $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-  require 'genevalidator/version'
-  exec("gem build genevalidator.gemspec && gem install ./genevalidator-#{GeneValidator::VERSION}.gem")
+desc 'Builds and installs'
+task install: [:build] do
+  require_relative 'lib/genevalidator/version'
+  sh "gem install ./genevalidator-#{GeneValidator::VERSION}.gem"
 end
 
-desc 'Unit tests for the majority of class methods'
+desc 'Runs tests, generates documentation, builds gem (default)'
+task :build => [:test, :doc] do
+  sh 'gem build genevalidator.gemspec'
+end
+
+desc 'Runs tests'
 task :test do
   Rake::TestTask.new do |t|
     t.libs.push 'lib'
@@ -21,5 +24,5 @@ end
 
 desc 'Generates documentation'
 task :doc do
-  exec("yardoc 'lib/**/*.rb'")
+  sh "yardoc 'lib/**/*.rb'"
 end

data/aux/app_template_footer.erb

@@ -1,6 +1 @@
- </tbody>
-</table>
-<script>
-  var evaluation_div = document.getElementById('report_1');
-  evaluation_div.innerHTML = "<%= less %>";
-</script>
+</tbody></table><script>var evaluation_div = document.getElementById('report_1');evaluation_div.innerHTML = "<%= less %>";</script>

data/aux/app_template_header.erb

@@ -1,32 +1,12 @@
-    <h4>Overview</h4>
-    <div id="report">
-      <div id="report_1"></div>
-    </div>
-    <hr>
-    <h4 id="results_header">Results</h4>
-    <table id="sortable_table" class="table table-bordered table-condensed tablesorter">
-      <thead>
-        <tr id="header">
-          <th>#</th>
-          <th>Ranking</th>
-          <th>Sequence Definition
-            <span data-toggle="tooltip" title="Query definition as it apears in the input fasta file." data-placement="top"><i class="fa fa-question-circle"></i></span>
-          </th>
-          <th>No. Hits
-            <span data-toggle="tooltip" title="Number of non-identical hits found by BLAST." data-placement="top"><i class="fa fa-question-circle"></i></span>
-          </th> 
-          <% @validations.each do |item| %>
-          <th class="sorter-false">
-            <b><%= item.header %></b>
-              <% if item.short_header == "LengthCluster" || item.short_header == "Gene_Merge" || item.short_header == "ORF" || item.short_header == "MA" %>
-              <span data-toggle="tooltip" title="Charts available for this validation" data-placement="top"><i class="fa fa-bar-chart-o chartIcon"></i></span>&nbsp;<span data-toggle="tooltip" title="<%=item.description%>" data-placement="top"><i class="fa fa-question-circle"></i></span>
-            <% else %>
-               <span data-toggle="tooltip" title="<%=item.description%>" data-placement="top"><i class="fa fa-question-circle"></i></span>
-            <% end %>
-          </th>
-          <% end %>
-          <th class="sorter-false chart-column"></th>
-        </tr>
-      </thead>
-
-      <tbody>
+<h4>Overview</h4><div id="report"><div id="report_1"></div></div><hr><h4 id="results_header">Results</h4><table id="sortable_table" class="table table-bordered table-condensed tablesorter"><thead><tr id="header"><th>#</th><th>Ranking</th><th>Sequence Definition<span data-toggle="tooltip" title="Query definition as it apears in the input fasta file." data-placement="top"><i class="fa fa-question-circle"></i></span></th><th>No. Hits<span data-toggle="tooltip" title="Number of non-identical hits found by BLAST." data-placement="top"><i class="fa fa-question-circle"></i></span></th> 
+<% @validations.each do |item| %>
+  <th class="sorter-false">
+  <b><%= item.header %></b>
+  <% if item.short_header == "LengthCluster" || item.short_header == "Gene_Merge" || item.short_header == "ORF" || item.short_header == "MA" %>
+    <span data-toggle="tooltip" title="Charts available for this validation" data-placement="top"><i class="fa fa-bar-chart-o chartIcon"></i></span>&nbsp;<span data-toggle="tooltip" title="<%=item.description%>" data-placement="top"><i class="fa fa-question-circle"></i></span>
+  <% else %>
+    <span data-toggle="tooltip" title="<%=item.description%>" data-placement="top"><i class="fa fa-question-circle"></i></span>
+  <% end %>
+</th>
+<% end %>
+<th class="sorter-false chart-column"></th></tr></thead><tbody>

data/aux/files/css/style.css

@@ -75,12 +75,6 @@ tr {
   text-align: center;
 }
 
-/* table striped backgrounds ___________*/
-
-tbody > tr:nth-child(4n+1), tbody > tr:nth-child(4n+2) {
-  background-color: #f5f5f5;
-}
-
 /* table sorter ___________*/
 
 .tablesorter-default .header,
@@ -158,11 +152,11 @@ tbody > tr:nth-child(4n+1), tbody > tr:nth-child(4n+2) {
   cursor: pointer !important;
 }
 
-.danger:hover {
+.table tbody td.danger:hover {
   background-color: rgb(242, 203, 203) !important;
 }
 
-.success:hover{
+.table tbody td.success:hover{
   background-color: rgb(204, 228, 200) !important;
 }
 

data/aux/files/js/plots.js

@@ -1,151 +1,170 @@
 function show_all_plots(button){
   'use strict';
-  var expand_children = document.getElementsByName('plot_row');
-  if (expand_children.length < 30){
+  var plotBtns = $('.plot_btn');
+  if (plotBtns.length > 30){
+    $('#alert').modal();
+  } else {
     if (window.chrome && (window.location.protocol === 'file:') ) {
-      if (($('#browser-alert').length) === 0) {
-        $('#browseralertText').html('<stong>Sorry, this feature is not supported in your browser.');
-        $('#browseralert').modal();
-      }
+      createChromeModal();
     } else {
-      
+
       // show activity spinner
-      $('#spinner1').modal({
-        backdrop: 'static',
-        keyboard: 'false'
-      });
+      $('#spinner1').modal({ backdrop: 'static', keyboard: 'false' });
 
       if (button.status !== 'pressed'){
         button.status = 'pressed';
         button.innerHTML = '<i class="fa fa-2x fa-bar-chart-o"></i><br>Hide All Charts';
         button.onclick = function() {
-          hide_all_plots(button, expand_children);
+          hide_all_plots(button);
         };
       }
 
-      //display plots in the dom
-      var buttons_dom = document.getElementsByName('plot_btn');
-      // remove all plots
-      remove_all_plots(expand_children);
+      remove_all_plots();       // remove all plots
 
-      for (var i = 0; i < expand_children.length; i++) {
-        var expand_child_div = expand_children[i].getElementsByTagName('div')[0];
-        show_plot(buttons_dom[i], expand_child_div);
-      }
-      // remove progress notification
-      $('#spinner1').modal('hide');
+      //iterate over the plot_btns and add data to each childRow
+      $('.plot_btn').each (function(){
+        addData(this, 'all');
+      });
+
+      $('#spinner1').modal('hide');      // remove activity spinner
     }
   }
-  else {
-    $('#alert').modal();
-  }
 }
 
-function show_plot(pressedButton, expand_child_div){
-  'use strict';
-  if (pressedButton.status !== 'pressed'){
-    var eachPlotBtn = pressedButton.getAttribute('onclick');
-    var tmpFunc = new Function(eachPlotBtn);
-    tmpFunc();
-    pressedButton.status='pressed';
-    $(expand_child_div).parent().parent().show();
-    expand_child_div.style.display = 'block';
+function createChromeModal() {
+  if (($('#browser-alert').length) === 0) {
+    $('#browseralertText').html('<stong>Sorry, this feature is not supported in your browser.');
+    $('#browseralert').modal();
   }
 }
 
-function remove_all_plots(expand_children){
+function remove_all_plots() {
   'use strict';
-  var extensions = document.querySelectorAll('div');
-  for (var i = 0; i < extensions.length; i++) {
-    if (extensions[i].id.search(/toggle*/) === 0){
-      d3.select('#'.concat(extensions[i].id)).selectAll('svg').remove();
-    }
-  }
-
-  for (var j = 0; j < expand_children.length; j++) {
-    var expand_child_div = expand_children[j].getElementsByTagName('div')[0];
-    $(expand_child_div).parent().parent().hide();
-  }
+  $('.tablesorter-childRow').each (function(){
+    $(this).remove();
+  });
 
-  var buttons = document.getElementsByTagName('button');
-  for (var k = 0; k < buttons.length; k++) {
-    buttons[k].status = 'released';
-  }
+  $('.plot_btn').each (function(){
+    this.status = 'released';
+  });
 }
 
-function hide_all_plots(button, expand_children){
+function hide_all_plots(button){
   'use strict';
   button.status = 'released';
   button.innerHTML = '<i class="fa fa-2x fa-bar-chart-o"></i><br>Show All Charts';
   button.onclick = function() {
     show_all_plots(button);
   };
-  remove_all_plots(expand_children);
+  remove_all_plots();
 }
 
-function getElementByAttributeValue(attribute, value) {
+function addData(source, val){
   'use strict';
-  var allElements = document.getElementsByTagName('*');
-  for (var i = 0; i < allElements.length; i++) {
-    if (allElements[i].getAttribute(attribute) === value) {
-      return allElements[i];
-    }
+  if (window.chrome && (window.location.protocol === 'file:') ) {
+    createChromeModal();
+    return true;
+  }
+  var graphs      = '',
+      graphData   = '',
+      $currentRow = $(source).closest('tr'),
+      target      = $currentRow.attr("data-target"),
+      $childRow   = $('#mainrow' + target);
+  
+  if ($childRow.length && source.status !== 'pressed') {
+    // if you click on another td...
+    emptyChildRow($currentRow, target, source);
+    addDataToChildRow($currentRow, target, val);
+  } else if ($childRow.length === 0){
+    createChildRow($currentRow, target, source);
+    addDataToChildRow($currentRow, target, val);
+  } else if ($childRow.length) {
+    removeChildRow($currentRow, $childRow, source);
   }
-  return null;
+
+  $('table').trigger('update');
+
 }
 
-function showDiv(source, target){
-  'use strict';
-  if (window.chrome && (window.location.protocol === 'file:') ) {
-    if (($('#browser-alert').length) === 0) {
-      $('#browseralertText').html('<stong>Sorry, this feature is not supported in your browser.');
-      $('#browseralert').modal();
-    }
-    return;
-  }
+function addOverallPlot(file){
+  $.getJSON(file, function( json ) {
+    addPlot(json.data, 'report_1', json.type, json.title, json.footer, json.xtitle, json.ytitle);
+  });
+}
+
+function createChildRow($currentRow, target, source){
+  var childRowHTML = '<tr class="tablesorter-childRow" id="mainrow' + target + '"><td colspan="12" id="row' +
+                     target + '"><div id="' + target + '" class="expanded-child"></div></td></tr>';
+  $currentRow.addClass('tablesorter-hasChildRow');
+  $currentRow.after(childRowHTML);
+  source.status = 'pressed';
+}
+
+function removeChildRow($currentRow, $childRow, source){
+  $currentRow.removeClass('tablesorter-hasChildRow');
+  $childRow.remove();
+  source.status = 'released';
+}
+
+function emptyChildRow($currentRow, target, source){
+  var targetId = '#' + target;
   var explanationId = '#' + target + 'explanation';
+  $(targetId).empty();
+  $(explanationId).remove();
+  resetStatusOfOtherButtons($currentRow);
+  source.status = 'pressed';
+}
 
-  if ( $(explanationId).length) {
-    $(explanationId).remove();
-  }
+function resetStatusOfOtherButtons($currentRow){
+  $currentRow.find('td').each (function(){
+    if (this.status == 'pressed') { this.status = 'released'; }
+  });
+  $currentRow.find('.plot_btn').each (function(){
+    if (this.status == 'pressed') { this.status = 'released'; }
+  });
+}
 
-  var button = document.getElementById(target);
-  if (source.status === 'pressed'){
-    button.style.display = 'none';
-    $(button).parent().parent().hide();
-  } else {
-    d3.select('#'.concat(target)).selectAll('svg').remove();    
-    button.style.display = 'block';
-    $(button).parent().parent().show();
-    var pressedButtons = document.querySelectorAll('td');
-    for (var i = 0; i < pressedButtons.length; i++) {
-      if (pressedButtons[i].status === 'pressed') {
-        pressedButtons[i].status = 'released';
+function addDataToChildRow($currentRow, target, val){
+  var file = $currentRow.attr("data-jsonFile");
+
+  $.getJSON(file, function( json ) {
+    if (val === 'all'){
+      for (var i in json.validations){
+        if (json.validations[i].graphs !== undefined) {
+          generatePlotCommands(json.validations[i].graphs, target);
+        }
+      }
+    } else {
+      addExplanation(target, json.validations[val]);
+      if (json.validations[val].graphs !== undefined) {
+        generatePlotCommands(json.validations[val].graphs, target);
       }
     }
-  }
+  });
+}
 
-  if (source.status=='pressed') {
-    source.status='released';
-  } else {
-    source.status='pressed';
+function generatePlotCommands(graphs, target) {
+  for (var g = 0; g < graphs.length; g++) {
+    var graphData = graphs[g];
+    addPlot(graphData.data, target, graphData.type, graphData.title,
+            graphData.footer, graphData.xtitle, graphData.ytitle,
+            graphData.aux1, graphData.aux2);
   }
 }
 
-function AddExplanation(source, target){
+function addExplanation(target, jsonData){
   'use strict';
-  var row = '#' + target +'row';
-  var approach_html = '<p><b>Approach:</b> ' + source.getAttribute("data-approach") + '</p>';
-  var explanation_html = '<p><b>Explanation:</b> ' + source.getAttribute("data-explanation") + '</p>';
-  var conclusion_html = '<p><b>Conclusion:</b> ' + source.getAttribute("data-conclusion") + '</p>';
-
-  var explain = $('<div id="' + target + 'explanation" class="alert alert-info explanation_alert" role="alert">' + approach_html + explanation_html + conclusion_html + '</div>');
-  if (source.status === 'pressed') {
-    $(row).prepend(explain);
-  }
+  var row = '#row' + target;
+  var approach_html = '<p><b>Approach:</b> ' + jsonData.approach + '</p>';
+  var explanation_html = '<p><b>Explanation:</b> ' + jsonData.explanation + '</p>';
+  var conclusion_html = '<p><b>Conclusion:</b> ' + jsonData.conclusion + '</p>';
+
+  var explain = $('<div id="' + target + 'explanation" class="alert alert-info explanation_alert" role="alert">' +
+                approach_html + explanation_html + conclusion_html + '</div>');
+  $(row).prepend(explain);
 }
 
-function addPlot(target, filename, type, title, footer, xtitle, ytitle, aux1, aux2){
+function addPlot(jsonData, target, type, title, footer, xtitle, ytitle, aux1, aux2){
   'use strict';
   var legend;
   if (footer === '') {
@@ -156,25 +175,25 @@ function addPlot(target, filename, type, title, footer, xtitle, ytitle, aux1, au
 
   switch(type) {
     case 'scatter':
-      plot_scatter(filename, target, title, footer, xtitle, ytitle, aux1, aux2);
+      plot_scatter(jsonData, target, title, footer, xtitle, ytitle, aux1, aux2);
       break;
     case 'bars':
-      plot_bars(filename, target, title, legend, xtitle, ytitle, aux1);
+      plot_bars(jsonData, target, title, legend, xtitle, ytitle, aux1);
       break;
     case 'simplebars':
-      plot_simple_bars(filename, target, title, legend, xtitle, ytitle);
+      plot_simple_bars(jsonData, target, title, legend, xtitle, ytitle);
       break;
     case 'lines':
-      if (aux2 !== '') {
+      if (aux2 !== null) {
         aux2 = aux2.split(',');
       }
-      plot_lines(filename, target, title, legend, xtitle, ytitle, aux1, aux2);
+      plot_lines(jsonData, target, title, legend, xtitle, ytitle, aux1, aux2);
       break;
     case 'align':
-      if (aux2 !== '') {
+      if (aux2 !== null) {
         aux2 = aux2.split(',');
       }
-      plot_align(filename, target, title, legend, xtitle, ytitle, aux1, aux2);
+      plot_align(jsonData, target, title, legend, xtitle, ytitle, aux1, aux2);
       break;
     default:
       break;
@@ -204,87 +223,85 @@ function color_beautification(color){
 }
 
 // bars plot
-function plot_bars(filename, target, title, footer, xTitle, yTitle, bar){
+function plot_bars(alldata, target, title, footer, xTitle, yTitle, bar){
   var margin = {top: 70, right: 50, bottom: 75, left: 50},
     width = 600 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;      
-  var legend_width = 15
+    height = 500 - margin.top - margin.bottom;
+  var legend_width = 15;
 
   var svg = d3.select("#".concat(target)).append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
+
   svg.append("text")
-    .attr("x", (width / 2))             
+    .attr("x", (width / 2))
     .attr("y", -45)
-    .attr("text-anchor", "middle")  
-    .style("font-size", "16px") 
-    .text(title);   
-    
+    .attr("text-anchor", "middle")
+    .style("font-size", "16px")
+    .text(title);
+
   var colors = new Array("orange", "blue", "green", "yellow", "brown");
-  var no_colors = colors.length
+  var no_colors = colors.length;
 
-  var padding = 100
+  var padding = 100;
 
-  d3.json(filename, function(error, alldata) {
-    
-    flattened_data = [].concat.apply([], alldata)           
-    var yMax = d3.max(flattened_data, function(d) { return d.value; }) + 3
-    var y = d3.scale.linear()
-      .domain([0, yMax + yMax/10])
-      .range([height, 0]);
+  flattened_data = [].concat.apply([], alldata);
+  var yMax = d3.max(flattened_data, function(d) { return d.value; }) + 3;
+  var y = d3.scale.linear()
+    .domain([0, yMax + yMax/10])
+    .range([height, 0]);
 
-    var xMin = d3.min(flattened_data, function(d) { return d.key; })
-    if (bar!=undefined){
-      var xMin = Math.min(xMin, bar); 
-    }
- 
-    var xMax = d3.max(flattened_data, function(d) { return d.key; })
-    if (bar!=undefined){
-      var xMax = Math.max(xMax, bar); 
-    }
+  var xMin = d3.min(flattened_data, function(d) { return d.key; });
+  if (bar!=undefined){
+    var xMin = Math.min(xMin, bar);
+  }
 
-    var x = d3.scale.linear()
-      .domain([xMin-padding, xMax+padding])
-      .range([13, width]);
+  var xMax = d3.max(flattened_data, function(d) { return d.key; });
+  if (bar!=undefined){
+    var xMax = Math.max(xMax, bar);
+  }
 
-    var xAxis = d3.svg.axis()
-      .scale(x)
-      .orient("bottom")
-      .ticks(8)
+  var x = d3.scale.linear()
+    .domain([xMin-padding, xMax+padding])
+    .range([13, width]);
 
-    var yAxis = d3.svg.axis()
-      .scale(y)
-      .orient("left")
-      .tickFormat(d3.format("d"))
-      .ticks(8)
+  var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom")
+    .ticks(8);
+
+  var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient("left")
+    .tickFormat(d3.format("d"))
+    .ticks(8);
+
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis)
+    .append("text")
+      .attr("class", "label")
+      .attr("x", (width-xTitle.length)/2-50)
+      .attr("y", 35)
+      .style("text-anchor", "start")
+      .text(xTitle);
+
+   svg.append("g")
+       .attr("class", "y axis")
+      .call(yAxis)
+    .append("text")
+      .attr("class", "label")
+      .attr("transform", "rotate(-90)")
+      .attr("x", -(height+yTitle.length)/2-50)
+      .attr("y", -40)
+      .style("text-anchor", "start")
+      .text(yTitle);
 
-    svg.append("g")
-        .attr("class", "x axis")
-        .attr("transform", "translate(0," + height + ")")
-        .call(xAxis)
-      .append("text")
-        .attr("class", "label")
-        .attr("x", (width-xTitle.length)/2-50)
-        .attr("y", 35)
-        .style("text-anchor", "start")
-        .text(xTitle)
-
-     svg.append("g")
-         .attr("class", "y axis")
-        .call(yAxis)
-      .append("text")
-        .attr("class", "label")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -(height+yTitle.length)/2-50)
-        .attr("y", -40)
-        .style("text-anchor", "start")
-        .text(yTitle)
-        
     alldata.map( function(data, i) {
-     
+
       color = colors[i % (no_colors - 1)];
       svg.selectAll(".bar")
         .data(data)
@@ -294,7 +311,7 @@ function plot_bars(filename, target, title, footer, xTitle, yTitle, bar){
           .attr("y", function(d) { return y(d.value); })
           .attr("height", function(d) { return height - y(d.value); })
           .attr("fill", function(d) { if (d.main == true) return color_beautification("red"); return color_beautification("blue");});
-    }); 
+    });
 
     if (bar!=undefined){
       svg.append("rect")
@@ -310,531 +327,502 @@ function plot_bars(filename, target, title, footer, xTitle, yTitle, bar){
         .attr("x", -yMax/10 - 35)
         .attr("y", x(bar) - 5)
           .text("query");
-        }   
-  });
+        }
 
-  var offset = 0
-  var total_len = 0
+  var offset = 0;
+  var total_len = 0;
   for (var i = 0; i < footer.length; i++) {
-  var array = footer[i].split(","); 
+  var array = footer[i].split(",");
   total_len = total_len + array[0].length*8 + 15;
   }
 
   for (var i = 0; i < footer.length; i++) {
 
-  var array = footer[i].split(","); 
+  var array = footer[i].split(",");
   svg.append("rect")
-      .attr("x", (width-total_len)/2 + offset)             
+      .attr("x", (width-total_len)/2 + offset)
       .attr("y", -30)
       .attr("width", 10)
       .attr("height", 10)
-      .style("fill", color_beautification(array[1].replace(/\s+/g, '')))
-    
+      .style("fill", color_beautification(array[1].replace(/\s+/g, '')));
+
   svg.append("text")
-      .attr("x", (width-total_len)/2 + offset + 15)             
+      .attr("x", (width-total_len)/2 + offset + 15)
       .attr("y", -20)
       .text(array[0]);
-    offset = offset + array[0].length*8 + 15
-
+    offset = offset + array[0].length*8 + 15;
   }
-
-
-
-}   
+}
 
 // bars plot
-function plot_simple_bars(filename, target, title, footer, xTitle, yTitle){
+function plot_simple_bars(alldata, target, title, footer, xTitle, yTitle){
   'use strict';
 
   var margin = {top: 70, right: 50, bottom: 75, left: 50},
     width = 600 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;      
-  var legend_width = 15
+    height = 500 - margin.top - margin.bottom;
+  var legend_width = 15;
 
   var svg = d3.select("#".concat(target)).append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
+
   svg.append("text")
-    .attr("x", (width / 2))             
+    .attr("x", (width / 2))
     .attr("y", -45)
-    .attr("text-anchor", "middle")  
-    .style("font-size", "16px") 
-    .text(title);   
-    
-  var colors = new Array("orange", "blue", "green", "yellow", "brown");
-  var no_colors = colors.length
-
-    var padding = 0
+    .attr("text-anchor", "middle")
+    .style("font-size", "16px")
+    .text(title);
 
-  d3.json(filename, function(error, alldata) {
-    
-    flattened_data = [].concat.apply([], alldata)           
-    var yMax = d3.max(flattened_data, function(d) { return d.value; }) + 3
-    var y = d3.scale.linear()
-           .domain([0, yMax])
-           .range([height, 0]);
-
-    var xMin = d3.min(flattened_data, function(d) { return d.key; })
-        var xMax = d3.max(flattened_data, function(d) { return d.key; })
+  var colors = new Array("orange", "blue", "green", "yellow", "brown");
+  var no_colors = colors.length;
 
-    var x = d3.scale.linear()
-           .domain([xMin-padding, xMax+padding])
-           .range([13, width]);
+  var padding = 0;
 
-    var xAxis = d3.svg.axis()
-        .scale(x)
-        .orient("bottom")
-      .ticks(8)
+  var flattened_data = [].concat.apply([], alldata);
+  var yMax = d3.max(flattened_data, function(d) { return d.value; }) + 3;
+  var y = d3.scale.linear()
+         .domain([0, yMax])
+         .range([height, 0]);
 
-      var yAxis = d3.svg.axis()
-      .scale(y)
-      .orient("left")
-      .tickFormat(d3.format("d"))
-      .ticks(8)
+  var xMin = d3.min(flattened_data, function(d) { return d.key; });
+  var xMax = d3.max(flattened_data, function(d) { return d.key; });
 
-    svg.append("g")
-        .attr("class", "x axis")
-        .attr("transform", "translate(0," + height + ")")
-        .call(xAxis)
-      .append("text")
-        .attr("class", "label")
-        .attr("x", (width-xTitle.length)/2-50)
-        .attr("y", 35)
-        .style("text-anchor", "start")
-        .text(xTitle)
-
-     svg.append("g")
-         .attr("class", "y axis")
-        .call(yAxis)
-      .append("text")
-        .attr("class", "label")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -(height+yTitle.length)/2-50)
-        .attr("y", -40)
-        .style("text-anchor", "start")
-        .text(yTitle)
-        
-    alldata.map( function(data, i) {
-     
-      color = colors[i % (no_colors - 1)];
-      svg.selectAll(".bar")
-        .data(data)
-        .enter().append("rect")
-          .attr("x", function(d) { return x(d.key); })
-          .attr("width", 6)
-          .attr("y", function(d) { return y(d.value); })
-          .attr("height", function(d) { return height - y(d.value); })
-          .attr("fill", function(d) { if (d.main == true) return color_beautification("red"); return color_beautification("blue");});
-    }); 
+  var x = d3.scale.linear()
+            .domain([xMin-padding, xMax+padding])
+            .range([13, width]);
 
-  });
+  var xAxis = d3.svg.axis()
+                .scale(x)
+                .orient("bottom")
+                .ticks(8);
 
+  var yAxis = d3.svg.axis()
+                .scale(y)
+                .orient("left")
+                .tickFormat(d3.format("d"))
+                .ticks(8);
+
+  svg.append("g")
+       .attr("class", "x axis")
+       .attr("transform", "translate(0," + height + ")")
+       .call(xAxis)
+     .append("text")
+       .attr("class", "label")
+       .attr("x", (width-xTitle.length)/2-50)
+       .attr("y", 35)
+       .style("text-anchor", "start")
+       .text(xTitle);
+
+  svg.append("g")
+       .attr("class", "y axis")
+       .call(yAxis)
+     .append("text")
+       .attr("class", "label")
+       .attr("transform", "rotate(-90)")
+       .attr("x", -(height+yTitle.length)/2-50)
+       .attr("y", -40)
+       .style("text-anchor", "start")
+       .text(yTitle);
+
+  alldata.map( function(data, i) {
+
+  var color = colors[i % (no_colors - 1)];
+
+  svg.selectAll(".bar")
+     .data(data)
+     .enter().append("rect")
+             .attr("x", function(d) { return x(d.key); })
+             .attr("width", 6)
+             .attr("y", function(d) { return y(d.value); })
+             .attr("height", function(d) { return height - y(d.value); })
+             .attr("fill", function(d) { if (d.main == true) return color_beautification("red"); return color_beautification("blue");});
+    });
 }
 
 
 // scatter plot
 // ecuation of the line: slope * x + yLine
-function plot_scatter(filename, target, title, footer, xTitle, yTitle, yLine, slope){
+function plot_scatter(data, target, title, footer, xTitle, yTitle, yLine, slope){
   'use strict';
 
   var margin = {top: 50, right: 30, bottom: 75, left: 50},
-    width = 500 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;      
+  width = 500 - margin.left - margin.right,
+  height = 500 - margin.top - margin.bottom;
 
   var x = d3.scale.linear()
-    .range([0, width]);
+            .range([0, width]);
   var y = d3.scale.linear()
-    .range([height, 0]);
+            .range([height, 0]);
 
   var color = d3.scale.category10();
 
   var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("bottom")
-    .ticks(8);
+                .scale(x)
+                .orient("bottom")
+                .ticks(8);
   var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left")
-    .tickFormat(d3.format("d"))
-    .ticks(8);
+                .scale(y)
+                .orient("left")
+                .tickFormat(d3.format("d"))
+                .ticks(8);
 
   var svg = d3.select("#".concat(target)).append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-    .append("g")
-      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
-  svg.append("text")
-    .attr("x", (width / 2))             
-    .attr("y", -25)
-    .attr("text-anchor", "middle")  
-    .style("font-size", "16px") 
-    .text(title);   
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
   svg.append("text")
-    .attr("x", (width / 2))             
-    .attr("y", height+ 55)
-    .attr("text-anchor", "middle")  
-    .style("font-size", "12px") 
-    .text(footer);  
-
-  d3.json(filename, function(error, data) {
+       .attr("x", (width / 2))
+       .attr("y", -25)
+       .attr("text-anchor", "middle")
+       .style("font-size", "16px")
+       .text(title);
 
-      var xMax = d3.max(data, function(d) { return d.x; })
-      var xMin = d3.min(data, function(d) { return d.x; })
-      var yMax = d3.max(data, function(d) { return d.y; })
-      var yMin = d3.min(data, function(d) { return d.y; })
-    x.domain(d3.extent(data, function(d) { return d.x; })).nice();
-    y.domain(d3.extent(data, function(d) { return d.y; })).nice();
-
-    svg.append("g")
-      .attr("class", "x axis")
-      .attr("transform", "translate(0," + height + ")")
-      .call(xAxis)
-    .append("text")
-      .attr("class", "label")
-      .attr("x", (width-xTitle.length)/2-50)
-      .attr("y", 35)
-      .style("text-anchor", "start")
-      .text(xTitle)
-
-    svg.append("g")
-      .attr("class", "y axis")
-      .call(yAxis)
-    .append("text")
-      .attr("class", "label")
-      .attr("transform", "rotate(-90)")
-      .attr("x", -(height+yTitle.length)/2-50)
-      .attr("y", -40)
-      .style("text-anchor", "start")
-      .text(yTitle)
-
-    svg.selectAll(".dot")
-      .data(data)
-    .enter().append("circle")
-      //.attr("class", "dot")
-      .attr("r", 2)
-      .attr("cx", function(d) { return x(d.x); })
-      .attr("cy", function(d) { return y(d.y); })
-      .style("fill", function(d) { return color_beautification("red"); })
-      .style("opacity",0.6);
-
-       if ((slope!=undefined && slope != "") && (yLine!=undefined && yLine != "")){
-
-        yLine = parseFloat(yLine.replace(",", "."));
-        var xMaxValue = xMax
-        var yMaxValue = yLine + slope * xMax
-        if (yMaxValue > yMax){
-            xMaxValue = (yMax-yLine)/slope
-            yMaxValue = yMax
-        }
-
-        if (yMaxValue < yMin){
-            xMaxValue = (yMin-yLine)/slope
-            yMaxValue = yMin
-        }
-
-        var xMinValue = xMin
-        var yMinValue = yLine + slope * xMin
-        if (yMinValue > yMax){
-            xMinValue = (yMax-yLine)/slope
-            yMinValue = yMin
-        }
+  svg.append("text")
+       .attr("x", (width / 2))
+       .attr("y", height+ 55)
+       .attr("text-anchor", "middle")
+       .style("font-size", "12px")
+       .text(footer);
+
+  var xMax = d3.max(data, function(d) { return d.x; });
+  var xMin = d3.min(data, function(d) { return d.x; });
+  var yMax = d3.max(data, function(d) { return d.y; });
+  var yMin = d3.min(data, function(d) { return d.y; });
+  x.domain(d3.extent(data, function(d) { return d.x; })).nice();
+  y.domain(d3.extent(data, function(d) { return d.y; })).nice();
+
+  svg.append("g")
+       .attr("class", "x axis")
+       .attr("transform", "translate(0," + height + ")")
+       .call(xAxis)
+     .append("text")
+       .attr("class", "label")
+       .attr("x", (width-xTitle.length)/2-50)
+       .attr("y", 35)
+       .style("text-anchor", "start")
+       .text(xTitle);
+
+  svg.append("g")
+       .attr("class", "y axis")
+       .call(yAxis)
+     .append("text")
+       .attr("class", "label")
+       .attr("transform", "rotate(-90)")
+       .attr("x", -(height+yTitle.length)/2-50)
+       .attr("y", -40)
+       .style("text-anchor", "start")
+       .text(yTitle);
+
+  svg.selectAll(".dot")
+       .data(data)
+     .enter().append("circle")
+       .attr("r", 2)
+       .attr("cx", function(d) { return x(d.x); })
+       .attr("cy", function(d) { return y(d.y); })
+       .style("fill", function(d) { return color_beautification("red"); })
+       .style("opacity",0.6);
+
+  if ((slope!=undefined && slope != "") && (yLine!=undefined && yLine != "")){
+    yLine = parseFloat(yLine.replace(",", "."));
+    var xMaxValue = xMax;
+    var yMaxValue = yLine + slope * xMax;
+    if (yMaxValue > yMax){
+      xMaxValue = (yMax-yLine)/slope;
+      yMaxValue = yMax;
+    }
 
-        if (yMinValue < yMin){
-            xMinValue = (yMin-yLine)/slope
-            yMinValue = yMin
-        }
+    if (yMaxValue < yMin){
+      xMaxValue = (yMin-yLine)/slope;
+      yMaxValue = yMin;
+    }
 
-        svg.append("line")
-          .attr("x1", x(xMinValue))
-          .attr("y1", y(yMinValue))
-          .attr("x2", x(xMaxValue))
-          .attr("y2", y(yMaxValue))
-          .attr("stroke-width", 2)
-          .attr("stroke", "black")
-      }
+    var xMinValue = xMin;
+    var yMinValue = yLine + slope * xMin;
+    if (yMinValue > yMax){
+      xMinValue = (yMax-yLine)/slope;
+      yMinValue = yMin;
+    }
 
+    if (yMinValue < yMin){
+      xMinValue = (yMin-yLine)/slope;
+      yMinValue = yMin;
+    }
 
-  });
+    svg.append("line")
+         .attr("x1", x(xMinValue))
+         .attr("y1", y(yMinValue))
+         .attr("x2", x(xMaxValue))
+         .attr("y2", y(yMaxValue))
+         .attr("stroke-width", 2)
+         .attr("stroke", "black");
+  }
 }
 
 // line plot
 // maximum 80 lines
-function plot_lines(filename, target, title, footer, xTitle, yTitle, no_lines, yValues){
+function plot_lines(data, target, title, footer, xTitle, yTitle, no_lines, yValues){
   'use strict';
   var margin = {top: 70, right: 50, bottom: 75, left: 50},
-    width = 600 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;      
-    var legend_width = 17   
+  width = 600 - margin.left - margin.right,
+  height = 500 - margin.top - margin.bottom;
+  var legend_width = 17;
 
   var x = d3.scale.linear()
-    .range([0, width]);
+            .range([0, width]);
   var y = d3.scale.linear()
-    .range([height, 0]);
+            .range([height, 0]);
 
   var color = d3.scale.category10();
 
-  if (title === 'Open Reading Frames in all 6 Frames') {  
+  if (title === 'Open Reading Frames in all 6 Frames') {
     var xAxis = d3.svg.axis()
-      .scale(x)
-      .orient("bottom")
-      .ticks(0); 
+                  .scale(x)
+                  .orient("bottom")
+                  .ticks(0);
   } else {
     var xAxis = d3.svg.axis()
-      .scale(x)
-      .orient("bottom")
-      .ticks(5);
+                  .scale(x)
+                  .orient("bottom")
+                  .ticks(5);
   }
 
   var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left")
-    .ticks(5)
+                .scale(y)
+                .orient("left")
+                .ticks(5);
 
   var svg = d3.select("#".concat(target)).append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-    .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
-  svg.append("text")
-    .attr("x", (width / 2))             
-    .attr("y", -35)
-    .attr("text-anchor", "middle")  
-    .style("font-size", "16px") 
-    .text(title);   
-
-  d3.json(filename, function(error, data) {
-
-    var idx = -1
-
-    x.domain([0, d3.max(data, function(d) { return d.stop; })]);
-    y.domain(d3.extent(data, function(d) { return d.y; })).nice();
+              .attr("width", width + margin.left + margin.right)
+              .attr("height", height + margin.top + margin.bottom)
+              .append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
+  svg.append("text")
+       .attr("x", (width / 2))
+       .attr("y", -35)
+       .attr("text-anchor", "middle")
+       .style("font-size", "16px")
+       .text(title);
+
+  var idx = -1;
+
+  x.domain([0, d3.max(data, function(d) { return d.stop; })]);
+  y.domain(d3.extent(data, function(d) { return d.y; })).nice();
+
+  svg.append("g")
+       .attr("class", "x axis")
+       .attr("transform", "translate(0," + (height + height/no_lines) + ")")
+       .call(xAxis)
+     .append("text")
+       .attr("class", "label")
+       .attr("x", (width-xTitle.length)/2-50)
+       .attr("y", 35)
+       .style("text-anchor", "start")
+       .text(xTitle);
+
+  if (yValues !== null){
     svg.append("g")
-      .attr("class", "x axis")
-      .attr("transform", "translate(0," + (height + height/no_lines) + ")")
-      .call(xAxis)
-    .append("text")
-      .attr("class", "label")
-      .attr("x", (width-xTitle.length)/2-50)
-      .attr("y", 35)
-      .style("text-anchor", "start")
-      .text(xTitle)
-      
-      if (yValues != ""){
-      svg.append("g")
-        .attr("class", "y axis")
-        .call(yAxis
-            .ticks(yValues.length)
-        .tickFormat(function (d) {                     
-               idx = idx + 1;
-           return yValues[idx];
+         .attr("class", "y axis")
+         .call(yAxis.ticks(yValues.length)
+         .tickFormat(function (d) {
+            idx = idx + 1;
+            return yValues[idx];
           }))
-      .append("text")
-        .attr("class", "label")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -(height+yTitle.length)/2-50)
-        .attr("y", -40)
-        .style("text-anchor", "start")
-        .text(yTitle)
-    }
-    else{
+       .append("text")
+         .attr("class", "label")
+         .attr("transform", "rotate(-90)")
+         .attr("x", -(height+yTitle.length)/2-50)
+         .attr("y", -40)
+         .style("text-anchor", "start")
+         .text(yTitle);
+    } else {
       svg.append("g")
-        .attr("class", "y axis")
-        .call(yAxis)
-      .append("text")
-        .attr("class", "label")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -(height+yTitle.length)/2)
-        .attr("y", -40)
-        .style("text-anchor", "start")
-        .text(yTitle)
+           .attr("class", "y axis")
+           .call(yAxis)
+         .append("text")
+           .attr("class", "label")
+           .attr("transform", "rotate(-90)")
+           .attr("x", -(height+yTitle.length)/2)
+           .attr("y", -40)
+           .style("text-anchor", "start")
+           .text(yTitle);
     }
 
     svg.selectAll(".dot")
-      .data(data)
+       .data(data)
     .enter().append("line")
-          .attr("x1", function(d) { return x(d.start); })
-          .attr("y1", function(d) { return y(d.y); })                 
-          .attr("x2", function(d) { return x(d.stop); })
-          .attr("x2", function(d) { return x(d.stop); })
-          .attr("y2", function(d) { return y(d.y); })                 
-          .attr("stroke-width", function(d) {
-          if (d.dotted == undefined) {
-            if (d.color == "red" ) {
-              return height/no_lines/2.5
-            } else {
-              return height/no_lines
-            }
-          } else {
-            return height/no_lines/5
-          }
-          })
-          .style("stroke-dasharray", function(d) { if (d.dotted == undefined) return ("0, 0"); return ("2, 6");}) 
-          .attr("stroke", function(d) { return color_beautification(d.color); })
-  });
-
-  // add legend   
+            .attr("x1", function(d) { return x(d.start); })
+            .attr("y1", function(d) { return y(d.y); })
+            .attr("x2", function(d) { return x(d.stop); })
+            .attr("x2", function(d) { return x(d.stop); })
+            .attr("y2", function(d) { return y(d.y); })
+            .attr("stroke-width", function(d) {
+              if (d.dotted == undefined) {
+                if (d.color == "red" ) {
+                  return height/no_lines/2.5;
+                } else {
+                  return height/no_lines;
+                }
+              } else {
+                return height/no_lines/5;
+              }
+            })
+            .style("stroke-dasharray", function(d) { if (d.dotted == undefined) return ("0, 0"); return ("2, 6");})
+            .attr("stroke", function(d) { return color_beautification(d.color); });
+
+  // add legend
   var legend = svg.append("g")
-    .attr("class", "legend")
-    .attr("height", 100)
-    .attr("width", 100)
-      .attr('transform', 'translate(-20,50)')    
-    
-  var h = 0
-
-  var offset = 40
-  var total_len = 0
+                  .attr("class", "legend")
+                  .attr("height", 100)
+                  .attr("width", 100)
+                  .attr('transform', 'translate(-20,50)');
+
+  var h = 0;
+
+  var offset = 40;
+  var total_len = 0;
   for (var i = 0; i < footer.length; i++) {
-  var array = footer[i].split(","); 
-  total_len = total_len + array[0].length*8 + 15;
+    var array = footer[i].split(",");
+    total_len = total_len + array[0].length*8 + 15;
   }
 
   for (var i = 0; i < footer.length; i++) {
-
-  var array = footer[i].split(","); 
-  svg.append("rect")
-      .attr("x", (width-total_len)/2 + offset)             
-      .attr("y", -30)
-      .attr("width", 10)
-      .attr("height", 10)
-      .style("fill", color_beautification(array[1].replace(/\s+/g, '')))
-    
-  svg.append("text")
-      .attr("x", (width-total_len)/2 + offset + 15)             
-      .attr("y", -20)
-      .text(array[0]);
-    offset = offset + array[0].length*8 + 15
-
+    var array = footer[i].split(",");
+    svg.append("rect")
+         .attr("x", (width-total_len)/2 + offset)
+         .attr("y", -30)
+         .attr("width", 10)
+         .attr("height", 10)
+         .style("fill", color_beautification(array[1].replace(/\s+/g, '')));
+
+    svg.append("text")
+         .attr("x", (width-total_len)/2 + offset + 15)
+         .attr("y", -20)
+         .text(array[0]);  
+    offset = offset + array[0].length*8 + 15;
   }
 }
 
 // line plot
 // maximum 80 lines
-function plot_align(filename, target, title, footer, xTitle, yTitle, no_lines, yValues){
+function plot_align(data, target, title, footer, xTitle, yTitle, no_lines, yValues){
   'use strict';
 
   var margin = {top: 75, right: 50, bottom: 75, left: 150},
-    width = 600 - margin.left - margin.right,
-    height = 300 - margin.top - margin.bottom;      
-    var legend_width = 17   
+  width = 600 - margin.left - margin.right,
+  height = 300 - margin.top - margin.bottom;
+  var legend_width = 17;
 
   var x = d3.scale.linear()
-    .range([0, width]);
+            .range([0, width]);
   var y = d3.scale.linear()
-    .range([height, 0]);
+            .range([height, 0]);
 
   var color = d3.scale.category10();
 
   var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("bottom")
-    .ticks(5);
+                    .scale(x)
+                    .orient("bottom")
+                    .ticks(5);
 
   var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left")
-    .ticks(5)
+                    .scale(y)
+                    .orient("left")
+                    .ticks(5);
 
   var svg = d3.select("#".concat(target)).append("svg")
-    .style("vertical-align", "top") 
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-    .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
-  svg.append("text")
-    .attr("x", (width / 2))             
-    .attr("y", -35)
-    .attr("text-anchor", "middle")  
-    .style("font-size", "16px") 
-    .text(title);   
-
-  d3.json(filename, function(error, data) {
-
-    var idx = -1
-
-    x.domain([0, d3.max(data, function(d) { return d.stop; })]);
-    y.domain(d3.extent(data, function(d) { return d.y; })).nice();
+              .style("vertical-align", "top")
+              .attr("width", width + margin.left + margin.right)
+              .attr("height", height + margin.top + margin.bottom)
+              .append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
+  svg.append("text")
+       .attr("x", (width / 2))
+       .attr("y", -35)
+       .attr("text-anchor", "middle")
+       .style("font-size", "16px")
+       .text(title);
+
+  var idx = -1;
+
+  x.domain([0, d3.max(data, function(d) { return d.stop; })]);
+  y.domain(d3.extent(data, function(d) { return d.y; })).nice();
+
+  svg.append("g")
+       .attr("class", "x axis")
+       .attr("transform", "translate(0," + (height+height/no_lines) + ")")
+       .call(xAxis)
+     .append("text")
+       .attr("class", "label")
+       .attr("x", (width-xTitle.length)/2-50)
+       .attr("y", 35)
+       .style("text-anchor", "start")
+       .text(xTitle);
+
+  if (yValues !== null){
     svg.append("g")
-      .attr("class", "x axis")
-      .attr("transform", "translate(0," + (height+height/no_lines) + ")")
-      .call(xAxis)
-    .append("text")
-      .attr("class", "label")
-      .attr("x", (width-xTitle.length)/2-50)
-      .attr("y", 35)
-      .style("text-anchor", "start")
-      .text(xTitle)
-      
-      if (yValues != ""){
-      svg.append("g")
-        .attr("class", "y axis")
-        .call(yAxis
-            .ticks(yValues.length)
-        .tickFormat(function (d) {                     
-               idx = idx + 1;
-           return yValues[idx];
-          }))
-      .append("text")
-        .attr("class", "label")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -(height+yTitle.length)/2-50)
-        .attr("y", -40)
-        .style("text-anchor", "start")
-        .text(yTitle)
-    }
-    else{
-      svg.append("g")
-        .attr("class", "y axis")
-        .call(yAxis)
-      .append("text")
-        .attr("class", "label")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -(height+yTitle.length)/2-50)
-        .attr("y", -40)
-        .style("text-anchor", "start")
-        .text(yTitle)
-    }
-
-    svg.selectAll(".dot")
-      .data(data)
-    .enter().append("line")
-          .attr("x1", function(d) { return x(d.start); })
-          .attr("y1", function(d) { return y(d.y); })                 
-          .attr("x2", function(d) { return x(d.stop); })
-          .attr("y2", function(d) { return y(d.y); })                 
-          .attr("stroke-width", function(d) { if (d.height == -1) return height/no_lines; return (height/no_lines * d.height) ; })
-          .attr("stroke", function(d) { return color_beautification(d.color); })
-  });
+         .attr("class", "y axis")
+         .call(yAxis.ticks(yValues.length)
+                    .tickFormat(function (d) {
+                      idx = idx + 1;
+                      return yValues[idx];
+                    }))
+         .append("text")
+         .attr("class", "label")
+         .attr("transform", "rotate(-90)")
+         .attr("x", -(height+yTitle.length)/2-50)
+         .attr("y", -40)
+         .style("text-anchor", "start")
+         .text(yTitle);
+  } else {
+    svg.append("g")
+         .attr("class", "y axis")
+         .call(yAxis)
+       .append("text")
+         .attr("class", "label")
+         .attr("transform", "rotate(-90)")
+         .attr("x", -(height+yTitle.length)/2-50)
+         .attr("y", -40)
+         .style("text-anchor", "start")
+         .text(yTitle);
+  }
 
-  var offset = 0
-  var total_len = 0
+  svg.selectAll(".dot")
+     .data(data)
+     .enter().append("line")
+               .attr("x1", function(d) { return x(d.start); })
+               .attr("y1", function(d) { return y(d.y); })
+               .attr("x2", function(d) { return x(d.stop); })
+               .attr("y2", function(d) { return y(d.y); })
+               .attr("stroke-width", function(d) { if (d.height == -1) return height/no_lines; return (height/no_lines * d.height) ; })
+               .attr("stroke", function(d) { return color_beautification(d.color); });
+
+  var offset = 0;
+  var total_len = 0;
   for (var i = 0; i < footer.length; i++) {
-  var array = footer[i].split(","); 
-  total_len = total_len + array[0].length*8 + 15;
+    var array = footer[i].split(",");
+    total_len = total_len + array[0].length*8 + 15;
   }
 
   for (var i = 0; i < footer.length; i++) {
-
-  var array = footer[i].split(","); 
-  svg.append("rect")
-      .attr("x", (width-total_len)/2 + offset)             
-      .attr("y", -30)
-      .attr("width", 10)
-      .attr("height", 10)
-      .style("fill", color_beautification(array[1].replace(/\s+/g, '')))
-    
-  svg.append("text")
-      .attr("x", (width-total_len)/2 + offset + 15)             
-      .attr("y", -20)
-      .text(array[0]);
-    offset = offset + array[0].length*8 + 15
+    var array = footer[i].split(",");
+    svg.append("rect")
+         .attr("x", (width-total_len)/2 + offset)
+         .attr("y", -30)
+         .attr("width", 10)
+         .attr("height", 10)
+         .style("fill", color_beautification(array[1].replace(/\s+/g, '')));
+
+    svg.append("text")
+         .attr("x", (width-total_len)/2 + offset + 15)
+         .attr("y", -20)
+         .text(array[0]);
+    offset = offset + array[0].length*8 + 15;
   }
-}
+}