charts-d3, d3 scatterplot and scatterplot matrix update

mwasiluk
1 parent 752c1f5a
Showing 25 changed files with 460 additions and 1027 deletions
bower.json
bower_components/d3-scatterplot-matrix/LICENSE → bower_components/charts-d3/LICENSE
bower_components/d3-scatterplot/README.md → bower_components/charts-d3/README.md
bower_components/d3-scatterplot-matrix/bower.json → bower_components/charts-d3/bower.json
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.css → bower_components/charts-d3/dist/charts-d3.css
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.js → bower_components/charts-d3/dist/charts-d3.js
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.css → bower_components/charts-d3/dist/charts-d3.min.css
bower_components/charts-d3/dist/charts-d3.min.js
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.js
bower_components/d3-scatterplot/.bower.json
bower_components/d3-scatterplot/LICENSE
bower_components/d3-scatterplot/bower.json
bower_components/d3-scatterplot/demo/demo.js
bower_components/d3-scatterplot/demo/index.html
bower_components/d3-scatterplot/dist/d3-scatterplot.css
bower_components/d3-scatterplot/dist/d3-scatterplot.js
bower_components/d3-scatterplot/dist/d3-scatterplot.min.css
bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
bower_components/d3-scatterplot/gulpfile.js
bower_components/d3-scatterplot/package.json
@@ -20,7 +20,6 @@
     "iron-icon": "PolymerElements/iron-icon#~1.0.7",
     "iron-icons": "PolymerElements/iron-icons#~1.1.2",
     "paper-toast": "PolymerElements/paper-toast#~1.2.1",
-    "d3-scatterplot-matrix": "latest",
-    "d3-scatterplot": "latest"
+    "charts-d3": "latest"
   }
 }
-# d3-scatterplot
+# charts-d3   
 You can install this package through `Bower` :
-    bower install d3-scatterplot --save
+    bower install charts-d3 --save
 <br/><br/>
 <img src="http://routetopa.eu/wp-content/uploads/2015/06/eu-flag.jpg" width="22">
 This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 645860.
-
 {
-  "name": "d3-scatterplot-matrix",
-  "homepage": "https://github.com/mwasiluk/d3-scatterplot-matrix",
+  "name": "charts-d3",
+  "homepage": "https://github.com/mwasiluk/charts-d3",
   "authors": [
     "Michal Wasiluk"
   ],
   "description": "",
   "main": "",
   "keywords": [
-    "scatterplot",
     "d3",
-    "matrix"
-
+    "charts"
   ],
   "license": "MIT",
   "ignore": [
@@ -34,3 +34,18 @@ svg.mw-d3-scatterplot-matrix {
   padding: 3px 5px;
   border-radius: 8px;
   box-shadow: 1px 3px 3px #b7b7b7; }
+
+svg.mw-d3-scatterplot {
+  background-color: white;
+  font-size: 11px;
+  height: 100%; }
+  svg.mw-d3-scatterplot .mw-axis path {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges; }
+  svg.mw-d3-scatterplot .mw-axis line {
+    shape-rendering: crispEdges;
+    stroke: #eaeaea; }
+  svg.mw-d3-scatterplot .mw-axis.mw-no-guides line {
+    display: none;
+    stroke: #a6a6a6; }
-function D3ScatterPlotMatrixUtils() {
-}
-
-// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
-D3ScatterPlotMatrixUtils.prototype.deepExtend = function (out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks?
-
-    var utils = this;
-    var emptyOut = {};
-
-
-    if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
-        out = [];
-    }
-    out = out || {};
-
-    for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        if (!source)
-            continue;
-
-        for (var key in source) {
-            if (!source.hasOwnProperty(key)) {
-                continue;
-            }
-            var isArray = Array.isArray(out[key]);
-            var isObject = utils.isObject(out[key]);
-            var srcObj = utils.isObject(source[key]);
-
-            if (isObject && !isArray && srcObj) {
-                utils.deepExtend(out[key], source[key]);
-            } else {
-                out[key] = source[key];
-            }
-        }
-    }
-
-    return out;
-};
-
-D3ScatterPlotMatrixUtils.prototype.cross = function (a, b) {
-    var c = [], n = a.length, m = b.length, i, j;
-    for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
-    return c;
-};
-
-D3ScatterPlotMatrixUtils.prototype.inferTraits = function (data, categoryKey, includeCategory) {
-    var res = [];
-    if (data.length) {
-        var d = data[0];
-        if (d instanceof Array) {
-            res=  d.map(function (v, i) {
-                return i;
-            });
-        }else if (typeof d === 'object'){
-
-            for (var prop in d) {
-                if(!d.hasOwnProperty(prop)) continue;
-
-                res.push(prop);
-            }
-        }
-    }
-    if(!includeCategory){
-        var index = res.indexOf(categoryKey);
-        if (index > -1) {
-            res.splice(index, 1);
-        }
-    }
-    return res
-};
-
-
-D3ScatterPlotMatrixUtils.prototype.isObject = function(a) {
-    return a !== null && typeof a === 'object';
-};
-D3ScatterPlotMatrixUtils.prototype.isNumber = function(a) {
-    return !isNaN(a) && typeof a === 'number';
-};
-D3ScatterPlotMatrixUtils.prototype.isFunction = function(a) {
-    return typeof a === 'function';
-};
-
-D3ScatterPlotMatrixUtils.prototype.selectOrAppend = function (parent, selector, element) {
-    var selection = parent.select(selector);
-    if(selection.empty()){
-        return parent.append(element || selector);
-    }
-    return selection;
-};
 function D3ScatterPlotMatrix(placeholderSelector, data, config) {
-    this.utils = new D3ScatterPlotMatrixUtils();
+    this.utils = new ChartsD3Utils();
     this.placeholderSelector = placeholderSelector;
     this.svg = null;
     this.defaultConfig = {
-        width: 0,
-        size: 200, //cell size
-        padding: 20, //cell padding
+        width: undefined, //svg width (default: computed using cell size and margins)
+        size: 200, //scatter plot cell size
+        padding: 20, //scatter plot cell padding
         brush: true,
-        guides: true,
-        tooltip: true,
-        ticks: null,
+        guides: true, //show axis guides
+        tooltip: true, //show tooltip on dot hover
+        ticks: undefined, //ticks number, (default: computed using cell size)
         margin: {
             left: 30,
             right: 30,
@@ -118,20 +29,23 @@ function D3ScatterPlotMatrix(placeholderSelector, data, config) {
             color: null, // string or function returning color's value for color scale
             d3ColorCategory: 'category10'
         },
-        traits: {
-            labels: [], //optional array of trait labels
-            keys: [], //optional array of trait keys
-            categoryKey: null,
-            includeCategoryInPlot: false,
-            value: function (d, traitKey) {// trait value accessor
-                return d[traitKey];
+        variables: {
+            labels: [], //optional array of variable labels (for the diagonal of the plot).
+            keys: [], //optional array of variable keys
+            value: function (d, variableKey) {// variable value accessor
+                return d[variableKey];
             }
+        },
+        groups:{
+            key: undefined, //object property name or array index with grouping variable
+            includeInPlot: false //include group as variable in plot, boolean (default: false)
         }
+
     };
-    if (config) {
-        this.setConfig(config);
-    }
+
+    this.setConfig(config||{});
+
     if (data) {
         this.setData(data);
@@ -165,7 +79,7 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
         }
     };
-    this.setupTraits();
+    this.setupVariables();
     this.plot.size = conf.size;
@@ -174,7 +88,7 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
     var placeholderNode = d3.select(this.placeholderSelector).node();
     if (!width) {
-        var maxWidth = margin.left + margin.right + this.plot.traits.length*this.plot.size;
+        var maxWidth = margin.left + margin.right + this.plot.variables.length*this.plot.size;
         width = Math.min(placeholderNode.getBoundingClientRect().width, maxWidth);
     }
@@ -189,7 +103,7 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
-    if(conf.ticks===null){
+    if(conf.ticks===undefined){
         conf.ticks = this.plot.size / 40;
     }
@@ -212,9 +126,9 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
         }
-    }else if(conf.traits.categoryKey){
+    }else if(conf.groups.key){
         this.plot.dot.color = function (d) {
-            return self.plot.dot.colorCategory(d[conf.traits.categoryKey]);
+            return self.plot.dot.colorCategory(d[conf.groups.key]);
         }
     }
@@ -224,31 +138,31 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
 };
-D3ScatterPlotMatrix.prototype.setupTraits = function () {
-    var traitsConf = this.config.traits;
+D3ScatterPlotMatrix.prototype.setupVariables = function () {
+    var variablesConf = this.config.variables;
     var data = this.data;
     var plot = this.plot;
-    plot.domainByTrait = {};
-    plot.traits = traitsConf.keys;
-    if(!plot.traits || !plot.traits.length){
-        plot.traits = this.utils.inferTraits(data, traitsConf.categoryKey, traitsConf.includeCategoryInPlot);
+    plot.domainByVariable = {};
+    plot.variables = variablesConf.keys;
+    if(!plot.variables || !plot.variables.length){
+        plot.variables = this.utils.inferVariables(data, this.config.groups.key, this.config.includeInPlot);
     }
     plot.labels = [];
-    plot.labelByTrait = {};
-    plot.traits.forEach(function(traitKey, index) {
-        plot.domainByTrait[traitKey] = d3.extent(data, function(d) { return traitsConf.value(d, traitKey) });
-        var label = traitKey;
-        if(traitsConf.labels && traitsConf.labels.length>index){
+    plot.labelByVariable = {};
+    plot.variables.forEach(function(variableKey, index) {
+        plot.domainByVariable[variableKey] = d3.extent(data, function(d) { return variablesConf.value(d, variableKey) });
+        var label = variableKey;
+        if(variablesConf.labels && variablesConf.labels.length>index){
-            label = traitsConf.labels[index];
+            label = variablesConf.labels[index];
         }
         plot.labels.push(label);
-        plot.labelByTrait[traitKey] = label;
+        plot.labelByVariable[variableKey] = label;
     });
-    console.log(plot.labelByTrait);
+    console.log(plot.labelByVariable);
     plot.subplots = [];
 };
@@ -259,13 +173,13 @@ D3ScatterPlotMatrix.prototype.setupX = function () {
     var x = plot.x;
     var conf = this.config;
-    x.value = conf.traits.value;
+    x.value = conf.variables.value;
     x.scale = d3.scale[conf.x.scale]().range([conf.padding / 2, plot.size - conf.padding / 2]);
-    x.map = function (d, trait) {
-        return x.scale(x.value(d, trait));
+    x.map = function (d, variable) {
+        return x.scale(x.value(d, variable));
     };
     x.axis = d3.svg.axis().scale(x.scale).orient(conf.x.orient).ticks(conf.ticks);
-    x.axis.tickSize(plot.size * plot.traits.length);
+    x.axis.tickSize(plot.size * plot.variables.length);
 };
@@ -275,33 +189,33 @@ D3ScatterPlotMatrix.prototype.setupY = function () {
     var y = plot.y;
     var conf = this.config;
-    y.value = conf.traits.value;
+    y.value = conf.variables.value;
     y.scale = d3.scale[conf.y.scale]().range([ plot.size - conf.padding / 2, conf.padding / 2]);
-    y.map = function (d, trait) {
-        return y.scale(y.value(d, trait));
+    y.map = function (d, variable) {
+        return y.scale(y.value(d, variable));
     };
     y.axis= d3.svg.axis().scale(y.scale).orient(conf.y.orient).ticks(conf.ticks);
-    y.axis.tickSize(-plot.size * plot.traits.length);
+    y.axis.tickSize(-plot.size * plot.variables.length);
 };
 D3ScatterPlotMatrix.prototype.drawPlot = function () {
     var self =this;
-    var n = self.plot.traits.length;
+    var n = self.plot.variables.length;
     var conf = this.config;
     self.svgG.selectAll(".mw-axis-x.mw-axis")
-        .data(self.plot.traits)
+        .data(self.plot.variables)
         .enter().append("g")
         .attr("class", "mw-axis-x mw-axis"+(conf.guides ? '' : ' mw-no-guides'))
         .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * self.plot.size + ",0)"; })
-        .each(function(d) { self.plot.x.scale.domain(self.plot.domainByTrait[d]); d3.select(this).call(self.plot.x.axis); });
+        .each(function(d) { self.plot.x.scale.domain(self.plot.domainByVariable[d]); d3.select(this).call(self.plot.x.axis); });
     self.svgG.selectAll(".mw-axis-y.mw-axis")
-        .data(self.plot.traits)
+        .data(self.plot.variables)
         .enter().append("g")
         .attr("class", "mw-axis-y mw-axis"+(conf.guides ? '' : ' mw-no-guides'))
         .attr("transform", function(d, i) { return "translate(0," + i * self.plot.size + ")"; })
-        .each(function(d) { self.plot.y.scale.domain(self.plot.domainByTrait[d]); d3.select(this).call(self.plot.y.axis); });
+        .each(function(d) { self.plot.y.scale.domain(self.plot.domainByVariable[d]); d3.select(this).call(self.plot.y.axis); });
     if(conf.tooltip){
@@ -311,7 +225,7 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
     }
     var cell = self.svgG.selectAll(".mw-cell")
-        .data(self.utils.cross(self.plot.traits, self.plot.traits))
+        .data(self.utils.cross(self.plot.variables, self.plot.variables))
         .enter().append("g")
         .attr("class", "mw-cell")
         .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * self.plot.size + "," + d.j * self.plot.size + ")"; });
@@ -329,7 +243,7 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
         .attr("x", conf.padding)
         .attr("y", conf.padding)
         .attr("dy", ".71em")
-        .text(function(d) { return self.plot.labelByTrait[d.x]; });
+        .text(function(d) { return self.plot.labelByVariable[d.x]; });
@@ -339,8 +253,8 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
         plot.subplots.push(p);
         var cell = d3.select(this);
-        plot.x.scale.domain(plot.domainByTrait[p.x]);
-        plot.y.scale.domain(plot.domainByTrait[p.y]);
+        plot.x.scale.domain(plot.domainByVariable[p.x]);
+        plot.y.scale.domain(plot.domainByVariable[p.y]);
         cell.append("rect")
             .attr("class", "mw-frame")
@@ -461,8 +375,8 @@ D3ScatterPlotMatrix.prototype.drawBrush = function (cell) {
     function brushstart(p) {
         if (brushCell !== this) {
             d3.select(brushCell).call(brush.clear());
-            self.plot.x.scale.domain(self.plot.domainByTrait[p.x]);
-            self.plot.y.scale.domain(self.plot.domainByTrait[p.y]);
+            self.plot.x.scale.domain(self.plot.domainByVariable[p.x]);
+            self.plot.y.scale.domain(self.plot.domainByVariable[p.y]);
             brushCell = this;
         }
     }
@@ -481,3 +395,372 @@ D3ScatterPlotMatrix.prototype.drawBrush = function (cell) {
     }
 };
+
+function D3ScatterPlot(placeholderSelector, data, config){
+    this.utils = new ChartsD3Utils();
+    this.placeholderSelector = placeholderSelector;
+    this.svg=null;
+    this.defaultConfig = {
+        width: 0,
+        height: 0,
+        guides: false, //show axis guides
+        tooltip: true, //show tooltip on dot hover
+        margin:{
+            left: 50,
+            right: 30,
+            top: 30,
+            bottom: 50
+        },
+        x:{// X axis config
+            label: 'X', // axis label
+            value: function(d) { return d[0] }, // x value accessor
+            orient: "bottom",
+            scale: "linear"
+        },
+        y:{// Y axis config
+            label: 'Y', // axis label
+            value: function(d) { return d[1] }, // y value accessor
+            orient: "left",
+            scale: "linear"
+        },
+        dot:{
+            radius: 2,
+            color: 'black', // string or function returning color's value for color scale
+            d3ColorCategory: 'category10'
+        }
+    };
+
+    if(data){
+        this.setData(data);
+    }
+
+    if(config){
+        this.setConfig(config);
+    }
+
+    this.init();
+
+}
+
+D3ScatterPlot.prototype.setData = function (data){
+    this.data = data;
+    return this;
+};
+
+D3ScatterPlot.prototype.setConfig = function (config){
+    this.config = this.utils.deepExtend({}, this.defaultConfig, config);
+    return this;
+};
+D3ScatterPlot.prototype.initPlot = function (){
+    var self=this;
+    var margin = this.config.margin;
+    var conf = this.config;
+    this.plot={
+        x: {},
+        y: {},
+        dot: {
+            color: null//color scale mapping function
+        }
+    };
+
+    var width = conf.width;
+    var placeholderNode = d3.select(this.placeholderSelector).node();
+
+    if(!width){
+        width =placeholderNode.getBoundingClientRect().width;
+    }
+    var height = conf.height;
+    if(!height){
+        height =placeholderNode.getBoundingClientRect().height;
+    }
+
+    this.plot.width = width - margin.left - margin.right;
+    this.plot.height = height - margin.top - margin.bottom;
+
+    this.setupX();
+    this.setupY();
+
+    if(conf.dot.d3ColorCategory){
+        this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
+    }
+    var colorValue = conf.dot.color;
+    if(colorValue){
+        this.plot.dot.colorValue = colorValue;
+
+        if (typeof colorValue === 'string' || colorValue instanceof String){
+            this.plot.dot.color = colorValue;
+        }else if(this.plot.dot.colorCategory){
+            this.plot.dot.color = function(d){
+                return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
+            }
+        }
+
+
+    }
+
+    return this;
+};
+
+D3ScatterPlot.prototype.setupX = function (){
+
+    var plot = this.plot;
+    var x = plot.x;
+    var conf = this.config.x;
+
+    /*
+     * value accessor - returns the value to encode for a given data object.
+     * scale - maps value to a visual display encoding, such as a pixel position.
+     * map function - maps from data value to display value
+     * axis - sets up axis
+     */
+    x.value = conf.value;
+    x.scale = d3.scale[conf.scale]().range([0, plot.width]);
+    x.map = function(d) { return x.scale(x.value(d));};
+    x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
+    var data = this.data;
+    plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
+    if(this.config.guides) {
+        x.axis.tickSize(-plot.height);
+    }
+
+};
+
+D3ScatterPlot.prototype.setupY = function (){
+
+    var plot = this.plot;
+    var y = plot.y;
+    var conf = this.config.y;
+
+    /*
+     * value accessor - returns the value to encode for a given data object.
+     * scale - maps value to a visual display encoding, such as a pixel position.
+     * map function - maps from data value to display value
+     * axis - sets up axis
+     */
+    y.value = conf.value;
+    y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
+    y.map = function(d) { return y.scale(y.value(d));};
+    y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
+
+    if(this.config.guides){
+        y.axis.tickSize(-plot.width);
+    }
+
+
+    var data = this.data;
+    plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
+};
+
+D3ScatterPlot.prototype.draw = function (){
+    this.drawAxisX();
+    this.drawAxisY();
+    this.update();
+};
+D3ScatterPlot.prototype.drawAxisX = function (){
+    var self = this;
+    var plot = self.plot;
+    var axisConf = this.config.x;
+    self.svgG.append("g")
+        .attr("class", "mw-axis-x mw-axis"+(self.config.guides ? '' : ' mw-no-guides'))
+        .attr("transform", "translate(0," + plot.height + ")")
+        .call(plot.x.axis)
+        .append("text")
+        .attr("class", "mw-label")
+        .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")")  // text is drawn off the screen top left, move down and out and rotate
+        .attr("dy", "-1em")
+        .style("text-anchor", "middle")
+        .text(axisConf.label);
+};
+
+D3ScatterPlot.prototype.drawAxisY = function (){
+    var self = this;
+    var plot = self.plot;
+    var axisConf = this.config.y;
+    self.svgG.append("g")
+        .attr("class", "mw-axis mw-axis-y"+(self.config.guides ? '' : ' mw-no-guides'))
+        .call(plot.y.axis)
+        .append("text")
+        .attr("class", "mw-label")
+        .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
+        .attr("dy", "1em")
+        .style("text-anchor", "middle")
+        .text(axisConf.label);
+};
+
+
+D3ScatterPlot.prototype.update = function (){
+    var self = this;
+    var plot = self.plot;
+    var data = this.data;
+    var dots = self.svgG.selectAll(".mw-dot")
+        .data(data);
+
+    dots.enter().append("circle")
+        .attr("class", "mw-dot");
+
+
+    dots.attr("r", self.config.dot.radius)
+        .attr("cx", plot.x.map)
+        .attr("cy", plot.y.map);
+
+    if(plot.tooltip){
+        dots.on("mouseover", function(d) {
+            plot.tooltip.transition()
+                .duration(200)
+                .style("opacity", .9);
+            plot.tooltip.html("(" + plot.x.value(d)
+                + ", " +plot.y.value(d) + ")")
+                .style("left", (d3.event.pageX + 5) + "px")
+                .style("top", (d3.event.pageY - 28) + "px");
+        })
+            .on("mouseout", function(d) {
+                plot.tooltip.transition()
+                    .duration(500)
+                    .style("opacity", 0);
+            });
+    }
+
+    if(plot.dot.color){
+        dots.style("fill", plot.dot.color)
+    }
+    dots.exit().remove();
+
+};
+
+D3ScatterPlot.prototype.initSvg = function (){
+    var self = this;
+    var config = this.config;
+    
+    var width = self.plot.width+ config.margin.left + config.margin.right;
+    var height =  self.plot.height+ config.margin.top + config.margin.bottom;
+    var aspect = width / height;
+
+    self.svg = d3.select(self.placeholderSelector).select("svg");
+    if(!self.svg.empty()){
+        self.svg.remove();
+
+    }
+    self.svg = d3.select(self.placeholderSelector).append("svg");
+
+    self.svg 
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", "0 0 "+" "+width+" "+height)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .attr("class", "mw-d3-scatterplot");
+    self.svgG = self.svg.append("g")
+        .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
+
+    if(config.tooltip){
+        self.plot.tooltip = this.utils.selectOrAppend(d3.select(self.placeholderSelector), 'div.mw-tooltip', 'div')
+            .attr("class", "mw-tooltip")
+            .style("opacity", 0);
+    }
+
+    if(!config.width || config.height ){
+        d3.select(window)
+            .on("resize", function() {
+                //TODO add responsiveness if width/height not specified
+            });
+    }
+
+};
+
+D3ScatterPlot.prototype.init = function (){
+    var self = this;
+    self.initPlot();
+    self.initSvg();
+    self.draw();
+
+};
+
+
+function ChartsD3Utils() {
+}
+
+// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
+ChartsD3Utils.prototype.deepExtend = function (out) { 
+
+    var utils = this;
+    var emptyOut = {};
+
+
+    if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
+        out = [];
+    }
+    out = out || {};
+
+    for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        if (!source)
+            continue;
+
+        for (var key in source) {
+            if (!source.hasOwnProperty(key)) {
+                continue;
+            }
+            var isArray = Array.isArray(out[key]);
+            var isObject = utils.isObject(out[key]);
+            var srcObj = utils.isObject(source[key]);
+
+            if (isObject && !isArray && srcObj) {
+                utils.deepExtend(out[key], source[key]);
+            } else {
+                out[key] = source[key];
+            }
+        }
+    }
+
+    return out;
+};
+
+ChartsD3Utils.prototype.cross = function (a, b) {
+    var c = [], n = a.length, m = b.length, i, j;
+    for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
+    return c;
+};
+
+ChartsD3Utils.prototype.inferVariables = function (data, groupKey, includeGroup) {
+    var res = [];
+    if (data.length) {
+        var d = data[0];
+        if (d instanceof Array) {
+            res=  d.map(function (v, i) {
+                return i;
+            });
+        }else if (typeof d === 'object'){
+
+            for (var prop in d) {
+                if(!d.hasOwnProperty(prop)) continue;
+
+                res.push(prop);
+            }
+        }
+    }
+    if(!includeGroup){
+        var index = res.indexOf(groupKey);
+        if (index > -1) {
+            res.splice(index, 1);
+        }
+    }
+    return res
+};
+
+
+ChartsD3Utils.prototype.isObject = function(a) {
+    return a !== null && typeof a === 'object';
+};
+ChartsD3Utils.prototype.isNumber = function(a) {
+    return !isNaN(a) && typeof a === 'number';
+};
+ChartsD3Utils.prototype.isFunction = function(a) {
+    return typeof a === 'function';
+};
+
+ChartsD3Utils.prototype.selectOrAppend = function (parent, selector, element) {
+    var selection = parent.select(selector);
+    if(selection.empty()){
+        return parent.append(element || selector);
+    }
+    return selection;
+};
 \ No newline at end of file
-svg.mw-d3-scatterplot-matrix .mw-axis path,svg.mw-d3-scatterplot-matrix .mw-axis.mw-no-guides line{display:none}svg.mw-d3-scatterplot-matrix{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot-matrix .mw-axis{shape-rendering:crispEdges}svg.mw-d3-scatterplot-matrix .mw-axis line{stroke:#ddd}svg.mw-d3-scatterplot-matrix .mw-frame{shape-rendering:crispEdges;fill:none;stroke:#aaa}svg.mw-d3-scatterplot-matrix .mw-cell text{font-weight:700;text-transform:capitalize}svg.mw-d3-scatterplot-matrix circle{fill-opacity:.7}svg.mw-d3-scatterplot-matrix circle.hidden{fill:#ccc!important}svg.mw-d3-scatterplot-matrix .extent{fill:#000;fill-opacity:.125;stroke:#fff}.mw-tooltip{position:absolute;pointer-events:none;font-size:11px;background:#fdfdfd;padding:3px 5px;border-radius:8px;box-shadow:1px 3px 3px #b7b7b7}
 \ No newline at end of file
+svg.mw-d3-scatterplot-matrix .mw-axis path,svg.mw-d3-scatterplot-matrix .mw-axis.mw-no-guides line{display:none}svg.mw-d3-scatterplot-matrix{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot-matrix .mw-axis{shape-rendering:crispEdges}svg.mw-d3-scatterplot-matrix .mw-axis line{stroke:#ddd}svg.mw-d3-scatterplot-matrix .mw-frame{shape-rendering:crispEdges;fill:none;stroke:#aaa}svg.mw-d3-scatterplot-matrix .mw-cell text{font-weight:700;text-transform:capitalize}svg.mw-d3-scatterplot-matrix circle{fill-opacity:.7}svg.mw-d3-scatterplot-matrix circle.hidden{fill:#ccc!important}svg.mw-d3-scatterplot-matrix .extent{fill:#000;fill-opacity:.125;stroke:#fff}.mw-tooltip{position:absolute;pointer-events:none;font-size:11px;background:#fdfdfd;padding:3px 5px;border-radius:8px;box-shadow:1px 3px 3px #b7b7b7}
+svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}svg.mw-d3-scatterplot .mw-axis line{shape-rendering:crispEdges;stroke:#eaeaea}svg.mw-d3-scatterplot .mw-axis.mw-no-guides line{display:none;stroke:#a6a6a6}
 \ No newline at end of file
+function D3ScatterPlotMatrix(t,e,i){this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:void 0,size:200,padding:20,brush:!0,guides:!0,tooltip:!0,ticks:void 0,margin:{left:30,right:30,top:30,bottom:30},x:{orient:"bottom",scale:"linear"},y:{orient:"left",scale:"linear"},dot:{radius:2,color:null,d3ColorCategory:"category10"},variables:{labels:[],keys:[],value:function(t,e){return t[e]}},groups:{key:void 0,includeInPlot:!1}},this.setConfig(i||{}),e&&this.setData(e),this.init()}D3ScatterPlotMatrix.prototype.setData=function(t){return this.data=t,this},D3ScatterPlotMatrix.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlotMatrix.prototype.initPlot=function(){var t=this,e=this.config.margin,i=this.config;this.plot={x:{},y:{},dot:{color:null}},this.setupVariables(),this.plot.size=i.size;var a=i.width,o=d3.select(this.placeholderSelector).node();if(!a){var l=e.left+e.right+this.plot.variables.length*this.plot.size;a=Math.min(o.getBoundingClientRect().width,l)}var s=a;s||(s=o.getBoundingClientRect().height),this.plot.width=a-e.left-e.right,this.plot.height=s-e.top-e.bottom,void 0===i.ticks&&(i.ticks=this.plot.size/40),this.setupX(),this.setupY(),i.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[i.dot.d3ColorCategory]());var r=i.dot.color;return r?(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})):i.groups.key&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(e[i.groups.key])}),this},D3ScatterPlotMatrix.prototype.setupVariables=function(){var t=this.config.variables,e=this.data,i=this.plot;i.domainByVariable={},i.variables=t.keys,i.variables&&i.variables.length||(i.variables=this.utils.inferVariables(e,this.config.groups.key,this.config.includeInPlot)),i.labels=[],i.labelByVariable={},i.variables.forEach(function(a,o){i.domainByVariable[a]=d3.extent(e,function(e){return t.value(e,a)});var l=a;t.labels&&t.labels.length>o&&(l=t.labels[o]),i.labels.push(l),i.labelByVariable[a]=l}),void 0,i.subplots=[]},D3ScatterPlotMatrix.prototype.setupX=function(){var t=this.plot,e=t.x,i=this.config;e.value=i.variables.value,e.scale=d3.scale[i.x.scale]().range([i.padding/2,t.size-i.padding/2]),e.map=function(t,i){return e.scale(e.value(t,i))},e.axis=d3.svg.axis().scale(e.scale).orient(i.x.orient).ticks(i.ticks),e.axis.tickSize(t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.setupY=function(){var t=this.plot,e=t.y,i=this.config;e.value=i.variables.value,e.scale=d3.scale[i.y.scale]().range([t.size-i.padding/2,i.padding/2]),e.map=function(t,i){return e.scale(e.value(t,i))},e.axis=d3.svg.axis().scale(e.scale).orient(i.y.orient).ticks(i.ticks),e.axis.tickSize(-t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.drawPlot=function(){function t(t){var i=e.plot;i.subplots.push(t);var o=d3.select(this);i.x.scale.domain(i.domainByVariable[t.x]),i.y.scale.domain(i.domainByVariable[t.y]),o.append("rect").attr("class","mw-frame").attr("x",a.padding/2).attr("y",a.padding/2).attr("width",a.size-a.padding).attr("height",a.size-a.padding),t.update=function(){var t=this,a=o.selectAll("circle").data(e.data);a.enter().append("circle"),a.attr("cx",function(e){return i.x.map(e,t.x)}).attr("cy",function(e){return i.y.map(e,t.y)}).attr("r",e.config.dot.radius),i.dot.color&&a.style("fill",i.dot.color),i.tooltip&&a.on("mouseover",function(e){i.tooltip.transition().duration(200).style("opacity",.9),i.tooltip.html("("+i.x.value(e,t.x)+", "+i.y.value(e,t.y)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){i.tooltip.transition().duration(500).style("opacity",0)}),a.exit().remove()},t.update()}var e=this,i=e.plot.variables.length,a=this.config;e.svgG.selectAll(".mw-axis-x.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-x mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,a){return"translate("+(i-a-1)*e.plot.size+",0)"}).each(function(t){e.plot.x.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.x.axis)}),e.svgG.selectAll(".mw-axis-y.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-y mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,i){return"translate(0,"+i*e.plot.size+")"}).each(function(t){e.plot.y.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.y.axis)}),a.tooltip&&(e.plot.tooltip=this.utils.selectOrAppend(d3.select(e.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0));var o=e.svgG.selectAll(".mw-cell").data(e.utils.cross(e.plot.variables,e.plot.variables)).enter().append("g").attr("class","mw-cell").attr("transform",function(t){return"translate("+(i-t.i-1)*e.plot.size+","+t.j*e.plot.size+")"});a.brush&&this.drawBrush(o),o.each(t),o.filter(function(t){return t.i===t.j}).append("text").attr("x",a.padding).attr("y",a.padding).attr("dy",".71em").text(function(t){return e.plot.labelByVariable[t.x]})},D3ScatterPlotMatrix.prototype.update=function(){this.plot.subplots.forEach(function(t){t.update()})},D3ScatterPlotMatrix.prototype.initSvg=function(){var t=this,e=this.config,i=t.plot.width+e.margin.left+e.margin.right,a=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",i).attr("height",a).attr("viewBox","0 0  "+i+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot-matrix"),t.svgG=t.svg.append("g").attr("class","mw-container").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlotMatrix.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()},D3ScatterPlotMatrix.prototype.drawBrush=function(t){function e(t){s!==this&&(d3.select(s).call(l.clear()),o.plot.x.scale.domain(o.plot.domainByVariable[t.x]),o.plot.y.scale.domain(o.plot.domainByVariable[t.y]),s=this)}function i(t){var e=l.extent();o.svgG.selectAll("circle").classed("hidden",function(i){return e[0][0]>i[t.x]||i[t.x]>e[1][0]||e[0][1]>i[t.y]||i[t.y]>e[1][1]})}function a(){l.empty()&&o.svgG.selectAll(".hidden").classed("hidden",!1)}var o=this,l=d3.svg.brush().x(o.plot.x.scale).y(o.plot.y.scale).on("brushstart",e).on("brush",i).on("brushend",a);t.append("g").call(l);var s};
+function D3ScatterPlot(t,e,o){this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,height:0,guides:!1,tooltip:!0,margin:{left:50,right:30,top:30,bottom:50},x:{label:"X",value:function(t){return t[0]},orient:"bottom",scale:"linear"},y:{label:"Y",value:function(t){return t[1]},orient:"left",scale:"linear"},dot:{radius:2,color:"black",d3ColorCategory:"category10"}},e&&this.setData(e),o&&this.setConfig(o),this.init()}D3ScatterPlot.prototype.setData=function(t){return this.data=t,this},D3ScatterPlot.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlot.prototype.initPlot=function(){var t=this,e=this.config.margin,o=this.config;this.plot={x:{},y:{},dot:{color:null}};var i=o.width,a=d3.select(this.placeholderSelector).node();i||(i=a.getBoundingClientRect().width);var l=o.height;l||(l=a.getBoundingClientRect().height),this.plot.width=i-e.left-e.right,this.plot.height=l-e.top-e.bottom,this.setupX(),this.setupY(),o.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[o.dot.d3ColorCategory]());var r=o.dot.color;return r&&(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,e=t.x,o=this.config.x;e.value=o.value,e.scale=d3.scale[o.scale]().range([0,t.width]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient);var i=this.data;t.x.scale.domain([d3.min(i,t.x.value)-1,d3.max(i,t.x.value)+1]),this.config.guides&&e.axis.tickSize(-t.height)},D3ScatterPlot.prototype.setupY=function(){var t=this.plot,e=t.y,o=this.config.y;e.value=o.value,e.scale=d3.scale[o.scale]().range([t.height,0]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient),this.config.guides&&e.axis.tickSize(-t.width);var i=this.data;t.y.scale.domain([d3.min(i,t.y.value)-1,d3.max(i,t.y.value)+1])},D3ScatterPlot.prototype.draw=function(){this.drawAxisX(),this.drawAxisY(),this.update()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,e=t.plot,o=this.config.x;t.svgG.append("g").attr("class","mw-axis-x mw-axis"+(t.config.guides?"":" mw-no-guides")).attr("transform","translate(0,"+e.height+")").call(e.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+e.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,e=t.plot,o=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y"+(t.config.guides?"":" mw-no-guides")).call(e.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+e.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.update=function(){var t=this,e=t.plot,o=this.data,i=t.svgG.selectAll(".mw-dot").data(o);i.enter().append("circle").attr("class","mw-dot"),i.attr("r",t.config.dot.radius).attr("cx",e.x.map).attr("cy",e.y.map),e.tooltip&&i.on("mouseover",function(t){e.tooltip.transition().duration(200).style("opacity",.9),e.tooltip.html("("+e.x.value(t)+", "+e.y.value(t)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){e.tooltip.transition().duration(500).style("opacity",0)}),e.dot.color&&i.style("fill",e.dot.color),i.exit().remove()},D3ScatterPlot.prototype.initSvg=function(){var t=this,e=this.config,o=t.plot.width+e.margin.left+e.margin.right,i=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",o).attr("height",i).attr("viewBox","0 0  "+o+" "+i).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.tooltip&&(t.plot.tooltip=this.utils.selectOrAppend(d3.select(t.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0)),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.draw()};
+function ChartsD3Utils(){}ChartsD3Utils.prototype.deepExtend=function(t){var r=this;!t&&arguments.length>1&&Array.isArray(arguments[1])&&(t=[]),t=t||{};for(var e=1;e<arguments.length;e++){var n=arguments[e];if(n)for(var i in n)if(n.hasOwnProperty(i)){var o=Array.isArray(t[i]),s=r.isObject(t[i]),a=r.isObject(n[i]);s&&!o&&a?r.deepExtend(t[i],n[i]):t[i]=n[i]}}return t},ChartsD3Utils.prototype.cross=function(t,r){var e,n,i=[],o=t.length,s=r.length;for(e=-1;++e<o;)for(n=-1;++n<s;)i.push({x:t[e],i:e,y:r[n],j:n});return i},ChartsD3Utils.prototype.inferVariables=function(t,r,e){var n=[];if(t.length){var i=t[0];if(i instanceof Array)n=i.map(function(t,r){return r});else if("object"==typeof i)for(var o in i)i.hasOwnProperty(o)&&n.push(o)}if(!e){var s=n.indexOf(r);s>-1&&n.splice(s,1)}return n},ChartsD3Utils.prototype.isObject=function(t){return null!==t&&"object"==typeof t},ChartsD3Utils.prototype.isNumber=function(t){return!isNaN(t)&&"number"==typeof t},ChartsD3Utils.prototype.isFunction=function(t){return"function"==typeof t},ChartsD3Utils.prototype.selectOrAppend=function(t,r,e){var n=t.select(r);return n.empty()?t.append(e||r):n};
 \ No newline at end of file
-function D3ScatterPlotMatrixUtils(){}D3ScatterPlotMatrixUtils.prototype.deepExtend=function(t){var r=this;!t&&arguments.length>1&&Array.isArray(arguments[1])&&(t=[]),t=t||{};for(var e=1;e<arguments.length;e++){var i=arguments[e];if(i)for(var n in i)if(i.hasOwnProperty(n)){var o=Array.isArray(t[n]),a=r.isObject(t[n]),p=r.isObject(i[n]);a&&!o&&p?r.deepExtend(t[n],i[n]):t[n]=i[n]}}return t},D3ScatterPlotMatrixUtils.prototype.cross=function(t,r){var e,i,n=[],o=t.length,a=r.length;for(e=-1;++e<o;)for(i=-1;++i<a;)n.push({x:t[e],i:e,y:r[i],j:i});return n},D3ScatterPlotMatrixUtils.prototype.inferTraits=function(t,r,e){var i=[];if(t.length){var n=t[0];if(n instanceof Array)i=n.map(function(t,r){return r});else if("object"==typeof n)for(var o in n)n.hasOwnProperty(o)&&i.push(o)}if(!e){var a=i.indexOf(r);a>-1&&i.splice(a,1)}return i},D3ScatterPlotMatrixUtils.prototype.isObject=function(t){return null!==t&&"object"==typeof t},D3ScatterPlotMatrixUtils.prototype.isNumber=function(t){return!isNaN(t)&&"number"==typeof t},D3ScatterPlotMatrixUtils.prototype.isFunction=function(t){return"function"==typeof t},D3ScatterPlotMatrixUtils.prototype.selectOrAppend=function(t,r,e){var i=t.select(r);return i.empty()?t.append(e||r):i};
-function D3ScatterPlotMatrix(t,i,e){this.utils=new D3ScatterPlotMatrixUtils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,size:200,padding:20,brush:!0,guides:!0,tooltip:!0,ticks:null,margin:{left:30,right:30,top:30,bottom:30},x:{orient:"bottom",scale:"linear"},y:{orient:"left",scale:"linear"},dot:{radius:2,color:null,d3ColorCategory:"category10"},traits:{labels:[],keys:[],categoryKey:null,includeCategoryInPlot:!1,value:function(t,i){return t[i]}}},e&&this.setConfig(e),i&&this.setData(i),this.init()}D3ScatterPlotMatrix.prototype.setData=function(t){return this.data=t,this},D3ScatterPlotMatrix.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlotMatrix.prototype.initPlot=function(){var t=this,i=this.config.margin,e=this.config;this.plot={x:{},y:{},dot:{color:null}},this.setupTraits(),this.plot.size=e.size;var a=e.width,o=d3.select(this.placeholderSelector).node();if(!a){var l=i.left+i.right+this.plot.traits.length*this.plot.size;a=Math.min(o.getBoundingClientRect().width,l)}var r=a;r||(r=o.getBoundingClientRect().height),this.plot.width=a-i.left-i.right,this.plot.height=r-i.top-i.bottom,null===e.ticks&&(e.ticks=this.plot.size/40),this.setupX(),this.setupY(),e.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[e.dot.d3ColorCategory]());var s=e.dot.color;return s?(this.plot.dot.colorValue=s,"string"==typeof s||s instanceof String?this.plot.dot.color=s:this.plot.dot.colorCategory&&(this.plot.dot.color=function(i){return t.plot.dot.colorCategory(t.plot.dot.colorValue(i))})):e.traits.categoryKey&&(this.plot.dot.color=function(i){return t.plot.dot.colorCategory(i[e.traits.categoryKey])}),this},D3ScatterPlotMatrix.prototype.setupTraits=function(){var t=this.config.traits,i=this.data,e=this.plot;e.domainByTrait={},e.traits=t.keys,e.traits&&e.traits.length||(e.traits=this.utils.inferTraits(i,t.categoryKey,t.includeCategoryInPlot)),e.labels=[],e.labelByTrait={},e.traits.forEach(function(a,o){e.domainByTrait[a]=d3.extent(i,function(i){return t.value(i,a)});var l=a;t.labels&&t.labels.length>o&&(l=t.labels[o]),e.labels.push(l),e.labelByTrait[a]=l}),void 0,e.subplots=[]},D3ScatterPlotMatrix.prototype.setupX=function(){var t=this.plot,i=t.x,e=this.config;i.value=e.traits.value,i.scale=d3.scale[e.x.scale]().range([e.padding/2,t.size-e.padding/2]),i.map=function(t,e){return i.scale(i.value(t,e))},i.axis=d3.svg.axis().scale(i.scale).orient(e.x.orient).ticks(e.ticks),i.axis.tickSize(t.size*t.traits.length)},D3ScatterPlotMatrix.prototype.setupY=function(){var t=this.plot,i=t.y,e=this.config;i.value=e.traits.value,i.scale=d3.scale[e.y.scale]().range([t.size-e.padding/2,e.padding/2]),i.map=function(t,e){return i.scale(i.value(t,e))},i.axis=d3.svg.axis().scale(i.scale).orient(e.y.orient).ticks(e.ticks),i.axis.tickSize(-t.size*t.traits.length)},D3ScatterPlotMatrix.prototype.drawPlot=function(){function t(t){var e=i.plot;e.subplots.push(t);var o=d3.select(this);e.x.scale.domain(e.domainByTrait[t.x]),e.y.scale.domain(e.domainByTrait[t.y]),o.append("rect").attr("class","mw-frame").attr("x",a.padding/2).attr("y",a.padding/2).attr("width",a.size-a.padding).attr("height",a.size-a.padding),t.update=function(){var t=this,a=o.selectAll("circle").data(i.data);a.enter().append("circle"),a.attr("cx",function(i){return e.x.map(i,t.x)}).attr("cy",function(i){return e.y.map(i,t.y)}).attr("r",i.config.dot.radius),e.dot.color&&a.style("fill",e.dot.color),e.tooltip&&a.on("mouseover",function(i){e.tooltip.transition().duration(200).style("opacity",.9),e.tooltip.html("("+e.x.value(i,t.x)+", "+e.y.value(i,t.y)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){e.tooltip.transition().duration(500).style("opacity",0)}),a.exit().remove()},t.update()}var i=this,e=i.plot.traits.length,a=this.config;i.svgG.selectAll(".mw-axis-x.mw-axis").data(i.plot.traits).enter().append("g").attr("class","mw-axis-x mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,a){return"translate("+(e-a-1)*i.plot.size+",0)"}).each(function(t){i.plot.x.scale.domain(i.plot.domainByTrait[t]),d3.select(this).call(i.plot.x.axis)}),i.svgG.selectAll(".mw-axis-y.mw-axis").data(i.plot.traits).enter().append("g").attr("class","mw-axis-y mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,e){return"translate(0,"+e*i.plot.size+")"}).each(function(t){i.plot.y.scale.domain(i.plot.domainByTrait[t]),d3.select(this).call(i.plot.y.axis)}),a.tooltip&&(i.plot.tooltip=this.utils.selectOrAppend(d3.select(i.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0));var o=i.svgG.selectAll(".mw-cell").data(i.utils.cross(i.plot.traits,i.plot.traits)).enter().append("g").attr("class","mw-cell").attr("transform",function(t){return"translate("+(e-t.i-1)*i.plot.size+","+t.j*i.plot.size+")"});a.brush&&this.drawBrush(o),o.each(t),o.filter(function(t){return t.i===t.j}).append("text").attr("x",a.padding).attr("y",a.padding).attr("dy",".71em").text(function(t){return i.plot.labelByTrait[t.x]})},D3ScatterPlotMatrix.prototype.update=function(){this.plot.subplots.forEach(function(t){t.update()})},D3ScatterPlotMatrix.prototype.initSvg=function(){var t=this,i=this.config,e=t.plot.width+i.margin.left+i.margin.right,a=t.plot.height+i.margin.top+i.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",e).attr("height",a).attr("viewBox","0 0  "+e+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot-matrix"),t.svgG=t.svg.append("g").attr("class","mw-container").attr("transform","translate("+i.margin.left+","+i.margin.top+")"),i.width&&!i.height||d3.select(window).on("resize",function(){})},D3ScatterPlotMatrix.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()},D3ScatterPlotMatrix.prototype.drawBrush=function(t){function i(t){r!==this&&(d3.select(r).call(l.clear()),o.plot.x.scale.domain(o.plot.domainByTrait[t.x]),o.plot.y.scale.domain(o.plot.domainByTrait[t.y]),r=this)}function e(t){var i=l.extent();o.svgG.selectAll("circle").classed("hidden",function(e){return i[0][0]>e[t.x]||e[t.x]>i[1][0]||i[0][1]>e[t.y]||e[t.y]>i[1][1]})}function a(){l.empty()&&o.svgG.selectAll(".hidden").classed("hidden",!1)}var o=this,l=d3.svg.brush().x(o.plot.x.scale).y(o.plot.y.scale).on("brushstart",i).on("brush",e).on("brushend",a);t.append("g").call(l);var r};
 \ No newline at end of file
-{
-  "name": "d3-scatterplot",
-  "homepage": "https://github.com/mwasiluk/d3-scatterplot",
-  "authors": [
-    "Michal Wasiluk"
-  ],
-  "description": "",
-  "main": "",
-  "keywords": [
-    "scatterplot",
-    "d3"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "d3": "^3.5.17"
-  },
-  "version": "1.2.0",
-  "_release": "1.2.0",
-  "_resolution": {
-    "type": "version",
-    "tag": "1.2.0",
-    "commit": "0aaed8cda9972abba45aa474e2167663bee29098"
-  },
-  "_source": "https://github.com/mwasiluk/d3-scatterplot.git",
-  "_target": "^1.1.0",
-  "_originalSource": "d3-scatterplot"
-}
 \ No newline at end of file
-The MIT License (MIT)
-
-Copyright (c) 2016 Michał
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-{
-  "name": "d3-scatterplot",
-  "homepage": "https://github.com/mwasiluk/d3-scatterplot",
-  "authors": [
-    "Michal Wasiluk"
-  ],
-  "description": "",
-  "main": "",
-  "keywords": [
-    "scatterplot",
-    "d3"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "d3": "^3.5.17"
-  }
-}
-var conf = {
-    // width: 500,
-    // height: 500,
-    dot:{
-        // color: 'red'
-    },
-    x:{
-        // scale: "log"
-    }
-};
-var data = [
-    [1,2],
-    [2,3],
-    [3,4],
-    [6,4],
-    [11,3],
-    [1,3.5],
-    [7,4],
-    [5,4]
-
-];
-var plot = new D3ScatterPlot("#scatterplot", data, conf);
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>D3 scatterplot demo</title>
-    <link rel="stylesheet" href="../dist/d3-scatterplot.css">
-</head>
-<body>
-<h1>D3 scatterplot demo</h1>
-
-<div id="scatterplot" style=" width: 100%; height: 600px;"></div>
-
-<script src="../bower_components/d3/d3.min.js" charset="utf-8"></script>
-<script src="../dist/d3-scatterplot.js" charset="utf-8"></script>
-<script src="demo.js"></script>
-</body>
-</html>
 \ No newline at end of file
-svg.mw-d3-scatterplot {
-  background-color: white;
-  font-size: 11px;
-  height: 100%; }
-  svg.mw-d3-scatterplot .mw-axis path, svg.mw-d3-scatterplot .mw-axis line {
-    fill: none;
-    stroke: #000;
-    shape-rendering: crispEdges; }
-function D3ScatterPlotUtils(){}
-
-// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
-D3ScatterPlotUtils.prototype.deepExtend = function (out) {
-
-    var utils = this;
-    var emptyOut = {};
-
-
-    if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
-        out = [];
-    }
-    out = out || {};
-
-    for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        if (!source)
-            continue;
-
-        for (var key in source) {
-            if (!source.hasOwnProperty(key)) {
-                continue;
-            }
-            var isArray = Array.isArray(out[key]);
-            var isObject = utils.isObject(out[key]);
-            var srcObj = utils.isObject(source[key]);
-
-            if (isObject && !isArray && srcObj) {
-                utils.deepExtend(out[key], source[key]);
-            } else {
-                out[key] = source[key];
-            }
-        }
-    }
-
-    return out;
-};
-
-D3ScatterPlotUtils.prototype.isObject = function(a) {
-    return a !== null && typeof a === 'object';
-};
-D3ScatterPlotUtils.prototype.isNumber = function(a) {
-    return !isNaN(a) && typeof a === 'number';
-};
-D3ScatterPlotUtils.prototype.isFunction = function(a) {
-    return typeof a === 'function';
-};
-function D3ScatterPlot(placeholderSelector, data, config){
-    this.utils = new D3ScatterPlotUtils();
-    this.placeholderSelector = placeholderSelector;
-    this.svg=null;
-    this.defaultConfig = {
-        width: 0,
-        height: 0,
-        margin:{
-            left: 50,
-            right: 30,
-            top: 30,
-            bottom: 50
-        },
-        x:{// X axis config
-            label: 'X', // axis label
-            value: function(d) { return d[0] }, // x value accessor
-            orient: "bottom",
-            scale: "linear"
-        },
-        y:{// Y axis config
-            label: 'Y', // axis label
-            value: function(d) { return d[1] }, // y value accessor
-            orient: "left",
-            scale: "linear"
-        },
-        dot:{
-            radius: 2,
-            color: function(d) { return d[0]*d[1] }, // string or function returning color's value for color scale
-            d3ColorCategory: 'category10'
-        }
-    };
-
-    if(data){
-        this.setData(data);
-    }
-
-    if(config){
-        this.setConfig(config);
-    }
-
-    this.init();
-
-}
-
-D3ScatterPlot.prototype.setData = function (data){
-    this.data = data;
-    return this;
-};
-
-D3ScatterPlot.prototype.setConfig = function (config){
-    this.config = this.utils.deepExtend({}, this.defaultConfig, config);
-    return this;
-};
-D3ScatterPlot.prototype.initPlot = function (){
-    var self=this;
-    var margin = this.config.margin;
-    var conf = this.config;
-    this.plot={
-        x: {},
-        y: {},
-        dot: {
-            color: null//color scale mapping function
-        }
-    };
-
-    var width = conf.width;
-    var placeholderNode = d3.select(this.placeholderSelector).node();
-
-    if(!width){
-        width =placeholderNode.getBoundingClientRect().width;
-    }
-    var height = conf.height;
-    if(!height){
-        height =placeholderNode.getBoundingClientRect().height;
-    }
-
-    this.plot.width = width - margin.left - margin.right;
-    this.plot.height = height - margin.top - margin.bottom;
-
-    this.setupX();
-    this.setupY();
-
-    if(conf.dot.d3ColorCategory){
-        this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
-    }
-    var colorValue = conf.dot.color;
-    if(colorValue){
-        this.plot.dot.colorValue = colorValue;
-
-        if (typeof colorValue === 'string' || colorValue instanceof String){
-            this.plot.dot.color = colorValue;
-        }else if(this.plot.dot.colorCategory){
-            this.plot.dot.color = function(d){
-                return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
-            }
-        }
-
-
-    }
-
-    return this;
-};
-
-D3ScatterPlot.prototype.setupX = function (){
-
-    var plot = this.plot;
-    var x = plot.x;
-    var conf = this.config.x;
-
-    /*
-     * value accessor - returns the value to encode for a given data object.
-     * scale - maps value to a visual display encoding, such as a pixel position.
-     * map function - maps from data value to display value
-     * axis - sets up axis
-     */
-    x.value = conf.value;
-    x.scale = d3.scale[conf.scale]().range([0, plot.width]);
-    x.map = function(d) { return x.scale(x.value(d));};
-    x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
-    var data = this.data;
-    plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
-
-
-};
-
-D3ScatterPlot.prototype.setupY = function (){
-
-    var plot = this.plot;
-    var y = plot.y;
-    var conf = this.config.y;
-
-    /*
-     * value accessor - returns the value to encode for a given data object.
-     * scale - maps value to a visual display encoding, such as a pixel position.
-     * map function - maps from data value to display value
-     * axis - sets up axis
-     */
-    y.value = conf.value;
-    y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
-    y.map = function(d) { return y.scale(y.value(d));};
-    y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
-
-
-    var data = this.data;
-    plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
-};
-
-D3ScatterPlot.prototype.draw = function (){
-    this.drawAxisX();
-    this.drawAxisY();
-    this.update();
-};
-D3ScatterPlot.prototype.drawAxisX = function (){
-    var self = this;
-    var plot = self.plot;
-    var axisConf = this.config.x;
-    self.svgG.append("g")
-        .attr("class", "mw-axis mw-axis-x")
-        .attr("transform", "translate(0," + plot.height + ")")
-        .call(plot.x.axis)
-        .append("text")
-        .attr("class", "mw-label")
-        .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")")  // text is drawn off the screen top left, move down and out and rotate
-        .attr("dy", "-1em")
-        .style("text-anchor", "middle")
-        .text(axisConf.label);
-};
-
-D3ScatterPlot.prototype.drawAxisY = function (){
-    var self = this;
-    var plot = self.plot;
-    var axisConf = this.config.y;
-    self.svgG.append("g")
-        .attr("class", "mw-axis mw-axis-y")
-        .call(plot.y.axis)
-        .append("text")
-        .attr("class", "mw-label")
-        .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
-        .attr("dy", "1em")
-        .style("text-anchor", "middle")
-        .text(axisConf.label);
-};
-
-
-D3ScatterPlot.prototype.update = function (){
-    var self = this;
-    var plot = self.plot;
-    var data = this.data;
-    var dots = self.svgG.selectAll(".mw-dot")
-        .data(data);
-
-    dots.enter().append("circle")
-        .attr("class", "mw-dot");
-
-
-    dots.attr("r", self.config.dot.radius)
-        .attr("cx", plot.x.map)
-        .attr("cy", plot.y.map);
-
-    if(plot.dot.color){
-        dots.style("fill", plot.dot.color)
-    }
-    dots.exit().remove();
-
-};
-
-D3ScatterPlot.prototype.initSvg = function (){
-    var self = this;
-    var config = this.config;
-    
-    var width = self.plot.width+ config.margin.left + config.margin.right;
-    var height =  self.plot.height+ config.margin.top + config.margin.bottom;
-    var aspect = width / height;
-
-    self.svg = d3.select(self.placeholderSelector).select("svg");
-    if(!self.svg.empty()){
-        self.svg.remove();
-
-    }
-    self.svg = d3.select(self.placeholderSelector).append("svg");
-
-    self.svg 
-        .attr("width", width)
-        .attr("height", height)
-        .attr("viewBox", "0 0 "+" "+width+" "+height)
-        .attr("preserveAspectRatio", "xMidYMid meet")
-        .attr("class", "mw-d3-scatterplot");
-    self.svgG = self.svg.append("g")
-        .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
-
-    if(!config.width || config.height ){
-        d3.select(window)
-            .on("resize", function() {
-                //TODO add responsiveness if width/height not specified
-            });
-    }
-
-};
-
-D3ScatterPlot.prototype.init = function (){
-    var self = this;
-    self.initPlot();
-    self.initSvg();
-    self.draw();
-
-};
-
-svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis line,svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}
 \ No newline at end of file
-function D3ScatterPlotUtils(){}D3ScatterPlotUtils.prototype.deepExtend=function(t){var r=this;!t&&arguments.length>1&&Array.isArray(arguments[1])&&(t=[]),t=t||{};for(var e=1;e<arguments.length;e++){var o=arguments[e];if(o)for(var n in o)if(o.hasOwnProperty(n)){var i=Array.isArray(t[n]),a=r.isObject(t[n]),c=r.isObject(o[n]);a&&!i&&c?r.deepExtend(t[n],o[n]):t[n]=o[n]}}return t},D3ScatterPlotUtils.prototype.isObject=function(t){return null!==t&&"object"==typeof t},D3ScatterPlotUtils.prototype.isNumber=function(t){return!isNaN(t)&&"number"==typeof t},D3ScatterPlotUtils.prototype.isFunction=function(t){return"function"==typeof t};
-function D3ScatterPlot(t,e,o){this.utils=new D3ScatterPlotUtils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,height:0,margin:{left:50,right:30,top:30,bottom:50},x:{label:"X",value:function(t){return t[0]},orient:"bottom",scale:"linear"},y:{label:"Y",value:function(t){return t[1]},orient:"left",scale:"linear"},dot:{radius:2,color:function(t){return t[0]*t[1]},d3ColorCategory:"category10"}},e&&this.setData(e),o&&this.setConfig(o),this.init()}D3ScatterPlot.prototype.setData=function(t){return this.data=t,this},D3ScatterPlot.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlot.prototype.initPlot=function(){var t=this,e=this.config.margin,o=this.config;this.plot={x:{},y:{},dot:{color:null}};var a=o.width,i=d3.select(this.placeholderSelector).node();a||(a=i.getBoundingClientRect().width);var r=o.height;r||(r=i.getBoundingClientRect().height),this.plot.width=a-e.left-e.right,this.plot.height=r-e.top-e.bottom,this.setupX(),this.setupY(),o.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[o.dot.d3ColorCategory]());var l=o.dot.color;return l&&(this.plot.dot.colorValue=l,"string"==typeof l||l instanceof String?this.plot.dot.color=l:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,e=t.x,o=this.config.x;e.value=o.value,e.scale=d3.scale[o.scale]().range([0,t.width]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient);var a=this.data;t.x.scale.domain([d3.min(a,t.x.value)-1,d3.max(a,t.x.value)+1])},D3ScatterPlot.prototype.setupY=function(){var t=this.plot,e=t.y,o=this.config.y;e.value=o.value,e.scale=d3.scale[o.scale]().range([t.height,0]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient);var a=this.data;t.y.scale.domain([d3.min(a,t.y.value)-1,d3.max(a,t.y.value)+1])},D3ScatterPlot.prototype.draw=function(){this.drawAxisX(),this.drawAxisY(),this.update()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,e=t.plot,o=this.config.x;t.svgG.append("g").attr("class","mw-axis mw-axis-x").attr("transform","translate(0,"+e.height+")").call(e.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+e.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,e=t.plot,o=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y").call(e.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+e.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.update=function(){var t=this,e=t.plot,o=this.data,a=t.svgG.selectAll(".mw-dot").data(o);a.enter().append("circle").attr("class","mw-dot"),a.attr("r",t.config.dot.radius).attr("cx",e.x.map).attr("cy",e.y.map),e.dot.color&&a.style("fill",e.dot.color),a.exit().remove()},D3ScatterPlot.prototype.initSvg=function(){var t=this,e=this.config,o=t.plot.width+e.margin.left+e.margin.right,a=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",o).attr("height",a).attr("viewBox","0 0  "+o+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.draw()};
 \ No newline at end of file
-var gulp = require('gulp');
-var del = require('del');
-var merge = require('merge-stream');
-var plugins = require('gulp-load-plugins')();
-var browserSync = require('browser-sync').create();
-
-gulp.task('clean', function (cb) {
-    return del(['tmp', 'dist'], cb);
-});
-
-gulp.task('build-css', function () {
-    var pretty = gulp.src('./styles/*')
-        .pipe(plugins.plumber({ errorHandler: onError }))
-        .pipe(plugins.sass())
-        .pipe(plugins.minifyCss())
-        .pipe(plugins.rename({
-            extname: '.min.css'
-        }))
-        .pipe(gulp.dest('./dist'));
-    var ugly = gulp.src('./styles/*')
-        .pipe(plugins.plumber({ errorHandler: onError }))
-        .pipe(plugins.sass())
-        .pipe(plugins.rename({
-            extname: '.css'
-        }))
-        .pipe(gulp.dest('./dist'));
-    return merge(pretty, ugly);
-});
-
-gulp.task('build-js', function () {
-    var jsFileName = 'd3-scatterplot';
-   var pretty = gulp.src('./src/*.js')
-        .pipe(plugins.plumber({ errorHandler: onError }))
-        .pipe(plugins.concat(jsFileName+'.js'))
-        .pipe(gulp.dest('dist'));
-
-    var ugly = gulp.src('./src/*.js')
-        .pipe(plugins.plumber({ errorHandler: onError }))
-        .pipe(plugins.uglify())
-        .pipe(plugins.stripDebug())
-        .pipe(plugins.concat(jsFileName+'.min.js'))
-        .pipe(gulp.dest('dist'));
-
-    return merge(pretty, ugly);
-});
-
-gulp.task('build-clean', ['clean'], function () {
-    gulp.start('build');
-});
-
-gulp.task('build', ['build-css', 'build-js'], function () {
-
-});
-
-gulp.task('watch', function() {
-    return gulp.watch(['./src/**/*.html', './styles/*.*css', 'src/**/*.js'], ['default']);
-});
-
-gulp.task('default', ['build-clean'],  function() {
-
-});
-
-gulp.task('default-watch', ['default'], ()=>{ browserSync.reload() });
-gulp.task('serve', ['default'], ()=>{
-    browserSync.init({
-        server: {
-            baseDir: "demo",
-            index: "index.html",
-            routes: {
-                "/bower_components": "bower_components",
-                "/dist": "dist"
-            }
-        },
-        port: 8089,
-        open: 'local',
-        browser: "google chrome"
-    });
-    gulp.watch(['i18n/**/*.json', './src/**/*.html', './styles/*.*css', 'src/**/*.js', 'demo/*.*'], ['default-watch']);
-});
-
-// error function for plumber
-var onError = function (err) {
-    console.log(err);
-    this.emit('end');
-};
 \ No newline at end of file
-{
-  "name": "d3-scatterplot",
-  "version": "1.0.0",
-  "description": "d3 scatterplot",
-  "main": "gulpfile.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mwasiluk/d3-scatterplot.git"
-  },
-  "keywords": [
-    "d3",
-    "scatterplot"
-  ],
-  "author": "Michal Wasiluk",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/mwasiluk/d3-scatterplot/issues"
-  },
-  "homepage": "https://github.com/mwasiluk/d3-scatterplot#readme",
-  "devDependencies": {
-    "browser-sync": "^2.13.0",
-    "del": "^2.2.0",
-    "gulp": "^3.9.1",
-    "gulp-concat": "^2.6.0",
-    "gulp-load-plugins": "^1.2.4",
-    "gulp-minify-css": "^1.2.4",
-    "gulp-plumber": "^1.1.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.1",
-    "gulp-strip-debug": "^1.1.0",
-    "gulp-uglify": "^1.5.3",
-    "merge-stream": "^1.0.0"
-  }
-}
-function D3ScatterPlotUtils(){}
-
-// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
-D3ScatterPlotUtils.prototype.deepExtend = function (out) {
-
-    var utils = this;
-    var emptyOut = {};
-
-
-    if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
-        out = [];
-    }
-    out = out || {};
-
-    for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        if (!source)
-            continue;
-
-        for (var key in source) {
-            if (!source.hasOwnProperty(key)) {
-                continue;
-            }
-            var isArray = Array.isArray(out[key]);
-            var isObject = utils.isObject(out[key]);
-            var srcObj = utils.isObject(source[key]);
-
-            if (isObject && !isArray && srcObj) {
-                utils.deepExtend(out[key], source[key]);
-            } else {
-                out[key] = source[key];
-            }
-        }
-    }
-
-    return out;
-};
-
-D3ScatterPlotUtils.prototype.isObject = function(a) {
-    return a !== null && typeof a === 'object';
-};
-D3ScatterPlotUtils.prototype.isNumber = function(a) {
-    return !isNaN(a) && typeof a === 'number';
-};
-D3ScatterPlotUtils.prototype.isFunction = function(a) {
-    return typeof a === 'function';
-};
 \ No newline at end of file
-function D3ScatterPlot(placeholderSelector, data, config){
-    this.utils = new D3ScatterPlotUtils();
-    this.placeholderSelector = placeholderSelector;
-    this.svg=null;
-    this.defaultConfig = {
-        width: 0,
-        height: 0,
-        margin:{
-            left: 50,
-            right: 30,
-            top: 30,
-            bottom: 50
-        },
-        x:{// X axis config
-            label: 'X', // axis label
-            value: function(d) { return d[0] }, // x value accessor
-            orient: "bottom",
-            scale: "linear"
-        },
-        y:{// Y axis config
-            label: 'Y', // axis label
-            value: function(d) { return d[1] }, // y value accessor
-            orient: "left",
-            scale: "linear"
-        },
-        dot:{
-            radius: 2,
-            color: function(d) { return d[0]*d[1] }, // string or function returning color's value for color scale
-            d3ColorCategory: 'category10'
-        }
-    };
-
-    if(data){
-        this.setData(data);
-    }
-
-    if(config){
-        this.setConfig(config);
-    }
-
-    this.init();
-
-}
-
-D3ScatterPlot.prototype.setData = function (data){
-    this.data = data;
-    return this;
-};
-
-D3ScatterPlot.prototype.setConfig = function (config){
-    this.config = this.utils.deepExtend({}, this.defaultConfig, config);
-    return this;
-};
-D3ScatterPlot.prototype.initPlot = function (){
-    var self=this;
-    var margin = this.config.margin;
-    var conf = this.config;
-    this.plot={
-        x: {},
-        y: {},
-        dot: {
-            color: null//color scale mapping function
-        }
-    };
-
-    var width = conf.width;
-    var placeholderNode = d3.select(this.placeholderSelector).node();
-
-    if(!width){
-        width =placeholderNode.getBoundingClientRect().width;
-    }
-    var height = conf.height;
-    if(!height){
-        height =placeholderNode.getBoundingClientRect().height;
-    }
-
-    this.plot.width = width - margin.left - margin.right;
-    this.plot.height = height - margin.top - margin.bottom;
-
-    this.setupX();
-    this.setupY();
-
-    if(conf.dot.d3ColorCategory){
-        this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
-    }
-    var colorValue = conf.dot.color;
-    if(colorValue){
-        this.plot.dot.colorValue = colorValue;
-
-        if (typeof colorValue === 'string' || colorValue instanceof String){
-            this.plot.dot.color = colorValue;
-        }else if(this.plot.dot.colorCategory){
-            this.plot.dot.color = function(d){
-                return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
-            }
-        }
-
-
-    }
-
-    return this;
-};
-
-D3ScatterPlot.prototype.setupX = function (){
-
-    var plot = this.plot;
-    var x = plot.x;
-    var conf = this.config.x;
-
-    /*
-     * value accessor - returns the value to encode for a given data object.
-     * scale - maps value to a visual display encoding, such as a pixel position.
-     * map function - maps from data value to display value
-     * axis - sets up axis
-     */
-    x.value = conf.value;
-    x.scale = d3.scale[conf.scale]().range([0, plot.width]);
-    x.map = function(d) { return x.scale(x.value(d));};
-    x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
-    var data = this.data;
-    plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
-
-
-};
-
-D3ScatterPlot.prototype.setupY = function (){
-
-    var plot = this.plot;
-    var y = plot.y;
-    var conf = this.config.y;
-
-    /*
-     * value accessor - returns the value to encode for a given data object.
-     * scale - maps value to a visual display encoding, such as a pixel position.
-     * map function - maps from data value to display value
-     * axis - sets up axis
-     */
-    y.value = conf.value;
-    y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
-    y.map = function(d) { return y.scale(y.value(d));};
-    y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
-
-
-    var data = this.data;
-    plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
-};
-
-D3ScatterPlot.prototype.draw = function (){
-    this.drawAxisX();
-    this.drawAxisY();
-    this.update();
-};
-D3ScatterPlot.prototype.drawAxisX = function (){
-    var self = this;
-    var plot = self.plot;
-    var axisConf = this.config.x;
-    self.svgG.append("g")
-        .attr("class", "mw-axis mw-axis-x")
-        .attr("transform", "translate(0," + plot.height + ")")
-        .call(plot.x.axis)
-        .append("text")
-        .attr("class", "mw-label")
-        .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")")  // text is drawn off the screen top left, move down and out and rotate
-        .attr("dy", "-1em")
-        .style("text-anchor", "middle")
-        .text(axisConf.label);
-};
-
-D3ScatterPlot.prototype.drawAxisY = function (){
-    var self = this;
-    var plot = self.plot;
-    var axisConf = this.config.y;
-    self.svgG.append("g")
-        .attr("class", "mw-axis mw-axis-y")
-        .call(plot.y.axis)
-        .append("text")
-        .attr("class", "mw-label")
-        .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
-        .attr("dy", "1em")
-        .style("text-anchor", "middle")
-        .text(axisConf.label);
-};
-
-
-D3ScatterPlot.prototype.update = function (){
-    var self = this;
-    var plot = self.plot;
-    var data = this.data;
-    var dots = self.svgG.selectAll(".mw-dot")
-        .data(data);
-
-    dots.enter().append("circle")
-        .attr("class", "mw-dot");
-
-
-    dots.attr("r", self.config.dot.radius)
-        .attr("cx", plot.x.map)
-        .attr("cy", plot.y.map);
-
-    if(plot.dot.color){
-        dots.style("fill", plot.dot.color)
-    }
-    dots.exit().remove();
-
-};
-
-D3ScatterPlot.prototype.initSvg = function (){
-    var self = this;
-    var config = this.config;
-    
-    var width = self.plot.width+ config.margin.left + config.margin.right;
-    var height =  self.plot.height+ config.margin.top + config.margin.bottom;
-    var aspect = width / height;
-
-    self.svg = d3.select(self.placeholderSelector).select("svg");
-    if(!self.svg.empty()){
-        self.svg.remove();
-
-    }
-    self.svg = d3.select(self.placeholderSelector).append("svg");
-
-    self.svg 
-        .attr("width", width)
-        .attr("height", height)
-        .attr("viewBox", "0 0 "+" "+width+" "+height)
-        .attr("preserveAspectRatio", "xMidYMid meet")
-        .attr("class", "mw-d3-scatterplot");
-    self.svgG = self.svg.append("g")
-        .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
-
-    if(!config.width || config.height ){
-        d3.select(window)
-            .on("resize", function() {
-                //TODO add responsiveness if width/height not specified
-            });
-    }
-
-};
-
-D3ScatterPlot.prototype.init = function (){
-    var self = this;
-    self.initPlot();
-    self.initSvg();
-    self.draw();
-
-};
-
-svg.mw-d3-scatterplot{
-  background-color: white;
-  font-size: 11px;
-  height: 100%;
-  .mw-axis{
-
-    path, line{
-      fill: none;
-      stroke: #000;
-      shape-rendering: crispEdges;
-    }
-  }
-
-  .mw-dot {
-    //stroke: #000;
-  }
-
-}
@@ -4,7 +4,7 @@
 <dom-module id="scatterplot-datalet">
     <template>
-        <link rel="stylesheet" href="../../bower_components/d3-scatterplot/dist/d3-scatterplot.min.css">
+        <link rel="stylesheet" href="../../bower_components/charts-d3/dist/charts-d3.min.css">
         <style is="custom-style">
             :host ::content #scatterplot-placeholder {
                 width: 100%;
@@ -17,7 +17,7 @@
         <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}" export_menu="{{export_menu}}"></base-ajax-json-alasql-datalet>
     </template>
     <script src="../shared_js/d3.js"></script>
-    <script type="text/javascript" src="../../bower_components/d3-scatterplot/dist/d3-scatterplot.js"></script>
+    <script type="text/javascript" src="../../bower_components/charts-d3/dist/charts-d3.min.js"></script>
     <script>
         var ScatterplotBehavior = {
@@ -4,7 +4,7 @@
 <dom-module id="scatterplot-matrix-datalet">
     <template>
-        <link rel="stylesheet" href="../../bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.css">
+        <link rel="stylesheet" href="../../bower_components/charts-d3/dist/charts-d3.min.css">
         <style is="custom-style">
             :host ::content #scatterplot-placeholder {
                 width: 100%;
@@ -17,7 +17,7 @@
         <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}" export_menu="{{export_menu}}"></base-ajax-json-alasql-datalet>
     </template>
     <script src="../shared_js/d3.js"></script>
-    <script type="text/javascript" src="../../bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.js"></script>
+    <script type="text/javascript" src="../../bower_components/charts-d3/dist/charts-d3.js"></script>
     <script>
         var ScatterplotMatrixBehavior = {
@@ -25,7 +25,7 @@
                 var self =this;
                 var categories = [];
-                console.log(this.data);
+//                console.log(this.data);
                 var data = [];
@@ -39,17 +39,13 @@
                     data.push(d);
                 }
-                console.log(data);
-
-
                 var conf = {
                     guides: true,
                     brush: true,
                     tooltip: true,
-                    traits: {
-                        categoryKey: self._component.categoryKey
-
+                    groups: {
+                        key: self._component.categoryKey
                     },
                     margin:{
                         left: 50
@@ -59,7 +55,6 @@
                 if(self._component.cellSize){
                     conf.size=self._component.cellSize;
                 }
-                console.log('conf', conf);
                 var plot = new D3ScatterPlotMatrix("#scatterplot-placeholder", data, conf);
             }
         };