Commit 564dc914fb6d6ae83f52f4ad74ef7d024dd349bf
- Diff rendering mode:
- inline
- side by side
swtr/static/css/swtmaker.css
(17 / 0)
| 118 | 118 | .nav-btn { | |
| 119 | 119 | margin-left: 10px; | |
| 120 | 120 | } | |
| 121 | #tag-cloud { | ||
| 122 | height:768px; | ||
| 123 | } | ||
| 124 | #tags-tag-cloud svg { | ||
| 125 | position: absolute; | ||
| 126 | left:100px; | ||
| 127 | top: 0; | ||
| 128 | height:100%; | ||
| 129 | width: 100%; | ||
| 130 | } | ||
| 131 | #user-tag-cloud svg { | ||
| 132 | position: absolute; | ||
| 133 | height:100%; | ||
| 134 | top: 40em; | ||
| 135 | left:100px; | ||
| 136 | width: 100% | ||
| 137 | } |
swtr/static/js/main.js
(22 / 24)
| 709 | 709 | var TagCloudView = Backbone.View.extend({ | |
| 710 | 710 | el: $('#tag-cloud'), | |
| 711 | 711 | events: { | |
| 712 | "click g": "test" | ||
| 712 | "click #user-tag-cloud g": "userTagClicked", | ||
| 713 | "click #tags-tag-cloud g": "tagsTagClicked" | ||
| 713 | 714 | }, | |
| 714 | 715 | initialize: function() { | |
| 715 | 716 | this.user_tag_el = $('#user-tag-cloud'); | |
| … | … | ||
| 718 | 718 | this.render(); | |
| 719 | 719 | ||
| 720 | 720 | }, | |
| 721 | test: function(e) { | ||
| 721 | userTagClicked: function(e) { | ||
| 722 | 722 | console.log(e); | |
| 723 | 723 | }, | |
| 724 | tagsTagClicked: function(e) { | ||
| 725 | console.log('tags ',e); | ||
| 726 | }, | ||
| 724 | 727 | render: function() { | |
| 725 | 728 | this.renderUserTagCloud(); | |
| 726 | 729 | this.renderTagsTagCloud(); | |
| 727 | 730 | }, | |
| 728 | 731 | renderUserTagCloud: function() { | |
| 729 | var fill = d3.scale.category20(); | ||
| 730 | 732 | var words = _.uniq(swtr.LDs.pluck('who')); | |
| 731 | 733 | var weight = swtr.LDs.countBy('who'); | |
| 732 | d3.layout.cloud().size([300, 300]) | ||
| 734 | d3.layout.cloud().size([1000, 1000]) | ||
| 733 | 735 | .words(words.map(function(d) { | |
| 734 | return {text: d, size: weight[d]}; | ||
| 736 | return {text: d, size: 5}; | ||
| 735 | 737 | })) | |
| 736 | 738 | .padding(5) | |
| 737 | .rotate(function() { return ~~(Math.random() * 2) * 90; }) | ||
| 738 | 739 | .font("Impact") | |
| 739 | 740 | .fontSize(function(d) { return d.size; }) | |
| 740 | 741 | .on("end", this.draw) | |
| … | … | ||
| 743 | 743 | ||
| 744 | 744 | }, | |
| 745 | 745 | draw: function (words) { | |
| 746 | var fill = d3.scale.category20(); | ||
| 746 | 747 | d3.select("#user-tag-cloud").append("svg") | |
| 747 | .attr("width", 300) | ||
| 748 | .attr("height", 300) | ||
| 749 | 748 | .append("g") | |
| 750 | .attr("transform", "translate(150,150)") | ||
| 749 | .attr("transform", "translate(370,180)") | ||
| 751 | 750 | .selectAll("text") | |
| 752 | 751 | .data(words) | |
| 753 | 752 | .enter().append("text") | |
| 754 | 753 | .style("font-size", function(d) { return "16px"; }) | |
| 755 | 754 | .style("font-family", "Impact") | |
| 756 | .style("fill", function(d, i) {console.log(i); return 'red'; }) | ||
| 755 | .style("fill", function(d, i) { return fill(i); }) | ||
| 757 | 756 | .attr("text-anchor", "middle") | |
| 758 | 757 | .attr("transform", function(d) { | |
| 759 | return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; | ||
| 760 | }) | ||
| 761 | .text(function(d) {console.log(d); return d.text; }); | ||
| 758 | return "translate(" + [d.x, d.y] + ")";}) | ||
| 759 | .text(function(d) { return d.text; }); | ||
| 760 | |||
| 762 | 761 | }, | |
| 763 | 762 | renderTagsTagCloud: function() { | |
| 764 | var fill = d3.scale.category20(); | ||
| 765 | 763 | var sweetsWithTags = swtr.LDs.filter(function(k) { | |
| 766 | 764 | if(k.get('how').tags) { | |
| 767 | 765 | return k; | |
| … | … | ||
| 769 | 769 | _.each(sweetsWithTags, function(sweet) { | |
| 770 | 770 | tags.push(sweet.get('how').tags); | |
| 771 | 771 | }); | |
| 772 | tags = _.flatten(tags); | ||
| 773 | d3.layout.cloud().size([300, 300]) | ||
| 772 | tags = _.uniq(_.flatten(tags)); | ||
| 773 | d3.layout.cloud().size([500, 500]) | ||
| 774 | 774 | .words(tags.map(function(d) { | |
| 775 | 775 | return {text: d, size: 10}; | |
| 776 | 776 | })) | |
| 777 | .padding(5) | ||
| 778 | .rotate(function() { return ~~(Math.random() * 2) * 90; }) | ||
| 777 | .padding(7) | ||
| 779 | 778 | .font("Impact") | |
| 780 | 779 | .fontSize(function(d) { return d.size; }) | |
| 781 | 780 | .on("end", this.drawTags) | |
| … | … | ||
| 782 | 782 | ||
| 783 | 783 | }, | |
| 784 | 784 | drawTags: function(words) { | |
| 785 | var fill = d3.scale.category20(); | ||
| 785 | 786 | d3.select("#tags-tag-cloud").append("svg") | |
| 786 | .attr("width", 300) | ||
| 787 | .attr("height", 300) | ||
| 788 | 787 | .append("g") | |
| 789 | .attr("transform", "translate(150,150)") | ||
| 788 | .attr("transform", "translate(700,300)") | ||
| 790 | 789 | .selectAll("text") | |
| 791 | 790 | .data(words) | |
| 792 | 791 | .enter().append("text") | |
| 793 | .style("font-size", function(d) { return "16px"; }) | ||
| 792 | .style("font-size", function(d) { return "20px"; }) | ||
| 794 | 793 | .style("font-family", "Impact") | |
| 795 | .style("fill", function(d, i) {console.log(i); return 'red'; }) | ||
| 794 | .style("fill", function(d, i) { return fill(i); }) | ||
| 796 | 795 | .attr("text-anchor", "middle") | |
| 797 | 796 | .attr("transform", function(d) { | |
| 798 | return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; | ||
| 797 | return "translate(" + [d.x, d.y] + ")"; | ||
| 799 | 798 | }) | |
| 800 | 799 | .text(function(d) {console.log(d); return d.text; }); | |
| 801 | 800 | } |
swtr/templates/index.html
(2 / 2)
| 144 | 144 | </div> | |
| 145 | 145 | <div id="linked-data-page" class="page"> | |
| 146 | 146 | <div id="tag-cloud"> | |
| 147 | <div id="user-tag-cloud" class="row"></div> | ||
| 148 | <div id="tags-tag-cloud" class="row"></div> | ||
| 147 | <div id="tags-tag-cloud"></div> | ||
| 148 | <div id="user-tag-cloud"></div> | ||
| 149 | 149 | </div> | |
| 150 | 150 | </div> | |
| 151 | 151 | <!-- the search page --> |
