|
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 |
1 $(function(){ |
35 $(function(){ |
2 |
36 |
3 var IDEALRATIO = 1.25; |
37 var IDEALRATIO = 1.33; |
4 |
38 |
5 function cuttree(data, x, y, w, h, cut, ratio, callback) { |
39 function cuttree(data, x, y, w, h, cut, ratio, callback) { |
6 |
40 |
7 function f(subdata, subx, suby, subw, subh) { |
41 function f(subdata, subx, suby, subw, subh) { |
8 if (subdata.length == 1) { |
42 if (subdata.length == 1) { |
75 } |
109 } |
76 } |
110 } |
77 cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); |
111 cuttree(data, x, y, w, h, cut, bestcumul / total, squarify); |
78 } |
112 } |
79 |
113 |
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 } |
|
113 |
114 |
114 /* Templates des éléments à insérer */ |
115 /* Templates des éléments à insérer */ |
115 |
116 |
116 var articleTemplate = _( |
117 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 '<div class="cluster-article" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px;">'+ |
118 '<%=label%>'+ |
119 '<img src="<%=image_url%>" />' + |
119 '</div>' |
120 '</div>' |
120 ).template(); |
121 ).template(); |
121 var clusterTemplate = _( |
122 var clusterTemplate = _( |
122 '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+ |
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%>">'+ |
123 '<a href="#">'+ |
124 '<%=articles%>'+ // Pour l'image composite |
124 // '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+ |
125 '<img src="<%=image_url%>" />' + // Pour l'image de cluster |
125 '<%=articles%>'+ |
|
126 '<div class="voile"></div>'+ |
126 '<div class="voile"></div>'+ |
127 '</a>'+ |
|
128 '<div class="inner-actu">'+ |
127 '<div class="inner-actu">'+ |
129 '<h2><a href="#"><%-label%></a></h2>'+ |
128 '<h2><a href="#"><%-label%></a></h2>'+ |
130 '<div class="links">'+ |
129 '<div class="links">'+ |
131 '<ul>'+ |
130 '<ul>'+ |
132 '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+ |
131 '<li><a href="#" title="<%=annotation_count%> Annotations sur ce cluster" class="file"><span><%=annotation_count%></span></a></li>'+ |
133 '</ul>'+ |
132 '</ul>'+ |
134 '</div>'+ |
133 '</div>'+ |
135 '</div>'+ |
134 '</div>'+ |
|
135 '<p class="abstract"><%= abstract %></p>'+ |
136 '</div>' |
136 '</div>' |
137 ).template(); |
137 ).template(); |
138 |
138 |
139 |
139 |
140 var hTreemap = 600;//à définir |
140 var hTreemap = 600;//à définir |
141 $('#treemap').height(hTreemap); |
141 $('#treemap').height(hTreemap); |
142 |
142 |
143 function showResults(results) { |
143 function showResults(results) { |
144 var data = _(results.clusters).map(function(cluster, i) { |
144 var data = _(results.clusters).map(function(cluster, i) { |
145 var hue = (i%6)/6 |
145 var hue = (parseInt(cluster.id)%6)/6 |
146 return { |
146 return { |
|
147 id: cluster.id, |
147 label: cluster.title, |
148 label: cluster.title, |
|
149 abstract : cluster.abstract, |
148 value: parseFloat(cluster.weight), |
150 value: parseFloat(cluster.weight), |
149 color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")", |
151 color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")", |
150 annotation_count: cluster.annotations.length, |
152 annotation_count: cluster.annotations.length, |
151 articles: _(cluster.documents).map(function(article, j) { |
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) { |
152 return { |
158 return { |
153 label: article.title, |
|
154 value: parseFloat(article.weight), |
159 value: parseFloat(article.weight), |
155 color: "rgb(" + hsvToRgb(hue,.8,.9-.1*(j%6)).join(",") + ")" |
160 image_url: article.url_image || false |
156 } |
161 } |
157 }) |
162 }) |
158 } |
163 } |
159 }); |
164 }); |
160 data = _(data).sortBy(function(d) { |
165 data = _(data).sortBy(function(d) { |
161 return -d.value; |
166 return -d.value; |
162 }); |
167 }); |
163 squarify(data,0,0,760,hTreemap); |
168 squarify(data,0,0,760,hTreemap); |
164 _(data).each(function(cluster) { |
169 _(data).each(function(cluster) { |
165 squarify(cluster.articles, 0, 0, cluster.w, cluster.h); |
170 squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1); |
166 _(cluster.articles).sortBy(function(d) { |
171 _(cluster.articles).sortBy(function(d) { |
167 return -d.value; |
172 return -d.value; |
168 }); |
173 }); |
169 cluster.articles = _(cluster.articles).reduce(function(mem, a) { |
174 cluster.articles = _(cluster.articles).reduce(function(mem, a) { |
170 return mem + articleTemplate(a); |
175 return mem + articleTemplate(a); |
172 }); |
177 }); |
173 var treemapHtml = _(data).reduce(function(mem, d) { |
178 var treemapHtml = _(data).reduce(function(mem, d) { |
174 return mem + clusterTemplate(d); |
179 return mem + clusterTemplate(d); |
175 },""); |
180 },""); |
176 $('#treemap #actus').html(treemapHtml); |
181 $('#treemap #actus').html(treemapHtml); |
|
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 }); |
177 } |
219 } |
178 |
220 |
179 function renderJson(url) { |
221 function renderJson(url) { |
180 $.getJSON(url, showResults); |
222 $.getJSON(url, showResults); |
181 } |
223 } |