Commit fc6c91b0114fe2afadebed9c20cfd05660772c1d
1 parent
6b636e83
d3 scatterplot-matrix-datalet
Showing
3 changed files
with
137 additions
and
1 deletions
bower.json
... | ... | @@ -19,6 +19,7 @@ |
19 | 19 | "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14", |
20 | 20 | "iron-icon": "PolymerElements/iron-icon#~1.0.7", |
21 | 21 | "iron-icons": "PolymerElements/iron-icons#~1.1.2", |
22 | - "paper-toast": "PolymerElements/paper-toast#~1.2.1" | |
22 | + "paper-toast": "PolymerElements/paper-toast#~1.2.1", | |
23 | + "d3-scatterplot-matrix": "^0.1.0" | |
23 | 24 | } |
24 | 25 | } | ... | ... |
datalets/scatterplot-matrix-datalet/demo/index.html
0 → 100644
1 | +<!DOCTYPE html> | |
2 | +<html lang="en"> | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <title></title> | |
6 | + | |
7 | + <script> | |
8 | + </script> | |
9 | + | |
10 | +</head> | |
11 | +<body> | |
12 | + | |
13 | +<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script> | |
14 | +<link rel="import" href="../scatterplot-matrix-datalet.html" /> | |
15 | + | |
16 | +<div style="width:auto;"> | |
17 | + <scatterplot-matrix-datalet category-key="regione" cell-size="250" data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500" | |
18 | + fields='["result,records,regione","result,records,pop_residente","result,records,superficie_kmq","result,records,dens_demografica"]'></scatterplot-matrix-datalet> | |
19 | +</div> | |
20 | + | |
21 | + | |
22 | +</body> | |
23 | +</html> | |
0 | 24 | \ No newline at end of file | ... | ... |
datalets/scatterplot-matrix-datalet/scatterplot-matrix-datalet.html
0 → 100644
1 | + | |
2 | +<link rel="import" href="../base-ajax-json-alasql-datalet/base-ajax-json-alasql-datalet.html"> | |
3 | + | |
4 | + | |
5 | +<dom-module id="scatterplot-matrix-datalet"> | |
6 | + <template> | |
7 | + <link rel="stylesheet" href="../../bower_components/d3-scatterplot-matrix/dist/d3-scatterplot-matrix.min.css"> | |
8 | + <style is="custom-style"> | |
9 | + :host ::content #scatterplot-placeholder { | |
10 | + width: 100%; | |
11 | + | |
12 | + background: #ffffff; | |
13 | + position: relative; | |
14 | + } | |
15 | + </style> | |
16 | + <div id="scatterplot-placeholder"></div> | |
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 | + </template> | |
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> | |
21 | + <script> | |
22 | + | |
23 | + var ScatterplotMatrixBehavior = { | |
24 | + presentData: function () { | |
25 | + | |
26 | + var self =this; | |
27 | + var categories = []; | |
28 | + console.log(this.data); | |
29 | + | |
30 | + | |
31 | + var data = []; | |
32 | + var traits=[]; | |
33 | + for (var i = 0; i < this.data[0]["data"].length; i++) { | |
34 | + var d ={}; | |
35 | + | |
36 | + self.data.forEach(function(serie, serieIndex){ | |
37 | + d[serie.name] = self.data[serieIndex].data[i] | |
38 | + }); | |
39 | + data.push(d); | |
40 | + } | |
41 | + | |
42 | + console.log(data); | |
43 | + | |
44 | + | |
45 | + | |
46 | + var conf = { | |
47 | + guides: true, | |
48 | + brush: true, | |
49 | + tooltip: true, | |
50 | + traits: { | |
51 | + categoryKey: self._component.categoryKey | |
52 | + | |
53 | + }, | |
54 | + margin:{ | |
55 | + left: 50 | |
56 | + } | |
57 | + }; | |
58 | + | |
59 | + if(self._component.cellSize){ | |
60 | + conf.size=self._component.cellSize; | |
61 | + } | |
62 | + console.log('conf', conf); | |
63 | + var plot = new D3ScatterPlotMatrix("#scatterplot-placeholder", data, conf); | |
64 | + } | |
65 | + }; | |
66 | + | |
67 | + ScatterplotMatrixDatalet = Polymer({ | |
68 | + is: 'scatterplot-matrix-datalet', | |
69 | + properties: { | |
70 | + data: { | |
71 | + type: Array, | |
72 | + value: undefined | |
73 | + }, | |
74 | + cellSize: { | |
75 | + type: Number, | |
76 | + value: undefined | |
77 | + }, | |
78 | + categoryKey: { | |
79 | + type: String, | |
80 | + value: undefined | |
81 | + }, | |
82 | + behavior : { | |
83 | + type : Object, | |
84 | + value : {} | |
85 | + }, | |
86 | + /** | |
87 | + * Control the export menu | |
88 | + * xxxx BITMASK. FROM RIGHT : HTML, PNG, RTF, MY SPACE (eg. 1111 show all, 0000 hide all) | |
89 | + * | |
90 | + * @attribute export_menu | |
91 | + * @type Number | |
92 | + * @default 15 | |
93 | + */ | |
94 | + export_menu : { | |
95 | + type : Number, | |
96 | + value : 15 // xxxx BITMASK. FROM RIGHT : HTML, PNG, RTF, MY SPACE (eg. 1111 show all, 0000 hide all) | |
97 | + } | |
98 | + }, | |
99 | + | |
100 | + /** | |
101 | + * 'ready' callback extend the scatterchartComponentBehavior with HighchartsComponentBehavior and scatterchartBehavior | |
102 | + * and run the Datalet workcycle. | |
103 | + * | |
104 | + * @method ready | |
105 | + */ | |
106 | + ready: function(){ | |
107 | + this.behavior = $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior, AjaxJsonAlasqlBehavior, ScatterplotMatrixBehavior); | |
108 | + this.async(function(){this.behavior.init(this)},0); | |
109 | + } | |
110 | + }); | |
111 | + </script> | |
112 | +</dom-module> | |
0 | 113 | \ No newline at end of file | ... | ... |