1 | {% extends 'base.template.html' %} |
---|
2 | {% load staticfiles %} |
---|
3 | {% block title %} Visualización {% endblock %} |
---|
4 | {% block headScript %} |
---|
5 | <script src="{% static "js/d3.v3.min.js" %}"></script> |
---|
6 | {% endblock %} |
---|
7 | {% block content %} |
---|
8 | <div id="row"> |
---|
9 | <div class="col-md-9" id="content"> |
---|
10 | <h3 class="text-center">{{propuesta}}</h3><hr> |
---|
11 | <div id="texto"> |
---|
12 | </div> |
---|
13 | </div> |
---|
14 | <div class="col-md-3"> |
---|
15 | <div class="btn-group" align="center"> |
---|
16 | <button class="btn btn-default" id="verTodos">Ver Todos</button> |
---|
17 | <button class="btn btn-default" id="Limpiar">Limpiar</button> |
---|
18 | </div> |
---|
19 | <div id="topic"> |
---|
20 | </div> |
---|
21 | </div> |
---|
22 | </div> |
---|
23 | |
---|
24 | |
---|
25 | <script> |
---|
26 | var mi_color={{color|safe}}; |
---|
27 | var texto = "{{texto}}"; |
---|
28 | var topicos = {{topicos|safe}}; |
---|
29 | var documentos = {{documento|safe}}; |
---|
30 | var topic_document = documentos.topics; |
---|
31 | indices = Object.keys(topic_document).sort(function(a,b){return topic_document[b]-topic_document[a];}); |
---|
32 | var seleccionados = new Array(); |
---|
33 | var mi_seleccion = new Array(); |
---|
34 | var color = new Array(); |
---|
35 | var palabras_json = new Array(); |
---|
36 | llenar_array(topicos,color,palabras_json) |
---|
37 | var palabras = new Array(); |
---|
38 | palabras=texto.split(' '); |
---|
39 | var allTopics = new Array(); |
---|
40 | $(document).ready(function(){ |
---|
41 | d3.select('#texto') |
---|
42 | .append('p').text(texto); |
---|
43 | arreglo_global(allTopics,color,palabras_json); |
---|
44 | }); |
---|
45 | var topic = {}; |
---|
46 | |
---|
47 | for(element in topicos) |
---|
48 | { |
---|
49 | topic[element] = topicos[element]; |
---|
50 | } |
---|
51 | var cantidad = parseInt(color.length/2)+1; |
---|
52 | var total = parseInt(color.length); |
---|
53 | |
---|
54 | var tam = 18; |
---|
55 | var minimo = 10; |
---|
56 | var width = 200; |
---|
57 | var height = cantidad*20; |
---|
58 | |
---|
59 | var canvas = |
---|
60 | d3.select('#topic') |
---|
61 | .append('svg') |
---|
62 | .attr('width',width) |
---|
63 | .attr('height',height); |
---|
64 | |
---|
65 | |
---|
66 | cont = 0; |
---|
67 | if (total<11) { |
---|
68 | createBlocks(canvas,total,tam,color,cantidad,50,minimo,topicos); |
---|
69 | createBlocks(canvas,total,tam,color,cantidad,90,minimo,topicos); |
---|
70 | } |
---|
71 | else if (total>10 && total<51) { |
---|
72 | createBlocks(canvas,total,tam,color,cantidad,50,minimo*2,topicos); |
---|
73 | createBlocks(canvas,total,tam,color,cantidad,90,minimo*2,topicos); |
---|
74 | } |
---|
75 | else{ |
---|
76 | cantidad = parseInt(color.length/3)+1; |
---|
77 | if (total>60) { |
---|
78 | cantidad = parseInt(color.length/3)+2; |
---|
79 | } |
---|
80 | createBlocks(canvas,total,tam,color,cantidad,50,minimo*2,topicos); |
---|
81 | createBlocks(canvas,total,tam,color,cantidad,90,minimo*2,topicos); |
---|
82 | if (total>60 && total<=70) { |
---|
83 | cantidad-=2; |
---|
84 | } |
---|
85 | else if (total>70 && total<=80) { |
---|
86 | cantidad-=1; |
---|
87 | } |
---|
88 | else if (total>80) { |
---|
89 | cantidad -=3; |
---|
90 | } |
---|
91 | createBlocks(canvas,total,tam,color,cantidad,130,minimo*2,topicos); |
---|
92 | } |
---|
93 | |
---|
94 | |
---|
95 | for (element in mi_color) { |
---|
96 | $("#topicos option[value="+element+"]").css('background-color',mi_color[element]); |
---|
97 | } |
---|
98 | var select_topicos = parseInt($('#topicos option:selected').val()); |
---|
99 | |
---|
100 | $('.group').mouseover(function(){ |
---|
101 | $(this).find('text').css('font-weight','bold'); |
---|
102 | $(this).find('rect').css({'stroke':'black','stroke-width':'2px'}); |
---|
103 | $(this).tooltip(); |
---|
104 | }); |
---|
105 | $('.group').mouseout(function(){ |
---|
106 | $(this).find('text').css('font-weight','normal'); |
---|
107 | $(this).find('rect').css('stroke','none'); |
---|
108 | }); |
---|
109 | $('.group').click(function(){ |
---|
110 | var attribute = $(this).attr('id') |
---|
111 | if (seleccionados.indexOf(attribute)!=-1) { |
---|
112 | $(this).find('text').css('stroke','none'); |
---|
113 | seleccionados.splice(seleccionados.indexOf(attribute), 1); |
---|
114 | } |
---|
115 | else{ |
---|
116 | seleccionados.push(attribute); |
---|
117 | $(this).find('text').css('stroke','black'); |
---|
118 | } |
---|
119 | d3.select('#texto') |
---|
120 | .selectAll('p').remove(); |
---|
121 | d3.select('#texto') |
---|
122 | .selectAll('span').remove(); |
---|
123 | crear_seleccion(mi_seleccion,seleccionados,color,topicos); |
---|
124 | create_all_text(palabras,mi_seleccion); |
---|
125 | mi_seleccion = []; |
---|
126 | }); |
---|
127 | $('#verTodos').click(function(){ |
---|
128 | d3.select('#texto') |
---|
129 | .selectAll('p').remove(); |
---|
130 | d3.select('#texto') |
---|
131 | .selectAll('span').remove(); |
---|
132 | create_all_text(palabras,allTopics); |
---|
133 | }); |
---|
134 | |
---|
135 | $('#Limpiar').click(function(){ |
---|
136 | d3.select('#texto') |
---|
137 | .selectAll('p').remove(); |
---|
138 | d3.select('#texto') |
---|
139 | .selectAll('span').remove(); |
---|
140 | d3.select('#texto') |
---|
141 | .append('p').text(texto); |
---|
142 | $('.group').each(function(){ |
---|
143 | $(this).find('text').css('stroke','none'); |
---|
144 | }); |
---|
145 | seleccionados = []; |
---|
146 | }); |
---|
147 | |
---|
148 | $('.myRect').tooltip({ |
---|
149 | 'container': 'body', |
---|
150 | 'placement': 'right' |
---|
151 | }); |
---|
152 | |
---|
153 | $('#seleccionado').click(function(){ |
---|
154 | $(this).find('text').css('font-weight','bold'); |
---|
155 | $(this).find('rect').css({'stroke':'black','stroke-width':'2px'}); |
---|
156 | }); |
---|
157 | |
---|
158 | //Funcion para obtener las palabras y probabilidades de un item clickeado |
---|
159 | function getWordProb(palabras_json,palabra,probabilidad) { |
---|
160 | |
---|
161 | for(element in palabras_json) |
---|
162 | { |
---|
163 | palabra.push(element) |
---|
164 | var prob = parseFloat(palabras_json[element]); |
---|
165 | probabilidad.push(prob*400); |
---|
166 | } |
---|
167 | } |
---|
168 | |
---|
169 | |
---|
170 | function llenar_array(topicos,color,palabras_json) { |
---|
171 | for (element in topicos) |
---|
172 | { |
---|
173 | item = new Array(); |
---|
174 | item.push(topicos[element]['words']) |
---|
175 | color.push(topicos[element]['color']); |
---|
176 | palabras_json[element]=item[0]; |
---|
177 | } |
---|
178 | } |
---|
179 | |
---|
180 | function crear_texto(palabras,palabra,probabilidad,color) { |
---|
181 | for(element in palabras) |
---|
182 | { |
---|
183 | var bool= false; |
---|
184 | var mycolor; |
---|
185 | for (x in palabra) |
---|
186 | { |
---|
187 | if (palabras[element]==palabra[x]) { |
---|
188 | bool=true; |
---|
189 | mycolor=x; |
---|
190 | } |
---|
191 | } |
---|
192 | if (bool) |
---|
193 | { |
---|
194 | var font = 12*probabilidad[mycolor]; |
---|
195 | font+="pt"; |
---|
196 | d3.select("#texto") |
---|
197 | .append("span").text(palabras[element]+" ") |
---|
198 | .style('color',color).style('font-size', font); |
---|
199 | } |
---|
200 | else |
---|
201 | { |
---|
202 | d3.select("#texto") |
---|
203 | .append("span").text(palabras[element]+" ") |
---|
204 | } |
---|
205 | } |
---|
206 | } |
---|
207 | |
---|
208 | //Funcion para crear los bloques del D3 |
---|
209 | function createBlocks(canvas,datas,tam,fill,cantidad,movX,minimo,topicos) |
---|
210 | { |
---|
211 | for (var j = 1;j<cantidad;j++) |
---|
212 | { |
---|
213 | var group = canvas.append('g') |
---|
214 | .attr('class','group') |
---|
215 | .attr('id',indices[cont]) |
---|
216 | |
---|
217 | myStr = ArrayToString(topicos,indices[cont]); |
---|
218 | |
---|
219 | var rect = canvas.selectAll('rect') |
---|
220 | .data(datas) |
---|
221 | .enter() |
---|
222 | group.append('rect') |
---|
223 | .attr('width',tam) |
---|
224 | .attr('height',tam) |
---|
225 | .attr('title',myStr) |
---|
226 | .attr('y',j*(tam+2)) |
---|
227 | .attr('x',function(d,i){return (i+1)*movX;}) |
---|
228 | .attr('fill',color[indices[cont]]) |
---|
229 | .attr('class','myRect') |
---|
230 | group.append('text') |
---|
231 | .text(indices[cont]) |
---|
232 | .attr('y',j*(tam+2)) |
---|
233 | .attr('x',movX-minimo) |
---|
234 | .attr('dy','13'); |
---|
235 | cont ++; |
---|
236 | } |
---|
237 | } |
---|
238 | |
---|
239 | //Funcion para crear la data de los tooltip |
---|
240 | function ArrayToString(data,indice) { |
---|
241 | var myString=''; |
---|
242 | var ordenados = Object.keys(data[indice].words).sort(function(a,b){return data[indice].words[b]-data[indice].words[a]}); |
---|
243 | var i=0; |
---|
244 | for (x in ordenados) { |
---|
245 | if (i>2) { |
---|
246 | myString+="\n" |
---|
247 | } |
---|
248 | myString+=ordenados[x]; |
---|
249 | myString+=","; |
---|
250 | i++; |
---|
251 | } |
---|
252 | myString = myString.substr(0,(myString.length-1)); |
---|
253 | return myString; |
---|
254 | } |
---|
255 | |
---|
256 | //Se crea el arreglo con todas las palabras y su mayor probabilidad |
---|
257 | function arreglo_global(allTopics,color,palabras_json){ |
---|
258 | for(element in palabras_json) |
---|
259 | { |
---|
260 | for(palabra in palabras_json[element]) |
---|
261 | { |
---|
262 | var bool=comprobar(allTopics,palabra); |
---|
263 | var prob=palabras_json[element][palabra]; |
---|
264 | if (bool[0]) { |
---|
265 | var pos=bool[1]; |
---|
266 | if (allTopics[pos][1]<prob) |
---|
267 | { |
---|
268 | allTopics[pos][1]=prob; |
---|
269 | allTopics[pos][2]=color[element]; |
---|
270 | } |
---|
271 | } |
---|
272 | else |
---|
273 | { |
---|
274 | var valor = new Array(); |
---|
275 | valor.push(palabra,prob,color[element]); |
---|
276 | allTopics.push(valor); |
---|
277 | } |
---|
278 | } |
---|
279 | } |
---|
280 | } |
---|
281 | //Funcion para comprobar si una palabra esta en el arreglo |
---|
282 | function comprobar(allTopics,word) |
---|
283 | { |
---|
284 | var bool = false; |
---|
285 | if(allTopics.length==0) |
---|
286 | { |
---|
287 | return [false,-1]; |
---|
288 | } |
---|
289 | else |
---|
290 | { |
---|
291 | for (x in allTopics) { |
---|
292 | if (allTopics[x][0]==word) { |
---|
293 | bool = true; |
---|
294 | return [bool,x]; |
---|
295 | } |
---|
296 | } |
---|
297 | } |
---|
298 | return [bool,-1]; |
---|
299 | } |
---|
300 | //Se crea todo el texto |
---|
301 | function create_all_text(palabras,allTopics) { |
---|
302 | for(element in palabras) |
---|
303 | { |
---|
304 | var bool= false; |
---|
305 | var pos; |
---|
306 | for (x in allTopics) |
---|
307 | { |
---|
308 | if (palabras[element]==allTopics[x][0]) { |
---|
309 | bool=true; |
---|
310 | pos=x; |
---|
311 | } |
---|
312 | } |
---|
313 | if (bool) |
---|
314 | { |
---|
315 | var font = 12*(allTopics[pos][1]*400); |
---|
316 | font+="pt"; |
---|
317 | d3.select("#texto") |
---|
318 | .append("span").text(palabras[element]+" ") |
---|
319 | .style('color',allTopics[pos][2]).style('font-size', font); |
---|
320 | } |
---|
321 | else |
---|
322 | { |
---|
323 | d3.select("#texto") |
---|
324 | .append("span").text(palabras[element]+" ") |
---|
325 | } |
---|
326 | } |
---|
327 | } |
---|
328 | |
---|
329 | |
---|
330 | function crear_seleccion(mi_seleccion,seleccionados,color,topicos){ |
---|
331 | for(element in seleccionados) |
---|
332 | { |
---|
333 | for(palabra in topicos[seleccionados[element]]['words']) |
---|
334 | { |
---|
335 | var bool=comprobar(mi_seleccion,palabra); |
---|
336 | var prob=topicos[seleccionados[element]]['words'][palabra]; |
---|
337 | if (bool[0]) { |
---|
338 | var pos=bool[1]; |
---|
339 | if (mi_seleccion[pos][1]<prob) |
---|
340 | { |
---|
341 | mi_seleccion[pos][1]=prob; |
---|
342 | mi_seleccion[pos][2]=color[seleccionados[element]]; |
---|
343 | } |
---|
344 | } |
---|
345 | else |
---|
346 | { |
---|
347 | var valor = new Array(); |
---|
348 | valor.push(palabra,prob,color[seleccionados[element]]); |
---|
349 | mi_seleccion.push(valor); |
---|
350 | } |
---|
351 | } |
---|
352 | } |
---|
353 | } |
---|
354 | |
---|
355 | </script> |
---|
356 | {% endblock %} |
---|