| author | Anthony Ly <anthonyly.com@gmail.com> |
| Tue, 27 Nov 2012 18:08:06 +0100 | |
| changeset 20 | c86141a8570d |
| parent 19 | 81a605180745 |
| child 21 | c2dd00471b2d |
| permissions | -rw-r--r-- |
| 19 | 1 |
/* Génération de données aléatoires */ |
2 |
||
3 |
var data = [], |
|
4 |
startcolor = [ 0, 0, 255 ], |
|
5 |
endcolor = [ 255, 255, 0 ] |
|
6 |
elementcount = 8; |
|
7 |
||
8 |
for (var i = 0; i < elementcount; i++) { |
|
9 |
var r = i/elementcount, |
|
10 |
col = _(endcolor).map(function(e,i) { |
|
11 |
var s = startcolor[i] |
|
12 |
return Math.floor(r*e + (1-r)*s) |
|
13 |
}); |
|
14 |
data.push({ |
|
15 |
label: "Cluster " + (1+i), |
|
16 |
i: i+1, |
|
17 |
color: "rgb("+col.join(",")+")", |
|
18 |
value: 1+Math.pow(Math.random(),2)*5 |
|
19 |
}); |
|
20 |
} |
|
21 |
||
22 |
/* Génération du Treemap */ |
|
23 |
||
24 |
data = _(data).sortBy(function(d) { return -d.value; }); |
|
25 |
||
26 |
var IDEALRATIO = 1.25; |
|
27 |
||
28 |
function cuttree(data, x, y, w, h, cut, ratio, callback) { |
|
29 |
|
|
30 |
function f(subdata, subx, suby, subw, subh) { |
|
31 |
if (subdata.length == 1) { |
|
32 |
subdata[0].x = subx; |
|
33 |
subdata[0].y = suby; |
|
34 |
subdata[0].w = subw; |
|
35 |
subdata[0].h = subh; |
|
36 |
} else { |
|
37 |
callback(subdata, subx, suby, subw, subh) |
|
38 |
} |
|
39 |
} |
|
40 |
|
|
41 |
var first = _(data).first(cut), rest = _(data).rest(cut); |
|
42 |
if (!first.length || !rest.length) { |
|
43 |
return; |
|
44 |
} |
|
45 |
if (w/h > IDEALRATIO) { |
|
46 |
var leftw = w * ratio; |
|
47 |
f(first, x, y, leftw, h); |
|
48 |
f(rest, x + leftw, y, w - leftw, h); |
|
49 |
} else { |
|
50 |
var toph = h * ratio; |
|
51 |
f(first, x, y, w, toph); |
|
52 |
f(rest, x, y + toph, w, h - toph); |
|
53 |
} |
|
54 |
} |
|
55 |
||
56 |
function pivot(data, x, y, w, h) { |
|
57 |
var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; |
|
58 |
for (var i = 0; i < data.length - 1; i++) { |
|
59 |
cumul += data[i].value; |
|
60 |
var delta = Math.abs(cumul - total/2); |
|
61 |
if (delta < bestcut) { |
|
62 |
bestcut = delta; |
|
63 |
bestcumul = cumul; |
|
64 |
cut = i+1; |
|
65 |
} else { |
|
66 |
break; |
|
67 |
} |
|
68 |
} |
|
69 |
cuttree(data, x, y, w, h, cut, bestcumul / total, pivot); |
|
70 |
} |
|
71 |
||
72 |
function squarify(data, x, y, w, h) { |
|
73 |
var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; |
|
74 |
for (var i = 0; i < data.length - 1; i++) { |
|
75 |
cumul += data[i].value; |
|
76 |
cuttree(data, x, y, w, h, i+1, cumul / total, pivot); |
|
77 |
var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w)); |
|
78 |
if (ratio < bestcut) { |
|
79 |
bestcut = ratio; |
|
80 |
bestcumul = cumul; |
|
81 |
cut = i+1; |
|
82 |
} else { |
|
83 |
break; |
|
84 |
} |
|
85 |
} |
|
86 |
cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); |
|
87 |
} |
|
88 |
||
89 |
/* Template des éléments à insérer */ |
|
90 |
var actu = |
|
91 |
'<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+ |
|
92 |
'<a href="#">'+ |
|
93 |
'<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+ |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
94 |
'<div class="voile"></div>'+ |
| 19 | 95 |
'</a>'+ |
96 |
'<div class="inner-actu">'+ |
|
97 |
'<h2><a href="#"><%-label%></a></h2>'+ |
|
98 |
'<div class="links">'+ |
|
99 |
'<ul>'+ |
|
100 |
'<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+ |
|
101 |
'<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+ |
|
102 |
'<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+ |
|
103 |
'</ul>'+ |
|
104 |
'</div>'+ |
|
105 |
'</div>'+ |
|
106 |
'</div>'; |
|
107 |
||
108 |
||
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
109 |
$(function(){ |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
110 |
//treemap |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
111 |
var tmpl = _.template(actu); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
112 |
var hTreemap = 800;//à définir |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
113 |
$('#treemap').height(hTreemap); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
114 |
squarify(data,0,0,760,hTreemap); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
115 |
var treemapHtml = _(data).reduce(function(mem, d) { |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
116 |
return mem + tmpl(d); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
117 |
},""); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
118 |
$('#treemap #actus').html(treemapHtml); |
| 19 | 119 |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
120 |
//redimensionnement d'image |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
121 |
$(".actu").each(function(k,v){ |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
122 |
var wActu = $(this).width(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
123 |
var hActu = $(this).height(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
124 |
var img = $(this).find('img'); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
125 |
var wImg = img.width(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
126 |
var hImg = img.height(); |
| 19 | 127 |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
128 |
var ratioImg = wImg/hImg; |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
129 |
img.css('height',hActu); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
130 |
img.css('width',hActu*ratioImg); |
| 19 | 131 |
wImg = img.width(); |
132 |
hImg = img.height(); |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
133 |
|
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
134 |
if(wActu>wImg){ |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
135 |
var ratioImg = hImg/wImg; |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
136 |
img.css('width', wActu); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
137 |
img.css('height',wActu*ratioImg); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
138 |
wImg = img.width(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
139 |
hImg = img.height(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
140 |
} |
| 19 | 141 |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
142 |
if (wImg<wActu) { |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
143 |
img.css('margin-left',(wActu-wImg)/2); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
144 |
}else{ |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
145 |
img.css('margin-left',-(wImg-wActu)/2); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
146 |
} |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
147 |
if (hImg<hActu) { |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
148 |
img.css('margin-top',(hActu-hImg)/2); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
149 |
}else{ |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
150 |
img.css('margin-top',-(hImg-hActu)/2); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
151 |
} |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
152 |
}); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
153 |
|
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
154 |
$("#liste").hide(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
155 |
}) |