source: modelado_topicos/templates/topic_explorer/index.html @ 21ab8e1

preprocesamientov1.0
Last change on this file since 21ab8e1 was 21ab8e1, checked in by rboet <rudmanmrrod@…>, 8 años ago

Agregado: ir al tópico al hacer clic en la barra, topicos en orden y multi-seleccion de topicos
  • Propiedad mode establecida a 100755
File size: 24.7 KB
Línea 
1{%extends 'base.html'%}
2{% load staticfiles %}
3<title>InPhO Topic Explorer</title>
4{%block headScriptCss%}
5<script src="{% static "topic_explorer/js/lib/jquery.superdom.min.js" %}"></script>
6<script src="{% static "topic_explorer/js/lib/jquery.cookie.min.js" %}"></script>
7<script src="{% static "topic_explorer/js/lib/mustache.js" %}"></script>
8<script src="{% static "topic_explorer/js/util.js" %}"></script>
9<script src="{% static "topic_explorer/js/fulltext.js" %}"></script>
10<script src="{% static "topic_explorer/js/htrc.js" %}"></script>
11<script src="{% static "topic_explorer/js/icons.js" %}"></script>
12<link rel="stylesheet" type="text/css" href="{% static "topic_explorer/css/topic_explorer.css" %}"/>
13{%endblock%}
14
15{%block body%}
16<div class="container">
17  <div class="row">
18  <div class="span12">
19 
20  <form action="/" method="GET" class="form-inline">
21  <button class="btn" type="button" id="helpBtn"><span class="icon-question-sign"></span></button>
22  <div class="input-append">
23    <input type="hidden" name="doc" id="hidden_id">
24    <input type="text" id="doc" class="typeahead input-xlarge" placeholder="Documento" autocomplete="off">
25    <button class="btn" type="button" id="randomDoc"><span class="icon-random"></span></button>
26  </div>
27  <div class="btn-group">
28    <button type="button" id="submit" class="btn" >Visualizar</button>
29    <a class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
30    <ul class="dropdown-menu">
31    {% for k in topics_range %}
32    <li><a href="javascript:visualize({{k}})">{{k}} Topics</a></li>
33    {% endfor %}
34    </ul>
35  </div>
36 
37  </form>
38   
39
40
41  <script>
42
43  $(document).ready(function () {
44   
45    var visited = $.cookie('visited')
46    if (visited != null) {
47      $('.help').hide();
48      $('#helpBtn').tooltip({title: "Show help", placement: 'bottom'});
49    }
50    else {
51      $('#helpBtn').tooltip({title: "Hide help", placement: 'bottom'});
52      $('#helpBtn').addClass('active');
53    }
54    $.cookie('visited', 'yes_visited', {
55        expires: 1,
56        path: '/'
57    });
58  });
59  var scrollLegend;
60  $('#helpBtn').click(function() {
61      $('.help').toggle();
62      if (!$('#helpBtn').hasClass('active')) {
63        $('#helpBtn').data('tooltip').options.title = "Hide help";
64        $('#helpBtn').addClass('active');
65      } else {
66        $('#helpBtn').data('tooltip').options.title = "Show help";
67        $('#helpBtn').removeClass('active');
68      }
69      scrollLegend();
70    });
71  </script>
72  </div>
73  </div>
74  <div class="non-null" id="status" style="width:100%">
75    <div class="progress loading progress-striped active">
76      <div class="bar" style="width:25%">Loading documents...</div>
77    </div>
78  </div>
79
80</div>
81
82<script>
83{% if filename %}
84  var docid = "{{filename}}" ;
85{% else %}
86  var docid = null;
87{% endif %}
88
89if (docid) {
90  docid = decodeURIComponent(docid);
91  $('#hidden_id').val(docid);
92  $('.twitter-share-button').attr('data-text', "What's similar to " +docid+"? Discover with the #InPhO Topic Explorer");
93
94}
95//var roottopic = inpho.util.getValueForURLParam('topic') || null;
96{% if topic_no %}
97  var roottopic = '{{topic_no}}' ;
98{% else %}
99  var roottopic = null;
100{% endif %} 
101
102
103if (roottopic) {
104  $('.title').html('Topic ' + roottopic);
105  $('.twitter-share-button').attr('data-text', "Check out topic "+ roottopic+" at the #InPhO Topic Explorer!");
106}
107
108if (docid || roottopic)
109  $('.non-null').show()
110else
111  $('.null').show();
112
113function visualize(k) {
114  var url = "{0}//{1}:8000/topic_explorer/doc/{2}/".format(window.location.protocol, window.location.hostname, k);
115 
116 
117  url += encodeURIComponent($("#hidden_id").val() || docid) ;
118  window.location = url;
119}
120
121$.getJSON('/topic_explorer/docs.json', function(data) {
122  console.log(data);
123  $(".typeahead").typeahead({items: 12,
124    source: function(query, process) {
125      labels = [];
126      mapped = {};
127      $.each(data, function(i, item) {
128        mapped[item.label] = item;
129        labels.push(item.label);
130      });
131       
132      process(labels);
133      this.$menu.find('.active').removeClass('active');
134    },
135    updater: function(item) {
136      if (!item) return this.$element.val();
137      else $('#hidden_id').val(mapped[item].id);
138      return item;
139    },
140    sorter: function(items) {
141      var query = this.query;
142      items = items.sort();
143      var start = items.filter(function(item) { return item.lastIndexOf(query, 0) == 0;});
144      var elsewhere = items.filter(function(item) { return item.lastIndexOf(query, 0) != 0;});
145      return start.concat(elsewhere);
146      }});
147  $('#randomDoc').click(function() { 
148      var rand = data[Math.floor(Math.random() * data.length)];
149      $('#hidden_id').val(rand.id);
150      $('#doc').val(rand.label);
151    });
152  $('#randomDoc').tooltip({title: "Random Document", placement: 'bottom'});
153
154  if (docid) {
155    title = data.filter(function(item) { return item.id == docid });
156    if (title.length) {
157      title = title[0].label;
158      $('.title').html('{{doc_title_format}}'.format(title,'{{doc_url_format}}'.format(docid)));
159      $('#doc').val(title);
160      $('.twitter-share-button').attr('data-text', "What's similar to " + title +"? Discover with the #InPhO Topic Explorer!");
161    } else {
162      $('.title').html('{{doc_title_format}}'.format(docid,'{{doc_url_format}}'.format(docid)));
163      $('#doc').val(docid);
164    }
165  }
166});
167</script>
168
169
170<div id="chart"> </div>
171<div id="controls" style="display:none;">
172  <strong>Opciones</strong>
173  <label class="checkbox"><input class="sort" type="checkbox"> Orden alfabético</label>
174  <label class="checkbox"><input class="scale" type="checkbox"> Normalizar barras de tópicos</label>
175  <button class="btn reset" type="button" onclick="resetTopicSort()" disabled>Restaurar orden de tópicos</button><br>
176  <button class="btn topdoc" type='button' style="display:none">Ordenar documentos para tópico [Topic]</button>
177</div>
178
179<!--<script src="topics.js"></script>-->
180<script>
181
182var icons = ["link"]; 
183var maxRows = 25;
184var minCols = 2;
185
186var margin = {top: 80, right: 40, bottom: 20, left: 15 + (icons.length * 20)},
187    width = 960 - margin.left - margin.right,
188    height = 600 - margin.top - margin.bottom;
189
190var x = d3.scale.linear()
191    .range([0, width]);
192
193var y = d3.scale.ordinal()
194    .rangeRoundBands([0, height], .1, 0);
195
196var xAxis = d3.svg.axis()
197    .scale(x)
198    .orient("top")
199    .ticks(10, "%");
200
201var yAxis = d3.svg.axis()
202    .scale(y)
203    .orient("left");
204
205function computeWidth(numCols) { 
206  $('#legend').attr("width", margin.right + (numCols*55) + 20 + margin.right);
207  $('#main').attr("width", Math.max($(window).width() - $('#legend').width() - 200 + margin.right, 750));
208  $('#controls').css("left", Math.max($(window).width() - $('#legend').width() - 200 + margin.right, 750) + 40);
209  width = Math.max($(window).width() - $('#legend').width() - 200 + margin.right, 750) - margin.left - margin.right;
210  x = d3.scale.linear()
211    .range([0, width]);
212  x.domain([0,1]);
213  xAxis = d3.svg.axis()
214    .scale(x)
215    .orient("top")
216    .ticks(10, "%");
217}
218
219function computeHeight(data, numLegendRows) { 
220  height = (data.length * 20);// - margin.top - margin.bottom;
221  y = d3.scale.ordinal()
222   .rangeRoundBands([0, height], .1, 0);
223  y.domain(data.map(function(d) { return d.doc; }));
224  yAxis = d3.svg.axis()
225    .scale(y)
226    .orient("left");
227}
228
229var dataset;
230var original_root;
231
232var svg = d3.select("#chart").append("svg")
233    .attr("width", width + margin.left + margin.right)
234    .attr("height", height + margin.top + margin.bottom)
235    .attr("id","main")
236    .attr("class", "main")
237  .append("g")
238    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
239    .on("mouseleave", function() {
240        $(".legend rect").removeClass('hover').tooltip('hide');
241      });
242
243var legend = d3.select("#chart").append("svg")
244    .attr("width", "350")
245    .attr("id", "legend")
246    .attr("class", "main")
247  .append("g")
248    .attr("transform","translate("+margin.right+","+ margin.top + ")");
249
250function calculateTopicMap(data, scale, sortFn){
251  data.forEach(function(d) {
252    var sizeFactor = (scale) ? d.prob : 1.0
253    var x0 = 0;
254    if (sortFn) d.topicMap = d3.keys(original_root.topics)
255      .sort(sortFn)
256      .map(function(name) { return {name: name, x0: x0, x1: x0 += +(d.topics[name]*sizeFactor) }; });
257    else // maintain sort order
258      d.topicMap = d.topicMap.map(function (topic) { return topic.name; })
259        .map(function(name) { return {name: name, x0: x0, x1: x0 += +(d.topics[name]*sizeFactor) }; });
260  });
261 
262}
263
264var url;
265//if (roottopic) url = "/topic_explorer/topics/" + roottopic + '.json';
266if (roottopic) {
267  url = "/topic_explorer/topics/{{k_param}}/" + roottopic ;
268} else {
269  url = "/topic_explorer/docs_topics/" + docid 
270}
271//else url = "/topic_explorer/docs_topics/" + docid + '.json'
272var n = inpho.util.getValueForURLParam('n');
273if (n) url += "?n=" + n;
274
275
276var tops;
277d3.json(url, function(error, data) {
278  console.log(url);
279  console.log("DATA",data);
280  $('#status .bar').css('width', '50%').text('Loading topics...');
281  if (error) {
282    $('#status .progress').removeClass('active progress-striped');
283    var errormsg;
284   
285    if (roottopic) errormsg = "Invalid topic: " + roottopic + ".";
286    else errormsg = "Invalid document: " + docid + ".";
287
288    $('#status .bar').addClass('bar-danger').text(errormsg);
289    return false;
290  }
291  d3.json("/topic_explorer/topics.json", function(error_top, topics) {
292    $('#status .bar').css('width', '75%').text('Rendering chart...');
293    if (error_top) {
294      $('#status .progress').removeClass('active progress-striped');
295      $('#status .bar-danger').addClass('bar-error').text('Could not load topic list.');
296      return false;
297    }
298    $('#submit').text(d3.keys(topics).length + ' Tópicos');
299   
300 
301    var legendCols = Math.max(Math.ceil(d3.keys(topics).length / Math.min(data.length, maxRows)), minCols);
302    var legendFactor = Math.ceil(d3.keys(topics).length / legendCols);
303    computeHeight(data,legendFactor);
304    $("#main").attr("height", height + margin.top + margin.bottom);
305    $("#legend").attr("height", (legendFactor * 20) + margin.top + margin.bottom);
306    computeWidth(legendCols);
307 
308 
309    x.domain([0, 1.0]);
310    tops = topics;
311      //.sort();
312    dataset = data;
313    original_root = data[0];
314    if (roottopic) docid = data[0]['doc'];
315 
316    calculateTopicMap(data, true, function(a,b) {return data[0].topics[b] - data[0].topics[a];});
317 
318 
319 
320    svg.append("g")
321        .attr("class", "x axis")
322        .attr("transform", "translate(10,-10)")
323        .call(xAxis)
324      .append("text")
325        //.attr("transform", "rotate(-120)")
326        .attr("class", "axis_label")
327        .attr("dy", "-2em")
328        .style("text-anchor", "start")
329        .text("Similarity to " + (roottopic ? ("Topic " + roottopic) : '"'+original_root['label']+'"'));
330 
331    svg.append("g")
332        .attr("class", "y axis")
333        .call(yAxis)
334        .selectAll("text")
335        .attr("class", function(d) { return (d == docid && roottopic != null) ? "primary" : "" })
336        .on("click", function(d) { window.location.href = "topic_explorer/doc/" + d;})
337 
338    svg.select(".y.axis").selectAll("g")
339        .insert("rect", ":first-child")
340          .attr("x", -margin.left + 5)
341          .attr("y", -9)
342          .attr("width", margin.left-5)
343          .attr("height", 18)
344          .style("opacity", "0");
345 
346    var ticks = svg.select(".y.axis").selectAll("g")
347        .on("mouseenter", function(d) { 
348          $('text', this).attr('text-decoration', 'underline')
349            .attr('font-weight', 'bold');     
350          svg.selectAll(".doc")
351            .filter(function(doc,i) { return doc.doc == d})
352            .attr("class", function(d) { return (d.doc == docid ? "doc primary" : "doc") + " hover"}); 
353          })
354        .on("mouseleave", function(d) { 
355          $('text',this).removeAttr('text-decoration')
356            .removeAttr('font-weight'); 
357          svg.selectAll(".doc")
358            .filter(function(doc,i) { return doc.doc == d})
359            .attr("class", function(d) { return d.doc == docid ? "doc primary" : "doc"}); 
360          });
361
362    for (var i = 0; i < icons.length; i++) {
363      icon_fns[icons[i]](ticks,i);
364    }
365 
366    // draw total bar
367    var doc = svg.selectAll("doc")
368        .data(data)
369      .enter().append("g")
370        .attr("class", function(d) { return d.doc == docid ? "doc primary" : "doc"})
371        .attr("transform", function(d) { return "translate(10," + y(d.doc) + ")"; })
372        .on("mouseover", function(d) {
373            var tick = $("text:contains(" + d.doc +")")
374              .filter(function() {return $(this).text().trim() == d.doc })
375              .attr("font-weight", "bold");
376            icons.reduce(function(prev,cur) {
377              return prev.next(".{0}Icon".format(cur)).css('opacity', '1.0');
378            }, tick);
379          })
380        .on("mouseout", function(d) {
381            var tick = $("text:contains(" + d.doc +")")
382              .filter(function() {return $(this).text().trim() == d.doc })
383              .attr("font-weight", "normal");
384            icons.reduce(function(prev, cur) {
385              return prev.next(".{0}Icon".format(cur)).css('opacity', '');
386            }, tick);
387          });
388 
389    // Draw topic bars
390    doc.selectAll("rect")
391        .data(function(d) { return d.topicMap; })
392      .enter().append("rect")
393        .attr("height", y.rangeBand())
394        .attr("x", function(d) { return x(d.x0); })
395        .attr("width", function(d) { return x(d.x1) - x(d.x0); })
396        .attr("class", function(d) { return "top_" + d.name; })
397        .on("mouseover", function(d) {
398            // SVG element z-index determined by render order, not style sheet
399            // so element must be reappended to the end on hover so border
400            // is not occluded
401            var parent = $(this).parent();
402            $(this).detach().appendTo(parent);
403            $(".docLabel", parent).detach().appendTo(parent);
404            $(".docLabel", parent).addClass("hover");
405            $('.legend rect').not('.top_' + d.name).tooltip('hide');
406            $(".top_" + d.name).addClass('hover');
407            $('.legend rect.top_' + d.name).tooltip('show');
408          })
409        .on("mouseout", function(d) {
410            var parent = $(this).parent();
411            $(".docLabel", parent).removeClass("hover");
412            $(".top_" + d.name).removeClass('hover');
413          })
414        .on("click", function(d) { topicSort(d.name); })
415        .style("fill", function(d) { return topics[d.name]['color']; });
416   
417    doc.append("text")
418          .text(function(d) { return d.label; })
419          .attr("class","docLabel")
420          .attr("dx", "3")
421          .attr("dy", "13");
422    var legendElts = legend.selectAll(".legend")
423        .data(data[0].topicMap.map(function(t) { return t.name;}))
424      .enter().append("g")
425        .attr("class", function(d) { return "legend top_" + d; })
426        .attr("transform", function(d, i) { return "translate("+(55 * Math.floor(i / legendFactor))+"," + y(i % legendFactor) + ")"; });
427 
428    legendElts.append("rect")
429        .attr("width", 18)
430        .attr("height", 18)
431        .attr("class", function(d) { return "top_" + d; })
432        .style("fill", function(d) { return topics[d]['color']; })
433        //.attr("data-toggle", "tooltip")
434        .attr("data-placement", "right")
435        .attr("title", function(d) { 
436          return "<strong>Topic {0}:</strong> <!--H(T<sub>{0}</sub>)={1}-->".format(d, topics[d].H.toFixed(2)) + "<br />"
437            + d3.keys(topics[d].words).sort(function(a,b) {
438              if (topics[d].words[a] > topics[d].words[b])
439                return -1;
440              else if (topics[d].words[a] < topics[d].words[b])
441                return 1;
442              else
443                return 0;
444            }).join(", ") + ", ..."; })
445        .on("click", function(d) { topicSort(d); })
446        .on("mouseover", function(d) {
447            $(".top_" + d).addClass('hover').tooltip('show');
448          })
449        .on("mouseout", function(d) {
450            $(".top_" + d).removeClass('hover').tooltip('hide');
451          });
452 
453    $(".legend rect").tooltip({container:'body', trigger: 'manual', animation: false, html: true});
454 
455    legendElts.append("text")
456        .attr("dx", -6)
457        .attr("y", 9)
458        .attr("dy", ".35em")
459        .style("text-anchor", "end")
460        .text(function(d) { return d; });
461 
462 
463    legend.append("text")
464        .attr("dx", -6)
465        .attr("dy", "-.35em")
466        .attr("font-weight", "bold")
467        .style("text-anchor", "end")
468        .text(d3.keys(topics).length);
469    legend.append("text")
470        //.attr("transform", "rotate(-120)")
471        .attr("class", "axis_label")
472        .attr("dy", "-.35em")
473        .attr("font-weight", "bold")
474        .style("text-anchor", "start")
475        .text("Topics");
476    legend.append("text")
477        //.attr("transform", "rotate(-120)")
478        .attr("class", "axis_label")
479        .attr("dy", "-.45em")
480        .attr("dx", "5em")
481        .attr("font-size", "10px")
482        .style("text-anchor", "start")
483        .text("ordered by P( T | " + docid + " )");
484
485    d3.select(window).on('resize', resize);
486 
487    function resize() {
488      computeWidth(legendCols);
489 
490      /* Update the axis with the new scale */
491      svg.select('.x.axis')
492        .call(xAxis);
493 
494      doc.selectAll('rect')
495        .attr("x", function(d) { return x(d.x0); })
496        .attr("width", function(d) { return x(d.x1) - x(d.x0); });
497    }
498   
499    /*    Funcion para cargar los topicos al dar clic   */
500    cargar();
501 
502    d3.select(".sort").on("change", alphabetSort);
503   
504    $('#status .bar').addClass('bar-success').css('width', '100%').text("Complete!");
505    setTimeout(function() { 
506      $('#status').hide(500);
507      setTimeout(function() {$('#controls').css({'top' : $('#legend').height() + $('#legend').position().top}).show();}, 500);
508      } , 500);
509 
510    $(window).on("scroll", scrollLegend);
511    scrollLegend = function() {
512      var scrollPos = $(window).scrollTop();
513      var chartHeight = $('#chart').position().top;
514      var legendHeight = $('#legend').height();
515      var heightFac = -60;
516      if((scrollPos - chartHeight - margin.top - heightFac) <= 0) {
517        $('#legend').css({'position': 'absolute', 'top' : chartHeight});
518        $('#controls').css({'position': 'absolute', 'top' : legendHeight + chartHeight});
519      } else if ((scrollPos - chartHeight - heightFac) < (margin.top)) {
520        $('#legend').css({'position': 'absolute', 'top' : scrollPos + heightFac});
521        $('#controls').css({'position': 'absolute', 'top' : legendHeight+ scrollPos + heightFac});
522      } else {
523        $('#legend').css({'position': 'fixed', 'top' : heightFac});
524        $('#controls').css({'position': 'fixed', 'top' : legendHeight + heightFac});
525      }}
526 
527    for (var i = 0; i < icons.length; i++) {
528      $(".{0}Icon".format(icons[i])).tooltip({placement: 'top', title: icon_tooltips[icons[i]], container: 'body', html: true, animation: false});
529    }
530  }); 
531});
532
533  function scaleTopics() {
534    var numTopics = dataset[0].topics.length;
535    var delay = function(d, i) { return i * (500/numTopics); },
536        negdelay = function(d, i) { return (numTopics-i) * (500/numTopics); };
537
538    calculateTopicMap(dataset, !this.checked);
539
540    $(".doc").each(function(i,elt) {
541        $(elt).children()
542          .sort(function(a,b) { return $(a).attr('x') - $(b).attr('x'); })
543          .each(function(j,child) {
544            $(child).detach().appendTo($(elt));
545        })
546      });
547
548    svg.selectAll(".doc")
549      .selectAll("rect")
550      .data(function(d) { return d.topicMap; })
551      .style("fill", function(d) { return tops[d.name]['color']; })
552      /*.on("mouseover", function(d) {
553          // SVG element z-index determined by render order, not style sheet
554          // so element must be reappended to the end on hover so border
555          // is not occluded
556          var parent = $(this).parent();
557          $(this).detach().appendTo(parent);
558          $(".docLabel", parent).detach().appendTo(parent);
559          $('.legend rect').not('.top_' + d.name).tooltip('hide');
560          $(".top_" + d.name).addClass('hover');
561          $('.legend rect.top_' + d.name).tooltip('show');
562        })
563      .on("mouseout", function(d) {
564          $(".top_" + d.name).removeClass('hover');
565        })*/
566      .transition().duration(500).ease("linear").delay(this.checked ? delay : negdelay)
567      .attr("x", function(d) { return x(d.x0); })
568      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
569      .attr("class", function(d) { return "top_" + d.name; });
570
571    svg.selectAll(".x.axis text.axis_label").text(this.checked ? 
572      "Proportion of document assigned to topic" : 
573      ("Similarity to " + (roottopic ? ("Topic " + roottopic) : '"'+original_root.label+'"')));
574  }
575
576  d3.select(".scale").on("change", scaleTopics);
577  function sortDataset(sortFn) {
578    dataset = dataset.sort(sortFn);
579
580    var y0 = y.domain(dataset
581        .map(function(d) { return d.doc; }))
582        .copy();
583
584    var transition = svg.transition().duration(500),
585        delay = function(d, i) { return i * 25; };
586
587    transition.selectAll(".doc")
588        .delay(delay)
589        .attr("transform", function(d) { return "translate(10," + y(d.doc) + ")"; });
590        //.attr("y", function(d) { return y(d.doc); });
591
592    transition.select(".y.axis")
593        .call(yAxis)
594      .selectAll("g")
595        .selectAll("text")
596        .delay(delay);
597  }
598
599  function alphabetSort() {
600    // Copy-on-write since tweens are evaluated after a delay.
601    if (this.checked)
602      sortDataset(function(a, b) { return d3.ascending(a.doc, b.doc); });
603    else
604      sortDataset(function(a, b) { return b.prob - a.prob; });
605  }
606
607  function resetTopicSort() {
608    $('.reset').attr('disabled',true);
609    $('.topicsort').attr('disabled',true);
610    $('.selected').removeClass('selected');
611    $('.topdoc').hide();
612    $('.topdoc').text('Top Documents for [Topic]');
613    if (!($('.sort')[0].checked))
614      sortDataset(function(a,b) { return b.prob - a.prob; });
615
616    redrawBars(function(a,b) { return original_root.topics[b] - original_root.topics[a]; });
617  }
618
619  function topicSort(topic) {
620    // Copy-on-write since tweens are evaluated after a delay.
621    $('.sort').removeAttr('checked');
622    if (topic) {
623      sortDataset(function(a, b) { return b.topics[topic] - a.topics[topic]; });
624      $('.selected').removeClass('selected');
625      $(".top_" + topic).addClass('selected');
626      $('.reset').removeAttr('disabled');
627      $('.topdoc').text('Top Documents for Topic ' + topic);
628      $('.topdoc').show();
629      //$('.topdoc').click(function URL() {console.log("COMETNTADO"); location.href = location.origin + '?topic=' + topic;});
630      $('.topdoc').click(function URL() {console.log("ACTIVO"); location.href = location.origin + '/topic_explorer/topic/{{k_param}}/' + topic;});
631      $('.topdoc').mouseenter(function() {
632          $('.legend rect').not('.top_' + topic).tooltip('hide');
633          $(".legend rect.top_" + topic).tooltip('show'); });
634      $('.topdoc').mouseleave(function() { $(".top_" + topic).tooltip('hide'); });
635
636    } else {
637      $('.selected').removeClass('selected');
638      sortDataset(function(a, b) { return b.prob - a.prob; });
639    }
640
641
642    var sortFn = function(a,b) {
643      if (a == topic) return -1;
644      else if (b == topic) return 1;
645      else return dataset[0].topics[b] - dataset[0].topics[a];
646      //else return original_root.topics[b] - original_root.topics[a];
647    } 
648    redrawBars(sortFn);
649  }
650
651  function redrawBars(sortFn) { 
652    $("#legend .hover").removeClass("hover");
653    var numTopics = dataset[0].topics.length;
654    var delay = function(d, i) { return i * (1000/numTopics); },
655        negdelay = function(d, i) { return (numTopics-i) * (1000/numTopics); };
656    calculateTopicMap(dataset, !($('.scale')[0].checked), sortFn);
657   
658    svg.selectAll(".doc")
659      .selectAll("rect")
660      .data(function(d) { return d.topicMap; })
661      .style("fill", function(d) { return tops[d.name]['color']; })
662      /*
663      .on("mouseover", function(d) {
664          // SVG element z-index determined by render order, not style sheet
665          // so element must be reappended to the end on hover so border
666          // is not occluded
667          var parent = $(this).parent();
668          $(this).detach().appendTo(parent);
669          $(".docLabel", parent).detach().appendTo(parent);
670          $('.legend rect').not('.top_' + d.name).tooltip('hide');
671          $(".top_" + d.name).addClass('hover');
672          $('.legend rect.top_' + d.name).tooltip('show');
673        })
674      .on("mouseout", function(d) {
675          $(".top_" + d.name).removeClass('hover');
676        })*/
677      .transition().duration(1000).ease("linear").delay(this.checked ? delay : negdelay)
678      .attr("x", function(d) { return x(d.x0); })
679      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
680      .attr("class", function(d) { return "top_" + d.name; });
681
682  }
683 
684    function cargar(){
685      $(document).ready(function(){
686          $(".doc").click(function(){
687          var propuesta = $(this).find("text").text();
688          var url = "{{BASE_URL}}/topic_explorer/see_topic/"+propuesta+"/";
689          window.open(url);
690        });
691      });
692    }
693   
694</script>
695
696
697{%endblock%}
Nota: Vea TracBrowser para ayuda de uso del navegador del repositorio.