Finished Tweet break-down chart, implemented functionality and styled

routes/src/break-down.coffee

@@ -19,6 +19,7 @@ fetchAndFormatTweets = (searchTerm, cb) ->
 formatTweets = (twitterResults) ->
   results = ""
   for tweet in twitterResults then results += tweet.body + " "
+  results = results.replace(/(?:https?|ftp):\/\/[\n\S]+/g, '')
   results =  results.replace(/[^A-Za-z0-9 ]/g, '')
   results = results.substring(0, 5000)
 
@@ -34,7 +35,6 @@ formatResultsForChart = (hpResults) ->
       {name:'negative', children: []}
     ]
   }
-
   i = 1
   while i <= 10
     data.children[0].children.push({name: i/10, children: [] })

source/scripts/visualisations/break-down.coffee

@@ -34,7 +34,7 @@ node = div.datum(root)
   .data(treemap.nodes)
   .enter()
   .append('div')
-  .attr('class', 'tree-node tooltipped')
+  .attr('class', (d) -> 'tree-node ' + if d.topic? then 'tooltipped')
   .call(position)
   .attr('data-position', 'top')
   .attr('data-tooltip', (d) -> if d.topic != '' then d.topic else '[no topic]')
@@ -49,4 +49,8 @@ d3.selectAll('input').on 'change', ->
     .call position
 
 $(document).ready ->
-  $('.tooltipped').tooltip delay: 50
+  $('.tooltipped').tooltip delay: 50
+
+$('#txtKeyword').keyup (e) -> if e.keyCode == 13
+  showLoader()
+  window.location = '/break-down/'+$('#txtKeyword').val()

source/styles/charts.less

@@ -29,7 +29,8 @@ body { font: 12px sans-serif; }
 #tree {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
-  width: 100%;
+  width: 960px;
+  margin: -2em auto 1em auto;
   padding: 0;
 }
 

views/page_breakDown.jade

@@ -18,8 +18,16 @@ block content
                 input#count(type='radio', name='mode', value='count')
                 label(for='count') Count
 
-    div.row.center-block(style='width: 80%')
-        div.card-panel#tree
+    div.row.center-block(style='width: 80%').card-panel
+        if searchTerm
+            - var relatingTo = ' relating to <b>'+searchTerm+'</b>'
+        else
+            - var relatingTo = ''
+        p The block diagram shows key terms that represented sentiment!{relatingTo}.
+            | The color represents sentiment, and the size of the block, weighting.
+        b You can hover over the blocks to see the topic being described.
+        div#tree
+        br
 
 block scripts
     script(type='text/javascript').