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