source: modelado_topicos/templates/see_topic/index.html @ 75c9087

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Elegir Tópico {% endblock %}
{% block headScriptCss %}
    <style>
        .Aligner {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .titulo
          {
            text-align: center;
            
          }
    </style>
{% endblock %}
{% block body %}
    <div class="titulo">
        <h3>{{propuesta}}</h3><hr>
    </div>
    <div id="contenedor" class="Aligner">
        <div id="texto" style="float:left;width:80%">
            
        </div>
        <div id="contenedor" style="float:left;width:15%">
            <div class="btn-group" align="center" style="width: 80%">
                <button class="btn" id="verTodos">Ver Todos</button>
            </div>
            <div id="topic">
            </div>
        </div>
    </div>
    
    <script> 
        var mi_color={{color|safe}};
        var texto = "{{texto}}";
        var topicos = {{topicos|safe}};
        var color = new Array();
        var palabras_json = new Array();
        var llaves = {{llaves}};
        llenar_array(topicos,color,palabras_json)
        var palabras = new Array();
        palabras=texto.split(' ');
        var allTopics = new Array();
        $(document).ready(function(){
            d3.select('#texto')
                .append('p').text(texto);
            arreglo_global(allTopics,color,palabras_json);
         });  
        
        var cantidad = parseInt(color.length/2)+1;
        var total = parseInt(color.length);
        
        var tam = 18;
        var minimo = 10;
        var width = 200;
        var height = cantidad*20;
                        
        var canvas = 
        d3.select('#topic')
                .append('svg')
                .attr('width',width)
                .attr('height',height);
                

        cont = 0;
        if (total<11) {
            createBlocks(canvas,llaves,tam,color,cantidad,50,minimo,topicos);
            createBlocks(canvas,llaves,tam,color,cantidad,90,minimo,topicos);
        }
        else if (total>10 && total<51) {
            createBlocks(canvas,llaves,tam,color,cantidad,50,minimo*2,topicos);
            createBlocks(canvas,llaves,tam,color,cantidad,90,minimo*2,topicos);
        }
        else{
            cantidad = parseInt(color.length/3)+1;
            if (total>60) {
                cantidad = parseInt(color.length/3)+2;
            }        
            createBlocks(canvas,llaves,tam,color,cantidad,50,minimo*2,topicos);
            createBlocks(canvas,llaves,tam,color,cantidad,90,minimo*2,topicos);
            if (total>60) {
                cantidad-=2;
            }
            createBlocks(canvas,llaves,tam,color,cantidad,130,minimo*2,topicos);
        }
        
        
        for (element in mi_color) {
            $("#topicos option[value="+element+"]").css('background-color',mi_color[element]);
        }
        var select_topicos = parseInt($('#topicos option:selected').val());
        
        $('.group').mouseover(function(){
            $(this).find('text').css('font-weight','bold');
            $(this).find('rect').css({'stroke':'black','stroke-width':'2px'});
            $(this).tooltip();
            });
        $('.group').mouseout(function(){
            $(this).find('text').css('font-weight','normal');
            $(this).find('rect').css('stroke','none');
            });
        $('.group').click(function(){
            var palabra = new Array();
            var probabilidad = new Array();
            var id = $(this).attr('id');
            getWordProb(palabras_json[id],palabra,probabilidad);
            d3.select('#texto')
                .selectAll('p').remove();
            d3.select('#texto')
                .selectAll('span').remove();
            crear_texto(palabras,palabra,probabilidad,color[id]);            
            });
        $('#verTodos').click(function(){
            d3.select('#texto')
                .selectAll('p').remove();
            d3.select('#texto')
                .selectAll('span').remove();
            create_all_text(palabras,allTopics); 
            });
        
        $('.myRect').tooltip({
                'container': 'body',
                'placement': 'right'
        });
        
        //Funcion para obtener las palabras y probabilidades de un item clickeado
        function getWordProb(palabras_json,palabra,probabilidad) {

            for(element in palabras_json)
            {
                palabra.push(element)
                var prob = parseFloat(palabras_json[element]);
                probabilidad.push(prob*400);
            }            
        }
        
        
        function llenar_array(topicos,color,palabras_json) {
            for (element in topicos)
            {
                item = new Array();
                item.push(topicos[element]['words'])
                color.push(topicos[element]['color']);
                palabras_json[element]=item[0];
            }
        }
        
        function crear_texto(palabras,palabra,probabilidad,color) {
            for(element in palabras)
            {
                var bool= false;
                var mycolor;
                for (x in palabra)
                {
                    if (palabras[element]==palabra[x]) {
                        bool=true;
                        mycolor=x;
                    }
                }
                if (bool)
                {
                    var font = 12*probabilidad[mycolor];
                    font+="pt";
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                        .style('color',color).style('font-size', font);
                }
                else
                {
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                }
            }
        }
        
        //Funcion para crear los bloques del D3
        function createBlocks(canvas,datas,tam,fill,cantidad,movX,minimo,topicos)
        {
            for (var j = 1;j<cantidad;j++)
            {
                var group = canvas.append('g')
                    .attr('class','group')
                    .attr('id',cont)
                
                myStr = ArrayToString(topicos,cont);
                                
                var rect = canvas.selectAll('rect')
                    .data(datas)
                    .enter()
                        group.append('rect')
                            .attr('width',tam)
                            .attr('height',tam)
                            .attr('title',myStr)
                            .attr('y',j*(tam+2))
                            .attr('x',function(d,i){return (i+1)*movX;})
                            .attr('fill',color[cont])
                            .attr('class','myRect')
                        group.append('text')
                            .text(cont)
                            .attr('y',j*(tam+2))
                            .attr('x',movX-minimo)
                            .attr('dy','13');
                cont ++;
            }
        }
        
        //Funcion para crear la data de los tooltip
        function ArrayToString(data,indice) {
            var myString='';
            var i=0;
            for (x in data[indice]['words']) {
                    if (i>2) {
                        myString+="\n"
                    }
                    myString+=x;
                    myString+=",";
                    i++;
                }
            myString = myString.substr(0,(myString.length-1));  
            return myString;
        }
        //Se crea el arreglo con todas las palabras y su mayor probabilidad
        function arreglo_global(allTopics,color,palabras_json){
            for(element in palabras_json)
            {
                for(palabra in palabras_json[element])
                {
                    var bool=comprobar(allTopics,palabra);
                    var prob=palabras_json[element][palabra];
                    if (bool[0]) {
                        var pos=bool[1];
                        if (allTopics[pos][1]<prob)
                        {
                            allTopics[pos][1]=prob;
                            allTopics[pos][2]=color[element];
                        }
                    }
                    else
                    {
                        var valor = new Array();
                        valor.push(palabra,prob,color[element]);
                        allTopics.push(valor);
                    }
                }
            }
        }
        //Funcion para comprobar si una palabra esta en el arreglo
        function comprobar(allTopics,word)
        {
            var bool = false;
            if(allTopics.length==0)
            {
                return [false,-1];
            }
            else
            {
                for (x in allTopics) {
                    if (allTopics[x][0]==word) {
                        bool = true;
                        return [bool,x];
                    }
                }
            }
            return [bool,-1];
        }
        //Se crea todo el texto
        function create_all_text(palabras,allTopics) {
            for(element in palabras)
            {
                var bool= false;
                var pos;
                for (x in allTopics)
                {
                    if (palabras[element]==allTopics[x][0]) {
                        bool=true;
                        pos=x;
                    }
                }
                if (bool)
                {
                    var font = 12*(allTopics[pos][1]*400);
                    font+="pt";
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                        .style('color',allTopics[pos][2]).style('font-size', font);
                }
                else
                {
                    d3.select("#texto")
                        .append("span").text(palabras[element]+" ")
                }
            }
        }
        
    </script>
{% endblock %}