"
69 | + hashTagsArr[i] + " |
");
70 | lastClassindex++;
71 |
72 | }
73 | $('#hashTags').animate({scrollTop: $('#hashTags').prop("scrollHeight")}, 2000);
74 | lastClassindex = hashTagsArr.length;
75 |
76 | hashTagsArr = []; //Empty hashTag Array to free up array
77 |
78 | setTimeout(function () {
79 | showNewHashTags()
80 | }, 2000);
81 |
82 | }
83 |
84 | function returnTextClass(index) {
85 | var cssClass = ["success", "info", "warning", "danger", "primary"];
86 | var ind = index % 5;
87 | return cssClass[ind];
88 | }
89 |
90 |
91 | //..........Code for Word Cloud............
92 |
93 | //Store Compressed Data
94 | var compressedWordArray = compressArray(words);
95 |
96 | // Encapsulate the word cloud functionality
97 | function wordCloud(selector) {
98 |
99 | var fill = d3.scale.category20();
100 |
101 | //Construct the word cloud's SVG element
102 | var svg = d3.select(selector).append("svg")
103 | .attr("width", width)
104 | .attr("height", height)
105 | .append("g")
106 | .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
107 |
108 | //Draw the word cloud
109 | function draw(words) {
110 | var cloud = svg.selectAll("g text")
111 | .data(words, function (d) {
112 | return d.text;
113 | })
114 |
115 | //Entering words
116 | cloud.enter()
117 | .append("text")
118 | .style("font-family", "Impact")
119 | .style("fill", function (d, i) {
120 | return fill(i);
121 | })
122 | .attr("text-anchor", "middle")
123 | .attr('font-size', 1)
124 | .text(function (d) {
125 | return d.text;
126 | });
127 |
128 | //Entering and existing words
129 | cloud
130 | .transition()
131 | .duration(600)
132 | .style("font-size", function (d) {
133 | return d.size + "px";
134 | })
135 | .attr("transform", function (d) {
136 | return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
137 | })
138 | .style("fill-opacity", 1);
139 |
140 | //Exiting words
141 | cloud.exit()
142 | .transition()
143 | .duration(200)
144 | .style('fill-opacity', 1e-6)
145 | .attr('font-size', 1)
146 | .remove();
147 | }
148 |
149 | function returnRotation() {
150 | var angle = [0, -90, -60, -45, -30, 0, 30, 45, 60, 90];
151 | var index = Math.floor(Math.random() * 10);
152 | return angle[index];
153 | }
154 |
155 | //Use the module pattern to encapsulate the visualisation code. We'll
156 | // expose only the parts that need to be public.
157 | return {
158 |
159 | //Recompute the word cloud for a new set of words. This method will
160 | // asycnhronously call draw when the layout has been computed.
161 | //The outside world will need to call this function, so make it part
162 | // of the wordCloud return value.
163 | update: function (words) {
164 |
165 | var maxSize = d3.max(compressedWordArray, function (d) {
166 | return d.size
167 | });
168 | //Define Pixel of Text
169 | var pixScale = d3.scale.linear()
170 | .domain([0, maxSize])
171 | .range([10, 80]);
172 |
173 | d3.layout.cloud().size([(width - 50), (height - 20)])
174 | .words(words)
175 | .padding(5)
176 | .rotate(function () {
177 | return ~~(Math.random() * 2) * returnRotation();
178 | })
179 | .font("Impact")
180 | .fontSize(function (d) {
181 | return Math.floor(pixScale(d.size));
182 | })
183 | .on("end", draw)
184 | .start();
185 | }
186 | }
187 |
188 | }
189 |
190 | //This method tells the word cloud to redraw with a new set of words.
191 | //In reality the new words would probably come from a server request,
192 | // user input or some other source.
193 | function showNewWords(vis) {
194 |
195 | if (browserNotSupported) {
196 | words = ["Project Author", "@RawSanj", "Project Author", "@RawSanj", "Internet Explorer", "Does not Support EventSource", "Please use Chrome!", "Please use Chrome!", "IE Support coming up", "in WebSocket version"];
197 | } else if (words.length === 0) {
198 | words = ["Whoops!", "Looks Like", "Nobody", "Tweeted", "In Last 5 Seconds"];
199 | }
200 |
201 | compressedWordArray = compressArray(words);
202 |
203 | vis.update(compressedWordArray);
204 | words = []; //Empty Word Array to free up array
205 |
206 | setTimeout(function () {
207 | showNewWords(vis)
208 | }, 5000);
209 |
210 | }
211 |
212 | //Create a new instance of the word cloud visualisation.
213 | var myWordCloud = wordCloud('body');
214 |
215 | //Start cycling through the demo data
216 | showNewWords(myWordCloud);
217 |
218 | function compressArray(original) {
219 |
220 | var compressed = [];
221 | // make a copy of the input array
222 | var copy = original.slice(0);
223 |
224 | // first loop goes over every element
225 | for (var i = 0; i < original.length; i++) {
226 |
227 | var myCount = 0;
228 | // loop over every element in the copy and see if it's the same
229 | for (var w = 0; w < copy.length; w++) {
230 | if (original[i] == copy[w]) {
231 | // increase amount of times duplicate is found
232 | myCount++;
233 | // sets item to undefined
234 | delete copy[w];
235 | }
236 | }
237 |
238 | if (myCount > 0) {
239 | var a = new Object();
240 | a.text = original[i];
241 | a.size = myCount;
242 | compressed.push(a);
243 | }
244 | }
245 |
246 | return compressed;
247 | };
248 | });
--------------------------------------------------------------------------------
/src/main/resources/static/main.css:
--------------------------------------------------------------------------------
1 | #hashTags{
2 | overflow-y:scroll;
3 | overflow-x: hidden;
4 | position: absolute;
5 | height: 100%;
6 | width: inherit;
7 | scrollbar-face-color: #367CD2;
8 | scrollbar-shadow-color: #FFFFFF;
9 | scrollbar-highlight-color: #FFFFFF;
10 | scrollbar-3dlight-color: #FFFFFF;
11 | scrollbar-darkshadow-color: #FFFFFF;
12 | scrollbar-track-color: #FFFFFF;
13 | scrollbar-arrow-color: #FFFFFF;
14 | }
15 |
16 |
17 | /* Let's get this party started */
18 | #hashTags::-webkit-scrollbar {
19 | width: 10px;
20 | }
21 |
22 | /* Track */
23 | #hashTags::-webkit-scrollbar-track {
24 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
25 | -webkit-border-radius: 10px;
26 | border-radius: 10px;
27 | }
28 |
29 | /* Handle */
30 | #hashTags::-webkit-scrollbar-thumb {
31 | -webkit-border-radius: 10px;
32 | border-radius: 10px;
33 | background: rgba(111, 169, 255, 0.8);
34 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
35 | }
36 |
37 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
38 | @import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
39 |
40 | body {
41 | background: rgba(221, 221, 221, 0.37);
42 | font-size: 15px;
43 | font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
44 | overflow:hidden;
45 | }
46 |
47 | #wrap {
48 | margin: 20px 40px;
49 | display: inline-block;
50 | position: fixed !important;
51 | height: 60px;
52 | float: left;
53 | padding: 0;
54 | z-index: 100;
55 | }
56 |
57 | ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
58 | color: #E51C23;
59 | }
60 |
61 | input[type="text"] {
62 | height: 67px;
63 | font-size: 55px;
64 | display: inline-block;
65 | font-weight: 100;
66 | border: none;
67 | outline: none;
68 | color: #E51C23;
69 | padding: 3px;
70 | padding-left: 80px;
71 | width: 0px;
72 | position: absolute;
73 | top: 0;
74 | left: 0;
75 | background: none;
76 | z-index: 3;
77 | transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
78 | cursor: pointer;
79 | }
80 |
81 | input[type="text"]:focus:hover {
82 | border-bottom: 1px solid #E51C23;
83 | }
84 |
85 | input[type="text"]:focus {
86 | width: 700px;
87 | z-index: 1;
88 | border-bottom: 1px solid #E51C23;
89 | cursor: text;
90 | background-color: rgba(255, 152, 0, 0.69);
91 | }
92 | input[type="submit"] {
93 | height: 67px;
94 | width: 63px;
95 | display: inline-block;
96 | color:red;
97 | float: left;
98 | background: url(data:image/png;base64,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) center center no-repeat;
99 | text-indent: -10000px;
100 | border: none;
101 | position: absolute;
102 | top: 0;
103 | left: 0;
104 | z-index: 2;
105 | cursor: pointer;
106 | opacity: 0.6;
107 | cursor: pointer;
108 | transition: opacity .4s ease;
109 | }
110 |
111 | input[type="submit"]:hover {
112 | opacity: 0.9;
113 | }
114 |
115 | .container-fluid{
116 | padding-left: 0px !important;
117 | padding-right: 0px !important;
118 | }
--------------------------------------------------------------------------------
/src/main/resources/templates/events.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |