SGH / COMPONENTS

Commit 40c0e48991ee4a72542c415de6d087f01f7e708c

Authored by mwasiluk
1 parent 752c1f5a

charts-d3, d3 scatterplot and scatterplot matrix update

Inline Side-by-side
Showing 25 changed files with 460 additions and 1027 deletions
bower.json
  View file @40c0e48
... ... @@ -20,7 +20,6 @@
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": "latest",
24   - "d3-scatterplot": "latest"
  23 + "charts-d3": "latest"
25 24 }
26 25 }
... ...
bower_components/d3-scatterplot-matrix/LICENSE renamed to bower_components/charts-d3/LICENSE
  View file @40c0e48
bower_components/d3-scatterplot/README.md renamed to bower_components/charts-d3/README.md
  View file @40c0e48
1   -# d3-scatterplot
  1 +# charts-d3
2 2  
3 3 You can install this package through `Bower` :
4 4  
5   - bower install d3-scatterplot --save
  5 + bower install charts-d3 --save
6 6  
7 7  
8 8 <br/><br/>
9 9 <img src="http://routetopa.eu/wp-content/uploads/2015/06/eu-flag.jpg" width="22">
10 10 This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 645860.
11   -
... ...
bower_components/d3-scatterplot-matrix/bower.json renamed to bower_components/charts-d3/bower.json
  View file @40c0e48
1 1 {
2   - "name": "d3-scatterplot-matrix",
3   - "homepage": "https://github.com/mwasiluk/d3-scatterplot-matrix",
  2 + "name": "charts-d3",
  3 + "homepage": "https://github.com/mwasiluk/charts-d3",
4 4 "authors": [
5 5 "Michal Wasiluk"
6 6 ],
7 7 "description": "",
8 8 "main": "",
9 9 "keywords": [
10   - "scatterplot",
11 10 "d3",
12   - "matrix"
13   -
  11 + "charts"
14 12 ],
15 13 "license": "MIT",
16 14 "ignore": [
... ...
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.css renamed to bower_components/charts-d3/dist/charts-d3.css
  View file @40c0e48
... ... @@ -34,3 +34,18 @@ svg.mw-d3-scatterplot-matrix {
34 34 padding: 3px 5px;
35 35 border-radius: 8px;
36 36 box-shadow: 1px 3px 3px #b7b7b7; }
  37 +
  38 +svg.mw-d3-scatterplot {
  39 + background-color: white;
  40 + font-size: 11px;
  41 + height: 100%; }
  42 + svg.mw-d3-scatterplot .mw-axis path {
  43 + fill: none;
  44 + stroke: #000;
  45 + shape-rendering: crispEdges; }
  46 + svg.mw-d3-scatterplot .mw-axis line {
  47 + shape-rendering: crispEdges;
  48 + stroke: #eaeaea; }
  49 + svg.mw-d3-scatterplot .mw-axis.mw-no-guides line {
  50 + display: none;
  51 + stroke: #a6a6a6; }
... ...
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.js renamed to bower_components/charts-d3/dist/charts-d3.js
  View file @40c0e48
1   -function D3ScatterPlotMatrixUtils() {
2   -}
3   -
4   -// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
5   -D3ScatterPlotMatrixUtils.prototype.deepExtend = function (out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks?
6   -
7   - var utils = this;
8   - var emptyOut = {};
9   -
10   -
11   - if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
12   - out = [];
13   - }
14   - out = out || {};
15   -
16   - for (var i = 1; i < arguments.length; i++) {
17   - var source = arguments[i];
18   - if (!source)
19   - continue;
20   -
21   - for (var key in source) {
22   - if (!source.hasOwnProperty(key)) {
23   - continue;
24   - }
25   - var isArray = Array.isArray(out[key]);
26   - var isObject = utils.isObject(out[key]);
27   - var srcObj = utils.isObject(source[key]);
28   -
29   - if (isObject && !isArray && srcObj) {
30   - utils.deepExtend(out[key], source[key]);
31   - } else {
32   - out[key] = source[key];
33   - }
34   - }
35   - }
36   -
37   - return out;
38   -};
39   -
40   -D3ScatterPlotMatrixUtils.prototype.cross = function (a, b) {
41   - var c = [], n = a.length, m = b.length, i, j;
42   - for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
43   - return c;
44   -};
45   -
46   -D3ScatterPlotMatrixUtils.prototype.inferTraits = function (data, categoryKey, includeCategory) {
47   - var res = [];
48   - if (data.length) {
49   - var d = data[0];
50   - if (d instanceof Array) {
51   - res= d.map(function (v, i) {
52   - return i;
53   - });
54   - }else if (typeof d === 'object'){
55   -
56   - for (var prop in d) {
57   - if(!d.hasOwnProperty(prop)) continue;
58   -
59   - res.push(prop);
60   - }
61   - }
62   - }
63   - if(!includeCategory){
64   - var index = res.indexOf(categoryKey);
65   - if (index > -1) {
66   - res.splice(index, 1);
67   - }
68   - }
69   - return res
70   -};
71   -
72   -
73   -D3ScatterPlotMatrixUtils.prototype.isObject = function(a) {
74   - return a !== null && typeof a === 'object';
75   -};
76   -D3ScatterPlotMatrixUtils.prototype.isNumber = function(a) {
77   - return !isNaN(a) && typeof a === 'number';
78   -};
79   -D3ScatterPlotMatrixUtils.prototype.isFunction = function(a) {
80   - return typeof a === 'function';
81   -};
82   -
83   -D3ScatterPlotMatrixUtils.prototype.selectOrAppend = function (parent, selector, element) {
84   - var selection = parent.select(selector);
85   - if(selection.empty()){
86   - return parent.append(element || selector);
87   - }
88   - return selection;
89   -};
90 1 function D3ScatterPlotMatrix(placeholderSelector, data, config) {
91   - this.utils = new D3ScatterPlotMatrixUtils();
  2 + this.utils = new ChartsD3Utils();
92 3 this.placeholderSelector = placeholderSelector;
93 4 this.svg = null;
94 5 this.defaultConfig = {
95   - width: 0,
96   - size: 200, //cell size
97   - padding: 20, //cell padding
  6 + width: undefined, //svg width (default: computed using cell size and margins)
  7 + size: 200, //scatter plot cell size
  8 + padding: 20, //scatter plot cell padding
98 9 brush: true,
99   - guides: true,
100   - tooltip: true,
101   - ticks: null,
  10 + guides: true, //show axis guides
  11 + tooltip: true, //show tooltip on dot hover
  12 + ticks: undefined, //ticks number, (default: computed using cell size)
102 13 margin: {
103 14 left: 30,
104 15 right: 30,
... ... @@ -118,20 +29,23 @@ function D3ScatterPlotMatrix(placeholderSelector, data, config) {
118 29 color: null, // string or function returning color's value for color scale
119 30 d3ColorCategory: 'category10'
120 31 },
121   - traits: {
122   - labels: [], //optional array of trait labels
123   - keys: [], //optional array of trait keys
124   - categoryKey: null,
125   - includeCategoryInPlot: false,
126   - value: function (d, traitKey) {// trait value accessor
127   - return d[traitKey];
  32 + variables: {
  33 + labels: [], //optional array of variable labels (for the diagonal of the plot).
  34 + keys: [], //optional array of variable keys
  35 + value: function (d, variableKey) {// variable value accessor
  36 + return d[variableKey];
128 37 }
  38 + },
  39 + groups:{
  40 + key: undefined, //object property name or array index with grouping variable
  41 + includeInPlot: false //include group as variable in plot, boolean (default: false)
129 42 }
  43 +
130 44 };
131 45  
132   - if (config) {
133   - this.setConfig(config);
134   - }
  46 +
  47 + this.setConfig(config||{});
  48 +
135 49  
136 50 if (data) {
137 51 this.setData(data);
... ... @@ -165,7 +79,7 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
165 79 }
166 80 };
167 81  
168   - this.setupTraits();
  82 + this.setupVariables();
169 83  
170 84 this.plot.size = conf.size;
171 85  
... ... @@ -174,7 +88,7 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
174 88 var placeholderNode = d3.select(this.placeholderSelector).node();
175 89  
176 90 if (!width) {
177   - var maxWidth = margin.left + margin.right + this.plot.traits.length*this.plot.size;
  91 + var maxWidth = margin.left + margin.right + this.plot.variables.length*this.plot.size;
178 92 width = Math.min(placeholderNode.getBoundingClientRect().width, maxWidth);
179 93  
180 94 }
... ... @@ -189,7 +103,7 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
189 103  
190 104  
191 105  
192   - if(conf.ticks===null){
  106 + if(conf.ticks===undefined){
193 107 conf.ticks = this.plot.size / 40;
194 108 }
195 109  
... ... @@ -212,9 +126,9 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
212 126 }
213 127  
214 128  
215   - }else if(conf.traits.categoryKey){
  129 + }else if(conf.groups.key){
216 130 this.plot.dot.color = function (d) {
217   - return self.plot.dot.colorCategory(d[conf.traits.categoryKey]);
  131 + return self.plot.dot.colorCategory(d[conf.groups.key]);
218 132 }
219 133 }
220 134  
... ... @@ -224,31 +138,31 @@ D3ScatterPlotMatrix.prototype.initPlot = function () {
224 138  
225 139 };
226 140  
227   -D3ScatterPlotMatrix.prototype.setupTraits = function () {
228   - var traitsConf = this.config.traits;
  141 +D3ScatterPlotMatrix.prototype.setupVariables = function () {
  142 + var variablesConf = this.config.variables;
229 143  
230 144 var data = this.data;
231 145 var plot = this.plot;
232   - plot.domainByTrait = {};
233   - plot.traits = traitsConf.keys;
234   - if(!plot.traits || !plot.traits.length){
235   - plot.traits = this.utils.inferTraits(data, traitsConf.categoryKey, traitsConf.includeCategoryInPlot);
  146 + plot.domainByVariable = {};
  147 + plot.variables = variablesConf.keys;
  148 + if(!plot.variables || !plot.variables.length){
  149 + plot.variables = this.utils.inferVariables(data, this.config.groups.key, this.config.includeInPlot);
236 150 }
237 151  
238 152 plot.labels = [];
239   - plot.labelByTrait = {};
240   - plot.traits.forEach(function(traitKey, index) {
241   - plot.domainByTrait[traitKey] = d3.extent(data, function(d) { return traitsConf.value(d, traitKey) });
242   - var label = traitKey;
243   - if(traitsConf.labels && traitsConf.labels.length>index){
  153 + plot.labelByVariable = {};
  154 + plot.variables.forEach(function(variableKey, index) {
  155 + plot.domainByVariable[variableKey] = d3.extent(data, function(d) { return variablesConf.value(d, variableKey) });
  156 + var label = variableKey;
  157 + if(variablesConf.labels && variablesConf.labels.length>index){
244 158  
245   - label = traitsConf.labels[index];
  159 + label = variablesConf.labels[index];
246 160 }
247 161 plot.labels.push(label);
248   - plot.labelByTrait[traitKey] = label;
  162 + plot.labelByVariable[variableKey] = label;
249 163 });
250 164  
251   - console.log(plot.labelByTrait);
  165 + console.log(plot.labelByVariable);
252 166  
253 167 plot.subplots = [];
254 168 };
... ... @@ -259,13 +173,13 @@ D3ScatterPlotMatrix.prototype.setupX = function () {
259 173 var x = plot.x;
260 174 var conf = this.config;
261 175  
262   - x.value = conf.traits.value;
  176 + x.value = conf.variables.value;
263 177 x.scale = d3.scale[conf.x.scale]().range([conf.padding / 2, plot.size - conf.padding / 2]);
264   - x.map = function (d, trait) {
265   - return x.scale(x.value(d, trait));
  178 + x.map = function (d, variable) {
  179 + return x.scale(x.value(d, variable));
266 180 };
267 181 x.axis = d3.svg.axis().scale(x.scale).orient(conf.x.orient).ticks(conf.ticks);
268   - x.axis.tickSize(plot.size * plot.traits.length);
  182 + x.axis.tickSize(plot.size * plot.variables.length);
269 183  
270 184 };
271 185  
... ... @@ -275,33 +189,33 @@ D3ScatterPlotMatrix.prototype.setupY = function () {
275 189 var y = plot.y;
276 190 var conf = this.config;
277 191  
278   - y.value = conf.traits.value;
  192 + y.value = conf.variables.value;
279 193 y.scale = d3.scale[conf.y.scale]().range([ plot.size - conf.padding / 2, conf.padding / 2]);
280   - y.map = function (d, trait) {
281   - return y.scale(y.value(d, trait));
  194 + y.map = function (d, variable) {
  195 + return y.scale(y.value(d, variable));
282 196 };
283 197 y.axis= d3.svg.axis().scale(y.scale).orient(conf.y.orient).ticks(conf.ticks);
284   - y.axis.tickSize(-plot.size * plot.traits.length);
  198 + y.axis.tickSize(-plot.size * plot.variables.length);
285 199 };
286 200  
287 201  
288 202 D3ScatterPlotMatrix.prototype.drawPlot = function () {
289 203 var self =this;
290   - var n = self.plot.traits.length;
  204 + var n = self.plot.variables.length;
291 205 var conf = this.config;
292 206 self.svgG.selectAll(".mw-axis-x.mw-axis")
293   - .data(self.plot.traits)
  207 + .data(self.plot.variables)
294 208 .enter().append("g")
295 209 .attr("class", "mw-axis-x mw-axis"+(conf.guides ? '' : ' mw-no-guides'))
296 210 .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * self.plot.size + ",0)"; })
297   - .each(function(d) { self.plot.x.scale.domain(self.plot.domainByTrait[d]); d3.select(this).call(self.plot.x.axis); });
  211 + .each(function(d) { self.plot.x.scale.domain(self.plot.domainByVariable[d]); d3.select(this).call(self.plot.x.axis); });
298 212  
299 213 self.svgG.selectAll(".mw-axis-y.mw-axis")
300   - .data(self.plot.traits)
  214 + .data(self.plot.variables)
301 215 .enter().append("g")
302 216 .attr("class", "mw-axis-y mw-axis"+(conf.guides ? '' : ' mw-no-guides'))
303 217 .attr("transform", function(d, i) { return "translate(0," + i * self.plot.size + ")"; })
304   - .each(function(d) { self.plot.y.scale.domain(self.plot.domainByTrait[d]); d3.select(this).call(self.plot.y.axis); });
  218 + .each(function(d) { self.plot.y.scale.domain(self.plot.domainByVariable[d]); d3.select(this).call(self.plot.y.axis); });
305 219  
306 220  
307 221 if(conf.tooltip){
... ... @@ -311,7 +225,7 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
311 225 }
312 226  
313 227 var cell = self.svgG.selectAll(".mw-cell")
314   - .data(self.utils.cross(self.plot.traits, self.plot.traits))
  228 + .data(self.utils.cross(self.plot.variables, self.plot.variables))
315 229 .enter().append("g")
316 230 .attr("class", "mw-cell")
317 231 .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * self.plot.size + "," + d.j * self.plot.size + ")"; });
... ... @@ -329,7 +243,7 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
329 243 .attr("x", conf.padding)
330 244 .attr("y", conf.padding)
331 245 .attr("dy", ".71em")
332   - .text(function(d) { return self.plot.labelByTrait[d.x]; });
  246 + .text(function(d) { return self.plot.labelByVariable[d.x]; });
333 247  
334 248  
335 249  
... ... @@ -339,8 +253,8 @@ D3ScatterPlotMatrix.prototype.drawPlot = function () {
339 253 plot.subplots.push(p);
340 254 var cell = d3.select(this);
341 255  
342   - plot.x.scale.domain(plot.domainByTrait[p.x]);
343   - plot.y.scale.domain(plot.domainByTrait[p.y]);
  256 + plot.x.scale.domain(plot.domainByVariable[p.x]);
  257 + plot.y.scale.domain(plot.domainByVariable[p.y]);
344 258  
345 259 cell.append("rect")
346 260 .attr("class", "mw-frame")
... ... @@ -461,8 +375,8 @@ D3ScatterPlotMatrix.prototype.drawBrush = function (cell) {
461 375 function brushstart(p) {
462 376 if (brushCell !== this) {
463 377 d3.select(brushCell).call(brush.clear());
464   - self.plot.x.scale.domain(self.plot.domainByTrait[p.x]);
465   - self.plot.y.scale.domain(self.plot.domainByTrait[p.y]);
  378 + self.plot.x.scale.domain(self.plot.domainByVariable[p.x]);
  379 + self.plot.y.scale.domain(self.plot.domainByVariable[p.y]);
466 380 brushCell = this;
467 381 }
468 382 }
... ... @@ -481,3 +395,372 @@ D3ScatterPlotMatrix.prototype.drawBrush = function (cell) {
481 395 }
482 396 };
483 397  
  398 +
  399 +function D3ScatterPlot(placeholderSelector, data, config){
  400 + this.utils = new ChartsD3Utils();
  401 + this.placeholderSelector = placeholderSelector;
  402 + this.svg=null;
  403 + this.defaultConfig = {
  404 + width: 0,
  405 + height: 0,
  406 + guides: false, //show axis guides
  407 + tooltip: true, //show tooltip on dot hover
  408 + margin:{
  409 + left: 50,
  410 + right: 30,
  411 + top: 30,
  412 + bottom: 50
  413 + },
  414 + x:{// X axis config
  415 + label: 'X', // axis label
  416 + value: function(d) { return d[0] }, // x value accessor
  417 + orient: "bottom",
  418 + scale: "linear"
  419 + },
  420 + y:{// Y axis config
  421 + label: 'Y', // axis label
  422 + value: function(d) { return d[1] }, // y value accessor
  423 + orient: "left",
  424 + scale: "linear"
  425 + },
  426 + dot:{
  427 + radius: 2,
  428 + color: 'black', // string or function returning color's value for color scale
  429 + d3ColorCategory: 'category10'
  430 + }
  431 + };
  432 +
  433 + if(data){
  434 + this.setData(data);
  435 + }
  436 +
  437 + if(config){
  438 + this.setConfig(config);
  439 + }
  440 +
  441 + this.init();
  442 +
  443 +}
  444 +
  445 +D3ScatterPlot.prototype.setData = function (data){
  446 + this.data = data;
  447 + return this;
  448 +};
  449 +
  450 +D3ScatterPlot.prototype.setConfig = function (config){
  451 + this.config = this.utils.deepExtend({}, this.defaultConfig, config);
  452 + return this;
  453 +};
  454 +D3ScatterPlot.prototype.initPlot = function (){
  455 + var self=this;
  456 + var margin = this.config.margin;
  457 + var conf = this.config;
  458 + this.plot={
  459 + x: {},
  460 + y: {},
  461 + dot: {
  462 + color: null//color scale mapping function
  463 + }
  464 + };
  465 +
  466 + var width = conf.width;
  467 + var placeholderNode = d3.select(this.placeholderSelector).node();
  468 +
  469 + if(!width){
  470 + width =placeholderNode.getBoundingClientRect().width;
  471 + }
  472 + var height = conf.height;
  473 + if(!height){
  474 + height =placeholderNode.getBoundingClientRect().height;
  475 + }
  476 +
  477 + this.plot.width = width - margin.left - margin.right;
  478 + this.plot.height = height - margin.top - margin.bottom;
  479 +
  480 + this.setupX();
  481 + this.setupY();
  482 +
  483 + if(conf.dot.d3ColorCategory){
  484 + this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
  485 + }
  486 + var colorValue = conf.dot.color;
  487 + if(colorValue){
  488 + this.plot.dot.colorValue = colorValue;
  489 +
  490 + if (typeof colorValue === 'string' || colorValue instanceof String){
  491 + this.plot.dot.color = colorValue;
  492 + }else if(this.plot.dot.colorCategory){
  493 + this.plot.dot.color = function(d){
  494 + return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
  495 + }
  496 + }
  497 +
  498 +
  499 + }
  500 +
  501 + return this;
  502 +};
  503 +
  504 +D3ScatterPlot.prototype.setupX = function (){
  505 +
  506 + var plot = this.plot;
  507 + var x = plot.x;
  508 + var conf = this.config.x;
  509 +
  510 + /*
  511 + * value accessor - returns the value to encode for a given data object.
  512 + * scale - maps value to a visual display encoding, such as a pixel position.
  513 + * map function - maps from data value to display value
  514 + * axis - sets up axis
  515 + */
  516 + x.value = conf.value;
  517 + x.scale = d3.scale[conf.scale]().range([0, plot.width]);
  518 + x.map = function(d) { return x.scale(x.value(d));};
  519 + x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
  520 + var data = this.data;
  521 + plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
  522 + if(this.config.guides) {
  523 + x.axis.tickSize(-plot.height);
  524 + }
  525 +
  526 +};
  527 +
  528 +D3ScatterPlot.prototype.setupY = function (){
  529 +
  530 + var plot = this.plot;
  531 + var y = plot.y;
  532 + var conf = this.config.y;
  533 +
  534 + /*
  535 + * value accessor - returns the value to encode for a given data object.
  536 + * scale - maps value to a visual display encoding, such as a pixel position.
  537 + * map function - maps from data value to display value
  538 + * axis - sets up axis
  539 + */
  540 + y.value = conf.value;
  541 + y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
  542 + y.map = function(d) { return y.scale(y.value(d));};
  543 + y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
  544 +
  545 + if(this.config.guides){
  546 + y.axis.tickSize(-plot.width);
  547 + }
  548 +
  549 +
  550 + var data = this.data;
  551 + plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
  552 +};
  553 +
  554 +D3ScatterPlot.prototype.draw = function (){
  555 + this.drawAxisX();
  556 + this.drawAxisY();
  557 + this.update();
  558 +};
  559 +D3ScatterPlot.prototype.drawAxisX = function (){
  560 + var self = this;
  561 + var plot = self.plot;
  562 + var axisConf = this.config.x;
  563 + self.svgG.append("g")
  564 + .attr("class", "mw-axis-x mw-axis"+(self.config.guides ? '' : ' mw-no-guides'))
  565 + .attr("transform", "translate(0," + plot.height + ")")
  566 + .call(plot.x.axis)
  567 + .append("text")
  568 + .attr("class", "mw-label")
  569 + .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")") // text is drawn off the screen top left, move down and out and rotate
  570 + .attr("dy", "-1em")
  571 + .style("text-anchor", "middle")
  572 + .text(axisConf.label);
  573 +};
  574 +
  575 +D3ScatterPlot.prototype.drawAxisY = function (){
  576 + var self = this;
  577 + var plot = self.plot;
  578 + var axisConf = this.config.y;
  579 + self.svgG.append("g")
  580 + .attr("class", "mw-axis mw-axis-y"+(self.config.guides ? '' : ' mw-no-guides'))
  581 + .call(plot.y.axis)
  582 + .append("text")
  583 + .attr("class", "mw-label")
  584 + .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
  585 + .attr("dy", "1em")
  586 + .style("text-anchor", "middle")
  587 + .text(axisConf.label);
  588 +};
  589 +
  590 +
  591 +D3ScatterPlot.prototype.update = function (){
  592 + var self = this;
  593 + var plot = self.plot;
  594 + var data = this.data;
  595 + var dots = self.svgG.selectAll(".mw-dot")
  596 + .data(data);
  597 +
  598 + dots.enter().append("circle")
  599 + .attr("class", "mw-dot");
  600 +
  601 +
  602 + dots.attr("r", self.config.dot.radius)
  603 + .attr("cx", plot.x.map)
  604 + .attr("cy", plot.y.map);
  605 +
  606 + if(plot.tooltip){
  607 + dots.on("mouseover", function(d) {
  608 + plot.tooltip.transition()
  609 + .duration(200)
  610 + .style("opacity", .9);
  611 + plot.tooltip.html("(" + plot.x.value(d)
  612 + + ", " +plot.y.value(d) + ")")
  613 + .style("left", (d3.event.pageX + 5) + "px")
  614 + .style("top", (d3.event.pageY - 28) + "px");
  615 + })
  616 + .on("mouseout", function(d) {
  617 + plot.tooltip.transition()
  618 + .duration(500)
  619 + .style("opacity", 0);
  620 + });
  621 + }
  622 +
  623 + if(plot.dot.color){
  624 + dots.style("fill", plot.dot.color)
  625 + }
  626 + dots.exit().remove();
  627 +
  628 +};
  629 +
  630 +D3ScatterPlot.prototype.initSvg = function (){
  631 + var self = this;
  632 + var config = this.config;
  633 +
  634 + var width = self.plot.width+ config.margin.left + config.margin.right;
  635 + var height = self.plot.height+ config.margin.top + config.margin.bottom;
  636 + var aspect = width / height;
  637 +
  638 + self.svg = d3.select(self.placeholderSelector).select("svg");
  639 + if(!self.svg.empty()){
  640 + self.svg.remove();
  641 +
  642 + }
  643 + self.svg = d3.select(self.placeholderSelector).append("svg");
  644 +
  645 + self.svg
  646 + .attr("width", width)
  647 + .attr("height", height)
  648 + .attr("viewBox", "0 0 "+" "+width+" "+height)
  649 + .attr("preserveAspectRatio", "xMidYMid meet")
  650 + .attr("class", "mw-d3-scatterplot");
  651 + self.svgG = self.svg.append("g")
  652 + .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
  653 +
  654 + if(config.tooltip){
  655 + self.plot.tooltip = this.utils.selectOrAppend(d3.select(self.placeholderSelector), 'div.mw-tooltip', 'div')
  656 + .attr("class", "mw-tooltip")
  657 + .style("opacity", 0);
  658 + }
  659 +
  660 + if(!config.width || config.height ){
  661 + d3.select(window)
  662 + .on("resize", function() {
  663 + //TODO add responsiveness if width/height not specified
  664 + });
  665 + }
  666 +
  667 +};
  668 +
  669 +D3ScatterPlot.prototype.init = function (){
  670 + var self = this;
  671 + self.initPlot();
  672 + self.initSvg();
  673 + self.draw();
  674 +
  675 +};
  676 +
  677 +
  678 +function ChartsD3Utils() {
  679 +}
  680 +
  681 +// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
  682 +ChartsD3Utils.prototype.deepExtend = function (out) {
  683 +
  684 + var utils = this;
  685 + var emptyOut = {};
  686 +
  687 +
  688 + if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
  689 + out = [];
  690 + }
  691 + out = out || {};
  692 +
  693 + for (var i = 1; i < arguments.length; i++) {
  694 + var source = arguments[i];
  695 + if (!source)
  696 + continue;
  697 +
  698 + for (var key in source) {
  699 + if (!source.hasOwnProperty(key)) {
  700 + continue;
  701 + }
  702 + var isArray = Array.isArray(out[key]);
  703 + var isObject = utils.isObject(out[key]);
  704 + var srcObj = utils.isObject(source[key]);
  705 +
  706 + if (isObject && !isArray && srcObj) {
  707 + utils.deepExtend(out[key], source[key]);
  708 + } else {
  709 + out[key] = source[key];
  710 + }
  711 + }
  712 + }
  713 +
  714 + return out;
  715 +};
  716 +
  717 +ChartsD3Utils.prototype.cross = function (a, b) {
  718 + var c = [], n = a.length, m = b.length, i, j;
  719 + for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
  720 + return c;
  721 +};
  722 +
  723 +ChartsD3Utils.prototype.inferVariables = function (data, groupKey, includeGroup) {
  724 + var res = [];
  725 + if (data.length) {
  726 + var d = data[0];
  727 + if (d instanceof Array) {
  728 + res= d.map(function (v, i) {
  729 + return i;
  730 + });
  731 + }else if (typeof d === 'object'){
  732 +
  733 + for (var prop in d) {
  734 + if(!d.hasOwnProperty(prop)) continue;
  735 +
  736 + res.push(prop);
  737 + }
  738 + }
  739 + }
  740 + if(!includeGroup){
  741 + var index = res.indexOf(groupKey);
  742 + if (index > -1) {
  743 + res.splice(index, 1);
  744 + }
  745 + }
  746 + return res
  747 +};
  748 +
  749 +
  750 +ChartsD3Utils.prototype.isObject = function(a) {
  751 + return a !== null && typeof a === 'object';
  752 +};
  753 +ChartsD3Utils.prototype.isNumber = function(a) {
  754 + return !isNaN(a) && typeof a === 'number';
  755 +};
  756 +ChartsD3Utils.prototype.isFunction = function(a) {
  757 + return typeof a === 'function';
  758 +};
  759 +
  760 +ChartsD3Utils.prototype.selectOrAppend = function (parent, selector, element) {
  761 + var selection = parent.select(selector);
  762 + if(selection.empty()){
  763 + return parent.append(element || selector);
  764 + }
  765 + return selection;
  766 +};
484 767 \ No newline at end of file
... ...
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.css renamed to bower_components/charts-d3/dist/charts-d3.min.css
  View file @40c0e48
1   -svg.mw-d3-scatterplot-matrix .mw-axis path,svg.mw-d3-scatterplot-matrix .mw-axis.mw-no-guides line{display:none}svg.mw-d3-scatterplot-matrix{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot-matrix .mw-axis{shape-rendering:crispEdges}svg.mw-d3-scatterplot-matrix .mw-axis line{stroke:#ddd}svg.mw-d3-scatterplot-matrix .mw-frame{shape-rendering:crispEdges;fill:none;stroke:#aaa}svg.mw-d3-scatterplot-matrix .mw-cell text{font-weight:700;text-transform:capitalize}svg.mw-d3-scatterplot-matrix circle{fill-opacity:.7}svg.mw-d3-scatterplot-matrix circle.hidden{fill:#ccc!important}svg.mw-d3-scatterplot-matrix .extent{fill:#000;fill-opacity:.125;stroke:#fff}.mw-tooltip{position:absolute;pointer-events:none;font-size:11px;background:#fdfdfd;padding:3px 5px;border-radius:8px;box-shadow:1px 3px 3px #b7b7b7}
2 1 \ No newline at end of file
  2 +svg.mw-d3-scatterplot-matrix .mw-axis path,svg.mw-d3-scatterplot-matrix .mw-axis.mw-no-guides line{display:none}svg.mw-d3-scatterplot-matrix{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot-matrix .mw-axis{shape-rendering:crispEdges}svg.mw-d3-scatterplot-matrix .mw-axis line{stroke:#ddd}svg.mw-d3-scatterplot-matrix .mw-frame{shape-rendering:crispEdges;fill:none;stroke:#aaa}svg.mw-d3-scatterplot-matrix .mw-cell text{font-weight:700;text-transform:capitalize}svg.mw-d3-scatterplot-matrix circle{fill-opacity:.7}svg.mw-d3-scatterplot-matrix circle.hidden{fill:#ccc!important}svg.mw-d3-scatterplot-matrix .extent{fill:#000;fill-opacity:.125;stroke:#fff}.mw-tooltip{position:absolute;pointer-events:none;font-size:11px;background:#fdfdfd;padding:3px 5px;border-radius:8px;box-shadow:1px 3px 3px #b7b7b7}
  3 +svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}svg.mw-d3-scatterplot .mw-axis line{shape-rendering:crispEdges;stroke:#eaeaea}svg.mw-d3-scatterplot .mw-axis.mw-no-guides line{display:none;stroke:#a6a6a6}
3 4 \ No newline at end of file
... ...
bower_components/charts-d3/dist/charts-d3.min.js 0 → 100644
  View file @40c0e48
  1 +function D3ScatterPlotMatrix(t,e,i){this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:void 0,size:200,padding:20,brush:!0,guides:!0,tooltip:!0,ticks:void 0,margin:{left:30,right:30,top:30,bottom:30},x:{orient:"bottom",scale:"linear"},y:{orient:"left",scale:"linear"},dot:{radius:2,color:null,d3ColorCategory:"category10"},variables:{labels:[],keys:[],value:function(t,e){return t[e]}},groups:{key:void 0,includeInPlot:!1}},this.setConfig(i||{}),e&&this.setData(e),this.init()}D3ScatterPlotMatrix.prototype.setData=function(t){return this.data=t,this},D3ScatterPlotMatrix.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlotMatrix.prototype.initPlot=function(){var t=this,e=this.config.margin,i=this.config;this.plot={x:{},y:{},dot:{color:null}},this.setupVariables(),this.plot.size=i.size;var a=i.width,o=d3.select(this.placeholderSelector).node();if(!a){var l=e.left+e.right+this.plot.variables.length*this.plot.size;a=Math.min(o.getBoundingClientRect().width,l)}var s=a;s||(s=o.getBoundingClientRect().height),this.plot.width=a-e.left-e.right,this.plot.height=s-e.top-e.bottom,void 0===i.ticks&&(i.ticks=this.plot.size/40),this.setupX(),this.setupY(),i.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[i.dot.d3ColorCategory]());var r=i.dot.color;return r?(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})):i.groups.key&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(e[i.groups.key])}),this},D3ScatterPlotMatrix.prototype.setupVariables=function(){var t=this.config.variables,e=this.data,i=this.plot;i.domainByVariable={},i.variables=t.keys,i.variables&&i.variables.length||(i.variables=this.utils.inferVariables(e,this.config.groups.key,this.config.includeInPlot)),i.labels=[],i.labelByVariable={},i.variables.forEach(function(a,o){i.domainByVariable[a]=d3.extent(e,function(e){return t.value(e,a)});var l=a;t.labels&&t.labels.length>o&&(l=t.labels[o]),i.labels.push(l),i.labelByVariable[a]=l}),void 0,i.subplots=[]},D3ScatterPlotMatrix.prototype.setupX=function(){var t=this.plot,e=t.x,i=this.config;e.value=i.variables.value,e.scale=d3.scale[i.x.scale]().range([i.padding/2,t.size-i.padding/2]),e.map=function(t,i){return e.scale(e.value(t,i))},e.axis=d3.svg.axis().scale(e.scale).orient(i.x.orient).ticks(i.ticks),e.axis.tickSize(t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.setupY=function(){var t=this.plot,e=t.y,i=this.config;e.value=i.variables.value,e.scale=d3.scale[i.y.scale]().range([t.size-i.padding/2,i.padding/2]),e.map=function(t,i){return e.scale(e.value(t,i))},e.axis=d3.svg.axis().scale(e.scale).orient(i.y.orient).ticks(i.ticks),e.axis.tickSize(-t.size*t.variables.length)},D3ScatterPlotMatrix.prototype.drawPlot=function(){function t(t){var i=e.plot;i.subplots.push(t);var o=d3.select(this);i.x.scale.domain(i.domainByVariable[t.x]),i.y.scale.domain(i.domainByVariable[t.y]),o.append("rect").attr("class","mw-frame").attr("x",a.padding/2).attr("y",a.padding/2).attr("width",a.size-a.padding).attr("height",a.size-a.padding),t.update=function(){var t=this,a=o.selectAll("circle").data(e.data);a.enter().append("circle"),a.attr("cx",function(e){return i.x.map(e,t.x)}).attr("cy",function(e){return i.y.map(e,t.y)}).attr("r",e.config.dot.radius),i.dot.color&&a.style("fill",i.dot.color),i.tooltip&&a.on("mouseover",function(e){i.tooltip.transition().duration(200).style("opacity",.9),i.tooltip.html("("+i.x.value(e,t.x)+", "+i.y.value(e,t.y)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){i.tooltip.transition().duration(500).style("opacity",0)}),a.exit().remove()},t.update()}var e=this,i=e.plot.variables.length,a=this.config;e.svgG.selectAll(".mw-axis-x.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-x mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,a){return"translate("+(i-a-1)*e.plot.size+",0)"}).each(function(t){e.plot.x.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.x.axis)}),e.svgG.selectAll(".mw-axis-y.mw-axis").data(e.plot.variables).enter().append("g").attr("class","mw-axis-y mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,i){return"translate(0,"+i*e.plot.size+")"}).each(function(t){e.plot.y.scale.domain(e.plot.domainByVariable[t]),d3.select(this).call(e.plot.y.axis)}),a.tooltip&&(e.plot.tooltip=this.utils.selectOrAppend(d3.select(e.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0));var o=e.svgG.selectAll(".mw-cell").data(e.utils.cross(e.plot.variables,e.plot.variables)).enter().append("g").attr("class","mw-cell").attr("transform",function(t){return"translate("+(i-t.i-1)*e.plot.size+","+t.j*e.plot.size+")"});a.brush&&this.drawBrush(o),o.each(t),o.filter(function(t){return t.i===t.j}).append("text").attr("x",a.padding).attr("y",a.padding).attr("dy",".71em").text(function(t){return e.plot.labelByVariable[t.x]})},D3ScatterPlotMatrix.prototype.update=function(){this.plot.subplots.forEach(function(t){t.update()})},D3ScatterPlotMatrix.prototype.initSvg=function(){var t=this,e=this.config,i=t.plot.width+e.margin.left+e.margin.right,a=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",i).attr("height",a).attr("viewBox","0 0 "+i+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot-matrix"),t.svgG=t.svg.append("g").attr("class","mw-container").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlotMatrix.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()},D3ScatterPlotMatrix.prototype.drawBrush=function(t){function e(t){s!==this&&(d3.select(s).call(l.clear()),o.plot.x.scale.domain(o.plot.domainByVariable[t.x]),o.plot.y.scale.domain(o.plot.domainByVariable[t.y]),s=this)}function i(t){var e=l.extent();o.svgG.selectAll("circle").classed("hidden",function(i){return e[0][0]>i[t.x]||i[t.x]>e[1][0]||e[0][1]>i[t.y]||i[t.y]>e[1][1]})}function a(){l.empty()&&o.svgG.selectAll(".hidden").classed("hidden",!1)}var o=this,l=d3.svg.brush().x(o.plot.x.scale).y(o.plot.y.scale).on("brushstart",e).on("brush",i).on("brushend",a);t.append("g").call(l);var s};
  2 +function D3ScatterPlot(t,e,o){this.utils=new ChartsD3Utils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,height:0,guides:!1,tooltip:!0,margin:{left:50,right:30,top:30,bottom:50},x:{label:"X",value:function(t){return t[0]},orient:"bottom",scale:"linear"},y:{label:"Y",value:function(t){return t[1]},orient:"left",scale:"linear"},dot:{radius:2,color:"black",d3ColorCategory:"category10"}},e&&this.setData(e),o&&this.setConfig(o),this.init()}D3ScatterPlot.prototype.setData=function(t){return this.data=t,this},D3ScatterPlot.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlot.prototype.initPlot=function(){var t=this,e=this.config.margin,o=this.config;this.plot={x:{},y:{},dot:{color:null}};var i=o.width,a=d3.select(this.placeholderSelector).node();i||(i=a.getBoundingClientRect().width);var l=o.height;l||(l=a.getBoundingClientRect().height),this.plot.width=i-e.left-e.right,this.plot.height=l-e.top-e.bottom,this.setupX(),this.setupY(),o.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[o.dot.d3ColorCategory]());var r=o.dot.color;return r&&(this.plot.dot.colorValue=r,"string"==typeof r||r instanceof String?this.plot.dot.color=r:this.plot.dot.colorCategory&&(this.plot.dot.color=function(e){return t.plot.dot.colorCategory(t.plot.dot.colorValue(e))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,e=t.x,o=this.config.x;e.value=o.value,e.scale=d3.scale[o.scale]().range([0,t.width]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient);var i=this.data;t.x.scale.domain([d3.min(i,t.x.value)-1,d3.max(i,t.x.value)+1]),this.config.guides&&e.axis.tickSize(-t.height)},D3ScatterPlot.prototype.setupY=function(){var t=this.plot,e=t.y,o=this.config.y;e.value=o.value,e.scale=d3.scale[o.scale]().range([t.height,0]),e.map=function(t){return e.scale(e.value(t))},e.axis=d3.svg.axis().scale(e.scale).orient(o.orient),this.config.guides&&e.axis.tickSize(-t.width);var i=this.data;t.y.scale.domain([d3.min(i,t.y.value)-1,d3.max(i,t.y.value)+1])},D3ScatterPlot.prototype.draw=function(){this.drawAxisX(),this.drawAxisY(),this.update()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,e=t.plot,o=this.config.x;t.svgG.append("g").attr("class","mw-axis-x mw-axis"+(t.config.guides?"":" mw-no-guides")).attr("transform","translate(0,"+e.height+")").call(e.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+e.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,e=t.plot,o=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y"+(t.config.guides?"":" mw-no-guides")).call(e.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+e.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(o.label)},D3ScatterPlot.prototype.update=function(){var t=this,e=t.plot,o=this.data,i=t.svgG.selectAll(".mw-dot").data(o);i.enter().append("circle").attr("class","mw-dot"),i.attr("r",t.config.dot.radius).attr("cx",e.x.map).attr("cy",e.y.map),e.tooltip&&i.on("mouseover",function(t){e.tooltip.transition().duration(200).style("opacity",.9),e.tooltip.html("("+e.x.value(t)+", "+e.y.value(t)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){e.tooltip.transition().duration(500).style("opacity",0)}),e.dot.color&&i.style("fill",e.dot.color),i.exit().remove()},D3ScatterPlot.prototype.initSvg=function(){var t=this,e=this.config,o=t.plot.width+e.margin.left+e.margin.right,i=t.plot.height+e.margin.top+e.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",o).attr("height",i).attr("viewBox","0 0 "+o+" "+i).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+e.margin.left+","+e.margin.top+")"),e.tooltip&&(t.plot.tooltip=this.utils.selectOrAppend(d3.select(t.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0)),e.width&&!e.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.draw()};
  3 +function ChartsD3Utils(){}ChartsD3Utils.prototype.deepExtend=function(t){var r=this;!t&&arguments.length>1&&Array.isArray(arguments[1])&&(t=[]),t=t||{};for(var e=1;e<arguments.length;e++){var n=arguments[e];if(n)for(var i in n)if(n.hasOwnProperty(i)){var o=Array.isArray(t[i]),s=r.isObject(t[i]),a=r.isObject(n[i]);s&&!o&&a?r.deepExtend(t[i],n[i]):t[i]=n[i]}}return t},ChartsD3Utils.prototype.cross=function(t,r){var e,n,i=[],o=t.length,s=r.length;for(e=-1;++e<o;)for(n=-1;++n<s;)i.push({x:t[e],i:e,y:r[n],j:n});return i},ChartsD3Utils.prototype.inferVariables=function(t,r,e){var n=[];if(t.length){var i=t[0];if(i instanceof Array)n=i.map(function(t,r){return r});else if("object"==typeof i)for(var o in i)i.hasOwnProperty(o)&&n.push(o)}if(!e){var s=n.indexOf(r);s>-1&&n.splice(s,1)}return n},ChartsD3Utils.prototype.isObject=function(t){return null!==t&&"object"==typeof t},ChartsD3Utils.prototype.isNumber=function(t){return!isNaN(t)&&"number"==typeof t},ChartsD3Utils.prototype.isFunction=function(t){return"function"==typeof t},ChartsD3Utils.prototype.selectOrAppend=function(t,r,e){var n=t.select(r);return n.empty()?t.append(e||r):n};
0 4 \ No newline at end of file
... ...
bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.js deleted
View file @752c1f5
1   -function D3ScatterPlotMatrixUtils(){}D3ScatterPlotMatrixUtils.prototype.deepExtend=function(t){var r=this;!t&&arguments.length>1&&Array.isArray(arguments[1])&&(t=[]),t=t||{};for(var e=1;e<arguments.length;e++){var i=arguments[e];if(i)for(var n in i)if(i.hasOwnProperty(n)){var o=Array.isArray(t[n]),a=r.isObject(t[n]),p=r.isObject(i[n]);a&&!o&&p?r.deepExtend(t[n],i[n]):t[n]=i[n]}}return t},D3ScatterPlotMatrixUtils.prototype.cross=function(t,r){var e,i,n=[],o=t.length,a=r.length;for(e=-1;++e<o;)for(i=-1;++i<a;)n.push({x:t[e],i:e,y:r[i],j:i});return n},D3ScatterPlotMatrixUtils.prototype.inferTraits=function(t,r,e){var i=[];if(t.length){var n=t[0];if(n instanceof Array)i=n.map(function(t,r){return r});else if("object"==typeof n)for(var o in n)n.hasOwnProperty(o)&&i.push(o)}if(!e){var a=i.indexOf(r);a>-1&&i.splice(a,1)}return i},D3ScatterPlotMatrixUtils.prototype.isObject=function(t){return null!==t&&"object"==typeof t},D3ScatterPlotMatrixUtils.prototype.isNumber=function(t){return!isNaN(t)&&"number"==typeof t},D3ScatterPlotMatrixUtils.prototype.isFunction=function(t){return"function"==typeof t},D3ScatterPlotMatrixUtils.prototype.selectOrAppend=function(t,r,e){var i=t.select(r);return i.empty()?t.append(e||r):i};
2   -function D3ScatterPlotMatrix(t,i,e){this.utils=new D3ScatterPlotMatrixUtils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,size:200,padding:20,brush:!0,guides:!0,tooltip:!0,ticks:null,margin:{left:30,right:30,top:30,bottom:30},x:{orient:"bottom",scale:"linear"},y:{orient:"left",scale:"linear"},dot:{radius:2,color:null,d3ColorCategory:"category10"},traits:{labels:[],keys:[],categoryKey:null,includeCategoryInPlot:!1,value:function(t,i){return t[i]}}},e&&this.setConfig(e),i&&this.setData(i),this.init()}D3ScatterPlotMatrix.prototype.setData=function(t){return this.data=t,this},D3ScatterPlotMatrix.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlotMatrix.prototype.initPlot=function(){var t=this,i=this.config.margin,e=this.config;this.plot={x:{},y:{},dot:{color:null}},this.setupTraits(),this.plot.size=e.size;var a=e.width,o=d3.select(this.placeholderSelector).node();if(!a){var l=i.left+i.right+this.plot.traits.length*this.plot.size;a=Math.min(o.getBoundingClientRect().width,l)}var r=a;r||(r=o.getBoundingClientRect().height),this.plot.width=a-i.left-i.right,this.plot.height=r-i.top-i.bottom,null===e.ticks&&(e.ticks=this.plot.size/40),this.setupX(),this.setupY(),e.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[e.dot.d3ColorCategory]());var s=e.dot.color;return s?(this.plot.dot.colorValue=s,"string"==typeof s||s instanceof String?this.plot.dot.color=s:this.plot.dot.colorCategory&&(this.plot.dot.color=function(i){return t.plot.dot.colorCategory(t.plot.dot.colorValue(i))})):e.traits.categoryKey&&(this.plot.dot.color=function(i){return t.plot.dot.colorCategory(i[e.traits.categoryKey])}),this},D3ScatterPlotMatrix.prototype.setupTraits=function(){var t=this.config.traits,i=this.data,e=this.plot;e.domainByTrait={},e.traits=t.keys,e.traits&&e.traits.length||(e.traits=this.utils.inferTraits(i,t.categoryKey,t.includeCategoryInPlot)),e.labels=[],e.labelByTrait={},e.traits.forEach(function(a,o){e.domainByTrait[a]=d3.extent(i,function(i){return t.value(i,a)});var l=a;t.labels&&t.labels.length>o&&(l=t.labels[o]),e.labels.push(l),e.labelByTrait[a]=l}),void 0,e.subplots=[]},D3ScatterPlotMatrix.prototype.setupX=function(){var t=this.plot,i=t.x,e=this.config;i.value=e.traits.value,i.scale=d3.scale[e.x.scale]().range([e.padding/2,t.size-e.padding/2]),i.map=function(t,e){return i.scale(i.value(t,e))},i.axis=d3.svg.axis().scale(i.scale).orient(e.x.orient).ticks(e.ticks),i.axis.tickSize(t.size*t.traits.length)},D3ScatterPlotMatrix.prototype.setupY=function(){var t=this.plot,i=t.y,e=this.config;i.value=e.traits.value,i.scale=d3.scale[e.y.scale]().range([t.size-e.padding/2,e.padding/2]),i.map=function(t,e){return i.scale(i.value(t,e))},i.axis=d3.svg.axis().scale(i.scale).orient(e.y.orient).ticks(e.ticks),i.axis.tickSize(-t.size*t.traits.length)},D3ScatterPlotMatrix.prototype.drawPlot=function(){function t(t){var e=i.plot;e.subplots.push(t);var o=d3.select(this);e.x.scale.domain(e.domainByTrait[t.x]),e.y.scale.domain(e.domainByTrait[t.y]),o.append("rect").attr("class","mw-frame").attr("x",a.padding/2).attr("y",a.padding/2).attr("width",a.size-a.padding).attr("height",a.size-a.padding),t.update=function(){var t=this,a=o.selectAll("circle").data(i.data);a.enter().append("circle"),a.attr("cx",function(i){return e.x.map(i,t.x)}).attr("cy",function(i){return e.y.map(i,t.y)}).attr("r",i.config.dot.radius),e.dot.color&&a.style("fill",e.dot.color),e.tooltip&&a.on("mouseover",function(i){e.tooltip.transition().duration(200).style("opacity",.9),e.tooltip.html("("+e.x.value(i,t.x)+", "+e.y.value(i,t.y)+")").style("left",d3.event.pageX+5+"px").style("top",d3.event.pageY-28+"px")}).on("mouseout",function(t){e.tooltip.transition().duration(500).style("opacity",0)}),a.exit().remove()},t.update()}var i=this,e=i.plot.traits.length,a=this.config;i.svgG.selectAll(".mw-axis-x.mw-axis").data(i.plot.traits).enter().append("g").attr("class","mw-axis-x mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,a){return"translate("+(e-a-1)*i.plot.size+",0)"}).each(function(t){i.plot.x.scale.domain(i.plot.domainByTrait[t]),d3.select(this).call(i.plot.x.axis)}),i.svgG.selectAll(".mw-axis-y.mw-axis").data(i.plot.traits).enter().append("g").attr("class","mw-axis-y mw-axis"+(a.guides?"":" mw-no-guides")).attr("transform",function(t,e){return"translate(0,"+e*i.plot.size+")"}).each(function(t){i.plot.y.scale.domain(i.plot.domainByTrait[t]),d3.select(this).call(i.plot.y.axis)}),a.tooltip&&(i.plot.tooltip=this.utils.selectOrAppend(d3.select(i.placeholderSelector),"div.mw-tooltip","div").attr("class","mw-tooltip").style("opacity",0));var o=i.svgG.selectAll(".mw-cell").data(i.utils.cross(i.plot.traits,i.plot.traits)).enter().append("g").attr("class","mw-cell").attr("transform",function(t){return"translate("+(e-t.i-1)*i.plot.size+","+t.j*i.plot.size+")"});a.brush&&this.drawBrush(o),o.each(t),o.filter(function(t){return t.i===t.j}).append("text").attr("x",a.padding).attr("y",a.padding).attr("dy",".71em").text(function(t){return i.plot.labelByTrait[t.x]})},D3ScatterPlotMatrix.prototype.update=function(){this.plot.subplots.forEach(function(t){t.update()})},D3ScatterPlotMatrix.prototype.initSvg=function(){var t=this,i=this.config,e=t.plot.width+i.margin.left+i.margin.right,a=t.plot.height+i.margin.top+i.margin.bottom;t.svg=d3.select(t.placeholderSelector).select("svg"),t.svg.empty()||t.svg.remove(),t.svg=d3.select(t.placeholderSelector).append("svg"),t.svg.attr("width",e).attr("height",a).attr("viewBox","0 0 "+e+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot-matrix"),t.svgG=t.svg.append("g").attr("class","mw-container").attr("transform","translate("+i.margin.left+","+i.margin.top+")"),i.width&&!i.height||d3.select(window).on("resize",function(){})},D3ScatterPlotMatrix.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()},D3ScatterPlotMatrix.prototype.drawBrush=function(t){function i(t){r!==this&&(d3.select(r).call(l.clear()),o.plot.x.scale.domain(o.plot.domainByTrait[t.x]),o.plot.y.scale.domain(o.plot.domainByTrait[t.y]),r=this)}function e(t){var i=l.extent();o.svgG.selectAll("circle").classed("hidden",function(e){return i[0][0]>e[t.x]||e[t.x]>i[1][0]||i[0][1]>e[t.y]||e[t.y]>i[1][1]})}function a(){l.empty()&&o.svgG.selectAll(".hidden").classed("hidden",!1)}var o=this,l=d3.svg.brush().x(o.plot.x.scale).y(o.plot.y.scale).on("brushstart",i).on("brush",e).on("brushend",a);t.append("g").call(l);var r};
3 0 \ No newline at end of file
bower_components/d3-scatterplot/.bower.json deleted
View file @752c1f5
1   -{
2   - "name": "d3-scatterplot",
3   - "homepage": "https://github.com/mwasiluk/d3-scatterplot",
4   - "authors": [
5   - "Michal Wasiluk"
6   - ],
7   - "description": "",
8   - "main": "",
9   - "keywords": [
10   - "scatterplot",
11   - "d3"
12   - ],
13   - "license": "MIT",
14   - "ignore": [
15   - "**/.*",
16   - "node_modules",
17   - "bower_components",
18   - "test",
19   - "tests"
20   - ],
21   - "dependencies": {
22   - "d3": "^3.5.17"
23   - },
24   - "version": "1.2.0",
25   - "_release": "1.2.0",
26   - "_resolution": {
27   - "type": "version",
28   - "tag": "1.2.0",
29   - "commit": "0aaed8cda9972abba45aa474e2167663bee29098"
30   - },
31   - "_source": "https://github.com/mwasiluk/d3-scatterplot.git",
32   - "_target": "^1.1.0",
33   - "_originalSource": "d3-scatterplot"
34   -}
35 0 \ No newline at end of file
bower_components/d3-scatterplot/LICENSE deleted
View file @752c1f5
1   -The MIT License (MIT)
2   -
3   -Copyright (c) 2016 Michał
4   -
5   -Permission is hereby granted, free of charge, to any person obtaining a copy
6   -of this software and associated documentation files (the "Software"), to deal
7   -in the Software without restriction, including without limitation the rights
8   -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9   -copies of the Software, and to permit persons to whom the Software is
10   -furnished to do so, subject to the following conditions:
11   -
12   -The above copyright notice and this permission notice shall be included in all
13   -copies or substantial portions of the Software.
14   -
15   -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16   -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17   -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18   -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19   -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20   -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21   -SOFTWARE.
bower_components/d3-scatterplot/bower.json deleted
View file @752c1f5
1   -{
2   - "name": "d3-scatterplot",
3   - "homepage": "https://github.com/mwasiluk/d3-scatterplot",
4   - "authors": [
5   - "Michal Wasiluk"
6   - ],
7   - "description": "",
8   - "main": "",
9   - "keywords": [
10   - "scatterplot",
11   - "d3"
12   - ],
13   - "license": "MIT",
14   - "ignore": [
15   - "**/.*",
16   - "node_modules",
17   - "bower_components",
18   - "test",
19   - "tests"
20   - ],
21   - "dependencies": {
22   - "d3": "^3.5.17"
23   - }
24   -}
bower_components/d3-scatterplot/demo/demo.js deleted
View file @752c1f5
1   -var conf = {
2   - // width: 500,
3   - // height: 500,
4   - dot:{
5   - // color: 'red'
6   - },
7   - x:{
8   - // scale: "log"
9   - }
10   -};
11   -var data = [
12   - [1,2],
13   - [2,3],
14   - [3,4],
15   - [6,4],
16   - [11,3],
17   - [1,3.5],
18   - [7,4],
19   - [5,4]
20   -
21   -];
22   -var plot = new D3ScatterPlot("#scatterplot", data, conf);
23   -
bower_components/d3-scatterplot/demo/index.html deleted
View file @752c1f5
1   -<!DOCTYPE html>
2   -<html lang="en">
3   -<head>
4   - <meta charset="UTF-8">
5   - <title>D3 scatterplot demo</title>
6   - <link rel="stylesheet" href="../dist/d3-scatterplot.css">
7   -</head>
8   -<body>
9   -<h1>D3 scatterplot demo</h1>
10   -
11   -<div id="scatterplot" style=" width: 100%; height: 600px;"></div>
12   -
13   -<script src="../bower_components/d3/d3.min.js" charset="utf-8"></script>
14   -<script src="../dist/d3-scatterplot.js" charset="utf-8"></script>
15   -<script src="demo.js"></script>
16   -</body>
17   -</html>
18 0 \ No newline at end of file
bower_components/d3-scatterplot/dist/d3-scatterplot.css deleted
View file @752c1f5
1   -svg.mw-d3-scatterplot {
2   - background-color: white;
3   - font-size: 11px;
4   - height: 100%; }
5   - svg.mw-d3-scatterplot .mw-axis path, svg.mw-d3-scatterplot .mw-axis line {
6   - fill: none;
7   - stroke: #000;
8   - shape-rendering: crispEdges; }
bower_components/d3-scatterplot/dist/d3-scatterplot.js deleted
View file @752c1f5
1   -function D3ScatterPlotUtils(){}
2   -
3   -// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
4   -D3ScatterPlotUtils.prototype.deepExtend = function (out) {
5   -
6   - var utils = this;
7   - var emptyOut = {};
8   -
9   -
10   - if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
11   - out = [];
12   - }
13   - out = out || {};
14   -
15   - for (var i = 1; i < arguments.length; i++) {
16   - var source = arguments[i];
17   - if (!source)
18   - continue;
19   -
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];
32   - }
33   - }
34   - }
35   -
36   - return out;
37   -};
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   -};
48   -function D3ScatterPlot(placeholderSelector, data, config){
49   - this.utils = new D3ScatterPlotUtils();
50   - this.placeholderSelector = placeholderSelector;
51   - this.svg=null;
52   - this.defaultConfig = {
53   - width: 0,
54   - height: 0,
55   - margin:{
56   - left: 50,
57   - right: 30,
58   - top: 30,
59   - bottom: 50
60   - },
61   - x:{// X axis config
62   - label: 'X', // axis label
63   - value: function(d) { return d[0] }, // x value accessor
64   - orient: "bottom",
65   - scale: "linear"
66   - },
67   - y:{// Y axis config
68   - label: 'Y', // axis label
69   - value: function(d) { return d[1] }, // y value accessor
70   - orient: "left",
71   - scale: "linear"
72   - },
73   - dot:{
74   - radius: 2,
75   - color: function(d) { return d[0]*d[1] }, // string or function returning color's value for color scale
76   - d3ColorCategory: 'category10'
77   - }
78   - };
79   -
80   - if(data){
81   - this.setData(data);
82   - }
83   -
84   - if(config){
85   - this.setConfig(config);
86   - }
87   -
88   - this.init();
89   -
90   -}
91   -
92   -D3ScatterPlot.prototype.setData = function (data){
93   - this.data = data;
94   - return this;
95   -};
96   -
97   -D3ScatterPlot.prototype.setConfig = function (config){
98   - this.config = this.utils.deepExtend({}, this.defaultConfig, config);
99   - return this;
100   -};
101   -D3ScatterPlot.prototype.initPlot = function (){
102   - var self=this;
103   - var margin = this.config.margin;
104   - var conf = this.config;
105   - this.plot={
106   - x: {},
107   - y: {},
108   - dot: {
109   - color: null//color scale mapping function
110   - }
111   - };
112   -
113   - var width = conf.width;
114   - var placeholderNode = d3.select(this.placeholderSelector).node();
115   -
116   - if(!width){
117   - width =placeholderNode.getBoundingClientRect().width;
118   - }
119   - var height = conf.height;
120   - if(!height){
121   - height =placeholderNode.getBoundingClientRect().height;
122   - }
123   -
124   - this.plot.width = width - margin.left - margin.right;
125   - this.plot.height = height - margin.top - margin.bottom;
126   -
127   - this.setupX();
128   - this.setupY();
129   -
130   - if(conf.dot.d3ColorCategory){
131   - this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
132   - }
133   - var colorValue = conf.dot.color;
134   - if(colorValue){
135   - this.plot.dot.colorValue = colorValue;
136   -
137   - if (typeof colorValue === 'string' || colorValue instanceof String){
138   - this.plot.dot.color = colorValue;
139   - }else if(this.plot.dot.colorCategory){
140   - this.plot.dot.color = function(d){
141   - return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
142   - }
143   - }
144   -
145   -
146   - }
147   -
148   - return this;
149   -};
150   -
151   -D3ScatterPlot.prototype.setupX = function (){
152   -
153   - var plot = this.plot;
154   - var x = plot.x;
155   - var conf = this.config.x;
156   -
157   - /*
158   - * value accessor - returns the value to encode for a given data object.
159   - * scale - maps value to a visual display encoding, such as a pixel position.
160   - * map function - maps from data value to display value
161   - * axis - sets up axis
162   - */
163   - x.value = conf.value;
164   - x.scale = d3.scale[conf.scale]().range([0, plot.width]);
165   - x.map = function(d) { return x.scale(x.value(d));};
166   - x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
167   - var data = this.data;
168   - plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
169   -
170   -
171   -};
172   -
173   -D3ScatterPlot.prototype.setupY = function (){
174   -
175   - var plot = this.plot;
176   - var y = plot.y;
177   - var conf = this.config.y;
178   -
179   - /*
180   - * value accessor - returns the value to encode for a given data object.
181   - * scale - maps value to a visual display encoding, such as a pixel position.
182   - * map function - maps from data value to display value
183   - * axis - sets up axis
184   - */
185   - y.value = conf.value;
186   - y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
187   - y.map = function(d) { return y.scale(y.value(d));};
188   - y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
189   -
190   -
191   - var data = this.data;
192   - plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
193   -};
194   -
195   -D3ScatterPlot.prototype.draw = function (){
196   - this.drawAxisX();
197   - this.drawAxisY();
198   - this.update();
199   -};
200   -D3ScatterPlot.prototype.drawAxisX = function (){
201   - var self = this;
202   - var plot = self.plot;
203   - var axisConf = this.config.x;
204   - self.svgG.append("g")
205   - .attr("class", "mw-axis mw-axis-x")
206   - .attr("transform", "translate(0," + plot.height + ")")
207   - .call(plot.x.axis)
208   - .append("text")
209   - .attr("class", "mw-label")
210   - .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")") // text is drawn off the screen top left, move down and out and rotate
211   - .attr("dy", "-1em")
212   - .style("text-anchor", "middle")
213   - .text(axisConf.label);
214   -};
215   -
216   -D3ScatterPlot.prototype.drawAxisY = function (){
217   - var self = this;
218   - var plot = self.plot;
219   - var axisConf = this.config.y;
220   - self.svgG.append("g")
221   - .attr("class", "mw-axis mw-axis-y")
222   - .call(plot.y.axis)
223   - .append("text")
224   - .attr("class", "mw-label")
225   - .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
226   - .attr("dy", "1em")
227   - .style("text-anchor", "middle")
228   - .text(axisConf.label);
229   -};
230   -
231   -
232   -D3ScatterPlot.prototype.update = function (){
233   - var self = this;
234   - var plot = self.plot;
235   - var data = this.data;
236   - var dots = self.svgG.selectAll(".mw-dot")
237   - .data(data);
238   -
239   - dots.enter().append("circle")
240   - .attr("class", "mw-dot");
241   -
242   -
243   - dots.attr("r", self.config.dot.radius)
244   - .attr("cx", plot.x.map)
245   - .attr("cy", plot.y.map);
246   -
247   - if(plot.dot.color){
248   - dots.style("fill", plot.dot.color)
249   - }
250   - dots.exit().remove();
251   -
252   -};
253   -
254   -D3ScatterPlot.prototype.initSvg = function (){
255   - var self = this;
256   - var config = this.config;
257   -
258   - var width = self.plot.width+ config.margin.left + config.margin.right;
259   - var height = self.plot.height+ config.margin.top + config.margin.bottom;
260   - var aspect = width / height;
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
270   - .attr("width", width)
271   - .attr("height", height)
272   - .attr("viewBox", "0 0 "+" "+width+" "+height)
273   - .attr("preserveAspectRatio", "xMidYMid meet")
274   - .attr("class", "mw-d3-scatterplot");
275   - self.svgG = self.svg.append("g")
276   - .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
277   -
278   - if(!config.width || config.height ){
279   - d3.select(window)
280   - .on("resize", function() {
281   - //TODO add responsiveness if width/height not specified
282   - });
283   - }
284   -
285   -};
286   -
287   -D3ScatterPlot.prototype.init = function (){
288   - var self = this;
289   - self.initPlot();
290   - self.initSvg();
291   - self.draw();
292   -
293   -};
294   -
bower_components/d3-scatterplot/dist/d3-scatterplot.min.css deleted
View file @752c1f5
1   -svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis line,svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}
2 0 \ No newline at end of file
bower_components/d3-scatterplot/dist/d3-scatterplot.min.js deleted
View file @752c1f5
1   -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};
2   -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()};
3 0 \ No newline at end of file
bower_components/d3-scatterplot/gulpfile.js deleted
View file @752c1f5
1   -var gulp = require('gulp');
2   -var del = require('del');
3   -var merge = require('merge-stream');
4   -var plugins = require('gulp-load-plugins')();
5   -var browserSync = require('browser-sync').create();
6   -
7   -gulp.task('clean', function (cb) {
8   - return del(['tmp', 'dist'], cb);
9   -});
10   -
11   -gulp.task('build-css', function () {
12   - var pretty = gulp.src('./styles/*')
13   - .pipe(plugins.plumber({ errorHandler: onError }))
14   - .pipe(plugins.sass())
15   - .pipe(plugins.minifyCss())
16   - .pipe(plugins.rename({
17   - extname: '.min.css'
18   - }))
19   - .pipe(gulp.dest('./dist'));
20   - var ugly = gulp.src('./styles/*')
21   - .pipe(plugins.plumber({ errorHandler: onError }))
22   - .pipe(plugins.sass())
23   - .pipe(plugins.rename({
24   - extname: '.css'
25   - }))
26   - .pipe(gulp.dest('./dist'));
27   - return merge(pretty, ugly);
28   -});
29   -
30   -gulp.task('build-js', function () {
31   - var jsFileName = 'd3-scatterplot';
32   - var pretty = gulp.src('./src/*.js')
33   - .pipe(plugins.plumber({ errorHandler: onError }))
34   - .pipe(plugins.concat(jsFileName+'.js'))
35   - .pipe(gulp.dest('dist'));
36   -
37   - var ugly = gulp.src('./src/*.js')
38   - .pipe(plugins.plumber({ errorHandler: onError }))
39   - .pipe(plugins.uglify())
40   - .pipe(plugins.stripDebug())
41   - .pipe(plugins.concat(jsFileName+'.min.js'))
42   - .pipe(gulp.dest('dist'));
43   -
44   - return merge(pretty, ugly);
45   -});
46   -
47   -gulp.task('build-clean', ['clean'], function () {
48   - gulp.start('build');
49   -});
50   -
51   -gulp.task('build', ['build-css', 'build-js'], function () {
52   -
53   -});
54   -
55   -gulp.task('watch', function() {
56   - return gulp.watch(['./src/**/*.html', './styles/*.*css', 'src/**/*.js'], ['default']);
57   -});
58   -
59   -gulp.task('default', ['build-clean'], function() {
60   -
61   -});
62   -
63   -gulp.task('default-watch', ['default'], ()=>{ browserSync.reload() });
64   -gulp.task('serve', ['default'], ()=>{
65   - browserSync.init({
66   - server: {
67   - baseDir: "demo",
68   - index: "index.html",
69   - routes: {
70   - "/bower_components": "bower_components",
71   - "/dist": "dist"
72   - }
73   - },
74   - port: 8089,
75   - open: 'local',
76   - browser: "google chrome"
77   - });
78   - gulp.watch(['i18n/**/*.json', './src/**/*.html', './styles/*.*css', 'src/**/*.js', 'demo/*.*'], ['default-watch']);
79   -});
80   -
81   -// error function for plumber
82   -var onError = function (err) {
83   - console.log(err);
84   - this.emit('end');
85   -};
86 0 \ No newline at end of file
bower_components/d3-scatterplot/package.json deleted
View file @752c1f5
1   -{
2   - "name": "d3-scatterplot",
3   - "version": "1.0.0",
4   - "description": "d3 scatterplot",
5   - "main": "gulpfile.js",
6   - "scripts": {
7   - "test": "echo \"Error: no test specified\" && exit 1"
8   - },
9   - "repository": {
10   - "type": "git",
11   - "url": "git+https://github.com/mwasiluk/d3-scatterplot.git"
12   - },
13   - "keywords": [
14   - "d3",
15   - "scatterplot"
16   - ],
17   - "author": "Michal Wasiluk",
18   - "license": "MIT",
19   - "bugs": {
20   - "url": "https://github.com/mwasiluk/d3-scatterplot/issues"
21   - },
22   - "homepage": "https://github.com/mwasiluk/d3-scatterplot#readme",
23   - "devDependencies": {
24   - "browser-sync": "^2.13.0",
25   - "del": "^2.2.0",
26   - "gulp": "^3.9.1",
27   - "gulp-concat": "^2.6.0",
28   - "gulp-load-plugins": "^1.2.4",
29   - "gulp-minify-css": "^1.2.4",
30   - "gulp-plumber": "^1.1.0",
31   - "gulp-rename": "^1.2.2",
32   - "gulp-sass": "^2.3.1",
33   - "gulp-strip-debug": "^1.1.0",
34   - "gulp-uglify": "^1.5.3",
35   - "merge-stream": "^1.0.0"
36   - }
37   -}
bower_components/d3-scatterplot/src/d3-scatterplot-utils.js deleted
View file @752c1f5
1   -function D3ScatterPlotUtils(){}
2   -
3   -// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
4   -D3ScatterPlotUtils.prototype.deepExtend = function (out) {
5   -
6   - var utils = this;
7   - var emptyOut = {};
8   -
9   -
10   - if (!out && arguments.length > 1 && Array.isArray(arguments[1])) {
11   - out = [];
12   - }
13   - out = out || {};
14   -
15   - for (var i = 1; i < arguments.length; i++) {
16   - var source = arguments[i];
17   - if (!source)
18   - continue;
19   -
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];
32   - }
33   - }
34   - }
35   -
36   - return out;
37   -};
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   -};
48 0 \ No newline at end of file
bower_components/d3-scatterplot/src/d3-scatterplot.js deleted
View file @752c1f5
1   -function D3ScatterPlot(placeholderSelector, data, config){
2   - this.utils = new D3ScatterPlotUtils();
3   - this.placeholderSelector = placeholderSelector;
4   - this.svg=null;
5   - this.defaultConfig = {
6   - width: 0,
7   - height: 0,
8   - margin:{
9   - left: 50,
10   - right: 30,
11   - top: 30,
12   - bottom: 50
13   - },
14   - x:{// X axis config
15   - label: 'X', // axis label
16   - value: function(d) { return d[0] }, // x value accessor
17   - orient: "bottom",
18   - scale: "linear"
19   - },
20   - y:{// Y axis config
21   - label: 'Y', // axis label
22   - value: function(d) { return d[1] }, // y value accessor
23   - orient: "left",
24   - scale: "linear"
25   - },
26   - dot:{
27   - radius: 2,
28   - color: function(d) { return d[0]*d[1] }, // string or function returning color's value for color scale
29   - d3ColorCategory: 'category10'
30   - }
31   - };
32   -
33   - if(data){
34   - this.setData(data);
35   - }
36   -
37   - if(config){
38   - this.setConfig(config);
39   - }
40   -
41   - this.init();
42   -
43   -}
44   -
45   -D3ScatterPlot.prototype.setData = function (data){
46   - this.data = data;
47   - return this;
48   -};
49   -
50   -D3ScatterPlot.prototype.setConfig = function (config){
51   - this.config = this.utils.deepExtend({}, this.defaultConfig, config);
52   - return this;
53   -};
54   -D3ScatterPlot.prototype.initPlot = function (){
55   - var self=this;
56   - var margin = this.config.margin;
57   - var conf = this.config;
58   - this.plot={
59   - x: {},
60   - y: {},
61   - dot: {
62   - color: null//color scale mapping function
63   - }
64   - };
65   -
66   - var width = conf.width;
67   - var placeholderNode = d3.select(this.placeholderSelector).node();
68   -
69   - if(!width){
70   - width =placeholderNode.getBoundingClientRect().width;
71   - }
72   - var height = conf.height;
73   - if(!height){
74   - height =placeholderNode.getBoundingClientRect().height;
75   - }
76   -
77   - this.plot.width = width - margin.left - margin.right;
78   - this.plot.height = height - margin.top - margin.bottom;
79   -
80   - this.setupX();
81   - this.setupY();
82   -
83   - if(conf.dot.d3ColorCategory){
84   - this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
85   - }
86   - var colorValue = conf.dot.color;
87   - if(colorValue){
88   - this.plot.dot.colorValue = colorValue;
89   -
90   - if (typeof colorValue === 'string' || colorValue instanceof String){
91   - this.plot.dot.color = colorValue;
92   - }else if(this.plot.dot.colorCategory){
93   - this.plot.dot.color = function(d){
94   - return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
95   - }
96   - }
97   -
98   -
99   - }
100   -
101   - return this;
102   -};
103   -
104   -D3ScatterPlot.prototype.setupX = function (){
105   -
106   - var plot = this.plot;
107   - var x = plot.x;
108   - var conf = this.config.x;
109   -
110   - /*
111   - * value accessor - returns the value to encode for a given data object.
112   - * scale - maps value to a visual display encoding, such as a pixel position.
113   - * map function - maps from data value to display value
114   - * axis - sets up axis
115   - */
116   - x.value = conf.value;
117   - x.scale = d3.scale[conf.scale]().range([0, plot.width]);
118   - x.map = function(d) { return x.scale(x.value(d));};
119   - x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
120   - var data = this.data;
121   - plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
122   -
123   -
124   -};
125   -
126   -D3ScatterPlot.prototype.setupY = function (){
127   -
128   - var plot = this.plot;
129   - var y = plot.y;
130   - var conf = this.config.y;
131   -
132   - /*
133   - * value accessor - returns the value to encode for a given data object.
134   - * scale - maps value to a visual display encoding, such as a pixel position.
135   - * map function - maps from data value to display value
136   - * axis - sets up axis
137   - */
138   - y.value = conf.value;
139   - y.scale = d3.scale[conf.scale]().range([plot.height, 0]);
140   - y.map = function(d) { return y.scale(y.value(d));};
141   - y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
142   -
143   -
144   - var data = this.data;
145   - plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
146   -};
147   -
148   -D3ScatterPlot.prototype.draw = function (){
149   - this.drawAxisX();
150   - this.drawAxisY();
151   - this.update();
152   -};
153   -D3ScatterPlot.prototype.drawAxisX = function (){
154   - var self = this;
155   - var plot = self.plot;
156   - var axisConf = this.config.x;
157   - self.svgG.append("g")
158   - .attr("class", "mw-axis mw-axis-x")
159   - .attr("transform", "translate(0," + plot.height + ")")
160   - .call(plot.x.axis)
161   - .append("text")
162   - .attr("class", "mw-label")
163   - .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")") // text is drawn off the screen top left, move down and out and rotate
164   - .attr("dy", "-1em")
165   - .style("text-anchor", "middle")
166   - .text(axisConf.label);
167   -};
168   -
169   -D3ScatterPlot.prototype.drawAxisY = function (){
170   - var self = this;
171   - var plot = self.plot;
172   - var axisConf = this.config.y;
173   - self.svgG.append("g")
174   - .attr("class", "mw-axis mw-axis-y")
175   - .call(plot.y.axis)
176   - .append("text")
177   - .attr("class", "mw-label")
178   - .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
179   - .attr("dy", "1em")
180   - .style("text-anchor", "middle")
181   - .text(axisConf.label);
182   -};
183   -
184   -
185   -D3ScatterPlot.prototype.update = function (){
186   - var self = this;
187   - var plot = self.plot;
188   - var data = this.data;
189   - var dots = self.svgG.selectAll(".mw-dot")
190   - .data(data);
191   -
192   - dots.enter().append("circle")
193   - .attr("class", "mw-dot");
194   -
195   -
196   - dots.attr("r", self.config.dot.radius)
197   - .attr("cx", plot.x.map)
198   - .attr("cy", plot.y.map);
199   -
200   - if(plot.dot.color){
201   - dots.style("fill", plot.dot.color)
202   - }
203   - dots.exit().remove();
204   -
205   -};
206   -
207   -D3ScatterPlot.prototype.initSvg = function (){
208   - var self = this;
209   - var config = this.config;
210   -
211   - var width = self.plot.width+ config.margin.left + config.margin.right;
212   - var height = self.plot.height+ config.margin.top + config.margin.bottom;
213   - var aspect = width / height;
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
223   - .attr("width", width)
224   - .attr("height", height)
225   - .attr("viewBox", "0 0 "+" "+width+" "+height)
226   - .attr("preserveAspectRatio", "xMidYMid meet")
227   - .attr("class", "mw-d3-scatterplot");
228   - self.svgG = self.svg.append("g")
229   - .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
230   -
231   - if(!config.width || config.height ){
232   - d3.select(window)
233   - .on("resize", function() {
234   - //TODO add responsiveness if width/height not specified
235   - });
236   - }
237   -
238   -};
239   -
240   -D3ScatterPlot.prototype.init = function (){
241   - var self = this;
242   - self.initPlot();
243   - self.initSvg();
244   - self.draw();
245   -
246   -};
247   -
bower_components/d3-scatterplot/styles/d3-scatterplot.scss deleted
View file @752c1f5
1   -svg.mw-d3-scatterplot{
2   - background-color: white;
3   - font-size: 11px;
4   - height: 100%;
5   - .mw-axis{
6   -
7   - path, line{
8   - fill: none;
9   - stroke: #000;
10   - shape-rendering: crispEdges;
11   - }
12   - }
13   -
14   - .mw-dot {
15   - //stroke: #000;
16   - }
17   -
18   -}
datalets/scatterplot-datalet/scatterplot-datalet.html
  View file @40c0e48
... ... @@ -4,7 +4,7 @@
4 4  
5 5 <dom-module id="scatterplot-datalet">
6 6 <template>
7   - <link rel="stylesheet" href="../../bower_components/d3-scatterplot/dist/d3-scatterplot.min.css">
  7 + <link rel="stylesheet" href="../../bower_components/charts-d3/dist/charts-d3.min.css">
8 8 <style is="custom-style">
9 9 :host ::content #scatterplot-placeholder {
10 10 width: 100%;
... ... @@ -17,7 +17,7 @@
17 17 <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}" export_menu="{{export_menu}}"></base-ajax-json-alasql-datalet>
18 18 </template>
19 19 <script src="../shared_js/d3.js"></script>
20   - <script type="text/javascript" src="../../bower_components/d3-scatterplot/dist/d3-scatterplot.js"></script>
  20 + <script type="text/javascript" src="../../bower_components/charts-d3/dist/charts-d3.min.js"></script>
21 21 <script>
22 22  
23 23 var ScatterplotBehavior = {
... ...
datalets/scatterplot-matrix-datalet/scatterplot-matrix-datalet.html
  View file @40c0e48
... ... @@ -4,7 +4,7 @@
4 4  
5 5 <dom-module id="scatterplot-matrix-datalet">
6 6 <template>
7   - <link rel="stylesheet" href="../../bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.css">
  7 + <link rel="stylesheet" href="../../bower_components/charts-d3/dist/charts-d3.min.css">
8 8 <style is="custom-style">
9 9 :host ::content #scatterplot-placeholder {
10 10 width: 100%;
... ... @@ -17,7 +17,7 @@
17 17 <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}" export_menu="{{export_menu}}"></base-ajax-json-alasql-datalet>
18 18 </template>
19 19 <script src="../shared_js/d3.js"></script>
20   - <script type="text/javascript" src="../../bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.js"></script>
  20 + <script type="text/javascript" src="../../bower_components/charts-d3/dist/charts-d3.js"></script>
21 21 <script>
22 22  
23 23 var ScatterplotMatrixBehavior = {
... ... @@ -25,7 +25,7 @@
25 25  
26 26 var self =this;
27 27 var categories = [];
28   - console.log(this.data);
  28 +// console.log(this.data);
29 29  
30 30  
31 31 var data = [];
... ... @@ -39,17 +39,13 @@
39 39 data.push(d);
40 40 }
41 41  
42   - console.log(data);
43   -
44   -
45 42  
46 43 var conf = {
47 44 guides: true,
48 45 brush: true,
49 46 tooltip: true,
50   - traits: {
51   - categoryKey: self._component.categoryKey
52   -
  47 + groups: {
  48 + key: self._component.categoryKey
53 49 },
54 50 margin:{
55 51 left: 50
... ... @@ -59,7 +55,6 @@
59 55 if(self._component.cellSize){
60 56 conf.size=self._component.cellSize;
61 57 }
62   - console.log('conf', conf);
63 58 var plot = new D3ScatterPlotMatrix("#scatterplot-placeholder", data, conf);
64 59 }
65 60 };
... ...