diff --git a/bower.json b/bower.json
index 049b53d..fe88b57 100755
--- a/bower.json
+++ b/bower.json
@@ -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"
}
}
diff --git a/bower_components/d3-scatterplot/.bower.json b/bower_components/d3-scatterplot/.bower.json
index 975e3a1..6f72276 100644
--- a/bower_components/d3-scatterplot/.bower.json
+++ b/bower_components/d3-scatterplot/.bower.json
@@ -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
diff --git a/bower_components/d3-scatterplot/README.md b/bower_components/d3-scatterplot/README.md
index 9d4d741..a8644d0 100644
--- a/bower_components/d3-scatterplot/README.md
+++ b/bower_components/d3-scatterplot/README.md
@@ -1,5 +1,11 @@
# 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.
diff --git a/bower_components/d3-scatterplot/demo/demo.js b/bower_components/d3-scatterplot/demo/demo.js
index 08dfb6c..9a9d57b 100644
--- a/bower_components/d3-scatterplot/demo/demo.js
+++ b/bower_components/d3-scatterplot/demo/demo.js
@@ -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
+
diff --git a/bower_components/d3-scatterplot/demo/index.html b/bower_components/d3-scatterplot/demo/index.html
index e8bafbb..b04c02c 100644
--- a/bower_components/d3-scatterplot/demo/index.html
+++ b/bower_components/d3-scatterplot/demo/index.html
@@ -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>
diff --git a/bower_components/d3-scatterplot/dist/d3-scatterplot.js b/bower_components/d3-scatterplot/dist/d3-scatterplot.js
index df62d7f..249a47e 100644
--- a/bower_components/d3-scatterplot/dist/d3-scatterplot.js
+++ b/bower_components/d3-scatterplot/dist/d3-scatterplot.js
@@ -1,23 +1,34 @@
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();
};
diff --git a/bower_components/d3-scatterplot/dist/d3-scatterplot.min.js b/bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
index bd591cc..ad58efb 100644
--- a/bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
+++ b/bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
@@ -1,2 +1,2 @@
-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
diff --git a/bower_components/d3-scatterplot/src/d3-scatterplot-utils.js b/bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
index 5779dc2..14347ad 100644
--- a/bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
+++ b/bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
@@ -1,23 +1,34 @@
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
diff --git a/bower_components/d3-scatterplot/src/d3-scatterplot.js b/bower_components/d3-scatterplot/src/d3-scatterplot.js
index ad6e77f..4ee0b65 100644
--- a/bower_components/d3-scatterplot/src/d3-scatterplot.js
+++ b/bower_components/d3-scatterplot/src/d3-scatterplot.js
@@ -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();
};
diff --git a/datalets/scatterplot-datalet/scatterplot-datalet.html b/datalets/scatterplot-datalet/scatterplot-datalet.html
index 6470fd6..35b2a1d 100644
--- a/datalets/scatterplot-datalet/scatterplot-datalet.html
+++ b/datalets/scatterplot-datalet/scatterplot-datalet.html
@@ -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();
}
};