Commit 42187739fffa33cd2f0527ead51cb553b8ff258d

Authored by mwasiluk
1 parent fc6c91b0

updated d3-scatterplot

bower.json
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 "iron-icon": "PolymerElements/iron-icon#~1.0.7", 20 "iron-icon": "PolymerElements/iron-icon#~1.0.7",
21 "iron-icons": "PolymerElements/iron-icons#~1.1.2", 21 "iron-icons": "PolymerElements/iron-icons#~1.1.2",
22 "paper-toast": "PolymerElements/paper-toast#~1.2.1", 22 "paper-toast": "PolymerElements/paper-toast#~1.2.1",
23 - "d3-scatterplot-matrix": "^0.1.0" 23 + "d3-scatterplot-matrix": "^0.1.0",
  24 + "d3-scatterplot": "^1.1.0"
24 } 25 }
25 } 26 }
bower_components/d3-scatterplot/.bower.json
@@ -21,14 +21,14 @@ @@ -21,14 +21,14 @@
21 "dependencies": { 21 "dependencies": {
22 "d3": "^3.5.17" 22 "d3": "^3.5.17"
23 }, 23 },
24 - "version": "1.1.0",  
25 - "_release": "1.1.0", 24 + "version": "1.2.0",
  25 + "_release": "1.2.0",
26 "_resolution": { 26 "_resolution": {
27 "type": "version", 27 "type": "version",
28 - "tag": "1.1.0",  
29 - "commit": "9b30b60eb35b60c7c8c83cd86107a27cae0b9db9" 28 + "tag": "1.2.0",
  29 + "commit": "0aaed8cda9972abba45aa474e2167663bee29098"
30 }, 30 },
31 "_source": "https://github.com/mwasiluk/d3-scatterplot.git", 31 "_source": "https://github.com/mwasiluk/d3-scatterplot.git",
32 - "_target": "^1.0.0", 32 + "_target": "^1.1.0",
33 "_originalSource": "d3-scatterplot" 33 "_originalSource": "d3-scatterplot"
34 } 34 }
35 \ No newline at end of file 35 \ No newline at end of file
bower_components/d3-scatterplot/README.md
1 # d3-scatterplot 1 # d3-scatterplot
2 2
  3 +You can install this package through `Bower` :
  4 +
  5 + bower install d3-scatterplot --save
  6 +
  7 +
  8 +<br/><br/>
3 <img src="http://routetopa.eu/wp-content/uploads/2015/06/eu-flag.jpg" width="22"> 9 <img src="http://routetopa.eu/wp-content/uploads/2015/06/eu-flag.jpg" width="22">
4 This project has received funding from the European Unionโ€™s Horizon 2020 research and innovation programme under grant agreement No 645860. 10 This project has received funding from the European Unionโ€™s Horizon 2020 research and innovation programme under grant agreement No 645860.
5 11
bower_components/d3-scatterplot/demo/demo.js
@@ -3,6 +3,9 @@ var conf = { @@ -3,6 +3,9 @@ var conf = {
3 // height: 500, 3 // height: 500,
4 dot:{ 4 dot:{
5 // color: 'red' 5 // color: 'red'
  6 + },
  7 + x:{
  8 + // scale: "log"
6 } 9 }
7 }; 10 };
8 var data = [ 11 var data = [
@@ -17,4 +20,4 @@ var data = [ @@ -17,4 +20,4 @@ var data = [
17 20
18 ]; 21 ];
19 var plot = new D3ScatterPlot("#scatterplot", data, conf); 22 var plot = new D3ScatterPlot("#scatterplot", data, conf);
20 -plot.init();  
21 \ No newline at end of file 23 \ No newline at end of file
  24 +
bower_components/d3-scatterplot/demo/index.html
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 <body> 8 <body>
9 <h1>D3 scatterplot demo</h1> 9 <h1>D3 scatterplot demo</h1>
10 10
11 -<div id="scatterplot" style="width:auto; min-height:500px;"></div> 11 +<div id="scatterplot" style=" width: 100%; height: 600px;"></div>
12 12
13 <script src="../bower_components/d3/d3.min.js" charset="utf-8"></script> 13 <script src="../bower_components/d3/d3.min.js" charset="utf-8"></script>
14 <script src="../dist/d3-scatterplot.js" charset="utf-8"></script> 14 <script src="../dist/d3-scatterplot.js" charset="utf-8"></script>
bower_components/d3-scatterplot/dist/d3-scatterplot.js
1 function D3ScatterPlotUtils(){} 1 function D3ScatterPlotUtils(){}
2 2
3 // usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB); 3 // usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
4 -D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks? 4 +D3ScatterPlotUtils.prototype.deepExtend = function (out) {
5 5
6 - var utils =this; 6 + var utils = this;
  7 + var emptyOut = {};
  8 +
  9 +
  10 + if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
  11 + out = [];
  12 + }
7 out = out || {}; 13 out = out || {};
8 14
9 for (var i = 1; i < arguments.length; i++) { 15 for (var i = 1; i < arguments.length; i++) {
10 - var obj = arguments[i];  
11 -  
12 - if (!obj) 16 + var source = arguments[i];
  17 + if (!source)
13 continue; 18 continue;
14 19
15 - for (var key in obj) {  
16 - if (obj.hasOwnProperty(key)) {  
17 - if (typeof obj[key] === 'object')  
18 - out[key] = utils.deepExtend(out[key], obj[key]);  
19 - else  
20 - out[key] = obj[key]; 20 + for (var key in source) {
  21 + if (!source.hasOwnProperty(key)) {
  22 + continue;
  23 + }
  24 + var isArray = Array.isArray(out[key]);
  25 + var isObject = utils.isObject(out[key]);
  26 + var srcObj = utils.isObject(source[key]);
  27 +
  28 + if (isObject && !isArray && srcObj) {
  29 + utils.deepExtend(out[key], source[key]);
  30 + } else {
  31 + out[key] = source[key];
21 } 32 }
22 } 33 }
23 } 34 }
@@ -25,7 +36,15 @@ D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using @@ -25,7 +36,15 @@ D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using
25 return out; 36 return out;
26 }; 37 };
27 38
28 - 39 +D3ScatterPlotUtils.prototype.isObject = function(a) {
  40 + return a !== null && typeof a === 'object';
  41 +};
  42 +D3ScatterPlotUtils.prototype.isNumber = function(a) {
  43 + return !isNaN(a) && typeof a === 'number';
  44 +};
  45 +D3ScatterPlotUtils.prototype.isFunction = function(a) {
  46 + return typeof a === 'function';
  47 +};
29 function D3ScatterPlot(placeholderSelector, data, config){ 48 function D3ScatterPlot(placeholderSelector, data, config){
30 this.utils = new D3ScatterPlotUtils(); 49 this.utils = new D3ScatterPlotUtils();
31 this.placeholderSelector = placeholderSelector; 50 this.placeholderSelector = placeholderSelector;
@@ -42,12 +61,14 @@ function D3ScatterPlot(placeholderSelector, data, config){ @@ -42,12 +61,14 @@ function D3ScatterPlot(placeholderSelector, data, config){
42 x:{// X axis config 61 x:{// X axis config
43 label: 'X', // axis label 62 label: 'X', // axis label
44 value: function(d) { return d[0] }, // x value accessor 63 value: function(d) { return d[0] }, // x value accessor
45 - orient: "bottom" 64 + orient: "bottom",
  65 + scale: "linear"
46 }, 66 },
47 y:{// Y axis config 67 y:{// Y axis config
48 label: 'Y', // axis label 68 label: 'Y', // axis label
49 value: function(d) { return d[1] }, // y value accessor 69 value: function(d) { return d[1] }, // y value accessor
50 - orient: "left" 70 + orient: "left",
  71 + scale: "linear"
51 }, 72 },
52 dot:{ 73 dot:{
53 radius: 2, 74 radius: 2,
@@ -64,6 +85,8 @@ function D3ScatterPlot(placeholderSelector, data, config){ @@ -64,6 +85,8 @@ function D3ScatterPlot(placeholderSelector, data, config){
64 this.setConfig(config); 85 this.setConfig(config);
65 } 86 }
66 87
  88 + this.init();
  89 +
67 } 90 }
68 91
69 D3ScatterPlot.prototype.setData = function (data){ 92 D3ScatterPlot.prototype.setData = function (data){
@@ -138,7 +161,7 @@ D3ScatterPlot.prototype.setupX = function (){ @@ -138,7 +161,7 @@ D3ScatterPlot.prototype.setupX = function (){
138 * axis - sets up axis 161 * axis - sets up axis
139 */ 162 */
140 x.value = conf.value; 163 x.value = conf.value;
141 - x.scale = d3.scale.linear().range([0, plot.width]); 164 + x.scale = d3.scale[conf.scale]().range([0, plot.width]);
142 x.map = function(d) { return x.scale(x.value(d));}; 165 x.map = function(d) { return x.scale(x.value(d));};
143 x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient); 166 x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
144 var data = this.data; 167 var data = this.data;
@@ -160,7 +183,7 @@ D3ScatterPlot.prototype.setupY = function (){ @@ -160,7 +183,7 @@ D3ScatterPlot.prototype.setupY = function (){
160 * axis - sets up axis 183 * axis - sets up axis
161 */ 184 */
162 y.value = conf.value; 185 y.value = conf.value;
163 - y.scale = d3.scale.linear().range([plot.height, 0]); 186 + y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
164 y.map = function(d) { return y.scale(y.value(d));}; 187 y.map = function(d) { return y.scale(y.value(d));};
165 y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient); 188 y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
166 189
@@ -169,10 +192,10 @@ D3ScatterPlot.prototype.setupY = function (){ @@ -169,10 +192,10 @@ D3ScatterPlot.prototype.setupY = function (){
169 plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]); 192 plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
170 }; 193 };
171 194
172 -D3ScatterPlot.prototype.drawPlot = function (){ 195 +D3ScatterPlot.prototype.draw = function (){
173 this.drawAxisX(); 196 this.drawAxisX();
174 this.drawAxisY(); 197 this.drawAxisY();
175 - this.drawDots(); 198 + this.update();
176 }; 199 };
177 D3ScatterPlot.prototype.drawAxisX = function (){ 200 D3ScatterPlot.prototype.drawAxisX = function (){
178 var self = this; 201 var self = this;
@@ -206,34 +229,44 @@ D3ScatterPlot.prototype.drawAxisY = function (){ @@ -206,34 +229,44 @@ D3ScatterPlot.prototype.drawAxisY = function (){
206 }; 229 };
207 230
208 231
209 -D3ScatterPlot.prototype.drawDots = function (){ 232 +D3ScatterPlot.prototype.update = function (){
210 var self = this; 233 var self = this;
211 var plot = self.plot; 234 var plot = self.plot;
212 var data = this.data; 235 var data = this.data;
213 var dots = self.svgG.selectAll(".mw-dot") 236 var dots = self.svgG.selectAll(".mw-dot")
214 - .data(data)  
215 - .enter().append("circle")  
216 - .attr("class", "mw-dot")  
217 - .attr("r", self.config.dot.radius) 237 + .data(data);
  238 +
  239 + dots.enter().append("circle")
  240 + .attr("class", "mw-dot");
  241 +
  242 +
  243 + dots.attr("r", self.config.dot.radius)
218 .attr("cx", plot.x.map) 244 .attr("cx", plot.x.map)
219 .attr("cy", plot.y.map); 245 .attr("cy", plot.y.map);
220 246
221 if(plot.dot.color){ 247 if(plot.dot.color){
222 dots.style("fill", plot.dot.color) 248 dots.style("fill", plot.dot.color)
223 } 249 }
  250 + dots.exit().remove();
224 251
225 }; 252 };
226 253
227 D3ScatterPlot.prototype.initSvg = function (){ 254 D3ScatterPlot.prototype.initSvg = function (){
228 var self = this; 255 var self = this;
229 var config = this.config; 256 var config = this.config;
230 -  
231 -  
232 - 257 +
233 var width = self.plot.width+ config.margin.left + config.margin.right; 258 var width = self.plot.width+ config.margin.left + config.margin.right;
234 var height = self.plot.height+ config.margin.top + config.margin.bottom; 259 var height = self.plot.height+ config.margin.top + config.margin.bottom;
235 var aspect = width / height; 260 var aspect = width / height;
236 - self.svg = d3.select(self.placeholderSelector).append("svg") 261 +
  262 + self.svg = d3.select(self.placeholderSelector).select("svg");
  263 + if(!self.svg.empty()){
  264 + self.svg.remove();
  265 +
  266 + }
  267 + self.svg = d3.select(self.placeholderSelector).append("svg");
  268 +
  269 + self.svg
237 .attr("width", width) 270 .attr("width", width)
238 .attr("height", height) 271 .attr("height", height)
239 .attr("viewBox", "0 0 "+" "+width+" "+height) 272 .attr("viewBox", "0 0 "+" "+width+" "+height)
@@ -255,7 +288,7 @@ D3ScatterPlot.prototype.init = function (){ @@ -255,7 +288,7 @@ D3ScatterPlot.prototype.init = function (){
255 var self = this; 288 var self = this;
256 self.initPlot(); 289 self.initPlot();
257 self.initSvg(); 290 self.initSvg();
258 - self.drawPlot(); 291 + self.draw();
259 292
260 }; 293 };
261 294
bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
1 -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};  
2 -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()};  
3 \ No newline at end of file 1 \ No newline at end of file
  2 +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};
  3 +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()};
4 \ No newline at end of file 4 \ No newline at end of file
bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
1 function D3ScatterPlotUtils(){} 1 function D3ScatterPlotUtils(){}
2 2
3 // usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB); 3 // usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
4 -D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks? 4 +D3ScatterPlotUtils.prototype.deepExtend = function (out) {
5 5
6 - var utils =this; 6 + var utils = this;
  7 + var emptyOut = {};
  8 +
  9 +
  10 + if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
  11 + out = [];
  12 + }
7 out = out || {}; 13 out = out || {};
8 14
9 for (var i = 1; i < arguments.length; i++) { 15 for (var i = 1; i < arguments.length; i++) {
10 - var obj = arguments[i];  
11 -  
12 - if (!obj) 16 + var source = arguments[i];
  17 + if (!source)
13 continue; 18 continue;
14 19
15 - for (var key in obj) {  
16 - if (obj.hasOwnProperty(key)) {  
17 - if (typeof obj[key] === 'object')  
18 - out[key] = utils.deepExtend(out[key], obj[key]);  
19 - else  
20 - out[key] = obj[key]; 20 + for (var key in source) {
  21 + if (!source.hasOwnProperty(key)) {
  22 + continue;
  23 + }
  24 + var isArray = Array.isArray(out[key]);
  25 + var isObject = utils.isObject(out[key]);
  26 + var srcObj = utils.isObject(source[key]);
  27 +
  28 + if (isObject && !isArray && srcObj) {
  29 + utils.deepExtend(out[key], source[key]);
  30 + } else {
  31 + out[key] = source[key];
21 } 32 }
22 } 33 }
23 } 34 }
@@ -25,3 +36,12 @@ D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using @@ -25,3 +36,12 @@ D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using
25 return out; 36 return out;
26 }; 37 };
27 38
  39 +D3ScatterPlotUtils.prototype.isObject = function(a) {
  40 + return a !== null && typeof a === 'object';
  41 +};
  42 +D3ScatterPlotUtils.prototype.isNumber = function(a) {
  43 + return !isNaN(a) && typeof a === 'number';
  44 +};
  45 +D3ScatterPlotUtils.prototype.isFunction = function(a) {
  46 + return typeof a === 'function';
  47 +};
28 \ No newline at end of file 48 \ No newline at end of file
bower_components/d3-scatterplot/src/d3-scatterplot.js
@@ -14,12 +14,14 @@ function D3ScatterPlot(placeholderSelector, data, config){ @@ -14,12 +14,14 @@ function D3ScatterPlot(placeholderSelector, data, config){
14 x:{// X axis config 14 x:{// X axis config
15 label: 'X', // axis label 15 label: 'X', // axis label
16 value: function(d) { return d[0] }, // x value accessor 16 value: function(d) { return d[0] }, // x value accessor
17 - orient: "bottom" 17 + orient: "bottom",
  18 + scale: "linear"
18 }, 19 },
19 y:{// Y axis config 20 y:{// Y axis config
20 label: 'Y', // axis label 21 label: 'Y', // axis label
21 value: function(d) { return d[1] }, // y value accessor 22 value: function(d) { return d[1] }, // y value accessor
22 - orient: "left" 23 + orient: "left",
  24 + scale: "linear"
23 }, 25 },
24 dot:{ 26 dot:{
25 radius: 2, 27 radius: 2,
@@ -36,6 +38,8 @@ function D3ScatterPlot(placeholderSelector, data, config){ @@ -36,6 +38,8 @@ function D3ScatterPlot(placeholderSelector, data, config){
36 this.setConfig(config); 38 this.setConfig(config);
37 } 39 }
38 40
  41 + this.init();
  42 +
39 } 43 }
40 44
41 D3ScatterPlot.prototype.setData = function (data){ 45 D3ScatterPlot.prototype.setData = function (data){
@@ -110,7 +114,7 @@ D3ScatterPlot.prototype.setupX = function (){ @@ -110,7 +114,7 @@ D3ScatterPlot.prototype.setupX = function (){
110 * axis - sets up axis 114 * axis - sets up axis
111 */ 115 */
112 x.value = conf.value; 116 x.value = conf.value;
113 - x.scale = d3.scale.linear().range([0, plot.width]); 117 + x.scale = d3.scale[conf.scale]().range([0, plot.width]);
114 x.map = function(d) { return x.scale(x.value(d));}; 118 x.map = function(d) { return x.scale(x.value(d));};
115 x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient); 119 x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
116 var data = this.data; 120 var data = this.data;
@@ -132,7 +136,7 @@ D3ScatterPlot.prototype.setupY = function (){ @@ -132,7 +136,7 @@ D3ScatterPlot.prototype.setupY = function (){
132 * axis - sets up axis 136 * axis - sets up axis
133 */ 137 */
134 y.value = conf.value; 138 y.value = conf.value;
135 - y.scale = d3.scale.linear().range([plot.height, 0]); 139 + y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
136 y.map = function(d) { return y.scale(y.value(d));}; 140 y.map = function(d) { return y.scale(y.value(d));};
137 y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient); 141 y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
138 142
@@ -141,10 +145,10 @@ D3ScatterPlot.prototype.setupY = function (){ @@ -141,10 +145,10 @@ D3ScatterPlot.prototype.setupY = function (){
141 plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]); 145 plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
142 }; 146 };
143 147
144 -D3ScatterPlot.prototype.drawPlot = function (){ 148 +D3ScatterPlot.prototype.draw = function (){
145 this.drawAxisX(); 149 this.drawAxisX();
146 this.drawAxisY(); 150 this.drawAxisY();
147 - this.drawDots(); 151 + this.update();
148 }; 152 };
149 D3ScatterPlot.prototype.drawAxisX = function (){ 153 D3ScatterPlot.prototype.drawAxisX = function (){
150 var self = this; 154 var self = this;
@@ -178,34 +182,44 @@ D3ScatterPlot.prototype.drawAxisY = function (){ @@ -178,34 +182,44 @@ D3ScatterPlot.prototype.drawAxisY = function (){
178 }; 182 };
179 183
180 184
181 -D3ScatterPlot.prototype.drawDots = function (){ 185 +D3ScatterPlot.prototype.update = function (){
182 var self = this; 186 var self = this;
183 var plot = self.plot; 187 var plot = self.plot;
184 var data = this.data; 188 var data = this.data;
185 var dots = self.svgG.selectAll(".mw-dot") 189 var dots = self.svgG.selectAll(".mw-dot")
186 - .data(data)  
187 - .enter().append("circle")  
188 - .attr("class", "mw-dot")  
189 - .attr("r", self.config.dot.radius) 190 + .data(data);
  191 +
  192 + dots.enter().append("circle")
  193 + .attr("class", "mw-dot");
  194 +
  195 +
  196 + dots.attr("r", self.config.dot.radius)
190 .attr("cx", plot.x.map) 197 .attr("cx", plot.x.map)
191 .attr("cy", plot.y.map); 198 .attr("cy", plot.y.map);
192 199
193 if(plot.dot.color){ 200 if(plot.dot.color){
194 dots.style("fill", plot.dot.color) 201 dots.style("fill", plot.dot.color)
195 } 202 }
  203 + dots.exit().remove();
196 204
197 }; 205 };
198 206
199 D3ScatterPlot.prototype.initSvg = function (){ 207 D3ScatterPlot.prototype.initSvg = function (){
200 var self = this; 208 var self = this;
201 var config = this.config; 209 var config = this.config;
202 -  
203 -  
204 - 210 +
205 var width = self.plot.width+ config.margin.left + config.margin.right; 211 var width = self.plot.width+ config.margin.left + config.margin.right;
206 var height = self.plot.height+ config.margin.top + config.margin.bottom; 212 var height = self.plot.height+ config.margin.top + config.margin.bottom;
207 var aspect = width / height; 213 var aspect = width / height;
208 - self.svg = d3.select(self.placeholderSelector).append("svg") 214 +
  215 + self.svg = d3.select(self.placeholderSelector).select("svg");
  216 + if(!self.svg.empty()){
  217 + self.svg.remove();
  218 +
  219 + }
  220 + self.svg = d3.select(self.placeholderSelector).append("svg");
  221 +
  222 + self.svg
209 .attr("width", width) 223 .attr("width", width)
210 .attr("height", height) 224 .attr("height", height)
211 .attr("viewBox", "0 0 "+" "+width+" "+height) 225 .attr("viewBox", "0 0 "+" "+width+" "+height)
@@ -227,7 +241,7 @@ D3ScatterPlot.prototype.init = function (){ @@ -227,7 +241,7 @@ D3ScatterPlot.prototype.init = function (){
227 var self = this; 241 var self = this;
228 self.initPlot(); 242 self.initPlot();
229 self.initSvg(); 243 self.initSvg();
230 - self.drawPlot(); 244 + self.draw();
231 245
232 }; 246 };
233 247
datalets/scatterplot-datalet/scatterplot-datalet.html
@@ -24,18 +24,12 @@ @@ -24,18 +24,12 @@
24 presentData: function () { 24 presentData: function () {
25 25
26 var self =this; 26 var self =this;
27 - var scatterSeries = [];  
28 - var series = [];  
29 - var point = [];  
30 - 27 + var data = [];
31 for (var j = 0; j < this.data[0]["data"].length; j++) { 28 for (var j = 0; j < this.data[0]["data"].length; j++) {
32 point = [this.data[0].data[j], this.data[1].data[j]]; 29 point = [this.data[0].data[j], this.data[1].data[j]];
33 - series.push(point); 30 + data.push(point);
34 } 31 }
35 32
36 - scatterSeries.push({data: series});  
37 -  
38 - this.properties.series = scatterSeries;  
39 this._component.legend = false; 33 this._component.legend = false;
40 34
41 var conf = { 35 var conf = {
@@ -52,7 +46,7 @@ @@ -52,7 +46,7 @@
52 } 46 }
53 }; 47 };
54 48
55 - var plot = new D3ScatterPlot("#scatterplot-placeholder", this.properties.series[0].data, conf); 49 + var plot = new D3ScatterPlot("#scatterplot-placeholder", data, conf);
56 plot.init(); 50 plot.init();
57 } 51 }
58 }; 52 };