#1 added profile images to viz.

index.js

@@ -15,7 +15,7 @@ var console = new Debug({
 });
 
 var all = [];
-var token = "CAACEdEose0cBAC121mD2UYyxpe8wgumK8nHdbu08rHert9EZCmwRcMmYNWElXdYdHWBYp5FBlbz8gPRPbjlXZCFHQ4v3yDmyOAEyXbgEDGNr6dasCZCAAkMrcJ6pbDmIuGw9CD5OXBQ7Y7ZBFYImuPDISThq5SSn3MxAsBmkT8Hpzyrwln4f0BKIZBJZBdebfUTZBmTR9ChwZBZBjwN3hq4gZA";
+var token = 'CAACEdEose0cBAAqj9d6C87UgYEyeyefvrF6uWT4OIxwUUK6aHRxiQCK2Lf4rJ19EGGGm3Gfvj9UoPJ45YIq880Gr32KvvjON5XAJnq6skVRHAbgk5mPtUYeI9nVXRXbUReMtcVZAiDfvdkMtY0VGRKkoObZA8bvSpVLkVpX1FMJAS2oe8LDRsNLoj2w9CIQGV9Fg7mKGZCPfFl6728J';
 
 var posts = [];
 var comments = [];
@@ -251,6 +251,7 @@ function pushToElastic(callback) {
           events.push({
             date: new Date(activity.time).getTime(),
             author: user.name,
+            user_id: user.id,
             picture: user.picture,
             activity: activity.activity,
             resource_id: activity.resource_id

viz/index.html

@@ -10,6 +10,7 @@
 <div id="canvas"></div>
 <div id="gui-cont"></div>
 
+<script src="//cdnjs.cloudflare.com/ajax/libs/async/1.0.0/async.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
 <script src="blackhole.min.js"></script>

viz/viz.js

@@ -9,20 +9,40 @@ var cur
   , df = d3.time.format('%d-%m-%Y')
   ;
 
+var pictures = {};
 function restart() {
   d3.json("data/events.json", function (error, data) {
     if (error) return console.warn(error);
 
-    bh.stop();
-    cur = 0;
-    all = data.length;
-    progress.process = 0;
-    progress.state = 'parsing';
-    bh.start(data, 0, 0, true);
+    progress.state = 'fetching pictures';
+    async.mapSeries(data, function (d, cb) {
+      if (!pictures[d.author]) {
+        d3.uri(d, function (err, data) {
+          pictures[d.author] = data;
+          d.img = data;
+          return cb(null, d);
+        });
+      }
+      else {
+        d.img = pictures[d.author];
+        return cb(null, d);
+      }
+    }, function (err, data) {
+      if (err)
+        throw err;
+
+      bh.stop();
+      cur = 0;
+      all = data.length;
+      progress.process = 0;
+      progress.state = 'parsing';
+      bh.start(data, 0, 0, true);
+    });
   });
 }
 
 bh.setting.drawTrack = true;
+bh.setting.drawParentImg = true;
 bh.setting.asyncParsing = true;
 bh.on('getGroupBy', function (d) {
   return d.date;
@@ -35,14 +55,19 @@ bh.on('getGroupBy', function (d) {
   })
   .on('getChildKey', function (d) {
     return d.resource_id;
-
   })
   .on('getCategoryKey', function (d) {
     return d.resource_id.replace(/.*?\.(.*)$/, '.$1');
   })
   .on('getParentLabel', function (d) {
     return d.nodeValue;
   })
+  .on('getParentImage', function (d) {
+    //console.log(pictures[d]);
+    var image = new Image();
+    image.src = pictures[d];
+    return image;
+  })
   .on('getChildLabel', function (d) {
     return d.nodeValue.resource_id.replace(/.*\/(.*)$/, "$1");
   })
@@ -136,4 +161,39 @@ d3.selectAll('.btn-hide')
     p.classed('open', !p.classed('open'));
   });
 
-restart();
+restart();
+
+
+var getImageBase64 = function (url, callback) {
+  // to comment better
+  var xhr = new XMLHttpRequest(url);
+  xhr.open('GET', url, true);
+  xhr.responseType = 'blob';
+  xhr.callback = callback;
+  xhr.onload = function () {
+    var self = this;
+    var blob = this.response;
+
+    var reader = new window.FileReader();
+    reader.readAsDataURL(blob);
+    reader.onloadend = function () {
+      self.callback(null, reader.result);
+    };
+  };
+  xhr.onerror = function () {
+    callback('B64 ERROR', null);
+  };
+  xhr.send();
+};
+
+d3.uri = function (d, callback) {
+  console.log('fetching ','https://graph.facebook.com/v2.3/' + d.user_id + '/picture?redirect=false')
+  d3.json('https://graph.facebook.com/v2.3/' + d.user_id + '/picture?redirect=false', function (err, json) {
+    if (err)
+      return callback(err);
+
+    var url = json.data.url;
+    getImageBase64(url, callback);
+  });
+};
+