updated d3-scatterplot

mwasiluk
1 parent fc6c91b0
Showing 10 changed files with 145 additions and 74 deletions
bower.json
bower_components/d3-scatterplot/.bower.json
bower_components/d3-scatterplot/README.md
bower_components/d3-scatterplot/demo/demo.js
bower_components/d3-scatterplot/demo/index.html
bower_components/d3-scatterplot/dist/d3-scatterplot.js
bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
bower_components/d3-scatterplot/src/d3-scatterplot.js
datalets/scatterplot-datalet/scatterplot-datalet.html
@@ -20,6 +20,7 @@
     "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": "^0.1.0"
+    "d3-scatterplot-matrix": "^0.1.0",
+    "d3-scatterplot": "^1.1.0"
   }
 }
@@ -21,14 +21,14 @@
   "dependencies": {
     "d3": "^3.5.17"
   },
-  "version": "1.1.0",
-  "_release": "1.1.0",
+  "version": "1.2.0",
+  "_release": "1.2.0",
   "_resolution": {
     "type": "version",
-    "tag": "1.1.0",
-    "commit": "9b30b60eb35b60c7c8c83cd86107a27cae0b9db9"
+    "tag": "1.2.0",
+    "commit": "0aaed8cda9972abba45aa474e2167663bee29098"
   },
   "_source": "https://github.com/mwasiluk/d3-scatterplot.git",
-  "_target": "^1.0.0",
+  "_target": "^1.1.0",
   "_originalSource": "d3-scatterplot"
 }
 \ No newline at end of file
 # d3-scatterplot
+You can install this package through `Bower` :
+
+    bower install d3-scatterplot --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.
@@ -3,6 +3,9 @@ var conf = {
     // height: 500,
     dot:{
         // color: 'red'
+    },
+    x:{
+        // scale: "log"
     }
 };
 var data = [
@@ -17,4 +20,4 @@ var data = [
 ];
 var plot = new D3ScatterPlot("#scatterplot", data, conf);
-plot.init();
 \ No newline at end of file
+
@@ -8,7 +8,7 @@
 <body>
 <h1>D3 scatterplot demo</h1>
-<div id="scatterplot" style="width:auto; min-height:500px;"></div>
+<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>
 function D3ScatterPlotUtils(){}
 // usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
-D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks?
+D3ScatterPlotUtils.prototype.deepExtend = function (out) {
-    var utils =this;
+    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 obj = arguments[i];
-
-        if (!obj)
+        var source = arguments[i];
+        if (!source)
             continue;
-        for (var key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                if (typeof obj[key] === 'object')
-                    out[key] = utils.deepExtend(out[key], obj[key]);
-                else
-                    out[key] = obj[key];
+        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];
             }
         }
     }
@@ -25,7 +36,15 @@ D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using 
     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;
@@ -42,12 +61,14 @@ function D3ScatterPlot(placeholderSelector, data, config){
         x:{// X axis config
             label: 'X', // axis label
             value: function(d) { return d[0] }, // x value accessor
-            orient: "bottom"
+            orient: "bottom",
+            scale: "linear"
         },
         y:{// Y axis config
             label: 'Y', // axis label
             value: function(d) { return d[1] }, // y value accessor
-            orient: "left"
+            orient: "left",
+            scale: "linear"
         },
         dot:{
             radius: 2,
@@ -64,6 +85,8 @@ function D3ScatterPlot(placeholderSelector, data, config){
         this.setConfig(config);
     }
+    this.init();
+
 }
 D3ScatterPlot.prototype.setData = function (data){
@@ -138,7 +161,7 @@ D3ScatterPlot.prototype.setupX = function (){
      * axis - sets up axis
      */
     x.value = conf.value;
-    x.scale = d3.scale.linear().range([0, plot.width]);
+    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;
@@ -160,7 +183,7 @@ D3ScatterPlot.prototype.setupY = function (){
      * axis - sets up axis
      */
     y.value = conf.value;
-    y.scale = d3.scale.linear().range([plot.height, 0]);
+    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);
@@ -169,10 +192,10 @@ D3ScatterPlot.prototype.setupY = function (){
     plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
 };
-D3ScatterPlot.prototype.drawPlot = function (){
+D3ScatterPlot.prototype.draw = function (){
     this.drawAxisX();
     this.drawAxisY();
-    this.drawDots();
+    this.update();
 };
 D3ScatterPlot.prototype.drawAxisX = function (){
     var self = this;
@@ -206,34 +229,44 @@ D3ScatterPlot.prototype.drawAxisY = function (){
 };
-D3ScatterPlot.prototype.drawDots = function (){
+D3ScatterPlot.prototype.update = function (){
     var self = this;
     var plot = self.plot;
     var data = this.data;
     var dots = self.svgG.selectAll(".mw-dot")
-        .data(data)
-        .enter().append("circle")
-        .attr("class", "mw-dot")
-        .attr("r", self.config.dot.radius)
+        .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).append("svg")
+
+    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)
@@ -255,7 +288,7 @@ D3ScatterPlot.prototype.init = function (){
     var self = this;
     self.initPlot();
     self.initSvg();
-    self.drawPlot();
+    self.draw();
 };
-function D3ScatterPlotUtils(){}D3ScatterPlotUtils.prototype.deepExtend=function(t){var e=this;t=t||{};for(var r=1;r<arguments.length;r++){var o=arguments[r];if(o)for(var n in o)o.hasOwnProperty(n)&&("object"==typeof o[n]?t[n]=e.deepExtend(t[n],o[n]):t[n]=o[n])}return t};
-function D3ScatterPlot(t,o,e){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"},y:{label:"Y",value:function(t){return t[1]},orient:"left"},dot:{radius:2,color:function(t){return t[0]*t[1]},d3ColorCategory:"category10"}},o&&this.setData(o),e&&this.setConfig(e)}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,o=this.config.margin,e=this.config;this.plot={x:{},y:{},dot:{color:null}};var a=e.width,i=d3.select(this.placeholderSelector).node();a||(a=i.getBoundingClientRect().width);var r=e.height;r||(r=i.getBoundingClientRect().height),this.plot.width=a-o.left-o.right,this.plot.height=r-o.top-o.bottom,this.setupX(),this.setupY(),e.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[e.dot.d3ColorCategory]());var l=e.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(o){return t.plot.dot.colorCategory(t.plot.dot.colorValue(o))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,o=t.x,e=this.config.x;o.value=e.value,o.scale=d3.scale.linear().range([0,t.width]),o.map=function(t){return o.scale(o.value(t))},o.axis=d3.svg.axis().scale(o.scale).orient(e.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,o=t.y,e=this.config.y;o.value=e.value,o.scale=d3.scale.linear().range([t.height,0]),o.map=function(t){return o.scale(o.value(t))},o.axis=d3.svg.axis().scale(o.scale).orient(e.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.drawPlot=function(){this.drawAxisX(),this.drawAxisY(),this.drawDots()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,o=t.plot,e=this.config.x;t.svgG.append("g").attr("class","mw-axis mw-axis-x").attr("transform","translate(0,"+o.height+")").call(o.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+o.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(e.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,o=t.plot,e=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y").call(o.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+o.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(e.label)},D3ScatterPlot.prototype.drawDots=function(){var t=this,o=t.plot,e=this.data,a=t.svgG.selectAll(".mw-dot").data(e).enter().append("circle").attr("class","mw-dot").attr("r",t.config.dot.radius).attr("cx",o.x.map).attr("cy",o.y.map);o.dot.color&&a.style("fill",o.dot.color)},D3ScatterPlot.prototype.initSvg=function(){var t=this,o=this.config,e=t.plot.width+o.margin.left+o.margin.right,a=t.plot.height+o.margin.top+o.margin.bottom;t.svg=d3.select(t.placeholderSelector).append("svg").attr("width",e).attr("height",a).attr("viewBox","0 0  "+e+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+o.margin.left+","+o.margin.top+")"),o.width&&!o.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()};
 \ 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
 function D3ScatterPlotUtils(){}
 // usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
-D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks?
+D3ScatterPlotUtils.prototype.deepExtend = function (out) {
-    var utils =this;
+    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 obj = arguments[i];
-
-        if (!obj)
+        var source = arguments[i];
+        if (!source)
             continue;
-        for (var key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                if (typeof obj[key] === 'object')
-                    out[key] = utils.deepExtend(out[key], obj[key]);
-                else
-                    out[key] = obj[key];
+        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];
             }
         }
     }
@@ -25,3 +36,12 @@ D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using 
     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
@@ -14,12 +14,14 @@ function D3ScatterPlot(placeholderSelector, data, config){
         x:{// X axis config
             label: 'X', // axis label
             value: function(d) { return d[0] }, // x value accessor
-            orient: "bottom"
+            orient: "bottom",
+            scale: "linear"
         },
         y:{// Y axis config
             label: 'Y', // axis label
             value: function(d) { return d[1] }, // y value accessor
-            orient: "left"
+            orient: "left",
+            scale: "linear"
         },
         dot:{
             radius: 2,
@@ -36,6 +38,8 @@ function D3ScatterPlot(placeholderSelector, data, config){
         this.setConfig(config);
     }
+    this.init();
+
 }
 D3ScatterPlot.prototype.setData = function (data){
@@ -110,7 +114,7 @@ D3ScatterPlot.prototype.setupX = function (){
      * axis - sets up axis
      */
     x.value = conf.value;
-    x.scale = d3.scale.linear().range([0, plot.width]);
+    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;
@@ -132,7 +136,7 @@ D3ScatterPlot.prototype.setupY = function (){
      * axis - sets up axis
      */
     y.value = conf.value;
-    y.scale = d3.scale.linear().range([plot.height, 0]);
+    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);
@@ -141,10 +145,10 @@ D3ScatterPlot.prototype.setupY = function (){
     plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
 };
-D3ScatterPlot.prototype.drawPlot = function (){
+D3ScatterPlot.prototype.draw = function (){
     this.drawAxisX();
     this.drawAxisY();
-    this.drawDots();
+    this.update();
 };
 D3ScatterPlot.prototype.drawAxisX = function (){
     var self = this;
@@ -178,34 +182,44 @@ D3ScatterPlot.prototype.drawAxisY = function (){
 };
-D3ScatterPlot.prototype.drawDots = function (){
+D3ScatterPlot.prototype.update = function (){
     var self = this;
     var plot = self.plot;
     var data = this.data;
     var dots = self.svgG.selectAll(".mw-dot")
-        .data(data)
-        .enter().append("circle")
-        .attr("class", "mw-dot")
-        .attr("r", self.config.dot.radius)
+        .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).append("svg")
+
+    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)
@@ -227,7 +241,7 @@ D3ScatterPlot.prototype.init = function (){
     var self = this;
     self.initPlot();
     self.initSvg();
-    self.drawPlot();
+    self.draw();
 };
@@ -24,18 +24,12 @@
             presentData: function () {
                 var self =this;
-                var scatterSeries = [];
-                var series = [];
-                var point = [];
-
+                var data = [];
                 for (var j = 0; j < this.data[0]["data"].length; j++) {
                     point = [this.data[0].data[j], this.data[1].data[j]];
-                    series.push(point);
+                    data.push(point);
                 }
-                scatterSeries.push({data: series});
-
-                this.properties.series = scatterSeries;
                 this._component.legend = false;
                 var conf = {
@@ -52,7 +46,7 @@
                     }
                 };
-                var plot = new D3ScatterPlot("#scatterplot-placeholder", this.properties.series[0].data, conf);
+                var plot = new D3ScatterPlot("#scatterplot-placeholder", data, conf);
                 plot.init();
             }
         };