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