SGH / COMPONENTS

Commit 42187739fffa33cd2f0527ead51cb553b8ff258d

Authored by mwasiluk
1 parent fc6c91b0

updated d3-scatterplot

Inline Side-by-side
Showing 10 changed files with 145 additions and 74 deletions
bower.json
  View file @4218773
... ... @@ -20,6 +20,7 @@
20 20 "iron-icon": "PolymerElements/iron-icon#~1.0.7",
21 21 "iron-icons": "PolymerElements/iron-icons#~1.1.2",
22 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
  View file @4218773
... ... @@ -21,14 +21,14 @@
21 21 "dependencies": {
22 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 26 "_resolution": {
27 27 "type": "version",
28   - "tag": "1.1.0",
29   - "commit": "9b30b60eb35b60c7c8c83cd86107a27cae0b9db9"
  28 + "tag": "1.2.0",
  29 + "commit": "0aaed8cda9972abba45aa474e2167663bee29098"
30 30 },
31 31 "_source": "https://github.com/mwasiluk/d3-scatterplot.git",
32   - "_target": "^1.0.0",
  32 + "_target": "^1.1.0",
33 33 "_originalSource": "d3-scatterplot"
34 34 }
35 35 \ No newline at end of file
... ...
bower_components/d3-scatterplot/README.md
  View file @4218773
1 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 9 <img src="http://routetopa.eu/wp-content/uploads/2015/06/eu-flag.jpg" width="22">
4 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
  View file @4218773
... ... @@ -3,6 +3,9 @@ var conf = {
3 3 // height: 500,
4 4 dot:{
5 5 // color: 'red'
  6 + },
  7 + x:{
  8 + // scale: "log"
6 9 }
7 10 };
8 11 var data = [
... ... @@ -17,4 +20,4 @@ var data = [
17 20  
18 21 ];
19 22 var plot = new D3ScatterPlot("#scatterplot", data, conf);
20   -plot.init();
21 23 \ No newline at end of file
  24 +
... ...
bower_components/d3-scatterplot/demo/index.html
  View file @4218773
... ... @@ -8,7 +8,7 @@
8 8 <body>
9 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 13 <script src="../bower_components/d3/d3.min.js" charset="utf-8"></script>
14 14 <script src="../dist/d3-scatterplot.js" charset="utf-8"></script>
... ...
bower_components/d3-scatterplot/dist/d3-scatterplot.js
  View file @4218773
1 1 function D3ScatterPlotUtils(){}
2 2  
3 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 13 out = out || {};
8 14  
9 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 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 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 48 function D3ScatterPlot(placeholderSelector, data, config){
30 49 this.utils = new D3ScatterPlotUtils();
31 50 this.placeholderSelector = placeholderSelector;
... ... @@ -42,12 +61,14 @@ function D3ScatterPlot(placeholderSelector, data, config){
42 61 x:{// X axis config
43 62 label: 'X', // axis label
44 63 value: function(d) { return d[0] }, // x value accessor
45   - orient: "bottom"
  64 + orient: "bottom",
  65 + scale: "linear"
46 66 },
47 67 y:{// Y axis config
48 68 label: 'Y', // axis label
49 69 value: function(d) { return d[1] }, // y value accessor
50   - orient: "left"
  70 + orient: "left",
  71 + scale: "linear"
51 72 },
52 73 dot:{
53 74 radius: 2,
... ... @@ -64,6 +85,8 @@ function D3ScatterPlot(placeholderSelector, data, config){
64 85 this.setConfig(config);
65 86 }
66 87  
  88 + this.init();
  89 +
67 90 }
68 91  
69 92 D3ScatterPlot.prototype.setData = function (data){
... ... @@ -138,7 +161,7 @@ D3ScatterPlot.prototype.setupX = function (){
138 161 * axis - sets up axis
139 162 */
140 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 165 x.map = function(d) { return x.scale(x.value(d));};
143 166 x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
144 167 var data = this.data;
... ... @@ -160,7 +183,7 @@ D3ScatterPlot.prototype.setupY = function (){
160 183 * axis - sets up axis
161 184 */
162 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 187 y.map = function(d) { return y.scale(y.value(d));};
165 188 y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
166 189  
... ... @@ -169,10 +192,10 @@ D3ScatterPlot.prototype.setupY = function (){
169 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 196 this.drawAxisX();
174 197 this.drawAxisY();
175   - this.drawDots();
  198 + this.update();
176 199 };
177 200 D3ScatterPlot.prototype.drawAxisX = function (){
178 201 var self = this;
... ... @@ -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 233 var self = this;
211 234 var plot = self.plot;
212 235 var data = this.data;
213 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 244 .attr("cx", plot.x.map)
219 245 .attr("cy", plot.y.map);
220 246  
221 247 if(plot.dot.color){
222 248 dots.style("fill", plot.dot.color)
223 249 }
  250 + dots.exit().remove();
224 251  
225 252 };
226 253  
227 254 D3ScatterPlot.prototype.initSvg = function (){
228 255 var self = this;
229 256 var config = this.config;
230   -
231   -
232   -
  257 +
233 258 var width = self.plot.width+ config.margin.left + config.margin.right;
234 259 var height = self.plot.height+ config.margin.top + config.margin.bottom;
235 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 270 .attr("width", width)
238 271 .attr("height", height)
239 272 .attr("viewBox", "0 0 "+" "+width+" "+height)
... ... @@ -255,7 +288,7 @@ D3ScatterPlot.prototype.init = function (){
255 288 var self = this;
256 289 self.initPlot();
257 290 self.initSvg();
258   - self.drawPlot();
  291 + self.draw();
259 292  
260 293 };
261 294  
... ...
bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
  View file @4218773
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 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 4 \ No newline at end of file
... ...
bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
  View file @4218773
1 1 function D3ScatterPlotUtils(){}
2 2  
3 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 13 out = out || {};
8 14  
9 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 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 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 48 \ No newline at end of file
... ...
bower_components/d3-scatterplot/src/d3-scatterplot.js
  View file @4218773
... ... @@ -14,12 +14,14 @@ function D3ScatterPlot(placeholderSelector, data, config){
14 14 x:{// X axis config
15 15 label: 'X', // axis label
16 16 value: function(d) { return d[0] }, // x value accessor
17   - orient: "bottom"
  17 + orient: "bottom",
  18 + scale: "linear"
18 19 },
19 20 y:{// Y axis config
20 21 label: 'Y', // axis label
21 22 value: function(d) { return d[1] }, // y value accessor
22   - orient: "left"
  23 + orient: "left",
  24 + scale: "linear"
23 25 },
24 26 dot:{
25 27 radius: 2,
... ... @@ -36,6 +38,8 @@ function D3ScatterPlot(placeholderSelector, data, config){
36 38 this.setConfig(config);
37 39 }
38 40  
  41 + this.init();
  42 +
39 43 }
40 44  
41 45 D3ScatterPlot.prototype.setData = function (data){
... ... @@ -110,7 +114,7 @@ D3ScatterPlot.prototype.setupX = function (){
110 114 * axis - sets up axis
111 115 */
112 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 118 x.map = function(d) { return x.scale(x.value(d));};
115 119 x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
116 120 var data = this.data;
... ... @@ -132,7 +136,7 @@ D3ScatterPlot.prototype.setupY = function (){
132 136 * axis - sets up axis
133 137 */
134 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 140 y.map = function(d) { return y.scale(y.value(d));};
137 141 y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
138 142  
... ... @@ -141,10 +145,10 @@ D3ScatterPlot.prototype.setupY = function (){
141 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 149 this.drawAxisX();
146 150 this.drawAxisY();
147   - this.drawDots();
  151 + this.update();
148 152 };
149 153 D3ScatterPlot.prototype.drawAxisX = function (){
150 154 var self = this;
... ... @@ -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 186 var self = this;
183 187 var plot = self.plot;
184 188 var data = this.data;
185 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 197 .attr("cx", plot.x.map)
191 198 .attr("cy", plot.y.map);
192 199  
193 200 if(plot.dot.color){
194 201 dots.style("fill", plot.dot.color)
195 202 }
  203 + dots.exit().remove();
196 204  
197 205 };
198 206  
199 207 D3ScatterPlot.prototype.initSvg = function (){
200 208 var self = this;
201 209 var config = this.config;
202   -
203   -
204   -
  210 +
205 211 var width = self.plot.width+ config.margin.left + config.margin.right;
206 212 var height = self.plot.height+ config.margin.top + config.margin.bottom;
207 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 223 .attr("width", width)
210 224 .attr("height", height)
211 225 .attr("viewBox", "0 0 "+" "+width+" "+height)
... ... @@ -227,7 +241,7 @@ D3ScatterPlot.prototype.init = function (){
227 241 var self = this;
228 242 self.initPlot();
229 243 self.initSvg();
230   - self.drawPlot();
  244 + self.draw();
231 245  
232 246 };
233 247  
... ...
datalets/scatterplot-datalet/scatterplot-datalet.html
  View file @4218773
... ... @@ -24,18 +24,12 @@
24 24 presentData: function () {
25 25  
26 26 var self =this;
27   - var scatterSeries = [];
28   - var series = [];
29   - var point = [];
30   -
  27 + var data = [];
31 28 for (var j = 0; j < this.data[0]["data"].length; j++) {
32 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 33 this._component.legend = false;
40 34  
41 35 var conf = {
... ... @@ -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 50 plot.init();
57 51 }
58 52 };
... ...