From a68d7428c33fb3f40f8577d466c3c800238a73ee Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 29 Feb 2016 21:58:25 -0800
Subject: [PATCH] Javascript refactor

---
 panoramix/assets/javascripts/dashboard.js     |   2 +-
 .../assets/javascripts/modules/panoramix.js   | 217 +++++++++++-------
 panoramix/assets/visualizations/big_number.js |  20 +-
 .../assets/visualizations/directed_force.js   | 208 ++++++++---------
 panoramix/assets/visualizations/filter_box.js |  87 ++++---
 panoramix/assets/visualizations/heatmap.js    |  14 +-
 panoramix/assets/visualizations/iframe.js     |   6 +-
 panoramix/assets/visualizations/markup.js     |   2 +-
 panoramix/assets/visualizations/nvd3_vis.js   |  12 +-
 .../visualizations/parallel_coordinates.js    | 122 +++++-----
 .../assets/visualizations/pivot_table.js      |   2 +-
 panoramix/assets/visualizations/sankey.js     |   4 +-
 panoramix/assets/visualizations/sunburst.js   | 143 ++++++------
 panoramix/assets/visualizations/table.js      | 102 ++++----
 panoramix/assets/visualizations/word_cloud.js |  58 ++---
 panoramix/assets/visualizations/world_map.js  |  10 +-
 16 files changed, 533 insertions(+), 476 deletions(-)

diff --git a/panoramix/assets/javascripts/dashboard.js b/panoramix/assets/javascripts/dashboard.js
index 72fd041e04ea..f9eeb3ef2f5a 100644
--- a/panoramix/assets/javascripts/dashboard.js
+++ b/panoramix/assets/javascripts/dashboard.js
@@ -31,7 +31,7 @@ var Dashboard = function (dashboardData) {
     },
     setFilter: function(slice_id, col, vals) {
       console.log([slice_id, col, vals]);
-      this.addFilter(slice_id, col, vals, false)
+      this.addFilter(slice_id, col, vals, false);
     },
     addFilter: function(slice_id, col, vals, merge) {
       if (merge === undefined) {
diff --git a/panoramix/assets/javascripts/modules/panoramix.js b/panoramix/assets/javascripts/modules/panoramix.js
index ffb34732fa3a..8500f337dfcd 100644
--- a/panoramix/assets/javascripts/modules/panoramix.js
+++ b/panoramix/assets/javascripts/modules/panoramix.js
@@ -1,31 +1,32 @@
-var $  = require('jquery'), jQuery = $;
+var $ = require('jquery'),
+  jQuery = $;
 var d3 = require('d3');
 
 // vis sources
 var sourceMap = {
-  area:           'nvd3_vis.js',
-  bar:            'nvd3_vis.js',
-  bubble:         'nvd3_vis.js',
-  big_number:     'big_number.js',
-  compare:        'nvd3_vis.js',
-  dist_bar:       'nvd3_vis.js',
+  area: 'nvd3_vis.js',
+  bar: 'nvd3_vis.js',
+  bubble: 'nvd3_vis.js',
+  big_number: 'big_number.js',
+  compare: 'nvd3_vis.js',
+  dist_bar: 'nvd3_vis.js',
   directed_force: 'directed_force.js',
-  filter_box:     'filter_box.js',
-  heatmap:        'heatmap.js',
-  iframe:         'iframe.js',
-  line:           'nvd3_vis.js',
-  markup:         'markup.js',
-  para:           'parallel_coordinates.js',
-  pie:            'nvd3_vis.js',
-  pivot_table:    'pivot_table.js',
-  sankey:         'sankey.js',
-  sunburst:       'sunburst.js',
-  table:          'table.js',
-  word_cloud:     'word_cloud.js',
-  world_map:      'world_map.js',
+  filter_box: 'filter_box.js',
+  heatmap: 'heatmap.js',
+  iframe: 'iframe.js',
+  line: 'nvd3_vis.js',
+  markup: 'markup.js',
+  para: 'parallel_coordinates.js',
+  pie: 'nvd3_vis.js',
+  pivot_table: 'pivot_table.js',
+  sankey: 'sankey.js',
+  sunburst: 'sunburst.js',
+  table: 'table.js',
+  word_cloud: 'word_cloud.js',
+  world_map: 'world_map.js',
 };
 
-var color = function(){
+var color = function() {
   // Color related utility functions go in this object
   var bnbColors = [
     //rausch    hackb      kazan      babu      lima        beach     barol
@@ -38,116 +39,131 @@ var color = function(){
     'fire': ['white', 'yellow', 'red', 'black'],
     'white_black': ['white', 'black'],
     'black_white': ['black', 'white'],
-  }
+  };
   var colorBnb = function() {
     // Color factory
     var seen = {};
     return function(s) {
       // next line is for dashed series that should have the same color
       s = s.replace('---', '');
-      if(seen[s] === undefined)
+      if (seen[s] === undefined)
         seen[s] = Object.keys(seen).length;
       return this.bnbColors[seen[s] % this.bnbColors.length];
     };
   };
-  var colorScalerFactory = function (colors, data, accessor){
+  var colorScalerFactory = function(colors, data, accessor) {
     // Returns a linear scaler our of an array of color
-    if(!Array.isArray(colors))
+    if (!Array.isArray(colors)) {
       colors = spectrums[colors];
-    if(data !== undefined)
-      var ext = d3.extent(data, accessor);
-    else
-      var ext = [0,1];
+    }
+
+    var ext = [0, 1];
+    if (data !== undefined) {
+      ext = d3.extent(data, accessor);
+    }
 
     var points = [];
     var chunkSize = (ext[1] - ext[0]) / colors.length;
-    $.each(colors, function(i, c){
-      points.push(i * chunkSize)
+    $.each(colors, function(i, c) {
+      points.push(i * chunkSize);
     });
     return d3.scale.linear().domain(points).range(colors);
-  }
+  };
   return {
     bnbColors: bnbColors,
     category21: colorBnb(),
     colorScalerFactory: colorScalerFactory,
-  }
+  };
 };
 
 var px = (function() {
 
   var visualizations = {};
-  var dashboard = undefined;
-  var slice = undefined;
+  var dashboard;
+  var slice;
 
   function getParam(name) {
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
       results = regex.exec(location.search);
-      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }
 
-  function UTC(dttm){
-    return new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(),  dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
+  function UTC(dttm) {
+    return new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
   }
   var tickMultiFormat = d3.time.format.multi([
-    [".%L", function(d) { return d.getMilliseconds(); }], // If there are millisections, show  only them
-    [":%S", function(d) { return d.getSeconds(); }], // If there are seconds, show only them
-    ["%a %b %d, %I:%M %p", function(d) { return d.getMinutes()!=0; }], // If there are non-zero minutes, show Date, Hour:Minute [AM/PM]
-      ["%a %b %d, %I %p", function(d) { return d.getHours() != 0; }], // If there are hours that are multiples of 3, show date and AM/PM
-        ["%a %b %d, %Y", function(d) { return d.getDate() != 1; }], // If not the first of the month, do "month day, year."
-          ["%B %Y", function(d) { return d.getMonth() != 0 && d.getDate() == 1; }], // If the first of the month, do "month day, year."
-            ["%Y", function(d) { return true; }] // fall back on month, year
+    [".%L", function(d) {
+      return d.getMilliseconds();
+    }], // If there are millisections, show  only them
+    [":%S", function(d) {
+      return d.getSeconds();
+    }], // If there are seconds, show only them
+    ["%a %b %d, %I:%M %p", function(d) {
+      return d.getMinutes() !== 0;
+    }], // If there are non-zero minutes, show Date, Hour:Minute [AM/PM]
+    ["%a %b %d, %I %p", function(d) {
+      return d.getHours() !== 0;
+    }], // If there are hours that are multiples of 3, show date and AM/PM
+    ["%a %b %d, %Y", function(d) {
+      return d.getDate() !== 1;
+    }], // If not the first of the month, do "month day, year."
+    ["%B %Y", function(d) {
+      return d.getMonth() !== 0 && d.getDate() === 1;
+    }], // If the first of the month, do "month day, year."
+    ["%Y", function(d) {
+      return true;
+    }] // fall back on month, year
   ]);
+
   function formatDate(dttm) {
     var d = UTC(new Date(dttm));
     //d = new Date(d.getTime() - 1 * 60 * 60 * 1000);
     return tickMultiFormat(d);
   }
+
   function timeFormatFactory(d3timeFormat) {
-    var f = d3.time.format(d3timeFormat)
-    return function(dttm){
+    var f = d3.time.format(d3timeFormat);
+    return function(dttm) {
       var d = UTC(new Date(dttm));
       return f(d);
     };
   }
 
-  var Slice = function(data, dashboard){
+  var Slice = function(data, dashboard) {
     var timer;
     var token = $('#' + data.token);
     var container_id = data.token + '_con';
     var selector = '#' + container_id;
     var container = $(selector);
     var slice_id = data.slice_id;
-    var name = data['viz_name'];
+    var name = data.viz_name;
     var dttm = 0;
-    var timer;
-    var stopwatch = function () {
+    var stopwatch = function() {
       dttm += 10;
       var num = dttm / 1000;
       $('#timer').text(num.toFixed(2) + " sec");
-    }
+    };
     var qrystr = '';
     var always = function(data) {
       //Private f, runs after done and error
       clearInterval(timer);
       $('#timer').removeClass('btn-warning');
-    }
+    };
     slice = {
       data: data,
       container: container,
       container_id: container_id,
       selector: selector,
-      querystring: function(){
+      querystring: function() {
         var parser = document.createElement('a');
         parser.href = data.json_endpoint;
-        if (dashboard !== undefined){
+        if (dashboard !== undefined) {
           var flts = encodeURIComponent(JSON.stringify(dashboard.filters));
           qrystr = parser.search + "&extra_filters=" + flts;
-        }
-        else if ($('#query').length == 0){
+        } else if ($('#query').length === 0) {
           qrystr = parser.search;
-        }
-        else {
+        } else {
           qrystr = '?' + $('#query').serialize();
         }
         return qrystr;
@@ -158,34 +174,41 @@ var px = (function() {
         var endpoint = parser.pathname + this.querystring() + "&json=true";
         return endpoint;
       },
-      done: function (data) {
+      done: function(data) {
         clearInterval(timer);
-        token.find("img.loading").hide()
+        token.find("img.loading").hide();
         container.show();
-        if(data !== undefined)
+        if (data !== undefined) {
           $("#query_container").html(data.query);
+        }
         $('#timer').removeClass('btn-warning');
         $('#timer').addClass('btn-success');
         $('span.query').removeClass('disabled');
-        $('#json').click(function(){window.location=data.json_endpoint});
-        $('#standalone').click(function(){window.location=data.standalone_endpoint});
-        $('#csv').click(function(){window.location=data.csv_endpoint});
+        $('#json').click(function() {
+          window.location = data.json_endpoint;
+        });
+        $('#standalone').click(function() {
+          window.location = data.standalone_endpoint;
+        });
+        $('#csv').click(function() {
+          window.location = data.csv_endpoint;
+        });
         $('.btn-group.results span').removeAttr('disabled');
         always(data);
       },
-      error: function (msg) {
+      error: function(msg) {
         token.find("img.loading").hide();
-        var err = '<div class="alert alert-danger">' + msg  + '</div>';
+        var err = '<div class="alert alert-danger">' + msg + '</div>';
         container.html(err);
         container.show();
         $('span.query').removeClass('disabled');
         $('#timer').addClass('btn-danger');
         always(data);
       },
-      width: function(){
+      width: function() {
         return token.width();
       },
-      height: function(){
+      height: function() {
         var others = 0;
         var widget = container.parents('.widget');
         var slice_description = widget.find('.slice_description');
@@ -195,7 +218,7 @@ var px = (function() {
         return widget.height() - others;
       },
       render: function() {
-        $('.btn-group.results span').attr('disabled','disabled');
+        $('.btn-group.results span').attr('disabled', 'disabled');
         token.find("img.loading").show();
         container.hide();
         container.html('');
@@ -213,27 +236,27 @@ var px = (function() {
         this.viz.resize();
       },
       addFilter: function(col, vals) {
-        if(dashboard !== undefined)
+        if (dashboard !== undefined)
           dashboard.addFilter(slice_id, col, vals);
       },
       setFilter: function(col, vals) {
-        if(dashboard !== undefined)
+        if (dashboard !== undefined)
           dashboard.setFilter(slice_id, col, vals);
       },
       clearFilter: function() {
-        if(dashboard !== undefined)
+        if (dashboard !== undefined)
           delete dashboard.clearFilter(slice_id);
       },
       removeFilter: function(col, vals) {
-        if(dashboard !== undefined)
+        if (dashboard !== undefined)
           delete dashboard.removeFilter(slice_id, col, vals);
       },
     };
     var visType = data.form_data.viz_type;
     px.registerViz(visType);
-    slice['viz'] = visualizations[data.form_data.viz_type](slice);
+    slice.viz = visualizations[data.form_data.viz_type](slice);
     return slice;
-  }
+  };
 
   function registerViz(name) {
     var visSource = sourceMap[name];
@@ -243,12 +266,48 @@ var px = (function() {
       if (typeof visFactory === 'function') {
         visualizations[name] = visFactory;
       }
-    }
-    else {
+    } else {
       console.error("require(", visType, ") failed.");
     }
   }
 
+  function prepForm() {
+    var i = 1;
+    // Assigning the right id to form elements in filters
+    $("#filters > div").each(function() {
+      $(this).attr("id", function() {
+        return "flt_" + i;
+      });
+      $(this).find("#flt_col_0")
+        .attr("id", function() {
+          return "flt_col_" + i;
+        })
+        .attr("name", function() {
+          return "flt_col_" + i;
+        });
+      $(this).find("#flt_op_0")
+        .attr("id", function() {
+          return "flt_op_" + i;
+        })
+        .attr("name", function() {
+          return "flt_op_" + i;
+        });
+      $(this).find("#flt_eq_0")
+        .attr("id", function() {
+          return "flt_eq_" + i;
+        })
+        .attr("name", function() {
+          return "flt_eq_" + i;
+        });
+      i++;
+    });
+  }
+
+  function renderSlice() {
+    prepForm();
+    slice.render();
+  }
+
   // Export public functions
   return {
     registerViz: registerViz,
@@ -257,7 +316,7 @@ var px = (function() {
     timeFormatFactory: timeFormatFactory,
     color: color(),
     getParam: getParam,
-  }
+  };
 })();
 
 module.exports = px;
diff --git a/panoramix/assets/visualizations/big_number.js b/panoramix/assets/visualizations/big_number.js
index 8b0d9038003e..98f183fdc2b1 100644
--- a/panoramix/assets/visualizations/big_number.js
+++ b/panoramix/assets/visualizations/big_number.js
@@ -13,14 +13,14 @@ function bigNumberVis(slice) {
   function render() {
     d3.json(slice.jsonEndpoint(), function(error, payload){
       //Define the percentage bounds that define color from red to green
-      if (error != null){
+      if (error !== null){
         slice.error(error.responseText);
         return '';
       }
       var fd = payload.form_data;
       var json = payload.data;
       var color_range = [-1, 1];
-      var compare_pos = -23
+      var compare_pos = -23;
       var target_url = 'd3js.org';
 
       var f = d3.format(fd.y_axis_format);
@@ -66,12 +66,12 @@ function bigNumberVis(slice) {
           .attr('stroke-linecap',"round")
           .attr('stroke', "grey");
 
-      var g = svg.append('g')
+      g = svg.append('g')
          .attr('class', 'digits')
          .attr('opacity', 1);
 
       var y = height / 2;
-      if (v_compare != null) {
+      if (v_compare !== null) {
         y = (height / 8) * 3;
       }
 
@@ -91,7 +91,7 @@ function bigNumberVis(slice) {
       var c = scale_color(v_compare);
 
       //Printing compare %
-      if (v_compare != null) {
+      if (v_compare !== null) {
         g.append('text')
           .attr('x', width / 2)
           .attr('y', (height / 16) *12)
@@ -103,7 +103,7 @@ function bigNumberVis(slice) {
       }
 
       var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
-      var g = g_axis.append('g');
+      g = g_axis.append('g');
       var x_axis = d3.svg.axis()
         .scale(scale_x)
         .orient('bottom')
@@ -112,7 +112,7 @@ function bigNumberVis(slice) {
       g.call(x_axis);
       g.attr('transform', 'translate(0,' + (height - margin) + ')');
 
-      var g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
+      g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
       var y_axis = d3.svg.axis()
         .scale(scale_y)
         .orient('left')
@@ -143,12 +143,12 @@ function bigNumberVis(slice) {
       });
       slice.done(payload);
     });
-  };
+  }
 
   return {
     render: render,
     resize: render,
-  }
-};
+  };
+}
 
 module.exports = bigNumberVis;
diff --git a/panoramix/assets/visualizations/directed_force.js b/panoramix/assets/visualizations/directed_force.js
index 812cc769eded..1f63e8503a6f 100644
--- a/panoramix/assets/visualizations/directed_force.js
+++ b/panoramix/assets/visualizations/directed_force.js
@@ -7,15 +7,15 @@ require('./directed_force.css');
 /* Modified from http://bl.ocks.org/d3noob/5141278 */
 function directedForceVis(slice) {
   var div = d3.select(slice.selector);
-  var link_length = slice.data.form_data['link_length'] || 200;
-  var charge = slice.data.form_data['charge'] || -500;
+  var link_length = slice.data.form_data.link_length || 200;
+  var charge = slice.data.form_data.charge || -500;
 
   var render = function() {
     var width = slice.width();
     var height = slice.height() - 25;
     d3.json(slice.jsonEndpoint(), function(error, json) {
 
-      if (error != null){
+      if (error !== null){
         slice.error(error.responseText);
         return '';
       }
@@ -23,134 +23,134 @@ function directedForceVis(slice) {
       var nodes = {};
       // Compute the distinct nodes from the links.
       links.forEach(function(link) {
-          link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
-          link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
-          link.value = +link.value;
-
-          var target_name = link.target.name;
-          var source_name = link.source.name;
-
-          if (nodes[target_name]['total'] === undefined) {
-            nodes[target_name]['total'] = link.value;
-          }
-          if (nodes[source_name]['total'] === undefined) {
-            nodes[source_name]['total'] = 0;
-          }
-          if (nodes[target_name]['max'] === undefined) {
-            nodes[target_name]['max'] = 0;
-          }
-          if (link.value > nodes[target_name]['max']) {
-            nodes[target_name]['max'] = link.value;
-          }
-          if (nodes[target_name]['min'] === undefined) {
-            nodes[target_name]['min'] = 0;
-          }
-          if (link.value > nodes[target_name]['min']) {
-            nodes[target_name]['min'] = link.value;
-          }
-
-          nodes[target_name]['total'] += link.value;
+        link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
+        link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
+        link.value = +link.value;
+
+        var target_name = link.target.name;
+        var source_name = link.source.name;
+
+        if (nodes[target_name].total === undefined) {
+          nodes[target_name].total = link.value;
+        }
+        if (nodes[source_name].total === undefined) {
+          nodes[source_name].total = 0;
+        }
+        if (nodes[target_name].max === undefined) {
+          nodes[target_name].max = 0;
+        }
+        if (link.value > nodes[target_name].max) {
+          nodes[target_name].max = link.value;
+        }
+        if (nodes[target_name].min === undefined) {
+          nodes[target_name].min = 0;
+        }
+        if (link.value > nodes[target_name].min) {
+          nodes[target_name].min = link.value;
+        }
+
+        nodes[target_name].total += link.value;
       });
 
       var force = d3.layout.force()
-          .nodes(d3.values(nodes))
-          .links(links)
-          .size([width, height])
-          .linkDistance(link_length)
-          .charge(charge)
-          .on("tick", tick)
-          .start();
+      .nodes(d3.values(nodes))
+      .links(links)
+      .size([width, height])
+      .linkDistance(link_length)
+      .charge(charge)
+      .on("tick", tick)
+      .start();
 
       var svg = div.append("svg")
-          .attr("width", width)
-          .attr("height", height);
+      .attr("width", width)
+      .attr("height", height);
 
       // build the arrow.
       svg.append("svg:defs").selectAll("marker")
-          .data(["end"])      // Different link/path types can be defined here
-        .enter().append("svg:marker")    // This section adds in the arrows
-          .attr("id", String)
-          .attr("viewBox", "0 -5 10 10")
-          .attr("refX", 15)
-          .attr("refY", -1.5)
-          .attr("markerWidth", 6)
-          .attr("markerHeight", 6)
-          .attr("orient", "auto")
-        .append("svg:path")
-          .attr("d", "M0,-5L10,0L0,5");
+      .data(["end"])      // Different link/path types can be defined here
+      .enter().append("svg:marker")    // This section adds in the arrows
+      .attr("id", String)
+      .attr("viewBox", "0 -5 10 10")
+      .attr("refX", 15)
+      .attr("refY", -1.5)
+      .attr("markerWidth", 6)
+      .attr("markerHeight", 6)
+      .attr("orient", "auto")
+      .append("svg:path")
+      .attr("d", "M0,-5L10,0L0,5");
 
       var edgeScale = d3.scale.linear()
-          .range([0.1, 0.5]);
+      .range([0.1, 0.5]);
       // add the links and the arrows
       var path = svg.append("svg:g").selectAll("path")
-          .data(force.links())
-        .enter().append("svg:path")
-          .attr("class", "link")
-          .style("opacity", function(d){
-            return edgeScale(d.value/d.target.max);
-          })
-          .attr("marker-end", "url(#end)");
+      .data(force.links())
+      .enter().append("svg:path")
+      .attr("class", "link")
+      .style("opacity", function(d){
+        return edgeScale(d.value/d.target.max);
+      })
+      .attr("marker-end", "url(#end)");
 
       // define the nodes
       var node = svg.selectAll(".node")
-          .data(force.nodes())
-        .enter().append("g")
-          .attr("class", "node")
-          .on("mouseenter", function(d){
-              d3.select(this)
-                .select("circle")
-              .transition()
-                .style('stroke-width', 5);
-
-              d3.select(this)
-                .select("text")
-              .transition()
-                .style('font-size', 25);
-          })
-          .on("mouseleave", function(d){
-              d3.select(this)
-                  .select("circle")
-                .transition()
-                  .style('stroke-width', 1.5);
-              d3.select(this)
-                .select("text")
-              .transition()
-                .style('font-size', 12);
-          })
-          .call(force.drag);
+      .data(force.nodes())
+      .enter().append("g")
+      .attr("class", "node")
+      .on("mouseenter", function(d){
+        d3.select(this)
+        .select("circle")
+        .transition()
+        .style('stroke-width', 5);
+
+        d3.select(this)
+        .select("text")
+        .transition()
+        .style('font-size', 25);
+      })
+      .on("mouseleave", function(d){
+        d3.select(this)
+        .select("circle")
+        .transition()
+        .style('stroke-width', 1.5);
+        d3.select(this)
+        .select("text")
+        .transition()
+        .style('font-size', 12);
+      })
+      .call(force.drag);
 
       // add the nodes
       var ext = d3.extent(d3.values(nodes), function(d) { return Math.sqrt(d.total); });
       var circleScale = d3.scale.linear()
-          .domain(ext)
-          .range([3, 30]);
+      .domain(ext)
+      .range([3, 30]);
 
       node.append("circle")
-          .attr("r", function(d){return circleScale(Math.sqrt(d.total));});
+      .attr("r", function(d){return circleScale(Math.sqrt(d.total));});
 
       // add the text
       node.append("text")
-          .attr("x", 6)
-          .attr("dy", ".35em")
-          .text(function(d) { return d.name; });
+      .attr("x", 6)
+      .attr("dy", ".35em")
+      .text(function(d) { return d.name; });
 
       // add the curvy lines
       function tick() {
-          path.attr("d", function(d) {
-              var dx = d.target.x - d.source.x,
-                  dy = d.target.y - d.source.y,
-                  dr = Math.sqrt(dx * dx + dy * dy);
-              return "M" +
-                  d.source.x + "," +
-                  d.source.y + "A" +
-                  dr + "," + dr + " 0 0,1 " +
-                  d.target.x + "," +
-                  d.target.y;
-          });
-
-          node.attr("transform", function(d) {
-            return "translate(" + d.x + "," + d.y + ")";
-          });
+        path.attr("d", function(d) {
+          var dx = d.target.x - d.source.x,
+              dy = d.target.y - d.source.y,
+              dr = Math.sqrt(dx * dx + dy * dy);
+          return "M" +
+            d.source.x + "," +
+            d.source.y + "A" +
+            dr + "," + dr + " 0 0,1 " +
+            d.target.x + "," +
+            d.target.y;
+        });
+
+        node.attr("transform", function(d) {
+          return "translate(" + d.x + "," + d.y + ")";
+        });
       }
 
       slice.done(json);
diff --git a/panoramix/assets/visualizations/filter_box.js b/panoramix/assets/visualizations/filter_box.js
index b3c63d28654f..def4f1ade336 100644
--- a/panoramix/assets/visualizations/filter_box.js
+++ b/panoramix/assets/visualizations/filter_box.js
@@ -5,7 +5,6 @@ var d3 = window.d3 || require('d3');
 require('./filter_box.css');
 
 function filterBox(slice) {
-  var slice = slice;
   var filtersObj = {};
   var d3token = d3.select(slice.selector);
 
@@ -19,55 +18,55 @@ function filterBox(slice) {
       }
       slice.setFilter(filter, vals);
     }
-  }
+  };
 
   var refresh = function() {
-      d3token.selectAll("*").remove();
-      var container = d3token
-        .append('div')
-        .classed('padded', true);
+    d3token.selectAll("*").remove();
+    var container = d3token
+    .append('div')
+    .classed('padded', true);
 
-      $.getJSON(slice.jsonEndpoint(), function(payload) {
-        var maxes = {};
-        for (var filter in payload.data) {
-          var data = payload.data[filter];
-          maxes[filter] = d3.max(data, function(d){return d.metric});
-          var id = 'fltbox__' + filter;
+    $.getJSON(slice.jsonEndpoint(), function(payload) {
+      var maxes = {};
+      for (var filter in payload.data) {
+        var data = payload.data[filter];
+        maxes[filter] = d3.max(data, function(d){return d.metric;});
+        var id = 'fltbox__' + filter;
 
-          var div = container.append('div');
-          div.append("label").text(filter);
-          var sel = div
-            .append('div')
-            .attr('name', filter)
-            .classed('form-control', true)
-            .attr('multiple', '')
-            .attr('id', id);
+        var div = container.append('div');
+        div.append("label").text(filter);
+        var sel = div
+        .append('div')
+        .attr('name', filter)
+        .classed('form-control', true)
+        .attr('multiple', '')
+        .attr('id', id);
 
-          filtersObj[filter] = $('#' + id).select2({
-            placeholder: "Select [" + filter + ']',
-            containment: 'parent',
-            dropdownAutoWidth : true,
-            data:data,
-            multiple: true,
-            formatResult: function(result, container, query, escapeMarkup) {
-                var perc = Math.round((result.metric / maxes[result.filter]) * 100);
-                var style = 'padding: 2px 5px;';
-                style += "background-image: ";
-                style += "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%";
+        filtersObj[filter] = $('#' + id).select2({
+          placeholder: "Select [" + filter + ']',
+          containment: 'parent',
+          dropdownAutoWidth : true,
+          data:data,
+          multiple: true,
+          formatResult: function(result, container, query, escapeMarkup) {
+            var perc = Math.round((result.metric / maxes[result.filter]) * 100);
+            var style = 'padding: 2px 5px;';
+            style += "background-image: ";
+            style += "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%";
 
-                $(container).attr('style', 'padding: 0px; background: white;');
-                $(container).addClass('filter_box');
-                return '<div style="' + style + '"><span>' + result.text + '</span></div>';
-            },
-          })
-          .on('change', fltChanged);
-        }
-        slice.done();
-      })
-      .fail(function(xhr) {
-          slice.error(xhr.responseText);
-        });
-      };
+            $(container).attr('style', 'padding: 0px; background: white;');
+            $(container).addClass('filter_box');
+            return '<div style="' + style + '"><span>' + result.text + '</span></div>';
+          },
+        })
+        .on('change', fltChanged);
+      }
+      slice.done();
+    })
+    .fail(function(xhr) {
+      slice.error(xhr.responseText);
+    });
+  };
   return {
     render: refresh,
     resize: refresh,
diff --git a/panoramix/assets/visualizations/heatmap.js b/panoramix/assets/visualizations/heatmap.js
index 039a2c507c6c..98388860d475 100644
--- a/panoramix/assets/visualizations/heatmap.js
+++ b/panoramix/assets/visualizations/heatmap.js
@@ -15,8 +15,8 @@ function heatmapVis(slice) {
   function refresh() {
     var width = slice.width();
     var height = slice.height();
-    var hmWidth = width - (margins.l + margins.r)
-    var hmHeight = height - (margins.b + margins.t)
+    var hmWidth = width - (margins.l + margins.r);
+    var hmHeight = height - (margins.b + margins.t);
     var fp = d3.format('.3p');
     d3.json(slice.jsonEndpoint(), function(error, payload) {
       var matrix = {};
@@ -109,10 +109,10 @@ function heatmapVis(slice) {
               if(m in matrix && n in matrix[m]) {
                 var obj = matrix[m][n];
                 var s = "";
-                s += "<div><b>" + fd.all_columns_x + ": </b>" + obj.x + "<div>"
-                s += "<div><b>" + fd.all_columns_y +": </b>" + obj.y + "<div>"
-                s += "<div><b>" + fd.metric + ": </b>" + obj.v + "<div>"
-                s += "<div><b>%: </b>" + fp(obj.perc) + "<div>"
+                s += "<div><b>" + fd.all_columns_x + ": </b>" + obj.x + "<div>";
+                s += "<div><b>" + fd.all_columns_y +": </b>" + obj.y + "<div>";
+                s += "<div><b>" + fd.metric + ": </b>" + obj.v + "<div>";
+                s += "<div><b>%: </b>" + fp(obj.perc) + "<div>";
                 return s;
               }
           });
@@ -168,7 +168,7 @@ function heatmapVis(slice) {
             var y = yScale(d.y);
             pixs[x + (y*xScale.domain().length)] = c;
             if (matrix[x] === undefined)
-              matrix[x] = {}
+              matrix[x] = {};
             if (matrix[x][y] === undefined)
               matrix[x][y] = d;
         });
diff --git a/panoramix/assets/visualizations/iframe.js b/panoramix/assets/visualizations/iframe.js
index 546c28230f4a..f2faae8f690a 100644
--- a/panoramix/assets/visualizations/iframe.js
+++ b/panoramix/assets/visualizations/iframe.js
@@ -3,7 +3,7 @@ var $ = window.$ || require('jquery');
 function iframeWidget(slice) {
 
   function refresh() {
-    $('#code').attr('rows', '15')
+    $('#code').attr('rows', '15');
     $.getJSON(slice.jsonEndpoint(), function(payload) {
         slice.container.html('<iframe style="width:100%;"></iframe>');
         var iframe = slice.container.find('iframe');
@@ -14,7 +14,7 @@ function iframeWidget(slice) {
       .fail(function(xhr) {
         slice.error(xhr.responseText);
       });
-  };
+  }
 
   return {
     render: refresh,
@@ -22,4 +22,4 @@ function iframeWidget(slice) {
   };
 }
 
-module.exports = iframeWidget
+module.exports = iframeWidget;
diff --git a/panoramix/assets/visualizations/markup.js b/panoramix/assets/visualizations/markup.js
index 4fe808b4e4d3..3c31ce5a14ef 100644
--- a/panoramix/assets/visualizations/markup.js
+++ b/panoramix/assets/visualizations/markup.js
@@ -12,7 +12,7 @@ function markupWidget(slice) {
       .fail(function(xhr) {
         slice.error(xhr.responseText);
       });
-  };
+  }
 
   return {
     render: refresh,
diff --git a/panoramix/assets/visualizations/nvd3_vis.js b/panoramix/assets/visualizations/nvd3_vis.js
index 6306167980a4..4d54c2b1ec38 100644
--- a/panoramix/assets/visualizations/nvd3_vis.js
+++ b/panoramix/assets/visualizations/nvd3_vis.js
@@ -7,7 +7,7 @@ require('nvd3');
 require('../node_modules/nvd3/build/nv.d3.min.css');
 
 function nvd3Vis(slice) {
-  var chart = undefined;
+  var chart;
   var data = {};
 
   var render = function() {
@@ -29,7 +29,7 @@ function nvd3Vis(slice) {
                 .showMaxMin(fd.x_axis_showminmax)
                 .staggerLabels(false);
             } else {
-              chart = nv.models.lineChart()
+              chart = nv.models.lineChart();
             }
             // To alter the tooltip header
             // chart.interactiveLayer.tooltip.headerFormatter(function(){return '';});
@@ -66,7 +66,7 @@ function nvd3Vis(slice) {
             break;
 
           case 'pie':
-            chart = nv.models.pieChart()
+            chart = nv.models.pieChart();
             colorKey = 'x';
             chart.valueFormat(f);
             if (fd.donut) {
@@ -170,13 +170,13 @@ function nvd3Vis(slice) {
 
         if (fd.contribution || fd.num_period_compare || viz_type == 'compare') {
           chart.yAxis.tickFormat(d3.format('.3p'));
-          if (chart.y2Axis != undefined) {
+          if (chart.y2Axis !== undefined) {
               chart.y2Axis.tickFormat(d3.format('.3p'));
           }
         } else if (fd.y_axis_format) {
           chart.yAxis.tickFormat(d3.format(fd.y_axis_format));
 
-          if (chart.y2Axis != undefined) {
+          if (chart.y2Axis !== undefined) {
             chart.y2Axis.tickFormat(d3.format(fd.y_axis_format));
           }
         }
@@ -212,6 +212,6 @@ function nvd3Vis(slice) {
     render: render,
     resize: update,
   };
-};
+}
 
 module.exports = nvd3Vis;
diff --git a/panoramix/assets/visualizations/parallel_coordinates.js b/panoramix/assets/visualizations/parallel_coordinates.js
index fa80224bd1c8..024be751117c 100644
--- a/panoramix/assets/visualizations/parallel_coordinates.js
+++ b/panoramix/assets/visualizations/parallel_coordinates.js
@@ -9,77 +9,77 @@ require('../vendor/parallel_coordinates/d3.parcoords.css');
 function parallelCoordVis(slice) {
 
   function refresh() {
-      $('#code').attr('rows', '15')
-      $.getJSON(slice.jsonEndpoint(), function(payload) {
-        var data = payload.data;
-        var fd = payload.form_data;
-        var ext = d3.extent(data, function(d){
-          return d[fd.secondary_metric];
-        });
-        ext = [ext[0], (ext[1]-ext[0])/2,ext[1]];
-        var cScale = d3.scale.linear()
-          .domain(ext)
-          .range(['red', 'grey', 'blue'])
-          .interpolate(d3.interpolateLab);
+    $('#code').attr('rows', '15');
+    $.getJSON(slice.jsonEndpoint(), function(payload) {
+      var data = payload.data;
+      var fd = payload.form_data;
+      var ext = d3.extent(data, function(d){
+        return d[fd.secondary_metric];
+      });
+      ext = [ext[0], (ext[1]-ext[0])/2,ext[1]];
+      var cScale = d3.scale.linear()
+      .domain(ext)
+      .range(['red', 'grey', 'blue'])
+      .interpolate(d3.interpolateLab);
 
-        var color = function(d){return cScale(d[fd.secondary_metric])};
-        var container = d3.select(slice.selector);
-        var eff_height = fd.show_datatable ? (slice.height() / 2) : slice.height();
+      var color = function(d){return cScale(d[fd.secondary_metric]);};
+      var container = d3.select(slice.selector);
+      var eff_height = fd.show_datatable ? (slice.height() / 2) : slice.height();
 
-        var div = container.append('div')
-          .attr('id', 'parcoords_' + slice.container_id)
-          .style('height', eff_height + 'px')
-          .classed("parcoords", true);
+      var div = container.append('div')
+      .attr('id', 'parcoords_' + slice.container_id)
+      .style('height', eff_height + 'px')
+      .classed("parcoords", true);
 
-        var parcoords = d3.parcoords()('#parcoords_' + slice.container_id)
-          .width(slice.width())
-          .color(color)
-          .alpha(0.5)
-          .composite("darken")
-          .height(eff_height)
-          .data(payload.data)
-          .render()
-          .createAxes()
-          .shadows()
-          .reorderable()
-          .brushMode("1D-axes");
+      var parcoords = d3.parcoords()('#parcoords_' + slice.container_id)
+      .width(slice.width())
+      .color(color)
+      .alpha(0.5)
+      .composite("darken")
+      .height(eff_height)
+      .data(payload.data)
+      .render()
+      .createAxes()
+      .shadows()
+      .reorderable()
+      .brushMode("1D-axes");
 
-        if (fd.show_datatable) {
-          // create data table, row hover highlighting
-          var grid = d3.divgrid();
-          container.append("div")
-            .datum(data.slice(0,10))
-            .attr('id', "grid")
-            .call(grid)
-            .classed("parcoords", true)
-            .selectAll(".row")
-            .on({
-              "mouseover": function(d) { parcoords.highlight([d]) },
-              "mouseout": parcoords.unhighlight
-            });
-          // update data table on brush event
-          parcoords.on("brush", function(d) {
-            d3.select("#grid")
-              .datum(d.slice(0,10))
-              .call(grid)
-              .selectAll(".row")
-              .on({
-                "mouseover": function(d) { parcoords.highlight([d]) },
-                "mouseout": parcoords.unhighlight
-              });
+      if (fd.show_datatable) {
+        // create data table, row hover highlighting
+        var grid = d3.divgrid();
+        container.append("div")
+        .datum(data.slice(0,10))
+        .attr('id', "grid")
+        .call(grid)
+        .classed("parcoords", true)
+        .selectAll(".row")
+        .on({
+          "mouseover": function(d) { parcoords.highlight([d]); },
+          "mouseout": parcoords.unhighlight
+        });
+        // update data table on brush event
+        parcoords.on("brush", function(d) {
+          d3.select("#grid")
+          .datum(d.slice(0,10))
+          .call(grid)
+          .selectAll(".row")
+          .on({
+            "mouseover": function(d) { parcoords.highlight([d]); },
+            "mouseout": parcoords.unhighlight
           });
-        }
-        slice.done();
-      })
-      .fail(function(xhr) {
-          slice.error(xhr.responseText);
         });
-      };
+      }
+      slice.done();
+    })
+    .fail(function(xhr) {
+      slice.error(xhr.responseText);
+    });
+  }
 
   return {
     render: refresh,
     resize: refresh,
   };
-};
+}
 
 module.exports = parallelCoordVis;
diff --git a/panoramix/assets/visualizations/pivot_table.js b/panoramix/assets/visualizations/pivot_table.js
index 398815faa3b2..57ef64903b73 100644
--- a/panoramix/assets/visualizations/pivot_table.js
+++ b/panoramix/assets/visualizations/pivot_table.js
@@ -4,7 +4,7 @@ var jQuery = window.jQuery = $;
 
 require('datatables');
 require('./pivot_table.css');
-require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css')
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 
 module.exports = function(slice) {
   var container = slice.container;
diff --git a/panoramix/assets/visualizations/sankey.js b/panoramix/assets/visualizations/sankey.js
index dc6cd76b972e..1875cb4a90ad 100644
--- a/panoramix/assets/visualizations/sankey.js
+++ b/panoramix/assets/visualizations/sankey.js
@@ -30,7 +30,7 @@ function sankeyVis(slice) {
       var path = sankey.link();
 
       d3.json(slice.jsonEndpoint(), function(error, json) {
-        if (error != null){
+        if (error !== null){
           slice.error(error.responseText);
           return '';
         }
@@ -98,7 +98,7 @@ function sankeyVis(slice) {
         }
         slice.done(json);
       });
-  }
+  };
   return {
     render: render,
     resize: render,
diff --git a/panoramix/assets/visualizations/sunburst.js b/panoramix/assets/visualizations/sunburst.js
index e9435478e050..e843c5d7c73a 100644
--- a/panoramix/assets/visualizations/sunburst.js
+++ b/panoramix/assets/visualizations/sunburst.js
@@ -1,8 +1,7 @@
 require('./sunburst.css');
 
-/*
-  Modified from http://bl.ocks.org/kerryrodden/7090426
- */
+// Modified from http://bl.ocks.org/kerryrodden/7090426
+
 function sunburstVis(slice) {
   var container = d3.select(slice.selector);
   var render = function() {
@@ -16,29 +15,29 @@ function sunburstVis(slice) {
     container.select("svg").remove();
 
     var vis = container.append("svg:svg")
-      .attr("width", width)
-      .attr("height", height)
-      .append("svg:g")
-      .attr("id", "container")
-      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+    .attr("width", width)
+    .attr("height", height)
+    .append("svg:g")
+    .attr("id", "container")
+    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
     var arcs = vis.append("svg:g").attr("id", "arcs");
     var gMiddleText = vis.append("svg:g").attr("id", "gMiddleText");
 
     var partition = d3.layout.partition()
-      .size([2 * Math.PI, radius * radius])
-      .value(function(d) { return d.m1; });
+    .size([2 * Math.PI, radius * radius])
+    .value(function(d) { return d.m1; });
 
     var arc = d3.svg.arc()
-      .startAngle(function(d) { return d.x; })
-      .endAngle(function(d) { return d.x + d.dx; })
-      .innerRadius(function(d) { return Math.sqrt(d.y); })
-      .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
+    .startAngle(function(d) { return d.x; })
+    .endAngle(function(d) { return d.x + d.dx; })
+    .innerRadius(function(d) { return Math.sqrt(d.y); })
+    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
 
     var ext;
     d3.json(slice.jsonEndpoint(), function(error, json){
 
-      if (error != null){
+      if (error !== null){
         slice.error(error.responseText);
         return '';
       }
@@ -54,31 +53,31 @@ function sunburstVis(slice) {
       // Bounding circle underneath the sunburst, to make it easier to detect
       // when the mouse leaves the parent g.
       arcs.append("svg:circle")
-        .attr("r", radius)
-        .style("opacity", 0);
+      .attr("r", radius)
+      .style("opacity", 0);
 
       // For efficiency, filter nodes to keep only those large enough to see.
       var nodes = partition.nodes(json)
-        .filter(function(d) {
-          return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
-        });
+      .filter(function(d) {
+        return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
+      });
       ext = d3.extent(nodes, function(d){return d.m2 / d.m1;});
 
       var colorScale = d3.scale.linear()
-        .domain([ext[0], ext[0] +  ((ext[1] - ext[0]) / 2), ext[1]])
-        .range(["#00D1C1", "white","#FFB400"]);
+      .domain([ext[0], ext[0] +  ((ext[1] - ext[0]) / 2), ext[1]])
+      .range(["#00D1C1", "white","#FFB400"]);
 
       var path = arcs.data([json]).selectAll("path")
-          .data(nodes)
-        .enter().append("svg:path")
-          .attr("display", function(d) { return d.depth ? null : "none"; })
-          .attr("d", arc)
-          .attr("fill-rule", "evenodd")
-          .style("stroke", "grey")
-          .style("stroke-width", "1px")
-          .style("fill", function(d) { return colorScale(d.m2/d.m1); })
-          .style("opacity", 1)
-          .on("mouseenter", mouseenter);
+      .data(nodes)
+      .enter().append("svg:path")
+      .attr("display", function(d) { return d.depth ? null : "none"; })
+      .attr("d", arc)
+      .attr("fill-rule", "evenodd")
+      .style("stroke", "grey")
+      .style("stroke-width", "1px")
+      .style("fill", function(d) { return colorScale(d.m2/d.m1); })
+      .style("opacity", 1)
+      .on("mouseenter", mouseenter);
 
 
       // Add the mouseleave handler to the bounding circle.
@@ -86,7 +85,7 @@ function sunburstVis(slice) {
 
       // Get total size of the tree = value of root node from partition.
       totalSize = path.node().__data__.value;
-    };
+    }
     var f = d3.format(".3s");
     var fp = d3.format(".3p");
 
@@ -98,19 +97,19 @@ function sunburstVis(slice) {
 
       gMiddleText.selectAll("*").remove();
       gMiddleText.append("text")
-        .classed("middle", true)
-        .style("font-size", "50px")
-        .text(percentageString);
+      .classed("middle", true)
+      .style("font-size", "50px")
+      .text(percentageString);
       gMiddleText.append("text")
-        .classed("middle", true)
-        .style("font-size", "20px")
-        .attr("y", "25")
-        .text("m1: " + f(d.m1) + " | m2: " + f(d.m2));
+      .classed("middle", true)
+      .style("font-size", "20px")
+      .attr("y", "25")
+      .text("m1: " + f(d.m1) + " | m2: " + f(d.m2));
       gMiddleText.append("text")
-        .classed("middle", true)
-        .style("font-size", "15px")
-        .attr("y", "50")
-        .text("m2/m1: " + fp(d.m2/d.m1));
+      .classed("middle", true)
+      .style("font-size", "15px")
+      .attr("y", "50")
+      .text("m2/m1: " + fp(d.m2/d.m1));
 
       var sequenceArray = getAncestors(d);
       function breadcrumbPoints(d, i) {
@@ -130,13 +129,13 @@ function sunburstVis(slice) {
       function updateBreadcrumbs(nodeArray, percentageString) {
         var l = [];
         for(var i=0; i<nodeArray.length; i++){
-          l.push(nodeArray[i].name)
+          l.push(nodeArray[i].name);
         }
-        var s = l.join(' > ')
+        var s = l.join(' > ');
         gMiddleText.append("text")
-          .text(s)
-          .classed("middle", true)
-          .attr("y", -75);
+        .text(s)
+        .classed("middle", true)
+        .attr("y", -75);
       }
       updateBreadcrumbs(sequenceArray, percentageString);
 
@@ -147,12 +146,12 @@ function sunburstVis(slice) {
 
       // Then highlight only those that are an ancestor of the current segment.
       arcs.selectAll("path")
-        .filter(function(node) {
-          return (sequenceArray.indexOf(node) >= 0);
-        })
-        .style("opacity", 1)
-        .style("stroke", "#888")
-        .style("stroke-width", "2px");
+      .filter(function(node) {
+        return (sequenceArray.indexOf(node) >= 0);
+      })
+      .style("opacity", 1)
+      .style("stroke", "#888")
+      .style("stroke-width", "2px");
     }
 
     // Restore everything to full opacity when moving off the visualization.
@@ -160,7 +159,7 @@ function sunburstVis(slice) {
 
       // Hide the breadcrumb trail
       arcs.select("#trail")
-        .style("visibility", "hidden");
+      .style("visibility", "hidden");
 
       gMiddleText.selectAll("*").remove();
 
@@ -170,14 +169,14 @@ function sunburstVis(slice) {
 
       // Transition each segment to full opacity and then reactivate it.
       arcs.selectAll("path")
-        .transition()
-        .duration(200)
-        .style("opacity", 1)
-        .style("stroke", "grey")
-        .style("stroke-width", "1px")
-        .each("end", function() {
-          d3.select(this).on("mouseenter", mouseenter);
-        });
+      .transition()
+      .duration(200)
+      .style("opacity", 1)
+      .style("stroke", "grey")
+      .style("stroke-width", "1px")
+      .each("end", function() {
+        d3.select(this).on("mouseenter", mouseenter);
+      });
     }
 
     // Given a node in a partition layout, return an array of all of its ancestor
@@ -204,14 +203,14 @@ function sunburstVis(slice) {
         }
         var currentNode = root;
         for (var j = 0; j < parts.length; j++) {
-          var children = currentNode["children"];
+          var children = currentNode.children;
           var nodeName = parts[j];
           var childNode;
           if (j + 1 < parts.length) {
             // Not yet at the end of the sequence; move down the tree.
             var foundChild = false;
             for (var k = 0; k < children.length; k++) {
-              if (children[k]["name"] == nodeName) {
+              if (children[k].name == nodeName) {
                 childNode = children[k];
                 foundChild = true;
                 break;
@@ -240,19 +239,19 @@ function sunburstVis(slice) {
             m1 += sums[0];
             m2 += sums[1];
           }
-          node['m1'] = m1;
-          node['m2'] = m2;
+          node.m1 = m1;
+          node.m2 = m2;
         }
-        return [node['m1'], node['m2']]
+        return [node.m1, node.m2];
       }
       recurse(root);
       return root;
-    };
-  }
+    }
+  };
   return {
     render: render,
     resize: render,
   };
-};
+}
 
 module.exports = sunburstVis;
diff --git a/panoramix/assets/visualizations/table.js b/panoramix/assets/visualizations/table.js
index 496c6961b78f..2247100edd9b 100644
--- a/panoramix/assets/visualizations/table.js
+++ b/panoramix/assets/visualizations/table.js
@@ -4,7 +4,7 @@ var jQuery = window.jQuery = $;
 require('datatables');
 // CSS
 require('./table.css');
-require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css')
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 
 function tableVis(slice) {
   var data = slice.data;
@@ -29,62 +29,62 @@ function tableVis(slice) {
       }
 
       var table = d3.select(slice.selector).append('table')
-        .classed('dataframe dataframe table table-striped table-bordered table-condensed table-hover dataTable no-footer', true);
+      .classed('dataframe dataframe table table-striped table-bordered table-condensed table-hover dataTable no-footer', true);
 
       table.append('thead').append('tr')
-       .selectAll('th')
-       .data(data.columns).enter()
-       .append('th')
-       .text(function(d){return d});
+      .selectAll('th')
+      .data(data.columns).enter()
+      .append('th')
+      .text(function(d){return d;});
 
       table.append('tbody')
-       .selectAll('tr')
-       .data(data.records).enter()
-       .append('tr')
-       .selectAll('td')
-       .data(function(row, i) {
-          return data.columns.map(function(c) {
-            return {col: c, val: row[c], isMetric: metrics.indexOf(c) >=0};
-          });
-       }).enter()
-       .append('td')
-       .style('background-image', function(d){
-          if (d.isMetric){
-            var perc = Math.round((d.val / maxes[d.col]) * 100);
-            return "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%";
-          }
-       })
-       .attr('title', function(d){
-         if (!isNaN(d.val))
-           return fC(d.val);
-       })
-       .attr('data-sort', function(d){
-          if (d.isMetric)
-            return d.val;
-       })
-       .on("click", function(d){
-          if(!d.isMetric){
-            var td = d3.select(this);
-            if (td.classed('filtered')){
-              slice.removeFilter(d.col, [d.val]);
-              d3.select(this).classed('filtered', false);
-            } else {
-              d3.select(this).classed('filtered', true);
-              slice.addFilter(d.col, [d.val]);
-            }
+      .selectAll('tr')
+      .data(data.records).enter()
+      .append('tr')
+      .selectAll('td')
+      .data(function(row, i) {
+        return data.columns.map(function(c) {
+          return {col: c, val: row[c], isMetric: metrics.indexOf(c) >=0};
+        });
+      }).enter()
+      .append('td')
+      .style('background-image', function(d){
+        if (d.isMetric){
+          var perc = Math.round((d.val / maxes[d.col]) * 100);
+          return "linear-gradient(to right, lightgrey, lightgrey " + perc + "%, rgba(0,0,0,0) " + perc + "%";
+        }
+      })
+      .attr('title', function(d){
+        if (!isNaN(d.val))
+          return fC(d.val);
+      })
+      .attr('data-sort', function(d){
+        if (d.isMetric)
+          return d.val;
+      })
+      .on("click", function(d){
+        if(!d.isMetric){
+          var td = d3.select(this);
+          if (td.classed('filtered')){
+            slice.removeFilter(d.col, [d.val]);
+            d3.select(this).classed('filtered', false);
+          } else {
+            d3.select(this).classed('filtered', true);
+            slice.addFilter(d.col, [d.val]);
           }
-       })
-       .style("cursor", function(d){
-         if(!d.isMetric){
+        }
+      })
+      .style("cursor", function(d){
+        if(!d.isMetric){
           return 'pointer';
         }
-       })
-       .html(function(d){
-          if (d.isMetric)
-            return f(d.val);
-          else
-            return d.val;
-       });
+      })
+      .html(function(d){
+        if (d.isMetric)
+          return f(d.val);
+        else
+          return d.val;
+      });
       var datatable = slice.container.find('.dataTable').DataTable({
         paging: false,
         searching: form_data.include_search,
@@ -105,6 +105,6 @@ function tableVis(slice) {
     render: refresh,
     resize: function(){},
   };
-};
+}
 
 module.exports = tableVis;
diff --git a/panoramix/assets/visualizations/word_cloud.js b/panoramix/assets/visualizations/word_cloud.js
index 257f7947a0da..027dcc48dd7a 100644
--- a/panoramix/assets/visualizations/word_cloud.js
+++ b/panoramix/assets/visualizations/word_cloud.js
@@ -3,11 +3,10 @@ var d3 = window.d3 || require('d3');
 var cloudLayout = require('d3-cloud');
 
 function wordCloudChart(slice) {
-  var slice = slice;
   var chart = d3.select(slice.selector);
   function refresh() {
     d3.json(slice.jsonEndpoint(), function(error, json) {
-      if (error != null){
+      if (error !== null){
         slice.error(error.responseText);
         return '';
       }
@@ -17,29 +16,30 @@ function wordCloudChart(slice) {
         json.form_data.size_to,
       ];
       var rotation = json.form_data.rotation;
+      var f_rotation;
       if (rotation == "square") {
-        var f_rotation = function() { return ~~(Math.random() * 2) * 90; };
+        f_rotation = function() { return ~~(Math.random() * 2) * 90; };
       }
       else if (rotation == "flat") {
-        var f_rotation = function() { return 0 };
+        f_rotation = function() { return 0; };
       }
       else {
-        var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30; };
+        f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30; };
       }
       var size = [slice.width(), slice.height()];
 
       var scale = d3.scale.linear()
-        .range(range)
-        .domain(d3.extent(data, function(d) { return d.size; }));
+      .range(range)
+      .domain(d3.extent(data, function(d) { return d.size; }));
 
       var layout = cloudLayout()
-        .size(size)
-        .words(data)
-        .padding(5)
-        .rotate(f_rotation)
-        .font("serif")
-        .fontSize(function(d) { return scale(d.size); })
-        .on("end", draw);
+      .size(size)
+      .words(data)
+      .padding(5)
+      .rotate(f_rotation)
+      .font("serif")
+      .fontSize(function(d) { return scale(d.size); })
+      .on("end", draw);
 
       layout.start();
 
@@ -47,21 +47,21 @@ function wordCloudChart(slice) {
         chart.selectAll("*").remove();
 
         chart.append("svg")
-            .attr("width", layout.size()[0])
-            .attr("height", layout.size()[1])
-          .append("g")
-            .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
-          .selectAll("text")
-            .data(words)
-            .enter().append("text")
-            .style("font-size", function(d) { return d.size + "px"; })
-            .style("font-family", "Impact")
-            .style("fill", function(d, i) {return px.color.category21(d.text); })
-            .attr("text-anchor", "middle")
-            .attr("transform", function(d) {
-              return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")";
-            })
-            .text(function(d) { return d.text; });
+        .attr("width", layout.size()[0])
+        .attr("height", layout.size()[1])
+        .append("g")
+        .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
+        .selectAll("text")
+        .data(words)
+        .enter().append("text")
+        .style("font-size", function(d) { return d.size + "px"; })
+        .style("font-family", "Impact")
+        .style("fill", function(d, i) {return px.color.category21(d.text); })
+        .attr("text-anchor", "middle")
+        .attr("transform", function(d) {
+          return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")";
+        })
+        .text(function(d) { return d.text; });
       }
       slice.done(data);
     });
diff --git a/panoramix/assets/visualizations/world_map.js b/panoramix/assets/visualizations/world_map.js
index 155039337815..58036604511a 100644
--- a/panoramix/assets/visualizations/world_map.js
+++ b/panoramix/assets/visualizations/world_map.js
@@ -16,12 +16,12 @@ function worldMapChart(slice) {
     d3.json(slice.jsonEndpoint(), function(error, json){
       var fd = json.form_data;
 
-      if (error != null){
+      if (error !== null){
         slice.error(error.responseText);
         return '';
       }
-      var ext = d3.extent(json.data, function(d){return d.m1});
-      var extRadius = d3.extent(json.data, function(d){return d.m2});
+      var ext = d3.extent(json.data, function(d){return d.m1;});
+      var extRadius = d3.extent(json.data, function(d){return d.m2;});
       var radiusScale = d3.scale.linear()
         .domain([extRadius[0], extRadius[1]])
         .range([1, fd.max_bubble_size]);
@@ -37,7 +37,7 @@ function worldMapChart(slice) {
       var d = {};
       for (var i=0; i<json.data.length; i++){
         var country = json.data[i];
-        country['fillColor'] = colorScale(country.m1);
+        country.fillColor = colorScale(country.m1);
         d[country.country] = country;
       }
 
@@ -95,7 +95,7 @@ function worldMapChart(slice) {
       slice.done(json);
 
     });
-  }
+  };
 
   return {
     render: render,