[panoramix] -> [dashed]

dashed/assets/visualizations/big_number.css

@@ -0,0 +1,26 @@
+.big_number g.axis text {
+  font-size: 10px;
+  font-weight: normal;
+  color: gray;
+  fill: gray;
+  text-anchor: middle;
+  alignment-baseline: middle;
+  font-weight: none;
+}
+
+.big_number text.big {
+  stroke: black;
+  text-anchor: middle;
+  fill: black;
+}
+
+.big_number g.tick line {
+  stroke-width: 1px;
+  stroke: grey;
+}
+
+.big_number .domain {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+}

dashed/assets/visualizations/big_number.js

@@ -0,0 +1,162 @@
+// JS
+var d3 = window.d3 || require('d3');
+
+// CSS
+require('./big_number.css');
+
+var px = require('../javascripts/modules/dashed.js');
+
+function bigNumberVis(slice) {
+  var div = d3.select(slice.selector);
+
+  function render() {
+    d3.json(slice.jsonEndpoint(), function (error, payload) {
+      //Define the percentage bounds that define color from red to green
+      if (error !== null) {
+        slice.error(error.responseText);
+        return '';
+      }
+      var fd = payload.form_data;
+      var json = payload.data;
+      var color_range = [-1, 1];
+
+      var f = d3.format(fd.y_axis_format);
+      var fp = d3.format('+.1%');
+      var width = slice.width();
+      var height = slice.height();
+      var svg = div.append('svg');
+      svg.attr("width", width);
+      svg.attr("height", height);
+      var data = json.data;
+      var compare_suffix = ' ' + json.compare_suffix;
+      var v_compare = null;
+      var v = data[data.length - 1][1];
+      if (json.compare_lag > 0) {
+        var pos = data.length - (json.compare_lag + 1);
+        if (pos >= 0) {
+          v_compare = (v / data[pos][1]) - 1;
+        }
+      }
+      var date_ext = d3.extent(data, function (d) {
+        return d[0];
+      });
+      var value_ext = d3.extent(data, function (d) {
+        return d[1];
+      });
+
+      var margin = 20;
+      var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width - margin]);
+      var scale_y = d3.scale.linear().domain(value_ext).range([height - (margin), margin]);
+      var colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
+      var scale_color = d3.scale
+        .linear().domain(color_range)
+        .interpolate(d3.interpolateHsl)
+        .range(colorRange).clamp(true);
+      var line = d3.svg.line()
+        .x(function (d) {
+          return scale_x(d[0]);
+        })
+        .y(function (d) {
+          return scale_y(d[1]);
+        })
+        .interpolate("basis");
+
+      //Drawing trend line
+      var g = svg.append('g');
+
+      g.append('path')
+        .attr('d', function (d) {
+          return line(data);
+        })
+        .attr('stroke-width', 5)
+        .attr('opacity', 0.5)
+        .attr('fill', "none")
+        .attr('stroke-linecap', "round")
+        .attr('stroke', "grey");
+
+      g = svg.append('g')
+        .attr('class', 'digits')
+        .attr('opacity', 1);
+
+      var y = height / 2;
+      if (v_compare !== null) {
+        y = (height / 8) * 3;
+      }
+
+      //Printing big number
+      g.append('text')
+        .attr('x', width / 2)
+        .attr('y', y)
+        .attr('class', 'big')
+        .attr('alignment-baseline', 'middle')
+        .attr('id', 'bigNumber')
+        .style('font-weight', 'bold')
+        .style('cursor', 'pointer')
+        .text(f(v))
+        .style('font-size', d3.min([height, width]) / 3.5)
+        .attr('fill', 'white');
+
+      var c = scale_color(v_compare);
+
+      //Printing compare %
+      if (v_compare !== null) {
+        g.append('text')
+          .attr('x', width / 2)
+          .attr('y', (height / 16) * 12)
+          .text(fp(v_compare) + compare_suffix)
+          .style('font-size', d3.min([height, width]) / 8)
+          .style('text-anchor', 'middle')
+          .attr('fill', c)
+          .attr('stroke', c);
+      }
+
+      var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
+      g = g_axis.append('g');
+      var x_axis = d3.svg.axis()
+        .scale(scale_x)
+        .orient('bottom')
+        .ticks(4)
+        .tickFormat(px.formatDate);
+      g.call(x_axis);
+      g.attr('transform', 'translate(0,' + (height - margin) + ')');
+
+      g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
+      var y_axis = d3.svg.axis()
+        .scale(scale_y)
+        .orient('left')
+        .tickFormat(d3.format(fd.y_axis_format))
+        .tickValues(value_ext);
+      g.call(y_axis);
+      g.selectAll('text')
+        .style('text-anchor', 'end')
+        .attr('y', '-7')
+        .attr('x', '-4');
+
+      g.selectAll("text")
+        .style('font-size', '10px');
+
+      div.on('mouseover', function (d) {
+          var div = d3.select(this);
+          div.select('path').transition().duration(500).attr('opacity', 1)
+            .style('stroke-width', '2px');
+          div.select('g.digits').transition().duration(500).attr('opacity', 0.1);
+          div.select('g.axis').transition().duration(500).attr('opacity', 1);
+        })
+        .on('mouseout', function (d) {
+          var div = d3.select(this);
+          div.select('path').transition().duration(500).attr('opacity', 0.5)
+            .style('stroke-width', '5px');
+          div.select('g.digits').transition().duration(500).attr('opacity', 1);
+          div.select('g.axis').transition().duration(500).attr('opacity', 0);
+        });
+      slice.done(payload);
+    });
+  }
+
+  return {
+    render: render,
+    resize: render
+  };
+}
+
+module.exports = bigNumberVis;

dashed/assets/visualizations/directed_force.css

@@ -0,0 +1,19 @@
+.directed_force path.link {
+  fill: none;
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+
+.directed_force circle {
+  fill: #ccc;
+  stroke: #000;
+  stroke-width: 1.5px;
+  stroke-opacity: 1;
+  opacity: 0.75;
+}
+
+.directed_force text {
+  fill: #000;
+  font: 10px sans-serif;
+  pointer-events: none;
+}

dashed/assets/visualizations/directed_force.js

@@ -0,0 +1,175 @@
+// JS
+var d3 = window.d3 || require('d3');
+
+// CSS
+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 render = function () {
+    var width = slice.width();
+    var height = slice.height() - 25;
+    d3.json(slice.jsonEndpoint(), function (error, json) {
+
+      if (error !== null) {
+        slice.error(error.responseText);
+        return '';
+      }
+      var links = json.data;
+      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 = Number(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();
+
+      var svg = div.append("svg")
+        .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");
+
+      var edgeScale = d3.scale.linear()
+        .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)");
+
+      // 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);
+
+      // 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]);
+
+      node.append("circle")
+        .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;
+        });
+
+      // 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 + ")";
+        });
+      }
+
+      slice.done(json);
+    });
+  };
+  return {
+    render: render,
+    resize: render
+  };
+}
+
+module.exports = directedForceVis;

dashed/assets/visualizations/filter_box.css

@@ -0,0 +1,8 @@
+.select2-highlighted > .filter_box {
+    background-color: transparent;
+    border: 1px dashed black;
+}
+
+.dashboard .filter_box .slice_container > div {
+  padding-top: 0;
+}

dashed/assets/visualizations/filter_box.js

@@ -0,0 +1,82 @@
+// JS
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var d3 = window.d3 || require('d3');
+
+// CSS
+require('./filter_box.css');
+require('../javascripts/dashed-select2.js');
+
+function filterBox(slice) {
+  var filtersObj = {};
+  var d3token = d3.select(slice.selector);
+
+  var fltChanged = function () {
+    var val = $(this).val();
+    var vals = [];
+    if (val !== '') {
+      vals = val.split(',');
+    }
+    slice.setFilter($(this).attr('name'), vals);
+  };
+
+  var refresh = function () {
+    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;
+
+          var div = container.append('div');
+
+          div.append("label").text(filter);
+
+          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: select2Formatter
+            })
+            .on('change', fltChanged);
+        }
+        slice.done();
+
+        function select2Formatter(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>';
+        }
+      })
+      .fail(function (xhr) {
+        slice.error(xhr.responseText);
+      });
+  };
+  return {
+    render: refresh,
+    resize: refresh
+  };
+}
+
+module.exports = filterBox;

dashed/assets/visualizations/heatmap.css

@@ -0,0 +1,79 @@
+.heatmap .axis text {
+  font: 10px sans-serif;
+}
+
+.heatmap .axis path,
+.heatmap .axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.heatmap svg {
+}
+
+.heatmap canvas, .heatmap img {
+  image-rendering: optimizeSpeed;             /* Older versions of FF          */
+  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
+  image-rendering: -webkit-optimize-contrast; /* Safari                        */
+  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
+  image-rendering: pixelated;                 /* Awesome future-browsers       */
+  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
+}
+
+/* from d3-tip */
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  pointer-events: none;
+}
+
+/* Northward tooltips */
+.d3-tip.n:after {
+  content: "\25BC";
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
+  text-align: center;
+}
+
+/* Eastward tooltips */
+.d3-tip.e:after {
+  content: "\25C0";
+  margin: -4px 0 0 0;
+  top: 50%;
+  left: -8px;
+}
+
+/* Southward tooltips */
+.d3-tip.s:after {
+  content: "\25B2";
+  margin: 0 0 1px 0;
+  top: -8px;
+  left: 0;
+  text-align: center;
+}
+
+/* Westward tooltips */
+.d3-tip.w:after {
+  content: "\25B6";
+  margin: -4px 0 0 -1px;
+  top: 50%;
+  left: 100%;
+}

dashed/assets/visualizations/heatmap.js

@@ -0,0 +1,209 @@
+// JS
+var $ = window.$ || require('jquery');
+var px = window.px || require('../javascripts/modules/dashed.js');
+var d3 = require('d3');
+
+d3.tip = require('d3-tip'); //using window.d3 doesn't capture events properly bc of multiple instances
+
+// CSS
+require('./heatmap.css');
+
+// Inspired from http://bl.ocks.org/mbostock/3074470
+// https://jsfiddle.net/cyril123/h0reyumq/
+function heatmapVis(slice) {
+  var margins = {
+    t: 10,
+    r: 10,
+    b: 50,
+    l: 60
+  };
+
+  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 fp = d3.format('.3p');
+    d3.json(slice.jsonEndpoint(), function (error, payload) {
+      var matrix = {};
+      if (error) {
+        slice.error(error.responseText);
+        return '';
+      }
+      var fd = payload.form_data;
+      var data = payload.data;
+
+      function ordScale(k, rangeBands, reverse) {
+        if (reverse === undefined) {
+          reverse = false;
+        }
+        var domain = {};
+        $.each(data, function (i, d) {
+          domain[d[k]] = true;
+        });
+        domain = Object.keys(domain).sort(function (a, b) {
+          return b - a;
+        });
+        if (reverse) {
+          domain.reverse();
+        }
+        if (rangeBands === undefined) {
+          return d3.scale.ordinal().domain(domain).range(d3.range(domain.length));
+        } else {
+          return d3.scale.ordinal().domain(domain).rangeBands(rangeBands);
+        }
+      }
+      var xScale = ordScale('x');
+      var yScale = ordScale('y', undefined, true);
+      var xRbScale = ordScale('x', [0, hmWidth]);
+      var yRbScale = ordScale('y', [hmHeight, 0]);
+      var X = 0,
+        Y = 1;
+      var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length];
+
+      var color = px.color.colorScalerFactory(fd.linear_color_scheme);
+
+      var scale = [
+        d3.scale.linear()
+        .domain([0, heatmapDim[X]])
+        .range([0, hmWidth]),
+        d3.scale.linear()
+        .domain([0, heatmapDim[Y]])
+        .range([0, hmHeight])
+      ];
+
+      var container = d3.select(slice.selector)
+        .style("left", "0px")
+        .style("position", "relative")
+        .style("top", "0px");
+
+      var canvas = container.append("canvas")
+        .attr("width", heatmapDim[X])
+        .attr("height", heatmapDim[Y])
+        .style("width", hmWidth + "px")
+        .style("height", hmHeight + "px")
+        .style("image-rendering", fd.canvas_image_rendering)
+        .style("left", margins.l + "px")
+        .style("top", margins.t + "px")
+        .style("position", "absolute");
+
+      var svg = container.append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .style("left", "0px")
+        .style("top", "0px")
+        .style("position", "absolute");
+
+      var rect = svg.append('g')
+        .attr("transform", "translate(" + margins.l + "," + margins.t + ")")
+        .append('rect')
+        .style('fill-opacity', 0)
+        .attr('stroke', 'black')
+        .attr("width", hmWidth)
+        .attr("height", hmHeight);
+
+      var tip = d3.tip()
+        .attr('class', 'd3-tip')
+        .offset(function () {
+          var k = d3.mouse(this);
+          var x = k[0] - (hmWidth / 2);
+          return [k[1] - 20, x];
+        })
+        .html(function (d) {
+          var k = d3.mouse(this);
+          var m = Math.floor(scale[0].invert(k[0]));
+          var n = Math.floor(scale[1].invert(k[1]));
+          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>";
+            return s;
+          }
+        });
+
+      rect.call(tip);
+
+      var xAxis = d3.svg.axis()
+        .scale(xRbScale)
+        .tickValues(xRbScale.domain().filter(
+          function (d, i) {
+            return !(i % (parseInt(fd.xscale_interval, 10)));
+          }))
+        .orient("bottom");
+      var yAxis = d3.svg.axis()
+        .scale(yRbScale)
+        .tickValues(yRbScale.domain().filter(
+          function (d, i) {
+            return !(i % (parseInt(fd.yscale_interval, 10)));
+          }))
+        .orient("left");
+
+      svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(" + margins.l + "," + (margins.t + hmHeight) + ")")
+        .call(xAxis)
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("transform", "rotate(-45)")
+        .style("font-weight", "bold");
+
+      svg.append("g")
+        .attr("class", "y axis")
+        .attr("transform", "translate(" + margins.l + ", 0)")
+        .call(yAxis);
+
+      rect.on('mousemove', tip.show);
+      rect.on('mouseout', tip.hide);
+
+      var context = canvas.node().getContext("2d");
+      context.imageSmoothingEnabled = false;
+      createImageObj();
+
+      // Compute the pixel colors; scaled by CSS.
+      function createImageObj() {
+        var imageObj = new Image();
+        var image = context.createImageData(heatmapDim[0], heatmapDim[1]);
+        var pixs = {};
+        $.each(data, function (i, d) {
+          var c = d3.rgb(color(d.perc));
+          var x = xScale(d.x);
+          var y = yScale(d.y);
+          pixs[x + (y * xScale.domain().length)] = c;
+          if (matrix[x] === undefined) {
+            matrix[x] = {};
+          }
+          if (matrix[x][y] === undefined) {
+            matrix[x][y] = d;
+          }
+        });
+
+        var p = -1;
+        for (var i = 0; i < heatmapDim[0] * heatmapDim[1]; i++) {
+          var c = pixs[i];
+          var alpha = 255;
+          if (c === undefined) {
+            c = d3.rgb('#F00');
+            alpha = 0;
+          }
+          image.data[++p] = c.r;
+          image.data[++p] = c.g;
+          image.data[++p] = c.b;
+          image.data[++p] = alpha;
+        }
+        context.putImageData(image, 0, 0);
+        imageObj.src = canvas.node().toDataURL();
+      }
+      slice.done();
+
+    });
+  }
+  return {
+    render: refresh,
+    resize: refresh
+  };
+}
+
+module.exports = heatmapVis;

dashed/assets/visualizations/iframe.js

@@ -0,0 +1,25 @@
+var $ = window.$ || require('jquery');
+
+function iframeWidget(slice) {
+
+  function refresh() {
+    $('#code').attr('rows', '15');
+    $.getJSON(slice.jsonEndpoint(), function (payload) {
+        slice.container.html('<iframe style="width:100%;"></iframe>');
+        var iframe = slice.container.find('iframe');
+        iframe.css('height', slice.height());
+        iframe.attr('src', payload.form_data.url);
+        slice.done();
+      })
+      .fail(function (xhr) {
+        slice.error(xhr.responseText);
+      });
+  }
+
+  return {
+    render: refresh,
+    resize: refresh
+  };
+}
+
+module.exports = iframeWidget;

dashed/assets/visualizations/markup.js

@@ -0,0 +1,23 @@
+var $ = window.$ || require('jquery');
+
+function markupWidget(slice) {
+
+  function refresh() {
+    $('#code').attr('rows', '15');
+
+    $.getJSON(slice.jsonEndpoint(), function (payload) {
+        slice.container.html(payload.data.html);
+        slice.done();
+      })
+      .fail(function (xhr) {
+        slice.error(xhr.responseText);
+      });
+  }
+
+  return {
+    render: refresh,
+    resize: refresh
+  };
+}
+
+module.exports = markupWidget;

dashed/assets/visualizations/nvd3_vis.css

@@ -0,0 +1,8 @@
+g.dashed path {
+   stroke-dasharray: 5, 5;
+}
+
+.nvtooltip tr.highlight td {
+  font-weight: bold;
+  font-size: 15px !important;
+}

dashed/assets/visualizations/nvd3_vis.js

@@ -0,0 +1,208 @@
+// JS
+var $  = window.$ || require('jquery');
+var d3 = window.d3 || require('d3');
+var px = window.px || require('../javascripts/modules/dashed.js');
+var nv = require('nvd3');
+
+// CSS
+require('../node_modules/nvd3/build/nv.d3.min.css');
+require('./nvd3_vis.css');
+
+function nvd3Vis(slice) {
+  var chart;
+
+  var render = function () {
+    $.getJSON(slice.jsonEndpoint(), function (payload) {
+        var fd = payload.form_data;
+        var viz_type = fd.viz_type;
+
+        var f = d3.format('.3s');
+        var colorKey = 'key';
+
+        nv.addGraph(function () {
+          switch (viz_type) {
+            case 'line':
+              if (fd.show_brush) {
+                chart = nv.models.lineWithFocusChart();
+                chart.lines2.xScale(d3.time.scale.utc());
+                chart.x2Axis
+                  .showMaxMin(fd.x_axis_showminmax)
+                  .staggerLabels(true);
+              } else {
+                chart = nv.models.lineChart();
+              }
+              // To alter the tooltip header
+              // chart.interactiveLayer.tooltip.headerFormatter(function(){return '';});
+              chart.xScale(d3.time.scale.utc());
+              chart.interpolate(fd.line_interpolation);
+              chart.xAxis
+                .showMaxMin(fd.x_axis_showminmax)
+                .staggerLabels(true);
+              break;
+
+            case 'bar':
+              chart = nv.models.multiBarChart()
+                .showControls(true)
+                .groupSpacing(0.1);
+
+              chart.xAxis
+                .showMaxMin(false)
+                .staggerLabels(true);
+
+              chart.stacked(fd.bar_stacked);
+              break;
+
+            case 'dist_bar':
+              chart = nv.models.multiBarChart()
+                .showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
+                .reduceXTicks(false)
+                .rotateLabels(45)
+                .groupSpacing(0.1); //Distance between each group of bars.
+
+              chart.xAxis
+                .showMaxMin(false);
+
+              chart.stacked(fd.bar_stacked);
+              break;
+
+            case 'pie':
+              chart = nv.models.pieChart();
+              colorKey = 'x';
+              chart.valueFormat(f);
+              if (fd.donut) {
+                chart.donut(true);
+                chart.labelsOutside(true);
+              }
+              chart.labelsOutside(true);
+              chart.cornerRadius(true);
+              break;
+
+            case 'column':
+              chart = nv.models.multiBarChart()
+                .reduceXTicks(false)
+                .rotateLabels(45);
+              break;
+
+            case 'compare':
+              chart = nv.models.cumulativeLineChart();
+              chart.xScale(d3.time.scale.utc());
+              chart.xAxis
+                .showMaxMin(false)
+                .staggerLabels(true);
+              break;
+
+            case 'bubble':
+              var row = function (col1, col2) {
+                return "<tr><td>" + col1 + "</td><td>" + col2 + "</td></tr>";
+              };
+              chart = nv.models.scatterChart();
+              chart.showDistX(true);
+              chart.showDistY(true);
+              chart.tooltip.contentGenerator(function (obj) {
+                var p = obj.point;
+                var s = "<table>";
+                s += '<tr><td style="color:' + p.color + ';"><strong>' + p[fd.entity] + '</strong> (' + p.group + ')</td></tr>';
+                s += row(fd.x, f(p.x));
+                s += row(fd.y, f(p.y));
+                s += row(fd.size, f(p.size));
+                s += "</table>";
+                return s;
+              });
+              chart.pointRange([5, fd.max_bubble_size * fd.max_bubble_size]);
+              break;
+
+            case 'area':
+              chart = nv.models.stackedAreaChart();
+              chart.style(fd.stacked_style);
+              chart.xScale(d3.time.scale.utc());
+              chart.xAxis
+                .showMaxMin(false)
+                .staggerLabels(true);
+              break;
+
+            default:
+              throw new Error("Unrecognized visualization for nvd3" + viz_type);
+          }
+
+          if ("showLegend" in chart && typeof fd.show_legend !== 'undefined') {
+            chart.showLegend(fd.show_legend);
+          }
+
+          var height = slice.height();
+          height -= 15;  // accounting for the staggered xAxis
+
+          if (chart.hasOwnProperty("x2Axis")) {
+            height += 30;
+          }
+          chart.height(height);
+          slice.container.css('height', height + 'px');
+
+          if ((viz_type === "line" || viz_type === "area") && fd.rich_tooltip) {
+            chart.useInteractiveGuideline(true);
+          }
+          if (fd.y_axis_zero) {
+            chart.forceY([0, 1]);
+          } else if (fd.y_log_scale) {
+            chart.yScale(d3.scale.log());
+          }
+          if (fd.x_log_scale) {
+            chart.xScale(d3.scale.log());
+          }
+          if (viz_type === 'bubble') {
+            chart.xAxis.tickFormat(d3.format('.3s'));
+          } else if (fd.x_axis_format === 'smart_date') {
+            chart.xAxis.tickFormat(px.formatDate);
+          } else if (fd.x_axis_format !== undefined) {
+            chart.xAxis.tickFormat(px.timeFormatFactory(fd.x_axis_format));
+          }
+          if (chart.yAxis !== undefined) {
+            chart.yAxis.tickFormat(d3.format('.3s'));
+          }
+
+          if (fd.contribution || fd.num_period_compare || viz_type === 'compare') {
+            chart.yAxis.tickFormat(d3.format('.3p'));
+            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) {
+              chart.y2Axis.tickFormat(d3.format(fd.y_axis_format));
+            }
+          }
+
+          chart.color(function (d, i) {
+            return px.color.category21(d[colorKey]);
+          });
+
+          d3.select(slice.selector).html('');
+          d3.select(slice.selector).append("svg")
+            .datum(payload.data)
+            .transition().duration(500)
+            .attr('height', height)
+            .call(chart);
+
+          return chart;
+        });
+
+        slice.done(payload);
+      })
+      .fail(function (xhr) {
+        slice.error(xhr.responseText);
+      });
+  };
+
+  var update = function () {
+    if (chart && chart.update) {
+      chart.update();
+    }
+  };
+
+  return {
+    render: render,
+    resize: update
+  };
+}
+
+module.exports = nvd3Vis;

dashed/assets/visualizations/parallel_coordinates.js

@@ -0,0 +1,92 @@
+// JS
+var $  = window.$ || require('jquery');
+var d3 = window.d3 || require('d3');
+d3.parcoords = require('../vendor/parallel_coordinates/d3.parcoords.js');
+d3.divgrid = require('../vendor/parallel_coordinates/divgrid.js');
+
+// CSS
+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);
+
+        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();
+
+        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");
+
+        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);
+      });
+  }
+
+  return {
+    render: refresh,
+    resize: refresh
+  };
+}
+
+module.exports = parallelCoordVis;

dashed/assets/visualizations/pivot_table.css

@@ -0,0 +1,13 @@
+.gridster .widget.pivot_table {
+    overflow: auto !important;
+}
+
+.table tr>th {
+    padding: 1px 5px !important;
+    font-size: small !important;
+}
+
+.table tr>td {
+    padding: 1px 5px !important;
+    font-size: small !important;
+}

dashed/assets/visualizations/pivot_table.js

@@ -0,0 +1,31 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+
+require('datatables');
+require('./pivot_table.css');
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
+
+module.exports = function (slice) {
+  var container = slice.container;
+  var form_data = slice.data.form_data;
+
+  function refresh() {
+    $.getJSON(slice.jsonEndpoint(), function (json) {
+      container.html(json.data);
+      if (form_data.groupby.length === 1) {
+        var table = container.find('table').DataTable({
+          paging: false,
+          searching: false
+        });
+        table.column('-1').order('desc').draw();
+      }
+      slice.done(json);
+    }).fail(function (xhr) {
+      slice.error(xhr.responseText);
+    });
+  }
+  return {
+    render: refresh,
+    resize: refresh
+  };
+};

dashed/assets/visualizations/sankey.css

@@ -0,0 +1,20 @@
+.sankey .node rect {
+  cursor: move;
+  fill-opacity: .9;
+  shape-rendering: crispEdges;
+}
+
+.sankey .node text {
+  pointer-events: none;
+  text-shadow: 0 1px 0 #fff;
+}
+
+.sankey .link {
+  fill: none;
+  stroke: #000;
+  stroke-opacity: .2;
+}
+
+.sankey .link:hover {
+  stroke-opacity: .5;
+}

dashed/assets/visualizations/sankey.js

@@ -0,0 +1,140 @@
+// CSS
+require('./sankey.css');
+// JS
+var px = window.px || require('../javascripts/modules/dashed.js');
+var d3 = window.d3 || require('d3');
+d3.sankey = require('d3-sankey').sankey;
+
+function sankeyVis(slice) {
+  var div = d3.select(slice.selector);
+
+  var render = function () {
+    var margin = {
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    };
+    var width = slice.width() - margin.left - margin.right;
+    var height = slice.height() - margin.top - margin.bottom;
+
+    var formatNumber = d3.format(",.0f"),
+      format = function (d) {
+        return formatNumber(d) + " TWh";
+      };
+
+    var svg = div.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 + ")");
+
+    var sankey = d3.sankey()
+      .nodeWidth(15)
+      .nodePadding(10)
+      .size([width, height]);
+
+    var path = sankey.link();
+
+    d3.json(slice.jsonEndpoint(), function (error, json) {
+      if (error !== null) {
+        slice.error(error.responseText);
+        return '';
+      }
+      var links = json.data;
+      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 = Number(link.value);
+      });
+      nodes = d3.values(nodes);
+
+      sankey
+        .nodes(nodes)
+        .links(links)
+        .layout(32);
+
+      var link = svg.append("g").selectAll(".link")
+        .data(links)
+        .enter().append("path")
+        .attr("class", "link")
+        .attr("d", path)
+        .style("stroke-width", function (d) {
+          return Math.max(1, d.dy);
+        })
+        .sort(function (a, b) {
+          return b.dy - a.dy;
+        });
+
+      link.append("title")
+        .text(function (d) {
+          return d.source.name + " → " + d.target.name + "\n" + format(d.value);
+        });
+
+      var node = svg.append("g").selectAll(".node")
+        .data(nodes)
+        .enter().append("g")
+        .attr("class", "node")
+        .attr("transform", function (d) {
+          return "translate(" + d.x + "," + d.y + ")";
+        })
+        .call(d3.behavior.drag()
+          .origin(function (d) {
+            return d;
+          })
+          .on("dragstart", function () {
+            this.parentNode.appendChild(this);
+          })
+          .on("drag", dragmove));
+
+      node.append("rect")
+        .attr("height", function (d) {
+          return d.dy;
+        })
+        .attr("width", sankey.nodeWidth())
+        .style("fill", function (d) {
+          d.color = px.color.category21(d.name.replace(/ .*/, ""));
+          return d.color;
+        })
+        .style("stroke", function (d) {
+          return d3.rgb(d.color).darker(2);
+        })
+        .append("title")
+        .text(function (d) {
+          return d.name + "\n" + format(d.value);
+        });
+
+      node.append("text")
+        .attr("x", -6)
+        .attr("y", function (d) {
+          return d.dy / 2;
+        })
+        .attr("dy", ".35em")
+        .attr("text-anchor", "end")
+        .attr("transform", null)
+        .text(function (d) {
+          return d.name;
+        })
+        .filter(function (d) {
+          return d.x < width / 2;
+        })
+        .attr("x", 6 + sankey.nodeWidth())
+        .attr("text-anchor", "start");
+
+      function dragmove(d) {
+        d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
+        sankey.relayout();
+        link.attr("d", path);
+      }
+      slice.done(json);
+    });
+  };
+  return {
+    render: render,
+    resize: render
+  };
+}
+
+module.exports = sankeyVis;

dashed/assets/visualizations/sunburst.css

@@ -0,0 +1,39 @@
+.sunburst text {
+  shape-rendering: crispEdges;
+}
+.sunburst path {
+  stroke: #333;
+  stroke-width: 0.5px;
+}
+.sunburst .center-label {
+  text-anchor: middle;
+  fill: #000;
+  pointer-events: none;
+}
+.sunburst .path-percent {
+  font-size: 4em;
+}
+.sunburst .path-metrics {
+  font-size: 1.75em;
+}
+.sunburst .path-ratio {
+  font-size: 1.2em;
+}
+
+.sunburst .breadcrumbs text {
+  font-weight: 600;
+  font-size: 1.2em;
+  text-anchor: middle;
+  fill: #000;
+}
+
+/* dashboard specific */
+.dashboard .sunburst text {
+  font-size: 1em;
+}
+.dashboard .sunburst .path-percent {
+  font-size: 2.5em;
+}
+.dashboard .sunburst .path-metrics {
+  font-size: 1em;
+}

dashed/assets/visualizations/sunburst.js

@@ -0,0 +1,359 @@
+var d3 = window.d3 || require('d3');
+var px = require('../javascripts/modules/dashed.js');
+var wrapSvgText = require('../javascripts/modules/utils.js').wrapSvgText;
+
+require('./sunburst.css');
+
+// Modified from http://bl.ocks.org/kerryrodden/7090426
+function sunburstVis(slice) {
+  var container = d3.select(slice.selector);
+
+  var render = function () {
+    // vars with shared scope within this function
+    var margin = { top: 10, right: 5, bottom: 10, left: 5 };
+    var containerWidth   = slice.width();
+    var containerHeight  = slice.height();
+    var breadcrumbHeight = containerHeight * 0.085;
+    var visWidth         = containerWidth - margin.left - margin.right;
+    var visHeight        = containerHeight - margin.top - margin.bottom - breadcrumbHeight;
+    var radius           = Math.min(visWidth, visHeight) / 2;
+    var colorByCategory  = true; // color by category if primary/secondary metrics match
+
+    var maxBreadcrumbs, breadcrumbDims, // set based on data
+        totalSize, // total size of all segments; set after loading the data.
+        colorScale,
+        breadcrumbs, vis, arcs, gMiddleText; // dom handles
+
+    // Helper + path gen functions
+    var partition = d3.layout.partition()
+      .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);
+      });
+
+    var f = d3.format(".3s");
+    var fp = d3.format(".3p");
+
+    container.select("svg").remove();
+
+    var svg = container.append("svg:svg")
+      .attr("width", containerWidth)
+      .attr("height", containerHeight);
+
+    d3.json(slice.jsonEndpoint(), function (error, rawData) {
+      if (error !== null) {
+        slice.error(error.responseText);
+        return '';
+      }
+
+      createBreadcrumbs(rawData);
+      createVisualization(rawData);
+
+      slice.done(rawData);
+    });
+
+    function createBreadcrumbs(rawData) {
+      var firstRowData = rawData.data[0];
+      maxBreadcrumbs = (firstRowData.length - 2) + 1; // -2 bc row contains 2x metrics, +extra for %label and buffer
+
+      breadcrumbDims = {
+        width: visWidth / maxBreadcrumbs,
+        height: breadcrumbHeight *0.8, // more margin
+        spacing: 3,
+        tipTailWidth: 10
+      };
+
+      breadcrumbs = svg.append("svg:g")
+        .attr("class", "breadcrumbs")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+      breadcrumbs.append("svg:text")
+        .attr("class", "end-label");
+    }
+
+    // Main function to draw and set up the visualization, once we have the data.
+    function createVisualization(rawData) {
+      var tree = buildHierarchy(rawData.data);
+
+      vis = svg.append("svg:g")
+        .attr("class", "sunburst-vis")
+        .attr("transform", "translate(" + (margin.left + (visWidth / 2)) + "," + (margin.top + breadcrumbHeight + (visHeight / 2)) + ")")
+        .on("mouseleave", mouseleave);
+
+      arcs = vis.append("svg:g")
+        .attr("id", "arcs");
+
+      gMiddleText = vis.append("svg:g")
+        .attr("class", "center-label");
+
+      // 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);
+
+      // For efficiency, filter nodes to keep only those large enough to see.
+      var nodes = partition.nodes(tree)
+        .filter(function (d) {
+          return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
+        });
+
+      var ext;
+
+      if (rawData.form_data.metric !== rawData.form_data.secondary_metric) {
+        colorByCategory = false;
+
+        ext = d3.extent(nodes, function (d) {
+          return d.m2 / d.m1;
+        });
+
+        colorScale = d3.scale.linear()
+          .domain([ext[0], ext[0] + ((ext[1] - ext[0]) / 2), ext[1]])
+          .range(["#00D1C1", "white", "#FFB400"]);
+      }
+
+      var path = arcs.data([tree]).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("fill", function (d) {
+          return colorByCategory ? px.color.category21(d.name) : colorScale(d.m2 / d.m1);
+        })
+        .style("opacity", 1)
+        .on("mouseenter", mouseenter);
+
+      // Get total size of the tree = value of root node from partition.
+      totalSize = path.node().__data__.value;
+    }
+
+    // Fade all but the current sequence, and show it in the breadcrumb trail.
+    function mouseenter(d) {
+
+      var percentage = (d.m1 / totalSize).toPrecision(3);
+      var percentageString = fp(percentage);
+      var metricsMatch = Math.abs(d.m1 - d.m2) < 0.000001;
+
+      gMiddleText.selectAll("*").remove();
+
+      gMiddleText.append("text")
+        .attr("class", "path-percent")
+        .attr("y", "-10")
+        .text(percentageString);
+
+      gMiddleText.append("text")
+        .attr("class", "path-metrics")
+        .attr("y", "25")
+        .text("m1: " + f(d.m1) + (metricsMatch ? "" : ", m2: " + f(d.m2)));
+
+      gMiddleText.append("text")
+        .attr("class", "path-ratio")
+        .attr("y", "50")
+        .text("m2/m1: " + fp(d.m2 / d.m1));
+
+      var sequenceArray = getAncestors(d);
+
+      // Reset and fade all the segments.
+      arcs.selectAll("path")
+        .style("stroke-width", null)
+        .style("stroke", null)
+        .style("opacity", 0.3);
+
+      // 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-width", "2px")
+        .style("stroke", "#000");
+
+      updateBreadcrumbs(sequenceArray, percentageString);
+    }
+
+    // Restore everything to full opacity when moving off the visualization.
+    function mouseleave(d) {
+
+      // Hide the breadcrumb trail
+      breadcrumbs.style("visibility", "hidden");
+
+      gMiddleText.selectAll("*").remove();
+
+      // Deactivate all segments during transition.
+      arcs.selectAll("path").on("mouseenter", null);
+      //gMiddleText.selectAll("*").remove();
+
+      // Transition each segment to full opacity and then reactivate it.
+      arcs.selectAll("path")
+        .transition()
+        .duration(200)
+        .style("opacity", 1)
+        .style("stroke", null)
+        .style("stroke-width", null)
+        .each("end", function () {
+          d3.select(this).on("mouseenter", mouseenter);
+        });
+    }
+
+    // Given a node in a partition layout, return an array of all of its ancestor
+    // nodes, highest first, but excluding the root.
+    function getAncestors(node) {
+      var path = [];
+      var current = node;
+      while (current.parent) {
+        path.unshift(current);
+        current = current.parent;
+      }
+      return path;
+    }
+
+    // Generate a string that describes the points of a breadcrumb polygon.
+    function breadcrumbPoints(d, i) {
+      var points = [];
+      points.push("0,0");
+      points.push(breadcrumbDims.width + ",0");
+      points.push(breadcrumbDims.width + breadcrumbDims.tipTailWidth + "," + (breadcrumbDims.height / 2));
+      points.push(breadcrumbDims.width+ "," + breadcrumbDims.height);
+      points.push("0," + breadcrumbDims.height);
+      if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
+        points.push(breadcrumbDims.tipTailWidth + "," + (breadcrumbDims.height / 2));
+      }
+      return points.join(" ");
+    }
+
+    function updateBreadcrumbs(sequenceArray, percentageString) {
+      var g = breadcrumbs.selectAll("g")
+        .data(sequenceArray, function (d) {
+          return d.name + d.depth;
+        });
+
+      // Add breadcrumb and label for entering nodes.
+      var entering = g.enter().append("svg:g");
+
+      entering.append("svg:polygon")
+          .attr("points", breadcrumbPoints)
+          .style("fill", function (d) {
+            return colorByCategory ? px.color.category21(d.name) : colorScale(d.m2 / d.m1);
+          });
+
+      entering.append("svg:text")
+          .attr("x", (breadcrumbDims.width + breadcrumbDims.tipTailWidth) / 2)
+          .attr("y", breadcrumbDims.height / 4)
+          .attr("dy", "0.35em")
+          .attr("class", "step-label")
+          .text(function (d) { return d.name; })
+          .call(wrapSvgText, breadcrumbDims.width, breadcrumbDims.height / 2);
+
+      // Set position for entering and updating nodes.
+      g.attr("transform", function (d, i) {
+        return "translate(" + i * (breadcrumbDims.width + breadcrumbDims.spacing) + ", 0)";
+      });
+
+      // Remove exiting nodes.
+      g.exit().remove();
+
+      // Now move and update the percentage at the end.
+      breadcrumbs.select(".end-label")
+          .attr("x", (sequenceArray.length + 0.5) * (breadcrumbDims.width + breadcrumbDims.spacing))
+          .attr("y", breadcrumbDims.height / 2)
+          .attr("dy", "0.35em")
+          .text(percentageString);
+
+      // Make the breadcrumb trail visible, if it's hidden.
+      breadcrumbs.style("visibility", null);
+    }
+
+    function buildHierarchy(rows) {
+      var root = {
+        name: "root",
+        children: []
+      };
+      for (var i = 0; i < rows.length; i++) {
+        var row = rows[i];
+        var m1 = Number(row[row.length - 2]);
+        var m2 = Number(row[row.length - 1]);
+        var levels = row.slice(0, row.length - 2);
+        if (isNaN(m1)) { // e.g. if this is a header row
+          continue;
+        }
+        var currentNode = root;
+        for (var j = 0; j < levels.length; j++) {
+          var children = currentNode.children;
+          var nodeName = levels[j];
+          // If the next node has the name "0", it will
+          var isLeafNode = (j >= levels.length - 1) || levels[j+1] === 0;
+          var childNode;
+
+          if (!isLeafNode) {
+            // 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) {
+                childNode = children[k];
+                foundChild = true;
+                break;
+              }
+            }
+            // If we don't already have a child node for this branch, create it.
+            if (!foundChild) {
+              childNode = {
+                name: nodeName,
+                children: []
+              };
+              children.push(childNode);
+            }
+            currentNode = childNode;
+          } else if (nodeName !== 0) {
+            // Reached the end of the sequence; create a leaf node.
+            childNode = {
+              name: nodeName,
+              m1: m1,
+              m2: m2
+            };
+            children.push(childNode);
+          }
+        }
+      }
+
+      function recurse(node) {
+        if (node.children) {
+          var sums;
+          var m1 = 0;
+          var m2 = 0;
+          for (var i = 0; i < node.children.length; i++) {
+            sums = recurse(node.children[i]);
+            m1 += sums[0];
+            m2 += sums[1];
+          }
+          node.m1 = m1;
+          node.m2 = m2;
+        }
+        return [node.m1, node.m2];
+      }
+      recurse(root);
+      return root;
+    }
+  };
+
+  return {
+    render: render,
+    resize: render
+  };
+}
+
+module.exports = sunburstVis;

dashed/assets/visualizations/table.css

@@ -0,0 +1,18 @@
+.gridster .widget.table {
+    overflow: auto !important;
+}
+
+.widget.table td.filtered {
+    background-color: #005a63;
+    color: white;
+}
+
+.table tr>th {
+    padding: 1px 5px !important;
+    font-size: small !important;
+}
+
+.table tr>td {
+    padding: 1px 5px !important;
+    font-size: small !important;
+}

dashed/assets/visualizations/table.js

@@ -0,0 +1,124 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var d3 = require('d3');
+
+require('./table.css');
+require('datatables');
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
+
+function tableVis(slice) {
+  var data = slice.data;
+  var form_data = data.form_data;
+  var f = d3.format('.3s');
+  var fC = d3.format('0,000');
+
+  function refresh() {
+    $.getJSON(slice.jsonEndpoint(), onSuccess).fail(onError);
+
+    function onError(xhr) {
+      slice.error(xhr.responseText);
+    }
+
+    function onSuccess(json) {
+      var data = json.data;
+      var metrics = json.form_data.metrics;
+
+      function col(c) {
+        var arr = [];
+        for (var i = 0; i < data.records.length; i++) {
+          arr.push(json.data.records[i][c]);
+        }
+        return arr;
+      }
+      var maxes = {};
+      for (var i = 0; i < metrics.length; i++) {
+        maxes[metrics[i]] = d3.max(col(metrics[i]));
+      }
+
+      var table = d3.select(slice.selector).append('table')
+        .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;
+        });
+
+      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]);
+            }
+          }
+        })
+        .style("cursor", function (d) {
+          if (!d.isMetric) {
+            return 'pointer';
+          }
+        })
+        .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
+      });
+      // Sorting table by main column
+      if (form_data.metrics.length > 0) {
+        var main_metric = form_data.metrics[0];
+        datatable.column(data.columns.indexOf(main_metric)).order('desc').draw();
+      }
+      slice.done(json);
+      slice.container.parents('.widget').find('.tooltip').remove();
+    }
+  }
+
+  return {
+    render: refresh,
+    resize: function () {}
+  };
+}
+
+module.exports = tableVis;

dashed/assets/visualizations/word_cloud.js

@@ -0,0 +1,91 @@
+var px = window.px || require('../javascripts/modules/dashed.js');
+var d3 = window.d3 || require('d3');
+var cloudLayout = require('d3-cloud');
+
+function wordCloudChart(slice) {
+  var chart = d3.select(slice.selector);
+
+  function refresh() {
+    d3.json(slice.jsonEndpoint(), function (error, json) {
+      if (error !== null) {
+        slice.error(error.responseText);
+        return '';
+      }
+      var data = json.data;
+      var range = [
+        json.form_data.size_from,
+        json.form_data.size_to
+      ];
+      var rotation = json.form_data.rotation;
+      var f_rotation;
+      if (rotation === "square") {
+        f_rotation = function () {
+          return ~~(Math.random() * 2) * 90;
+        };
+      } else if (rotation === "flat") {
+        f_rotation = function () {
+          return 0;
+        };
+      } else {
+        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;
+        }));
+
+      var layout = cloudLayout()
+        .size(size)
+        .words(data)
+        .padding(5)
+        .rotate(f_rotation)
+        .font("serif")
+        .fontSize(function (d) {
+          return scale(d.size);
+        })
+        .on("end", draw);
+
+      layout.start();
+
+      function draw(words) {
+        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) {
+            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);
+    });
+  }
+
+  return {
+    render: refresh,
+    resize: refresh
+  };
+}
+
+module.exports = wordCloudChart;

dashed/assets/visualizations/world_map.css

@@ -0,0 +1,7 @@
+.world_map svg {
+    background-color: #feffff;
+}
+
+.world_map {
+  position: relative;
+}

dashed/assets/visualizations/world_map.js

@@ -0,0 +1,110 @@
+// JS
+var d3 = window.d3 || require('d3');
+//var Datamap = require('../vendor/datamaps/datamaps.all.js');
+var Datamap = require('datamaps');
+
+// CSS
+require('./world_map.css');
+
+function worldMapChart(slice) {
+  var render = function () {
+    var container = slice.container;
+    var div = d3.select(slice.selector);
+
+    container.css('height', slice.height());
+
+    d3.json(slice.jsonEndpoint(), function (error, json) {
+      var fd = json.form_data;
+
+      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 radiusScale = d3.scale.linear()
+        .domain([extRadius[0], extRadius[1]])
+        .range([1, fd.max_bubble_size]);
+
+      json.data.forEach(function (d) {
+        d.radius = radiusScale(d.m2);
+      });
+
+      var colorScale = d3.scale.linear()
+        .domain([ext[0], ext[1]])
+        .range(["#FFF", "black"]);
+
+      var d = {};
+      for (var i = 0; i < json.data.length; i++) {
+        var country = json.data[i];
+        country.fillColor = colorScale(country.m1);
+        d[country.country] = country;
+      }
+
+      var f = d3.format('.3s');
+
+      container.show();
+
+      var map = new Datamap({
+        element: slice.container.get(0),
+        data: json.data,
+        fills: {
+          defaultFill: '#ddd'
+        },
+        geographyConfig: {
+          popupOnHover: true,
+          highlightOnHover: true,
+          borderWidth: 1,
+          borderColor: '#fff',
+          highlightBorderColor: '#fff',
+          highlightFillColor: '#005a63',
+          highlightBorderWidth: 1,
+          popupTemplate: function (geo, data) {
+            return '<div class="hoverinfo"><strong>' + data.name + '</strong><br>' + f(data.m1) + '</div>';
+          }
+        },
+        bubblesConfig: {
+          borderWidth: 1,
+          borderOpacity: 1,
+          borderColor: '#005a63',
+          popupOnHover: true,
+          radius: null,
+          popupTemplate: function (geo, data) {
+            return '<div class="hoverinfo"><strong>' + data.name + '</strong><br>' + f(data.m2) + '</div>';
+          },
+          fillOpacity: 0.5,
+          animate: true,
+          highlightOnHover: true,
+          highlightFillColor: '#005a63',
+          highlightBorderColor: 'black',
+          highlightBorderWidth: 2,
+          highlightBorderOpacity: 1,
+          highlightFillOpacity: 0.85,
+          exitDelay: 100,
+          key: JSON.stringify
+        }
+      });
+
+      map.updateChoropleth(d);
+
+      if (fd.show_bubbles) {
+        map.bubbles(json.data);
+        div.selectAll("circle.datamaps-bubble").style('fill', '#005a63');
+      }
+
+      slice.done(json);
+
+    });
+  };
+
+  return {
+    render: render,
+    resize: render
+  };
+}
+
+module.exports = worldMapChart;