|
1 |
|
2 var r = new Relations(); |
|
3 var couleurs = new Couleurs(20); |
|
4 /*var couleurs = new Couleurs(["yellow", "blue", "red", "green", "navy", |
|
5 "black", "orange", "purple", "white", "gray"]);*/ |
|
6 |
|
7 //* |
|
8 var parametresStreamgraph = { |
|
9 name: "streamgraph", |
|
10 selector: "#streamgraph", |
|
11 activerSelection : false, |
|
12 hauteur: 300, |
|
13 largeur: 900, |
|
14 relations: r, |
|
15 couleurs: couleurs |
|
16 }; |
|
17 |
|
18 |
|
19 var streamgraph = new Streamgraph(json.clusters, parametresStreamgraph); |
|
20 |
|
21 var parametresStreamgraphTimeline = { |
|
22 name: "streamgraphTimeline", |
|
23 selector: "#streamgraphTimeline", |
|
24 activerSelection : true, |
|
25 activerCurseur: true, |
|
26 activerTimeline: true, |
|
27 hauteur: 50, |
|
28 relations: r, |
|
29 couleurs: couleurs |
|
30 }; |
|
31 |
|
32 var streamgraphTimeline = new Streamgraph(json.clusters, parametresStreamgraphTimeline); |
|
33 //*/ |
|
34 |
|
35 //* |
|
36 var parametresTreemap = { |
|
37 name: "treemap", |
|
38 selector: "#treemap", |
|
39 hauteur: 300, |
|
40 largeur: 900, |
|
41 relations: r, |
|
42 couleurs: couleurs, |
|
43 template: { |
|
44 selector: "#streamgraphTemplate", |
|
45 directives: { |
|
46 // "img@src": "urlImage", |
|
47 // "img@title": "titreArticle", |
|
48 // "img@alt": "titreArticle", |
|
49 // "img@width": "widthImage", |
|
50 // "img@height": "heightImage", |
|
51 // "img@style+": "cssOffsetImage", |
|
52 // "p.title": "titreArticle" |
|
53 } |
|
54 } |
|
55 }; |
|
56 var treemap = new Treemap(json, parametresTreemap); |
|
57 //*/ |
|
58 |
|
59 //* |
|
60 r.get("streamgraphTimeline").bind("selectionResize","streamgraph", |
|
61 function(objet, params) { objet.resize(params[0], params[1]); }) |
|
62 .bind("selectionResize", "treemap", |
|
63 function(objet, params) { objet.transition(params[0], params[1]); }); |
|
64 |
|
65 function placerCurseur(cluster) { |
|
66 streamgraphTimeline.placerCurseur(parseInt(cluster.attr("datetime")), 'index'); |
|
67 streamgraphTimeline.showCursor(); |
|
68 } |
|
69 |
|
70 function cacherCurseur() { |
|
71 streamgraphTimeline.hideCursor(); |
|
72 } |
|
73 |
|
74 for (var i = 0; i<treemap.nbClusters; ++i) { |
|
75 var cluster = r.get("treemap.cluster." + i); |
|
76 cluster.mouseover(treemap.focus) |
|
77 .mouseout(treemap.blur) |
|
78 .mouseover(placerCurseur) |
|
79 .mouseout(cacherCurseur) |
|
80 .mouseover("streamgraph.cluster." + i, streamgraph.focus) |
|
81 .mouseout("streamgraph.cluster." + i, streamgraph.blur); |
|
82 var stream = r.get("streamgraph.cluster." + i); |
|
83 stream.mouseover(streamgraph.focus) |
|
84 .mouseout(streamgraph.blur) |
|
85 .mouseover("treemap.cluster." + i, treemap.focus) |
|
86 .mouseout("treemap.cluster." + i, treemap.blur); |
|
87 } |
|
88 //*/ |