Some improvements to graphics

Author: debugger22

app/index.html

@@ -67,7 +67,7 @@ <h2 class="online-users-text"><span class="possibly-text">possibly</span>&nbsp;<
       <div class="footer-left-text-block">
         this project is open source, you can view it on <a href="https://github.com/debugger22/github-audio" target="_blank">GitHub</a><br/>
         developed by <a href="https://github.com/debugger22" target="_blank">@debugger22</a><br/><br/>
-        ProTip: It's nice to keep it open in the background
+        ProTip: It's actually kind of nice to leave on the background
       </div>
       <div class="footer-right-text-block">
         inspired by <a href="http://hatnote.com" target="_blank">hatnote</a><br/>

app/public/js/main.js

@@ -6,8 +6,8 @@ var width;
 var height;
 var mute = false;
 
-var scale_factor = 9,
-    note_overlap = 15,
+var scale_factor = 6,
+    note_overlap = 2,
     note_timeout = 300,
     current_notes = 0,
     max_life = 20000;
@@ -253,20 +253,25 @@ function drawEvent(data, svg_area) {
     }
     var size = data.message.length;
     var label_text;
+    var ring_radius = 80;
+    var ring_anim_duration = 3000;
+    svg_text_color = '#FFFFFF';
     switch(data.type){
       case "PushEvent":
         label_text = data.user.capitalize() + " pushed to " + data.repo_name;
-        edit_color = '#FFFFFF';
+        edit_color = '#B2DFDB';
       break;
       case "PullRequestEvent":
         label_text = data.user.capitalize() + " " +
           data.action + " " + " a PR for " + data.repo_name;
-          edit_color = '#18FFFF';
+          edit_color = '#C6FF00';
+          ring_anim_duration = 10000;
+          ring_radius = 600;
       break;
       case "IssuesEvent":
         label_text = data.user.capitalize() + " " +
           data.action + " an issue in " + data.repo_name;
-          edit_color = '#FFFF00';
+          edit_color = '#FFEB3B';
       break;
       case "IssueCommentEvent":
         label_text = data.user.capitalize() + " commented in " + data.repo_name;
@@ -291,14 +296,15 @@ function drawEvent(data, svg_area) {
         .attr('fill', edit_color)
         .style('opacity', starting_opacity)
 
+
     var ring = circle_group.append('circle');
-    ring.attr({r: size + 20, stroke: 'none'});
+    ring.attr({r: size, stroke: 'none'});
     ring.transition()
-         .attr('r', size + 40)
-         .style('opacity', 0)
-         .ease(Math.sqrt)
-         .duration(2500);
-    ring.remove();
+        .attr('r', size + ring_radius)
+        .style('opacity', 0)
+        .ease(Math.sqrt)
+        .duration(ring_anim_duration)
+        .remove();
 
     var circle_container = circle_group.append('a');
     circle_container.attr('xlink:href', 'https://github.com/' + data.repo_name);
@@ -312,9 +318,9 @@ function drawEvent(data, svg_area) {
       .transition()
       .duration(max_life)
       .style('opacity', 0)
-    //circle.each('end', function(){
-    //        circle_group.remove();
-    //})
+      //.each(function(){
+      //      circle_group.remove();
+      //  })
       .remove();
 
 
@@ -323,22 +329,24 @@ function drawEvent(data, svg_area) {
           .text(label_text)
           .classed('label', true)
           .attr('text-anchor', 'middle')
+          .attr('font-size', '0.8em')
           .transition()
           .delay(1000)
           .style('opacity', 0)
-          .duration(5000)
-          //.each('end', function() { no_label = true; })
+          .duration(2000)
+          .each(function() { no_label = true; })
           .remove();
     });
 
     var text = circle_container.append('text')
         .text(label_text)
         .classed('article-label', true)
         .attr('text-anchor', 'middle')
+        .attr('font-size', '0.8em')
         .transition()
-        .delay(1000)
+        .delay(2000)
         .style('opacity', 0)
-        .duration(2000)
-        //.each('end', function() { no_label = true; })
+        .duration(5000)
+        .each(function() { no_label = true; })
         .remove();
 }