18 января 2012 в 13:57

Визуализация активности пользователей Google+

Давно уже увлекаюсь визуализацией различной статистики в программе code_swarm и gource.
Недавно я решил освоить Google api для Google Plus, и решил, что самым удобным и интересным будет придумать алгоритм сбора статистки по активности пользователей и потом визуализировать эту информацию выше упомянутыми средствами. В данной статье пойдет речь о результатах проделанной работы.


Что я использовал



Исходники приложения есть на github (Инсталлер).
Я не буду углубятся в реализацию, опишу только основные моменты.


Сначала javascript


Первым делом я решил попробовать получить данные через js. Для этого я сделал страничку на народе. Получить данные оказалось очень просто:
var request = gapi.client.plus.activities.list({
    'userId':profileID,
    'collection':'public',
    'maxResults':nextCount,
    'pageToken':nextPage
}).execute(createLog);


Затем стала задача придумать алгоритм формирования имен файлов для демонстрации активности. Задача была решена использование шаблонов.
правила формирования имен файлов.
Кусочек кода, которым это преобразуется:
  1. fnc = filePattern[o].comment.trim();
  2. fnc = fnc.replace(/type/gi, "comment")
  3.          .replace(/postId/gi, post.id)    
  4.          .replace(/id/gi, comment.id)
  5.          .replace(/postactor/gi, post.actorId)
  6.          .replace(/actor/gi, comment.actor.id)
  7.          .replace(/postdate/gi, post.date)
  8.          .replace(/date/gi, date)
  9.          .replace(/sharepath/gi, fns)
  10.          .replace(/postfilename/gi, fn)
  11.          .replace(////gi, '/');


Любой пользователь может сформировать свои имена файлов. Под файлом здесь понимается какая либо активность пользователя, создание: постов, комментариев, решар, выставление плюсов. Каждая строка лога формируется от имени того кто эту деятельность осуществил.
Результат визуализации лога полученного с помощью этой страницы:

Gource



  • Общие понятия
    • Пользователи google plus — пчелы.
    • Точки (посты, комментарии и тп) — элементы сот, точки разных цветов.
  • Типы точек
    • Изумрудный — пост
    • Зеленый — комментарии
    • Голубой — плюс
    • Светло-зеленый — репост
    • и тд

  • Типы лучей
    • Зеленый — создание элемента
    • Оранжевый — комментирование, плюс, репост
  • Пчелы стоят соты (ну или молекулу).
  • На данном видео снизу, а потом слева, это основные посты пользователя по чьему профилю была сгенерированна активность.
  • Справа это репосты сделанные этим пользователем у других, они имеют свои комментарии и плюсы.

Code_swarm



  • Общие понятия
    • Круги — пользователи google plus
    • Огоньки — деятельность пользователей (создание постов, комментариев, плюсов и другое)
  • Пользователи отталкиваются от пользователей
  • Огоньки отталкиваются от огоньков
  • Огоньки притягиваются к пользователю, который совершает над ним действие.
  • Пользователи притягиваются друг к другу через общее событие, то есть если пользователи комментируют один и тот же пост.
  • Все слетается к пользователю от чьего id был сгенерирован лог. Но также появляются скопление пользователей и огоньков в других местах. Это репосты дргих пользователей сделаных этим профилем, все новые события связанны с ним. Это можно изменить в правилах формирования имен файлов.


Но естественно подобного рода задачи не решаются в браузер и я решил написать приложение на C#.


Сейчас C#


По сути все сделано на простом примере который приведен здесь. Вот кусок:
  1. [STAThread]
  2. static void Main(string[] args)
  3. {
  4.       // Display the header and initialize the sample.
  5.       CommandLine.EnableExceptionHandling();
  6.       CommandLine.DisplayGoogleSampleHeader("Plus user activity");
  7.  
  8.       // Create the service.
  9.       var service = new PlusService();
  10.       RunSample(service);
  11.       CommandLine.PressAnyKeyToExit();
  12. }
  13.  
  14. private static void RunSample(PlusService service)
  15. {
  16.       // Run the request.
  17.       CommandLine.WriteAction("Executing List-request ...");
  18.       var result = service.Activities.List("MY PROFILE ID", Google.Apis.Plus.v1.ActivitiesResource.Collection.Public).Fetch();
  19.  
  20.       // Display the results.
  21.       if (result.Items != null)
  22.       {
  23.           foreach (var item in result.Items)
  24.           {
  25.               CommandLine.WriteResult(item.Id, itme.Actor.DisplayName);
  26.           }
  27.       }
  28. }

Естественно надо подключить к проекту или проект с оберткой для Google Plus Apis или собранную библиотеку.
Но на самом деле все станет понятно из этого руководства.

Исходники приложения на github. Exe здесь

Изменение генерации лога для code_swarm


Так как у массфоловеров очень много подписчиков, то для code_swarm схему, пользователь-активность получаем очень большое колво пользователей и кучу точек по которым ничего не понять. По этому я решил что в роли пользователя будет выступать пост (его id) а вся активность (имена файлов) будет формироваться по id пользователя. Получим, что к посту будут слетаться пользователи причем разного цвета в зависимости от их активности (коммент, решара, плюс и т.д.), и тогда будет наглядно видно кто и как активен. Да имена файлов также формируются используя шаблон:
программа для генерации логов активности

Результаты визуализации логов полученных программой


Code_swarm



  • Центральная точка в круге (или центр круга) — пост.
  • Подсвеченные точки — комментарии, плюсы, решары.

У каждой точки есть уникальное имя, соответствующее пользователю, который его оставил, поэтому некоторые точки крупней и летают от поста к посту — этот активный пользователь.


Gource



  • Сиреневые точки — решары.
  • Салатовые точки — комментарии.
  • Бирюзовые точки — плюсы.
  • Точка между тремя ветвями — пост.



Результат


Очередной раз убедился, что для изучения какой либо технологии необходимо себя замотивировать, в данном случае мотивацией выступает наглядное представления проанализированных данных, что в моем случае очень стимулирует. В планах изучение Google Analytics и тоже планирую делать визуализация полученной статистики, если есть у кого наработки по данному вопросу можете поделиться, так же интересны api last.fm.

Ваши вопросы, замечания жду в комментариях.

UPD: Как и обещал в комментариях, добавил генерацию лога для logstalgia. Вот результаты визуализации:
+44
780
70
artzub 29,1 G+

Комментарии (31)

0
Squier, #
Следил за белым (переходящим в синий), немного размытым кружком.
0
artzub, #
ага этот кружок автор постов =)
+2
vvzvlad, #
классно. на молекулу гигантскую похоже
+1
artzub, #
ага, но почему-то авторы считают что пчелы цветы опыляют =)
0
vvzvlad, #
а, авторы всегда странные. мы-то с вами знаем, что это на самом деле молекула.
+1
artzub, #
=)
0
Maximus43, #
Изумительно! Чем-то напоминает Logstalgia :-)
0
artzub, #
спасибо. не знал про Logstalgia. попробую смоделировать лог для нее! =)
0
artzub, #
ух ты!!! это будет на много понятней! надо будет рыть в эту сторону. Слева будут узеры которые какую либо активность делают, а справа типы активности!!! спс еще раз за софтину.
0
artzub, #
какие еще визуализаторы знаешь?
0
Maximus43, #
Spotlight for Oracle :-)
+1
artzub, #
0
Maximus43, #
Прикольно смотрится. Но для социальной активности ненаглядно, первый вариант был лучше, я считаю. Вот если бы графы совместить с посылкой сообщения в виде шарика, тогда было бы еще круче, получились бы такие обстреливающие все вокруг бастионы на карте. :-)
0
artzub, #
для этого надо писать свой визуализатор или переделывать имеющиеся, типа скрестить gource и logstalgia.
0
artzub, #
Или делать срезы данных по одному человеку, тогда можно наглядно увидеть как его комментят и плюсуют.
0
artzub, #
Вот еще вариант www.youtube.com/watch?v=We2m3_9DEZY
тут только по профилю страницы Google+. Тут более понятна активность. бесконечный поток комментариев, импульсное плюсование и решаривание связанное с появлением поста или репоста от гугла+.
0
Aramaki, #
красава
0
frol, #
Ничего непонятно, но эффектно, да… :)
0
artzub, #
что не понятно??? объясню!
0
frol, #
Непонятно зачем показывать видео дальше первой минуты если в большинстве случаев дальше первой минуты там только пчёлы и неясно что они делают даже. Тем более я даже не знаю что это за люди. ;)

Я не думаю что стоит объяснять всё это, так как gource и подобные проекты созданы для демонстрации вау-эффекта, а не для анализа. :)

Другое дело взять свой или просто достаточно небольшой проект с системой контроля версий, посмотреть на себя и на других, где ты знаешь что и где происходило.
0
artzub, #
ну это я делаю регулярно. и оно мне в определенный момент наскучило. Как вы говорит уже не производит эффекта вау! Я генерировал логи для юзеров которые визуализацию в g+ запросили им интересно они себя и друзей видят, естественно на этом видео вам ни чего не понятно но они понимают и узнают, я предоставил средство людям которые захотят разобраться с программой самостоятельно свою активность визуализировать.
Так что вы и правы и не правы =)
+2
Enrey, #
Музыка в заглавном ролике просто шикарная. Отличная работа.
+1
AVGUR, #
Присоединюсь, Кто исполнитель??
+2
artzub, #
Der Song Von Mandelay German and American Songs Karin Schmidt QuartetJazz 2:46
0
AVGUR, #
Спасибо
0
grimich, #
Если вообразить такую визуализацию в масштабах Интернета, то в мозгу создается похожая картинка. Похоже на муравейник — на резонансное событие много народу «набежит» и растищит себе… Интересно вобщем, никогда не думал об онлайне с такой точки зрения
0
grimich, #
растащит*
0
artzub, #
Именно такова результата я и добивался чтоб было наглядно видно, кто интересное постит (у него сразу стая коментеров и других), кто решарить много, а кто просто постит и у него маленький круг друзей. вообщем интересно было это увидеть именно в таком ракурсе =)
0
Aramaki, #
а во втором ролике www.youtube.com/watch?feature=player_embedded&v=qFnu6vjYi_A#at=16 что за музыка?
0
Aramaki, #
начало весьма напоминает вот этот 1 million fps Slow Motion video of bullet impacts made by Werner Mehl from Kurzzeit
0
artzub, #
Artist: Departure Lounge — Move It On (Atom Phunk Remix)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.