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