| author | veltr |
| Tue, 22 Jan 2013 14:42:36 +0100 | |
| changeset 24 | bd6d2bdbc47a |
| parent 21 | c2dd00471b2d |
| child 25 | 94073a2af6e1 |
| permissions | -rw-r--r-- |
| 21 | 1 |
$(function(){ |
2 |
||
3 |
var IDEALRATIO = 1.25; |
|
| 19 | 4 |
|
| 21 | 5 |
function cuttree(data, x, y, w, h, cut, ratio, callback) { |
6 |
|
|
7 |
function f(subdata, subx, suby, subw, subh) { |
|
8 |
if (subdata.length == 1) { |
|
9 |
subdata[0].x = subx; |
|
10 |
subdata[0].y = suby; |
|
11 |
subdata[0].w = subw; |
|
12 |
subdata[0].h = subh; |
|
13 |
} else { |
|
14 |
callback(subdata, subx, suby, subw, subh) |
|
15 |
} |
|
16 |
} |
|
17 |
|
|
18 |
var first = _(data).first(cut), rest = _(data).rest(cut); |
|
19 |
if (!first.length || !rest.length) { |
|
20 |
return; |
|
21 |
} |
|
22 |
if (w/h > IDEALRATIO) { |
|
23 |
var leftw = w * ratio; |
|
24 |
f(first, x, y, leftw, h); |
|
25 |
f(rest, x + leftw, y, w - leftw, h); |
|
| 19 | 26 |
} else { |
| 21 | 27 |
var toph = h * ratio; |
28 |
f(first, x, y, w, toph); |
|
29 |
f(rest, x, y + toph, w, h - toph); |
|
| 19 | 30 |
} |
31 |
} |
|
| 21 | 32 |
|
33 |
function pivot(data, x, y, w, h) { |
|
| 24 | 34 |
if (data.length == 1) { |
35 |
data[0].x = x; |
|
36 |
data[0].y = x; |
|
37 |
data[0].w = w; |
|
38 |
data[0].h = h; |
|
39 |
return; |
|
40 |
} |
|
| 21 | 41 |
var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; |
42 |
for (var i = 0; i < data.length - 1; i++) { |
|
43 |
cumul += data[i].value; |
|
44 |
var delta = Math.abs(cumul - total/2); |
|
45 |
if (delta < bestcut) { |
|
46 |
bestcut = delta; |
|
47 |
bestcumul = cumul; |
|
48 |
cut = i+1; |
|
49 |
} else { |
|
50 |
break; |
|
51 |
} |
|
52 |
} |
|
53 |
cuttree(data, x, y, w, h, cut, bestcumul / total, pivot); |
|
| 19 | 54 |
} |
55 |
||
| 21 | 56 |
function squarify(data, x, y, w, h) { |
| 24 | 57 |
if (data.length == 1) { |
58 |
data[0].x = x; |
|
59 |
data[0].y = x; |
|
60 |
data[0].w = w; |
|
61 |
data[0].h = h; |
|
62 |
return; |
|
63 |
} |
|
| 21 | 64 |
var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity; |
65 |
for (var i = 0; i < data.length - 1; i++) { |
|
66 |
cumul += data[i].value; |
|
67 |
cuttree(data, x, y, w, h, i+1, cumul / total, pivot); |
|
68 |
var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w)); |
|
69 |
if (ratio < bestcut) { |
|
70 |
bestcut = ratio; |
|
71 |
bestcumul = cumul; |
|
72 |
cut = i+1; |
|
73 |
} else { |
|
74 |
break; |
|
75 |
} |
|
| 19 | 76 |
} |
| 21 | 77 |
cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); |
| 19 | 78 |
} |
| 24 | 79 |
|
80 |
/* SOURCE : http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript */ |
|
81 |
|
|
82 |
/** |
|
83 |
* Converts an HSV color value to RGB. Conversion formula |
|
84 |
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. |
|
85 |
* Assumes h, s, and v are contained in the set [0, 1] and |
|
86 |
* returns r, g, and b in the set [0, 255]. |
|
87 |
* |
|
88 |
* @param Number h The hue |
|
89 |
* @param Number s The saturation |
|
90 |
* @param Number v The value |
|
91 |
* @return Array The RGB representation |
|
92 |
*/ |
|
93 |
function hsvToRgb(h, s, v){ |
|
94 |
var r, g, b; |
|
95 |
|
|
96 |
var i = Math.floor(h * 6); |
|
97 |
var f = h * 6 - i; |
|
98 |
var p = v * (1 - s); |
|
99 |
var q = v * (1 - f * s); |
|
100 |
var t = v * (1 - (1 - f) * s); |
|
101 |
|
|
102 |
switch(i % 6){ |
|
103 |
case 0: r = v, g = t, b = p; break; |
|
104 |
case 1: r = q, g = v, b = p; break; |
|
105 |
case 2: r = p, g = v, b = t; break; |
|
106 |
case 3: r = p, g = q, b = v; break; |
|
107 |
case 4: r = t, g = p, b = v; break; |
|
108 |
case 5: r = v, g = p, b = q; break; |
|
109 |
} |
|
110 |
|
|
111 |
return _([r * 255, g * 255, b * 255]).map(Math.floor); |
|
112 |
} |
|
| 19 | 113 |
|
| 24 | 114 |
/* Templates des éléments à insérer */ |
115 |
|
|
116 |
var articleTemplate = _( |
|
117 |
'<div class="cluster-article" style="position: absolute; left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+ |
|
118 |
'<%=label%>'+ |
|
119 |
'</div>' |
|
120 |
).template(); |
|
121 |
var clusterTemplate = _( |
|
| 19 | 122 |
'<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+ |
123 |
'<a href="#">'+ |
|
| 24 | 124 |
// '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+ |
125 |
'<%=articles%>'+ |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
126 |
'<div class="voile"></div>'+ |
| 19 | 127 |
'</a>'+ |
128 |
'<div class="inner-actu">'+ |
|
129 |
'<h2><a href="#"><%-label%></a></h2>'+ |
|
130 |
'<div class="links">'+ |
|
131 |
'<ul>'+ |
|
| 24 | 132 |
'<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+ |
| 19 | 133 |
'</ul>'+ |
134 |
'</div>'+ |
|
135 |
'</div>'+ |
|
| 24 | 136 |
'</div>' |
137 |
).template(); |
|
| 19 | 138 |
|
| 21 | 139 |
|
| 24 | 140 |
var hTreemap = 600;//à définir |
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
141 |
$('#treemap').height(hTreemap); |
| 24 | 142 |
|
143 |
function showResults(results) { |
|
144 |
var data = _(results.clusters).map(function(cluster, i) { |
|
145 |
var hue = (i%6)/6 |
|
146 |
return { |
|
147 |
label: cluster.title, |
|
148 |
value: parseFloat(cluster.weight), |
|
149 |
color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")", |
|
150 |
annotation_count: cluster.annotations.length, |
|
151 |
articles: _(cluster.documents).map(function(article, j) { |
|
152 |
return { |
|
153 |
label: article.title, |
|
154 |
value: parseFloat(article.weight), |
|
155 |
color: "rgb(" + hsvToRgb(hue,.8,.9-.1*(j%6)).join(",") + ")" |
|
156 |
} |
|
157 |
}) |
|
158 |
} |
|
159 |
}); |
|
160 |
data _(data).sortBy(function(d) { |
|
161 |
return -d.value; |
|
162 |
}); |
|
163 |
squarify(data,0,0,760,hTreemap); |
|
164 |
_(data).each(function(cluster) { |
|
165 |
squarify(cluster.articles, 0, 0, cluster.w, cluster.h); |
|
166 |
_(cluster.articles).sortBy(function(d) { |
|
167 |
return -d.value; |
|
168 |
}); |
|
169 |
cluster.articles = _(cluster.articles).reduce(function(mem, a) { |
|
170 |
return mem + articleTemplate(a); |
|
171 |
}, ""); |
|
172 |
}); |
|
173 |
var treemapHtml = _(data).reduce(function(mem, d) { |
|
174 |
return mem + clusterTemplate(d); |
|
175 |
},""); |
|
176 |
$('#treemap #actus').html(treemapHtml); |
|
177 |
} |
|
178 |
|
|
179 |
function renderJson(url) { |
|
180 |
$.getJSON(url, showResults); |
|
181 |
} |
|
182 |
|
|
183 |
renderJson("data/requete.json"); |
|
184 |
|
|
185 |
$(".header-menu a").click(function() { |
|
186 |
if ($(this).text() == "INTERNATIONAL") { |
|
187 |
renderJson("data/requete_filtre_international.json"); |
|
188 |
} |
|
189 |
if ($(this).text() == "FRANCE") { |
|
190 |
renderJson("data/requete_filtre_france.json"); |
|
191 |
} |
|
192 |
if ($(this).hasClass("home")) { |
|
193 |
renderJson("data/requete.json") |
|
194 |
} |
|
195 |
return false; |
|
196 |
}); |
|
197 |
|
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
198 |
//redimensionnement d'image |
| 24 | 199 |
/* |
200 |
$(".actu").each(function(k,v){ |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
201 |
var wActu = $(this).width(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
202 |
var hActu = $(this).height(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
203 |
var img = $(this).find('img'); |
| 21 | 204 |
img.load(function(){ |
205 |
var img = $(this); |
|
| 19 | 206 |
|
| 21 | 207 |
var wImg = img.width(); |
208 |
var hImg = img.height(); |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
209 |
|
| 21 | 210 |
var ratioImg = wImg/hImg; |
211 |
img.css('height',hActu); |
|
212 |
img.css('width',hActu*ratioImg); |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
213 |
wImg = img.width(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
214 |
hImg = img.height(); |
| 21 | 215 |
|
216 |
if(wActu>wImg){ |
|
217 |
var ratioImg = hImg/wImg; |
|
218 |
img.css('width', wActu); |
|
219 |
img.css('height',wActu*ratioImg); |
|
220 |
wImg = img.width(); |
|
221 |
hImg = img.height(); |
|
222 |
} |
|
| 19 | 223 |
|
| 21 | 224 |
if (wImg<wActu) { |
225 |
img.css('margin-left',(wActu-wImg)/2); |
|
226 |
}else{ |
|
227 |
img.css('margin-left',-(wImg-wActu)/2); |
|
228 |
} |
|
229 |
if (hImg<hActu) { |
|
230 |
img.css('margin-top',(hActu-hImg)/2); |
|
231 |
}else{ |
|
232 |
img.css('margin-top',-(hImg-hActu)/2); |
|
233 |
} |
|
234 |
}); |
|
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
235 |
}); |
| 24 | 236 |
*/ |
237 |
||
|
20
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
238 |
|
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
239 |
$("#liste").hide(); |
|
c86141a8570d
maj retours / modifications
Anthony Ly <anthonyly.com@gmail.com>
parents:
19
diff
changeset
|
240 |
}) |