topical media & game development

talk show tell print

graphic-javascript-vector-impact.js / js



  var data = {
      "jonasi":[0,0,0,0,98,45,0,0,3,0,28,273,202,9,0,4,0,0,7,336,97,89,5,730,317,127,121,626,195],
      "chisag":[0,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
      "jessie":[75,13,163,183,86,105,84,367,0,0,5,0,140,68,202,42,224,338,385,225,166,204,554,0,0,0,0,0,0],
      "nlashi":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,208,441,0,0],
      "simeje":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,107,45,350,438,0,0,0,0,0,0],
      "biggyla":[7,0,38,132,0,0,69,72,0,0,86,0,0,0,0,0,0,0,0,0,0,128,0,0,0,1,0,0,0],
      "asimenye":[0,425,171,331,9,332,135,6,0,100,0,0,0,422,0,77,195,277,204,0,82,6,0,0,0,0,0,0,0],
      "kumayani":[135,67,403,178,229,122,307,136,711,452,544,346,0,20,194,87,0,0,51,0,163,0,0,0,0,0,0,0,0],
      "Administrators":[0,0,0,0,0,0,0,0,0,0,0,3,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
      "ndecha":[372,827,868,724,605,864,724,597,698,477,764,596,569,540,471,495,413,661,351,427,560,62,147,694,756,742,615,649,459],
      "Administrator":[0,25,88,209,53,21,36,36,40,9,128,6,37,4,33,0,22,9,0,12,0,111,0,0,0,0,0,0,0],
      "margret":[194,63,0,6,237,0,169,145,79,48,325,26,0,0,0,0,0,71,0,0,0,0,136,12,490,410,0,191,347],
      "benard":[0,248,28,91,1,330,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
      "oligad":[0,0,0,91,0,5,0,0,0,63,0,0,12,0,0,0,0,0,0,0,0,74,0,0,0,0,0,0,0],
      "mikmck":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0]
  };
  var daylabels = ["18 OCT 2008", "19 OCT 2008", "20 OCT 2008", "21 OCT 2008", "22 OCT 2008", "23 OCT 2008", "24 OCT 2008", "25 OCT 2008", "26 OCT 2008", "27 OCT 2008", "28 OCT 2008", "29 OCT 2008", "30 OCT 2008", "31 OCT 2008", "1 NOV 2008", "2 NOV 2008", "3 NOV 2008", "4 NOV 2008", "5 NOV 2008", "6 NOV 2008", "7 NOV 2008", "8 NOV 2008", "9 NOV 2008", "10 NOV 2008", "11 NOV 2008", "12 NOV 2008", "13 NOV 2008", "14 NOV 2008", "15 NOV 2008"];
  
  function DrawImpact(data, daylabels, id, userid) {
      var len = 0, users = {}, user_element = userid && document.getElementById(userid);
      for (var user in data) {
          len = data[user].length;
          break;
      }
  
      var r = Raphael(id, 100 * len - 50, 600);
      for (var i = 0; i < len; i++) {
          var day = [];
          for (user in data) {
              if (!users[user] && data[user][i]) {
                  users[user] = {start: i, ltr: [], rtl: [], values: []};
              }
              if (users[user]) {
                  if (users[user].start + 1 && !(users[user].finish + 1)) {
                      day.push({name: user, value: data[user][i]});
                  }
                  if (!("finish" in users[user]) && !eval(data[user].slice(i + 1).join("+"))) {
                      users[user].finish = i;
                  }
              }
          }
          day.sort(function (a, b) {
              return b.value - a.value;
          });
          var y = 2;
          for (var j = 0, jj = day.length; j < jj; j++) {
              users[day[j].name].values.push(day[j].value);
              users[day[j].name].ltr.push(y);
              y += Math.max(Math.round(Math.sqrt(day[j].value * 5)), 1);
              users[day[j].name].rtl.unshift(y);
              y += 2;
          }
          r.text(i * 100 + 25, y + 10, daylabels[i]).attr({font: '9px "Arial"', "stroke-width": 0, fill: "#666"});
      }
      // draw
      var all_labels = {}, current;
      for (user in users) {
          (function (user) {
              var step = users[user].start,
                  color = Raphael.getColor(.75),
                  textattr = {font: '10px "Arial"', "stroke-width": 0, fill: "#fff"},
                  p = r.path({fill: color}).moveTo(users[user].start * 100, users[user].ltr[0]).lineTo(users[user].start * 100 + 50, users[user].ltr[0]),
                  th = (users[user].rtl[users[user].rtl.length - 1] - users[user].ltr[0]) / 2;
              all_labels[user] = [];
              if (th > 4) {
                  all_labels[user].push(r.text((users[user].start) * 100 + 25, users[user].ltr[0] + th + 3, users[user].values[0]).attr(textattr));
              }
              for (var i = 1, ii = users[user].ltr.length; i < ii; i++) {
                  p.cplineTo((users[user].start + i) * 100, users[user].ltr[i], 25)
                   .lineTo((users[user].start + i) * 100 + 50, users[user].ltr[i]);
                  th = (users[user].rtl[ii - i - 1] - users[user].ltr[i]) / 2;
                  if (th > 4) {
                      all_labels[user].push(r.text((users[user].start + i) * 100 + 25, users[user].ltr[i] + th + 3, users[user].values[i]).attr(textattr));
                  }
              }
              p.lineTo(users[user].finish * 100 + 50, users[user].rtl[0]).lineTo(users[user].finish * 100, users[user].rtl[0]);
              for (var i = 1, ii = users[user].rtl.length; i < ii; i++) {
                  p.cplineTo((users[user].finish - i) * 100 + 50, users[user].rtl[i], -25)
                   .lineTo((users[user].finish - i) * 100, users[user].rtl[i]);
              }
              p.andClose();
              for (var i = 0, ii = all_labels[user].length; i < ii; i++) {
                  all_labels[user][i].toBack();
              }
  
              p[0].onmouseover = function () {
                  if (all_labels[current]) {
                      for (var i = 0, ii = all_labels[current].length; i < ii; i++) {
                          all_labels[current][i].toBack();
                      }
                  }
                  p.toFront();
                  for (var i = 0, ii = all_labels[user].length; i < ii; i++) {
                      all_labels[user][i].toFront();
                  }
                  current = user;
                  if (user_element) {
                      user_element.style.color = color;
                      user_element.innerHTML = user;
                  }
              };
          })(user);
      }
  }
  
  window.onload = function () {
      DrawImpact(data, daylabels, "holder", "user");
  };
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.