ce4b5fb1
Luigi Serra
graph-datalet
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!--
@license
The MIT License (MIT)
Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
<!--
* Developed by :
* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
*
-->
<link rel="import" href="../base-datalet/base-datalet.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
|
33ee61fd
Luigi Serra
graph updates
|
34
|
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
|
4ef93b8d
Luigi Serra
graph updates
|
35
|
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
|
ce4b5fb1
Luigi Serra
graph-datalet
|
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!--
`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
Example:
<preview-datalet data-url="http://spod.routetopa.eu"
</preview-datalet>
@element preview-datalet
@status beta
@homepage
@group datalets
-->
<dom-module id="graph-datalet">
<template>
<link rel="stylesheet" href="static/css/graphStyle.css">
<style is="custom-style">
|
ce4b5fb1
Luigi Serra
graph-datalet
|
58
|
|
33ee61fd
Luigi Serra
graph updates
|
59
|
#dialog{
|
0e9ad951
Luigi Serra
graph updates
|
60
|
position: absolute;
|
33ee61fd
Luigi Serra
graph updates
|
61
|
padding: 20px;
|
0e9ad951
Luigi Serra
graph updates
|
62
|
top: 20px;
|
4ef93b8d
Luigi Serra
graph updates
|
63
64
65
66
67
68
69
70
71
72
73
74
75
|
right:5%;
}
#close{
position: absolute;
top: -20px;
right: 3px;
--iron-icon-height: 20px;
--iron-icon-width: 20px;
width: 24px;
height: 24px;
--paper-fab-background:#9e9e9e;
z-index: 1001;
|
33ee61fd
Luigi Serra
graph updates
|
76
|
}
|
cc7592d4
Luigi Serra
graphs update
|
77
78
79
|
#dialog_content{
padding : 10px;
}
|
33ee61fd
Luigi Serra
graph updates
|
80
|
|
ce4b5fb1
Luigi Serra
graph-datalet
|
81
82
|
</style>
|
01a6d2e5
Luigi Serra
graph updates
|
83
|
<div style="align-content: center;overflow: visible" id="graph_content">
|
c49910f8
Luigi Serra
graph updates
|
84
85
|
<svg id="sbiricuda"></svg>
</div>
|
ce4b5fb1
Luigi Serra
graph-datalet
|
86
|
|
33ee61fd
Luigi Serra
graph updates
|
87
|
<paper-dialog id="dialog">
|
4ef93b8d
Luigi Serra
graph updates
|
88
|
<paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
|
33ee61fd
Luigi Serra
graph updates
|
89
|
<h2 id="dialog_title"></h2>
|
cc7592d4
Luigi Serra
graphs update
|
90
|
<div id="dialog_content">cos</div>
|
33ee61fd
Luigi Serra
graph updates
|
91
92
|
</paper-dialog>
|
ce4b5fb1
Luigi Serra
graph-datalet
|
93
94
95
|
</template>
<script src="static/js/d3.v3.js"></script>
|
ce4b5fb1
Luigi Serra
graph-datalet
|
96
97
98
|
<script>
|
c49910f8
Luigi Serra
graph updates
|
99
|
_this = null;
|
4f0953cd
Luigi Serra
graph datalet
|
100
|
|
ce4b5fb1
Luigi Serra
graph-datalet
|
101
102
103
|
Polymer({
is : 'graph-datalet',
|
d0393f14
Luigi Serra
graphs updates
|
104
105
106
107
108
|
listeners: {
'graph-datalet_on-node-hover' : '_onNodeHover',
'graph-datalet_on-node-out' : '_onNodeOut'
},
|
ce4b5fb1
Luigi Serra
graph-datalet
|
109
110
111
112
113
114
115
116
|
properties: {
/**
* It's the url for the preview
*
* @attribute url
* @type Strig
* @default ''
*/
|
d0393f14
Luigi Serra
graphs updates
|
117
|
graph : {
|
ce4b5fb1
Luigi Serra
graph-datalet
|
118
|
type : Object,
|
916a6554
Luigi Serra
graph datalets up...
|
119
|
value : {}
|
ce4b5fb1
Luigi Serra
graph-datalet
|
120
121
|
},
|
d0393f14
Luigi Serra
graphs updates
|
122
123
124
125
126
127
128
129
130
131
|
gnodes : {
type : Array,
value : []
},
glinks : {
type : Array,
value : []
},
|
ce4b5fb1
Luigi Serra
graph-datalet
|
132
133
|
width: {
type: Number,
|
01a6d2e5
Luigi Serra
graph updates
|
134
|
value: undefined
|
ce4b5fb1
Luigi Serra
graph-datalet
|
135
136
137
138
|
},
height : {
type : Number,
|
d0393f14
Luigi Serra
graphs updates
|
139
|
value: undefined
|
ce4b5fb1
Luigi Serra
graph-datalet
|
140
141
142
143
144
|
},
svg: {
type: Object,
value: undefined
|
4ef93b8d
Luigi Serra
graph updates
|
145
146
147
148
|
},
feelings:{
type: Array,
values: ["Agree", "Neutral", "Not agree"]
|
d0393f14
Luigi Serra
graphs updates
|
149
150
151
152
153
|
},
prev_selected_node : {
type : Object,
value : null
|
c49910f8
Luigi Serra
graph updates
|
154
155
|
}
},
|
4f0953cd
Luigi Serra
graph datalet
|
156
|
|
ff209db7
Luigi Serra
graph updates
|
157
|
buildGraph: function (){
|
4f0953cd
Luigi Serra
graph datalet
|
158
|
|
c49910f8
Luigi Serra
graph updates
|
159
160
161
162
|
this.svg = this.svg.append("g")
.call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom))
.append("g");
|
01a6d2e5
Luigi Serra
graph updates
|
163
|
//set initial zoom
|
d0393f14
Luigi Serra
graphs updates
|
164
|
var scale = (1.0);
|
01a6d2e5
Luigi Serra
graph updates
|
165
|
//translate = [(width-scale*width)/2, ((height-scale*height)/4)];
|
d0393f14
Luigi Serra
graphs updates
|
166
|
var translate = [100, 100];
|
01a6d2e5
Luigi Serra
graph updates
|
167
168
169
170
171
172
173
174
175
176
|
this.svg.transition()
.duration(750)
.attr("transform", "translate(" + translate + ")scale(" + scale + ")")
.each("end", function () {
d3.behavior.zoom()
.scale(scale)
.translate(translate);
});
//end set initial zoom
|
c49910f8
Luigi Serra
graph updates
|
177
|
this.svg.append("rect")
|
6333a5a5
Andrea Petta
public room style
|
178
|
.attr("fill", "transparent")
|
d0393f14
Luigi Serra
graphs updates
|
179
180
|
.attr("width", this.width)
.attr("height", this.height);
|
ce4b5fb1
Luigi Serra
graph-datalet
|
181
|
|
559b8d49
Luigi Serra
graphs updates
|
182
|
|
ff209db7
Luigi Serra
graph updates
|
183
|
/* var graph = {};
|
559b8d49
Luigi Serra
graphs updates
|
184
185
|
graph.nodes = t.nodes;
|
ff209db7
Luigi Serra
graph updates
|
186
|
graph.links = t.links;*/
|
559b8d49
Luigi Serra
graphs updates
|
187
|
|
0f6424fe
root
update new data-s...
|
188
|
//pezzotto
|
ff209db7
Luigi Serra
graph updates
|
189
|
for(var i =0; i < this.graph.nodes.length; i++){
|
1aced18e
Luigi Serra
graph uploads
|
190
191
|
this.svg.append("defs")
.append("pattern")
|
ff209db7
Luigi Serra
graph updates
|
192
|
.attr("id","image_" + this.graph.nodes[i].id)
|
1aced18e
Luigi Serra
graph uploads
|
193
194
195
196
197
198
199
200
|
.attr("patternUnits","objectBoundingBox")
.attr("height","40")
.attr("width","40")
.append("image")
.attr("x","0")
.attr("y","0")
.attr("height","30")
.attr("width","30")
|
ff209db7
Luigi Serra
graph updates
|
201
|
.attr("xlink:href", this.graph.nodes[i].image);
|
559b8d49
Luigi Serra
graphs updates
|
202
|
}
|
0f6424fe
root
update new data-s...
|
203
204
|
//end pezzotto
|
ff209db7
Luigi Serra
graph updates
|
205
|
force = d3.layout.force().nodes(this.graph.nodes).links(this.graph.links).size([this.width, this.height]).charge(-1e3).friction(.7).linkDistance(function (t)
|
ce4b5fb1
Luigi Serra
graph-datalet
|
206
207
208
209
|
{
return t.value ? t.value : 80
}).on("tick", this.tick).start();
|
ff209db7
Luigi Serra
graph updates
|
210
|
this.glinks = this.svg.selectAll(".link").data(this.graph.links).enter().append("line").attr("class", "link");
|
c49910f8
Luigi Serra
graph updates
|
211
|
|
559b8d49
Luigi Serra
graphs updates
|
212
213
214
215
216
217
218
|
this.svg.selectAll(".link")
.attr("style", function(t){
return "stroke:" + t.color
})
.attr("style", function(t){
return "stroke-width:" + (t.size ? t.size : 1.0) + "px";
});
|
01a6d2e5
Luigi Serra
graph updates
|
219
|
|
ff209db7
Luigi Serra
graph updates
|
220
|
this.gnodes = this.svg.selectAll(".node").data(this.graph.nodes).enter().append("g")
|
d0393f14
Luigi Serra
graphs updates
|
221
222
223
224
225
226
|
.attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
.attr("id", function (t) { return "g" + t.id;})
.attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
.on("mouseover", this.mouseover)
.on("mouseout", this.mouseout)
.on("click", this.active)
|
c49910f8
Luigi Serra
graph updates
|
227
|
.append("circle")
|
d0393f14
Luigi Serra
graphs updates
|
228
229
230
231
|
.attr("id", function(t){ return t.id;})
.attr("originalId", function (t) { return t.originalId;})
.attr("class", function (t) { return t.fixed ? "" : "drag"})
.attr("r", function (t) {return t.r ? t.r : 15})
|
0f6424fe
root
update new data-s...
|
232
|
.attr("style", function (t) {
|
559b8d49
Luigi Serra
graphs updates
|
233
234
235
236
237
238
239
240
241
242
243
244
245
|
switch(parseInt(t.sentiment)){
case 1 :
t.color = "#1F77B4";
break;
case 2 :
t.color = "#2CA02C";
break;
case 3:
t.color = "#D62728";
break;
default:
t.color = "#333";
}
|
559b8d49
Luigi Serra
graphs updates
|
246
|
return "fill:" + t.color + "; stroke:white"
|
c49910f8
Luigi Serra
graph updates
|
247
|
});
|
ce4b5fb1
Luigi Serra
graph-datalet
|
248
|
|
05c2c2bb
Luigi Serra
graph updates
|
249
250
|
d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
|
1aced18e
Luigi Serra
graph uploads
|
251
|
d3.selectAll('circle').attr("style", function(t){
|
05c2c2bb
Luigi Serra
graph updates
|
252
|
return (t != undefined) ? "fill :" + (t.image ? 'url(#image_' + t.id +')' : t.color) : "";
|
d0393f14
Luigi Serra
graphs updates
|
253
|
});
|
0f6424fe
root
update new data-s...
|
254
|
|
c49910f8
Luigi Serra
graph updates
|
255
256
257
|
},
zoom: function() {
|
d0393f14
Luigi Serra
graphs updates
|
258
|
_this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
|
ce4b5fb1
Luigi Serra
graph-datalet
|
259
|
},
|
c49910f8
Luigi Serra
graph updates
|
260
|
|
ce4b5fb1
Luigi Serra
graph-datalet
|
261
262
263
264
265
266
267
268
269
270
271
272
|
text: function (t)
{
var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
e.attr("style", function (t) {
return "color:" + (t.color ? t.color : "#000")
}).append("xhtml:div").html(function (t) {
//return t.fixed ? t.name : null
return t.name;
})
},
tick : function () {
|
ff209db7
Luigi Serra
graph updates
|
273
|
if(_this.gnodes != undefined && _this.graph.nodes.length > 0)
|
d0393f14
Luigi Serra
graphs updates
|
274
275
276
277
278
279
|
{
d3.selectAll("g foreignObject").attr("x", function (t) {
return t.x + (t.r ? 0.8 * t.r : 15)
}).attr("y", function (t) {
return t.y - 20
});
|
ce4b5fb1
Luigi Serra
graph-datalet
|
280
|
|
d0393f14
Luigi Serra
graphs updates
|
281
282
283
284
285
|
d3.selectAll("#logo text").attr("x", function (t) {
return t.x + .7 * (t.r ? t.r : 15)
}).attr("y", function (t) {
return t.y
});
|
ce4b5fb1
Luigi Serra
graph-datalet
|
286
|
|
4f0953cd
Luigi Serra
graph datalet
|
287
|
|
d0393f14
Luigi Serra
graphs updates
|
288
289
290
291
292
|
_this.gnodes.attr("cx", function (t) {
return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
}).attr("cy", function (t) {
return t.y = Math.max(8, Math.min(600, t.y))
});
|
4f0953cd
Luigi Serra
graph datalet
|
293
|
|
d0393f14
Luigi Serra
graphs updates
|
294
295
296
297
298
299
300
301
302
303
|
_this.glinks.attr("x1", function (t) {
return t.source.x
}).attr("y1", function (t) {
return t.source.y
}).attr("x2", function (t) {
return t.target.x
}).attr("y2", function (t) {
return t.target.y
});
}
|
ce4b5fb1
Luigi Serra
graph-datalet
|
304
305
|
},
mouseover : function (t) {
|
1aced18e
Luigi Serra
graph uploads
|
306
307
308
309
|
d3.select(this).selectAll("circle").transition().duration(600).ease("elastic")
.attr("r", function (t) {
return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
});
|
0e9ad951
Luigi Serra
graph updates
|
310
311
312
313
314
315
|
_this.$.dialog.close();
_this.$.dialog_title.innerHTML = t.name;
_this.$.dialog_content.innerHTML = t.content;
_this.$.dialog.open();
|
ce4b5fb1
Luigi Serra
graph-datalet
|
316
317
318
|
},
mouseout : function () {
|
1aced18e
Luigi Serra
graph uploads
|
319
320
321
322
323
|
d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400)
.attr("r", function (t) {
return t.r ? t.r : 15
});
|
0e9ad951
Luigi Serra
graph updates
|
324
|
_this.$.dialog.close();
|
ce4b5fb1
Luigi Serra
graph-datalet
|
325
326
327
|
},
active : function (t) {
|
0e9a5727
Luigi Serra
graph updatesù
|
328
329
330
|
if(t.image) return;
_this.fire('graph-datalet_node-clicked', {node : t});
|
33ee61fd
Luigi Serra
graph updates
|
331
|
|
d0393f14
Luigi Serra
graphs updates
|
332
333
334
|
if(_this.prev_selected_node != null){
_this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
_this.prev_selected_node.style.stroke = "#FFFFFF";
|
33ee61fd
Luigi Serra
graph updates
|
335
336
|
}
|
d0393f14
Luigi Serra
graphs updates
|
337
338
339
|
_this.prev_selected_node = document.getElementById("" + t.id);
_this. prev_selected_node.style.fill = "#FFFFFF"
_this.prev_selected_node.style.stroke = t.color;
|
33ee61fd
Luigi Serra
graph updates
|
340
|
|
0e9ad951
Luigi Serra
graph updates
|
341
|
/* _this.$.dialog.close();
|
4ef93b8d
Luigi Serra
graph updates
|
342
343
|
_this.$.dialog_title.innerHTML = t.name;
_this.$.dialog_content.innerHTML = t.content;
|
4ef93b8d
Luigi Serra
graph updates
|
344
|
|
0e9ad951
Luigi Serra
graph updates
|
345
|
_this.$.dialog.open();*/
|
4ef93b8d
Luigi Serra
graph updates
|
346
|
},
|
33ee61fd
Luigi Serra
graph updates
|
347
|
|
4ef93b8d
Luigi Serra
graph updates
|
348
|
_onCloseClick : function(){
|
0e9ad951
Luigi Serra
graph updates
|
349
|
//_this.$.dialog.close();
|
ce4b5fb1
Luigi Serra
graph-datalet
|
350
351
|
},
|
d0393f14
Luigi Serra
graphs updates
|
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
|
_onNodeHover : function(e){
try {
var nodeId = $("[originalId=" + e.detail.id + "]")[0].id;
var gNode = $("#g" + nodeId)[0];
var node = this.graph.nodes[nodeId];
d3.select(gNode).selectAll("circle").transition().duration(600).ease("elastic")
.attr("r", function (t) {
return (!t.image) ? 1 == t.fixed ? 1.4 * t.r : t.r + 10 : t.r;
});
_this.$.dialog.close();
_this.$.dialog_title.innerHTML = node.name;
_this.$.dialog_content.innerHTML = node.content;
_this.$.dialog.open();
}catch(e){}
},
_onNodeOut : function(e){
this.mouseout();
},
|
916a6554
Luigi Serra
graph datalets up...
|
376
377
378
379
380
381
382
383
384
|
init : function(){
if(this.graph.nodes.length > 0){
this.graph.nodes[0].x = this.width / 2;
this.graph.nodes[0].y = this.height / 8;
this.buildGraph();
}
},
|
ce4b5fb1
Luigi Serra
graph-datalet
|
385
386
387
388
389
390
391
392
393
394
395
|
/**
* It is called after the element’s template has been stamped and all elements inside the element’s local
* DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
* and had their ready method called.
*
* Extract the dataset domain from the entire URL and set the text content of the datalet footer.
*
* @method ready
*
*/
ready: function(){
|
ce4b5fb1
Luigi Serra
graph-datalet
|
396
|
|
c49910f8
Luigi Serra
graph updates
|
397
|
_this = this;
|
4f0953cd
Luigi Serra
graph datalet
|
398
|
|
c49910f8
Luigi Serra
graph updates
|
399
400
|
this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
|
ce4b5fb1
Luigi Serra
graph-datalet
|
401
402
|
width: "100%",
height: "100%"
|
d0393f14
Luigi Serra
graphs updates
|
403
404
405
406
|
}).attr("viewBox", "0 0 " + this.width + " " + this.height)
.attr("pointer-events", "all")
.attr("style", "transform:translate(0px)")
.style("position", "absolute");
|
ce4b5fb1
Luigi Serra
graph-datalet
|
407
408
409
410
|
}
});
</script>
</dom-module>
|