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,6 +19,7 @@ | ||
19 | "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14", | 19 | "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14", |
20 | "iron-icon": "PolymerElements/iron-icon#~1.0.7", | 20 | "iron-icon": "PolymerElements/iron-icon#~1.0.7", |
21 | "iron-icons": "PolymerElements/iron-icons#~1.1.2", | 21 | "iron-icons": "PolymerElements/iron-icons#~1.1.2", |
22 | - "paper-toast": "PolymerElements/paper-toast#~1.2.1" | 22 | + "paper-toast": "PolymerElements/paper-toast#~1.2.1", |
23 | + "d3-scatterplot-matrix": "^0.1.0" | ||
23 | } | 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 | \ No newline at end of file | 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 | \ No newline at end of file | 113 | \ No newline at end of file |