Commit 448213b28cb69b58135042c8d20e0c19da2850e0
- Diff rendering mode:
- inline
- side by side
swtr/static/js/main.js
(23 / 23)
| 703 | 703 | var TagCloudView = Backbone.View.extend({ | |
| 704 | 704 | el: $('#tag-cloud'), | |
| 705 | 705 | events: { | |
| 706 | "click #user-tag-cloud g text": "userTagClicked", | ||
| 707 | "click #tags-tag-cloud g text": "tagsTagClicked" | ||
| 706 | "click #user-tag-cloud li p": "userTagClicked", | ||
| 707 | "click #tags-tag-cloud li p": "tagsTagClicked" | ||
| 708 | 708 | }, | |
| 709 | 709 | initialize: function() { | |
| 710 | 710 | this.user_tag_el = $('#user-tag-cloud'); | |
| 711 | 711 | this.tags_tag_el = $('#tags-tag-cloud'); | |
| 712 | this.template = _.template($("#linked-data-list-template").html()); | ||
| 712 | 713 | this.render(); | |
| 713 | 714 | }, | |
| 714 | 715 | userTagClicked: function(e) { | |
| 715 | 716 | var user = $(e.currentTarget).text(); | |
| 717 | console.log(user); | ||
| 716 | 718 | var swts = swtr.LDs.filter(function(swt) { | |
| 717 | 719 | if(swt.get('who') == user) { | |
| 718 | 720 | return swt; | |
| … | … | ||
| 751 | 751 | this.renderTagsTagCloud(); | |
| 752 | 752 | }, | |
| 753 | 753 | renderUserTagCloud: function() { | |
| 754 | var words = _.uniq(swtr.LDs.pluck('who')); | ||
| 755 | var weight = swtr.LDs.countBy('who'); | ||
| 756 | d3.layout.cloud().size([1000, 1000]) | ||
| 757 | .words(words.map(function(d) { | ||
| 758 | return {text: d, size: 5}; | ||
| 759 | })) | ||
| 760 | .padding(5) | ||
| 761 | .font("Impact") | ||
| 762 | .fontSize(function(d) { return d.size; }) | ||
| 763 | .on("end", this.draw) | ||
| 764 | .start(); | ||
| 754 | // var words = _.uniq(swtr.LDs.pluck('who')); | ||
| 755 | var weights = swtr.LDs.countBy('who'); | ||
| 756 | _.each(weights, function(weight, who) { | ||
| 757 | $(this.user_tag_el).append(this.template({weight: weight, who: who})); | ||
| 758 | }, this); | ||
| 759 | // d3.layout.cloud().size([1000, 1000]) | ||
| 760 | // .words(words.map(function(d) { | ||
| 761 | // return {text: d, size: 5}; | ||
| 762 | // })) | ||
| 763 | // .padding(5) | ||
| 764 | // .font("Impact") | ||
| 765 | // .fontSize(function(d) { return d.size; }) | ||
| 766 | // .on("end", this.draw) | ||
| 767 | // .start(); | ||
| 765 | 768 | }, | |
| 766 | 769 | draw: function (words) { | |
| 767 | 770 | var fill = d3.scale.category20(); | |
| … | … | ||
| 792 | 792 | _.each(sweetsWithTags, function(sweet) { | |
| 793 | 793 | tags.push(sweet.get('how').tags); | |
| 794 | 794 | }); | |
| 795 | tags = _.uniq(_.flatten(tags)); | ||
| 796 | d3.layout.cloud().size([500, 500]) | ||
| 797 | .words(tags.map(function(d) { | ||
| 798 | return {text: d, size: 10}; | ||
| 799 | })) | ||
| 800 | .padding(7) | ||
| 801 | .font("Impact") | ||
| 802 | .fontSize(function(d) { return d.size; }) | ||
| 803 | .on("end", this.drawTags) | ||
| 804 | .start(); | ||
| 795 | tags = _.countBy(_.flatten(tags)); | ||
| 796 | _.each(tags, function(weight, who) { | ||
| 797 | $(this.tags_tag_el).append(this.template({weight: weight, who: who})); | ||
| 798 | }, this); | ||
| 799 | |||
| 805 | 800 | }, | |
| 806 | 801 | drawTags: function(words) { | |
| 807 | 802 | var fill = d3.scale.category20(); |
swtr/templates/index.html
(14 / 2)
| 163 | 163 | ||
| 164 | 164 | <div id="linked-data-page" class="page"> | |
| 165 | 165 | <div id="tag-cloud"> | |
| 166 | <div id="tags-tag-cloud"></div> | ||
| 167 | <div id="user-tag-cloud"></div> | ||
| 166 | <div class="col-md-5"> | ||
| 167 | <label>Tags:</label> | ||
| 168 | <ul class="list-group" id="tags-tag-cloud"></ul> | ||
| 169 | </div> | ||
| 170 | <div class="col-md-5"> | ||
| 171 | <label>Users:</label> | ||
| 172 | <ul class="list-group" id="user-tag-cloud"></ul> | ||
| 173 | </div> | ||
| 168 | 174 | </div> | |
| 169 | 175 | <div id="gallery"> | |
| 170 | 176 | </div> | |
| … | … | ||
| 374 | 374 | <div class="text">Author: <%= who %> </div> | |
| 375 | 375 | <div class="text">Tags: <%= how.tags %> </div> | |
| 376 | 376 | </div> | |
| 377 | </script> | ||
| 378 | <script type="text/template" id="linked-data-list-template"> | ||
| 379 | <li class="list-group-item"> | ||
| 380 | <span class="badge"> <%= weight %> </span> | ||
| 381 | <p><%= who %></p> | ||
| 382 | </li> | ||
| 377 | 383 | </script> | |
| 378 | 384 | </body> | |
| 379 | 385 | </html> |
