Commit c953c9dab72258946721b0716a87ead22fae906d

  • avatar
  • arvind
  • Sat Aug 30 00:17:34 IST 2014
Linked-data page now shows tag cloud of users and tags.
swtr/static/js/main.js
(134 / 0)
  
730730 }
731731 };
732732 //swtr.AppView = AppView;
733 var LDSwts = Backbone.Collection.extend({
734 getAll: function(options) {
735 //get all sweets of ocd-anno type
736 // error checking
737 if(!options.what) {
738 throw Error('"what" option must be passed to get sweets of a URI');
739 return false;
740 }
741 // setting up params
742 var what = options.what;
743 url = swtr.swtstoreURL() + swtr.endpoints.get + '?what=' +
744 encodeURIComponent(what) + '&access_token=' + swtr.access_token;
745 // get them!
746 this.sync('read', this, {
747 url: url,
748 success: function() {
749 if(typeof options.success === 'function') {
750 options.success.apply(this, arguments);
751 }
752 },
753 error: function() {
754 if(typeof options.error === 'function') {
755 options.error.apply(this, arguments);
756 }
757 }
758 });
759 }
760 });
733761
762 var LDView = Backbone.View.extend({
763 initialize: function() {
764 swtr.LDs = new LDSwts();
765 swtr.LDs.getAll({what: 'img-anno',
766 success: function(data) {
767 swtr.LDs.add(data);
768 new TagCloudView({collection: swtr.LDs});
769 }});
770 },
771 render: function() {
772
773 }
774 });
775
776 var TagCloudView = Backbone.View.extend({
777 el: $('#tag-cloud'),
778 initialize: function() {
779 this.user_tag_el = $('#user-tag-cloud');
780 this.tags_tag_el = $('#tags-tag-cloud');
781 this.render();
782
783 },
784 render: function() {
785 this.renderUserTagCloud();
786 this.renderTagsTagCloud();
787 },
788 renderUserTagCloud: function() {
789 var fill = d3.scale.category20();
790 var words = _.uniq(swtr.LDs.pluck('who'));
791 var weight = swtr.LDs.countBy('who');
792 d3.layout.cloud().size([300, 300])
793 .words(words.map(function(d) {
794 return {text: d, size: weight[d]};
795 }))
796 .padding(5)
797 .rotate(function() { return ~~(Math.random() * 2) * 90; })
798 .font("Impact")
799 .fontSize(function(d) { return d.size; })
800 .on("end", this.draw)
801 .start();
802
803 },
804 draw: function (words) {
805 d3.select("#user-tag-cloud").append("svg")
806 .attr("width", 300)
807 .attr("height", 300)
808 .append("g")
809 .attr("transform", "translate(150,150)")
810 .selectAll("text")
811 .data(words)
812 .enter().append("text")
813 .style("font-size", function(d) { return "16px"; })
814 .style("font-family", "Impact")
815 .style("fill", function(d, i) {console.log(i); return 'red'; })
816 .attr("text-anchor", "middle")
817 .attr("transform", function(d) {
818 return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
819 })
820 .text(function(d) {console.log(d); return d.text; });
821 },
822 renderTagsTagCloud: function() {
823 var fill = d3.scale.category20();
824 var sweetsWithTags = swtr.LDs.filter(function(k) {
825 if(k.get('how').tags) {
826 return k;
827 }
828 });
829 var tags = [];
830 _.each(sweetsWithTags, function(sweet) {
831 tags.push(sweet.get('how').tags);
832 });
833 tags = _.flatten(tags);
834 d3.layout.cloud().size([300, 300])
835 .words(tags.map(function(d) {
836 return {text: d, size: 10};
837 }))
838 .padding(5)
839 .rotate(function() { return ~~(Math.random() * 2) * 90; })
840 .font("Impact")
841 .fontSize(function(d) { return d.size; })
842 .on("end", this.drawTags)
843 .start();
844
845 },
846 drawTags: function(words) {
847 d3.select("#tags-tag-cloud").append("svg")
848 .attr("width", 300)
849 .attr("height", 300)
850 .append("g")
851 .attr("transform", "translate(150,150)")
852 .selectAll("text")
853 .data(words)
854 .enter().append("text")
855 .style("font-size", function(d) { return "16px"; })
856 .style("font-family", "Impact")
857 .style("fill", function(d, i) {console.log(i); return 'red'; })
858 .attr("text-anchor", "middle")
859 .attr("transform", function(d) {
860 return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
861 })
862 .text(function(d) {console.log(d); return d.text; });
863 }
864
865 });
866
734867 var AppRouter = Backbone.Router.extend({
735868 routes: {
736869 'home': 'home',
……
878878 linkedData: function() {
879879 this.hideAll();
880880 this.show('linked-data-page');
881 new LDView();
881882 },
882883 play: function() {
883884 this.hideAll();
swtr/templates/index.html
(8 / 1)
  
164164
165165 </div>
166166
167 <div id="linked-data-page" class="page"></div>
167 <div id="linked-data-page" class="page">
168 <div id="tag-cloud">
169 <div id="user-tag-cloud" class="row"></div>
170 <div id="tags-tag-cloud" class="row"></div>
171 </div>
172 </div>
168173 <div id="search-page" class="page"></div>
169174
170175 </div>
……
194194 };
195195 </script>
196196 <script src="{{ url_for('static', filename='js/lib/jquery-1.10.2.min.js') }}"></script>
197 <script src="{{ url_for('static', filename='js/lib/d3.js') }}"></script>
198 <script src="{{ url_for('static', filename='js/lib/d3.layout.cloud.js') }}"></script>
197199 <script src="{{ url_for('static', filename='js/lib/bootstrap.min.js') }}"></script>
198200 <script src="{{ url_for('static', filename='js/lib/underscore-1.5.2.min.js') }}"></script>
199201 <script src="{{ url_for('static', filename='js/lib/backbone-1.0.0.min.js') }}"></script>