Clickable link to twitter account, display userid

2 files changed, 18 insertions, 8 deletions

diff --git a/bubble.html b/bubble.html
index f635c23..c3fe36f 100644
--- a/bubble.html
+++ b/bubble.html
@@ -74,6 +74,11 @@ html, body {
     /* initially there is no user to show info about */
     display: none;
 }
+#infobox .user-info .user-stats,
+#infobox .user-info .user-stats li {
+    padding: 0;
+    margin: 0;
+}
 #infobox .user-info .name {
     margin: 0;
     padding: 0;
@@ -122,12 +127,13 @@ html, body {
         </ul>
         <div class="user-info">
             <h2 class="name"></h2>
-            <p>
-            Tweets: <span class="tweet-count"></span>.<br>
-            Spam: <span class="spam-status"></span>.<br>
-            Relations (<span class="relations-from-count"></span> +
+            <ul class="user-stats">
+            <li>User ID: <span class="userid"></span>
+            <li>Tweets: <span class="tweet-count"></span>
+            <li>Spam: <span class="spam-status"></span>
+            <li>Relations (<span class="relations-from-count"></span> +
                     <span class="relations-to-count"></span>):
-            </p>
+            </ul>
             <ul class="relations-from"></ul>
             <ul class="relations-to"></ul>
         </div>
diff --git a/bubble.js b/bubble.js
index 81435e2..d6868a3 100644
--- a/bubble.js
+++ b/bubble.js
@@ -231,8 +231,12 @@ function processData(data) {
         // display user block
         userInfo.style('display', 'block');
 
-        userInfo.select('.name')
+        userInfo.select('.name a').remove();
+        userInfo.select('.name').append('a')
+            .attr('target', '_blank')
+            .attr('href', 'https://twitter.com/' + d.name)
             .text(d.name);
+        userInfo.select('.userid').text(d.group);
         userInfo.select('.tweet-count')
             .text(d.tweetCount);
         userInfo.select('.spam-status')
@@ -240,10 +244,10 @@ function processData(data) {
 
         var nodes = {
             'from': force.nodes().filter(function (edge) {
-                return edge.relatedFrom.indexOf(d.index) >= 0;
+                return edge.relatedTo.indexOf(d.index) >= 0;
             }),
             'to': force.nodes().filter(function (edge) {
-                return edge.relatedTo.indexOf(d.index) >= 0;
+                return edge.relatedFrom.indexOf(d.index) >= 0;
             })
         };
         Object.keys(nodes).forEach(function (dir) {