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