[0ff122b] | 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 %} |
---|