Пользователь
0,0
рейтинг
29 мая 2012 в 09:20

Разработка → Визуализация «В Контакте»: Скажи мне, кто твой друг?

Привет, Хабралюди!

У меня есть хобби. Я ночами (в нерабочее время) пишу библиотеку укладки графов: vivagraph.js. Хотел поделиться с вами, узнать что думаете. Визуализировал я сеть друзей своих на «В Контакте» с использованием WebGL. Но лучше один раз увидеть, чем читать, верно?



Это мои друзья. Каждая точка — человек, целый мир, с которым так или иначе мне повезло встретиться. Линия между точками обозначает дружбу. По этой сети можно, правда, сказать многое о человеке.



Как построить сеть своих друзей?

1. Проверьте что браузер поддерживает WebGL: get.webgl.org — должен быть кубик. Если кубика нет — попробуйте другой браузер. Часто хром/лис блокируют видеокарты с устаревшими драйверами. Увы, кубик — это ключ к успешной визуализации :).

2. Зайти на www.yasiv.com/vk — это визуализация ваших друзей на ВК.

3. (опционально) — поделиться своей картой с друзьями, рассказать о сайте. Я буду очень рад, т.к. в маркетинге, увы, ни бум бум (кто там?).

Почему синие квадраты вместо аватарок?

У WebGL есть очень строгие ограничения на картинки, используемые в текстурах. Если они приходят из другого домена, сервер с картинками должен разрешить их кросс-доменное использование. Исправляется добавлением в заголовок ответа с картинкой Access-Control-Allow-Origin:*, но увы, ВКонтакте этого пока не поддерживает. Если вы, читатель, являетесь сотрудником ВКонтакте, и имеете доступ к коду — добавьте, пожалуйста хедер. Я вам спасибо огромное скажу, и визуализацию подправлю :).

Почему WebGL?

Ни CSS, ни SVG, ни даже простой canvas 2D не сравнятся с производительностью WebGL. vivagraph.js поддерживает SVG и CSS, но в обоих случаях основным тормозом визуализации является браузерный код отрисовки элементов. Лишь с использованием WebGL ботлнек перемещается в мой алгоритм укладки :).

Маленький Мир

Помните историю о шести рукопожатиях? Недавний анализ полной сети Фейсбука вывел число 4.7. Я забавы ради начал достраивать сеть от мало знакомого мне друга в неизвестность и такая картина наблюдалась очень часто:
image

Что скажете?

Мне очень-очень важны ваши отзывы и предложения. Это всего лишь мое хобби, но я очень люблю его. Понимаю, что все еще сыровато, и на огромных графах (больше 2000 узлов) все работает слишком медленно. Но вместо того, чтобы пытаться сделать все правильно с первого раза, я хотел бы спросить у вас, что бы вы посоветовали сделать лучше? Ну и буду очень рад, если присоединитесь к проекту и поможете сделать его еще лучше :).
anvaka @anvaka
карма
160,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

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

  • +25
    Хорошая реализация))
    Интересно смотреть на графы и их группы: школа, университет, армия, работа=)
    • +7
      школа, университет, армия, работа, друзья девушки…
      • +15
        «У подруги друга был друг, А у друга куча подруг»
        • +3
          А у меня что в тесте один кубик, что на визуализации один кубик =/
          • +14
            . — forever alone
    • 0
      Спасибо :)! Да, мне очень нравится этот аспект социальных сетей :)
    • 0
      Тут можно сегментацию красивую сделать, например как тут: habrahabr.ru/post/120570/ Сразу выделятся области — тут ВУЗ, тут Коллеги, а тут вообще со школы еще
  • +2
    Понравилось ваше решение. Скажите, визуализацию можно построить только для друзей ВКонтакте, или же можно подать на вход другие данные?

    Например, если бы в качестве источника данных, можно было бы указать JSON-простыню, как в том же The JIT, то интерес к вашему хобби существенно бы повысился, на мой взгляд.
    • +1
      Интересное предложение. Спасибо :)!

      На самом сайте пока что нельзя визуализировать произвольный JSON, но я взял коллекцию разреженных матриц из университета Флориды и сделал игрушку с параметрами самой библиотеки. Вот тут: www.yasiv.com/graphs#Bai/bfwa398

      А вот видео-демо: www.youtube.com/watch?v=L5KrtGB8oA4
      • 0
        Вот за это вам отдельное спасибо! Кстати, есть ли алгоритм автоматического подбора таких параметров, чтобы сразу выделять группы сильной связности и т.п.?

        Посмотрел еще более внимательно, как строится визуализация. Добавить сюда адаптер для экспорта из JSON будет не так сложно, после защиты диплома постараюсь помочь, если будет еще актуально :)
  • +1
    Чудесная идея и и её воплощение. Спасибо!
    Так как невозможно выводить аватары вместо мелких синих квадратиков, то может можно было бы сделать надписи в этих квадратах? Например, ID пользователя или ник, который пользователь указал для отображения ссылки к странице?
    • 0
      С текстом в WebGL еще сложнее чем с картинками :). Но я надеюсь, что кто-то из ВК заметит сообщение. Я им писал в группу о проблемах АПИ, но пока что никто не ответил. Ведь исправить один заголовок в http ответе, надеюсь, не очень сложно :)
      • +1
        Попробуйте попросить об этом brainfucker
      • 0
        Самое интересное что опера аваторки показывает, но не показывает связи(
        • 0
          Ещё интереснее, после включения WebGL вообще ничего не показывает))
      • 0
        Но не безопасно же. Вы лучше проксируйте картинки. Поставьте nginx, который будет проксировать картинки с контакта. Кроме nginx'а ничего не надо, поэтому должен выдержать поток.
        • 0
          Мне хотелось бы как можно меньше вмешиваться во взаимодействие пользователей с Контактом. Я не хочу трогать личные данные… Сейчас как только вы загружаете страницу с кодом визуализации связь с моими серверами обрывается :)…
          • 0
            так вы тоже не будете кешировать фото. только проксировать (доставить в браузер пользователя), не сохраняя на сервере. трафика будет не мало, т.к. будут гонятся картинки пользователей (и только картинки), но сохранять вам их не надо.
            • +1
              Ну да. Больше человеку делать нечего, как положить все мощности серверп и двойной канал на перекачку собственных же картинок им же самим!
  • +13
    Мсье знает толк в графах :-)
    Выглядит круто! По своей сети смог четко увидеть, как разделены друзья с работы от друзей с университета и т.п. Очень интересно! Выложил у себя на страничке. Добавьте у себя на сайте кнопку «лайк вконтакте». И готовьтесь к хабраэффекту :-)
    • +1
      Спасибо большое :)! Добавлю! У меня сейчас уже 2:30 ночи, и я боюсь напартачить где-то в коде :). Надеюсь, не будет слишком поздно…
      • +2
        Ну, по моему опыту хабраэффект длится три дня, после чего наступает спад на уровень в 5 — 10 раз меньший, чем был в первом пике. Но у меня была не такая крутая штука, как эта, поэтому может быть будет и в 10 раз дольше :-) Надо было вам заранее придумать, как «срубить кучу бабла» )))
  • +1
    Добавте кнопки шаринга в соцсетях (но тогда подготовтесь к нагрузкам) ну и было бы круто в картинку сохранять, приближать/удалять, ну и если находятся ярко выраженные группы цвет линков между ними автоматом менять.

    А вообще круто, с интересом разглядывал свою сетку)
    • 0
      Спасибо :)! Картинку сохранять — это в todo списке стоит рядом с интеграцией с соц-сетями (чтобы можно было отослать сразу себе). Обязательно сделаю
  • 0
    Очень круто, и даже полезно.

    Не работает авторизация в фф.
    • +2
      У меня нормально авторизировалось. ФФ 12,0
  • 0
    *Виртуальный плюс*
    Очень интересно не только мысленно, но и визуально наблюдать связи, которых в обычной жизни не было бы.
    • +1
      Спасибо настоящее и от всей души :)!
  • –19
    ИМХО вы сделали просто прикольную игрушку, однако практической пользы от нее ноль целых ноль десятых.

    В фейсбуке www.facebook.com/MyFnetwork сделан лучше и позволяет решать реальные практические задачи — выделение социальных групп (четко видно связанные группы работы, учебы, своих проектов и т.д.), по группам можно оценивать сферы влияния и знакомств, видно одиночные контакты и т.д.

    Это достигается следующими факторами:

    1) Схема не включает «себя». И так понятно что все они связаны с собой, а 200 лишних линий лишь замутняют картину.
    2) Схема выстраивается по группам, а не в один шарик. У вас сейчас совершенно никак не связанные люди могут находиться рядом из-за того, что вы за уши притянули форму к шару. Зачем?!
    3) Размер точки соответствует степени количества взаимных друзей, что позволяет судить о взаимной близости Вас и этого человека.

    В результате при взгляде на схему сразу видно близких друзей и сферы влияния. У вас пока только игрушка.

    Хотя надо признаться, визуализация построения — отменная!
    • +1
      Тут смотря кто и как смотрит и что знает о персонаже…
      Я посмотрел на свой граф и заметил отображение своих черт характера и места где я знакомился с людьми сходу.

      У меня получилось 6 кластеров(зимние-летние школы из них 3).
      Кластера школа не существует, тк таких персонажей осталось 3 человека, которые между собой имеют всего 1 связь.
      Самый сильно связанный кластер- это около Microsoft тусовка.
      Кластер вуз- уже отмирает, не смотря на то что, я уже не окончил (всегда в группе не особо общался, тк разные приоритеты были).

      Много контактов одиночных, которые вообще ни с кем не связанные- это остатки кластеров школа, плаванье с которыми я полностью потерял связь. Много просто не понятных знакомств из интернета…

      В общем, толк есть, хотя бы для само понимания.
      По поводу исключения из списка себя- согласен, я тут не нужен и так понятно, что я все связываю.
      • +2
        Рад, что полезно :). Кстати, себя можно удалить из визуализации. Нажмите на кнопку hide from visualization. Тогда останутся только связующие люди :).
    • 0
      Насколько я понял автора, визуализация сети друзей Вконтакте — всего лишь пример использования его библиотеки. Причем, пример очень неплохо демонстрирует работу библиотеки.

      Лично для меня эта библиотека представляет значительный интерес.
      • +1
        Я рад :)!
    • 0
      Спасибо за критику и ссылку на MyFnetwork =). Прикольную игрушку, надеюсь, переделаю скоро в прикольный проект :)
    • 0
      Весьма полезно и интересно, на примере даже Вконтакте я узнал несколько интересных фактов о своих знакомых в разных городах. Мир очень тесен!
    • 0
      По поводу пункта 1 — себя можно исключить, нужно нажать на квадрат и выбрать hide from visualization
  • +1
    Работа ОГОНЬ. Сколько вы уже пилите эту библиотеку?
    • 0
      Саму библиотеку начал писать чтобы выучить JavaScript :). Писал вечерами и по-выходным, где-то с октября по декабрь, чтобы написать остов. А дальше по чуть-чуть расширял, писал разные визуализации, чтобы понять где напартачил с API.

      WebGL отрисовщик дался очень нелегко, т.к. сложно было перестроиться на низкоуровневый API, переписывал несколько раз, где-то недели две.

      Визуализация ВКонтакте заняла весь вчерашний день =).
  • 0
    У меня в квадратиках аватарки отображаются нормально, видимо автор поправил что то.

    • 0
      зато связей между ними нет
      • +3
        Да, это библиотека обнаружила отсутствие присутствия WebGL и решила порисовать при помощи SVG. Но, к сожалению, SVG очень медленный, чтобы рисовать линии…
    • 0
      Так у вас же написано внизу, что визуализация идёт без WebGl
  • +3
    Интересно было бы почитать про техническую сторону разработки
    • +1
      Наверное, будет хорошо для статьи на хабр. Напишу :).
  • 0
    Круто.

    Есть пара пожеланий:
    — Опция «выделить друзей, которые есть в моём списке, но которых нет в списках моих друзей» (т.е. найти вершины, связанные только с исходной и не связанные с другими вершинами)
    — Возможность отменить действие «добавить друзей друга в граф»
    • 0
      >>добавить друзей друга в граф
      так друзей друзей и не добавляются, только связи между существующими?
      • 0
        Даблклик же?
        • 0
          Каюсь, пропустил видео
  • +8
    Обязательно было выкладывать это в начале рабочего дня? :)
    • 0
      :)
  • 0
    А подгружать картинку, конвертировать её в data uri и вставлять в WebGL никак не получится?..
    • 0
      Очень-очень хорошая идея. Попробую! Спасибо!
  • 0
    Красиво и познавательно! Спасибо за проделанный труд, развивайте!
    • 0
      Спасибо большое!
  • +4
    Ежели у кого в Linux (браузер — Chromium) не отображаются связи, т.е. WebGL не активен…
    Заходим в chrome://flags/ и смотрим значение "Переопределение списка программного рендеринга". Включаем и перезапускаем браузер. Мне помогло.
    Дистрибутив — Linux Mint 12
    About Chromium — 18.0.1025.168 (Сборка для разработчиков 134367 Linux) Built on Ubuntu 11.10, running on LinuxMint 12
    • 0
      Спасибо, работает.
      Gentoo, Chromium 18.0.1025.151
  • 0
    Отличная работа. В идеале, было бы интересно посмотреть на граф всей соц.сети, вот это было бы занимательное зрелище.
    • +1
      Да, я бы тоже рад был построить такое :). Ходят слухи, что полный граф соц-сети выглядит как огроменный ком непонятно чего. Мне кажется, что при правильных весах на ребра графа (сила дружбы) может получится очень даже занятно. Но соц-сети эту информацию скрывают в целях защиты приватности пользователей…
      • 0
        Степени узлов (node degree) в сетях подобного рода распределены экспоненциально (power law), поэтому действительно получится «волосяной комок», который не спасет никакая фильтрация по весу рёбер. Довольно бессмысленное зрелище.
    • +1
      Недавно наткнулся (к сожалению, непомню где) на небольшой занимательный рассказик про недалекое будущее, герой которого для некой Организации писал код робота, который искал закрытые группы в «той самой» соц.сети. Закрытая группа — значит, что её члены связаны только между собой. По прошествию времени он вдруг заметил, что стихла активность в его новостной ленте, что нет ни одного контакта в аське и на звонки больше никто не отвечает. Герой вспоминает про своего робота. Он ищет разгадку и находит какой-то суперсекретный план, согласно которому та самая Организация устраняла эти закрытые группы. Так как у такой группы людей нет внешних связей, то никто и не узнает, что её не стало. Это был план по борьбе с перенаселением. Самого героя миновала сия участь, потому что где-то в коде робота в целях отладки был поставлен 0 на его имени, который он естественно забыл убрать.

      К чему этоя все… к тому, что было бы действительно интересно посмотреть граф всей соц.сети, в частности, на существование таких вот закрытых групп.
      • 0
        а не вспомните, случаем, что за рассказ? :)
        • 0
          Название не вспомню точно, наткнулся где-то в сети, может даже кто-то ссылку кинул. Поищите в гугле по смысловой составляющей, может что попадется.
  • +3
    Есть очень похожее приложение вконтакте, но функционал его не менялся уже давно.
    Да и скорость укладки оставляет желать лучшего.

    «Интерактивный граф друзей» называется.

    Сам был очень удивлен неожиданными связями моих же друзей между собой «через пятое колено».

    +1 за разработку!
    • +1
      Спасибо большое :). Тесный мир…
      • +1
        Я вот думаю, а ведь с вебжл можно такой граф и в 3D развернуть)))
  • 0
    Завораживает…
  • +2
    Странно… У меня одного возникла ассоциация типа «вот так раковая опухоль социальных сетей поражает интернет»? :)
    • 0
      У меня с нейросетью…
  • +1
    Для фейсбука напишите? :)
    • 0
      Очень скоро :).
      • +2
        Хитрая точка :)
  • +2
    А можно прикрутить карту мира? Чтоб отслеживать географическое местоположение друзей. Автору огромное спасибо — действительно с душей подошел.
    • 0
      Спасибо большое за теплые слова! С картой будет тяжело, т.к. обычно наши друзья находятся в одном и том же городе, но мысль интересная, и в целом, можно поэксперементировать
      • 0
        Глядя на список своих друзей, особенно в fb, позволю себе не согласиться с вами. Было бы очень интересно посмотреть на граф с учетом карты, хотя бы стран.
  • 0
    Это шикарно, очень понравилось. Четко разделяет людей на логические группировки.
    Одно ИМХО: объекты, которые имею связь с главным, но не имеют других связей стоит отбрасывать «подальше».
    • 0
      я рад ^^

      Покручу параметры :)…
  • 0
    Этож можно таким образом определять локальных лидеров в кучках )
  • 0
    Получились своеобразные VK Circles. Небольшое предложение: через VK API обычным выделением забивать в группы друзей.

    Круто в общем, респект :)
    • 0
      Спасибо большое :)
  • –1
    Хороший инструмент для ФСБ!
  • +2
    image
    • +7
      Да! Именно такие графы я хочу рисовать в секунды. Но пока, увы, я боюсь представить что случилось с вашим компутером… :)
      • +6
        Признаюсь что ожидал жутких тормозов, но куда там.
        image
        Нагрузка лишь проц, что удивительно. Скроллинг плавный, ничего не весит. Годная штука. Маладца!
    • 0
      Lexx, чур меня…
    • +4
      У вас 5000 друзей?
      Судя по картинке, это полная опа!
  • +1
    Отличная и нужная разработка. Продолжайте в том же духе, молодец!
    • +1
      Спасибо, огромное! Такие слова мотивируют не останавливаться :).
      • +1
        круто что оно в реальном времени рисует и всё меняется, группы сходятся расходятся — завораживает
  • 0
    завораживает
  • 0
    Оч. круто, работа! Скажите, а вы в сторону D3 (https://github.com/mbostock/d3) не смотрели?
    Это довольно мощная штука с хорошим комьюнити, ИМХО было бы круто ваши наработки сделать не нем.
    • +1
      Конечно, мы переписывались несколько раз с Майком Бостоком. У него очень классная библиотека, но я хочу сфокусироваться лишь на графах, и сделать одну из самых быстрых библиотек в вебе :).
      • 0
        Да, d3 сильно тормозит при большом количестве нод.
      • +1
        Забавно удалить себя из паутины: «друзья» разделились на две разные группы, без каких-либо связей между ними.
  • 0
    Занимательно
  • 0
    Отличную вещь вы сделали!

    Построил граф для одного из проектов в которых участвовал, сразу видны самые активные пользователи, с ними то и нужно поработать. Не хватает сохранения графа и последующее открытие, чтобы не строить его каждый раз.
  • 0
    Щикааарно! (с)

    А теорию шести рукопожатиях не пытались анализировать?) Просто вскользь в статье упомянули, хотелось бы еще что-нибудь услышать) или как проверить самостоятельно…
    • 0
      И еще… А кнопки «Выйти» нету? Хотел другие аккаунты посмотреть, но не понял как это сделать.
      • 0
        Залогинся в Вконтакте под другим юзером и обнови сабжевую страницу
        • 0
          Не помогло, так бы не писал…
          • 0
            Значит чистить куки. Только что проверил — таки да.
            • 0
              До очевидного не догадался :(
              Спасибо :)
              • 0
                Да я сам изначально руководствовался логикой и предположил что этого будет достаточно. Да и проверить тогда не на ком было :) Главное — вопрос решен!
                • 0
                  Еще можно в адресной строке написать javascript: а потом вставить VK.Auth.logout(); — это тоже хакорский способ… Нужно сделать кнопку :).
    • 0
      Ее вроде как Цукерберг обещался проверить. Не слышали ничего про это?
  • 0
    Магия!
  • 0
    Лишь два шага — друзья моих друзей. 1.5 гб оперативы откушало.
    Уже заметно притормаживают все анимации, хотя комп очень мощный.
    Интересно, что даже люди из других стран имеют много связей с основным :-)
    • 0
      Интересно: сколько у вас друзей?
      • 0
        Меньше 100
      • 0
        Зеленые линии — друзья
    • 0
      ох наверно за такое количество api запросов сайт скоро заблокируют
      • 0
        Нет, не заблокировали
    • 0
      А как сделать друзья друзей?
      • +1
        Два раза кликнуть по другу.
  • +1
    Спасибо! Залип!
  • +2
    Поразительная штука. Честно: самый крутой инструмент для представления социальных кругов. Ведь каждый человек сразу в нескольких кругах: работа, семья, может институт, может друзья со школы… И сразу видно, что такой-то друг со школы знаком с, допустим, другом с работы.
  • 0
    а как вы добавили такие всплывающие облачка с текстом?

    дело в том мои друзья объеденяються в кластеры-группы и я их хочу подписать для себя. но кнопки добавить текстовую метку не нашел ;((
  • +4
    А кто пробовал себя 'Hide from visualisation'?
  • +1
    Очень крутая вещь, спасибо вам! Интересно рассматривать различные группы друзей, собранные в течение жизни.
    А вот когда я посмотрел человека с 2к друзей, то даже страшно стало:)
    • +1
      круто что когда оно кластиризуется в облака можно кликнуть в цент и понять какие люди там всех знаю — напомнило про книгу «Точка кипения»
  • 0
    Для фейсбука очень хочется
    • 0
      • 0
        По двойному клику не открываются друзья друзей. В VK открываются, но у меня там друзей мало :)
        • 0
          Проверил, вроде бы все работает. А это какой-то конретный пользователь не открывается? Или все?
  • 0
    Классно сделано!
    Мы год назад начинали.

    У нас кроме дружеских связей еще анализируется количество сообщений на стенах (жирностью линий отмечено в графе).

    Проект тоже открытый.
  • 0
    Пропиарил у себя в ФБ.
    • +2
      Буква С не пропущена?
      • 0
        ищу куда ее воткнуть можно чтоб получилось ожидаемое вами слово…
        • –1
          Между двумя другими — такими же большими…
  • 0
    Вконтакте просто обязаны вас купить! :) (в хорошем смысле)
  • 0
    image

    forever alone + Баг ))
    • +1


      Пардон, ссылка умерла уже
      • 0
        Ммм… Может быть, заблокирован доступ к друзьям? Признаться, я впервые такое вижу…
        • +1
          Дело в том, что друзей у пользователя как раз там нет, потому и «forever alone». Т.е. как я понимаю проверки это нет.
          • 0
            аа :) Я понял! Граничный случай. Срочно добавьте друзей пользователю. А я ошибку поправлю тем временем :)
  • 0
    Андрюха, спасибо большое! Действительно многое можно рассказать по друзьям человека, у меня явно прослеживаются две группы с большой связностью: универститеские друзья и школьные, и только у пары человек есть связи между этими группами, не считая меня.
  • 0
    В Firefox на Fullscreen не расширяются круги. и не выходят за рамки

    image
    • 0
      Да, скорее всего, это из-за этой строчки в коде. По идее, если обновить окошко, должно нормально показываться…
      • 0
        Так если обновить, он заново начинает круги строить :(
        • 0
          да, увы… Поправлю баг :). Простите, что пока так…
          • 0
            Та не страшно. И так нереально круто)
  • +1
    Обладеть. Впервые визуализация соц. сетей так удивила. O_o
    Спасибо
    • 0
      Вам спасибо :). Мне приятно.
    • +2
      можно сказать, впервые увидел именно сеть
  • +2
    Очень обрадовало :) Бессонные ночи прошли не зря
  • +2
    Комрад!
    Для livejournal, пожалуйста!!! Очень уж хочется
  • 0
    Году так в 2008 видел подобную реализацию на питоне. Запускается некий скрипт и генерирует статическую HTML-страницу. Возможно, даже на хабре было.

    Кстати, вот и оно: vkontakte.net.ru/
  • +6
    Это мои друзья. Каждая точка — человек, целый мир, с которым так или иначе мне повезло встретиться. Линия между точками обозначает дружбу. По этой сети можно, правда, сказать многое о человеке.
    Работа прекрасная, а эта фраза явно лишняя.

    image
    • 0
      Ну всех не ровняйте под одну гребёнку. У меня в «друзьях» — именно друзья. Никого «левого».
      Фраза неоднозначная, но не лишняя.
      • 0
        Я Друзей сложил в группу “Друзья”, остальных тоже стараюсь по группам распихивать.И добавляю периодически всяких там.
        • 0
          Во, а я со «всякими так» только в скайпе общаюсь :)
    • 0
      Боб на Никсона похож =)
  • +2
    Очень круто для хоби однако, вы молодец. Что нужно добавить: шаринг в соц. сетях, в первую очередь вконтакте. Что можно добавить: живой поиск, допилить юзабилити (кнопки зума, возврата к себе/предыдущему другу, внятный интерфейс в общем, что-то вроде тулбара включая кнопку Hide from visualization), больше статистики. Можно сделать диалог с отображением степени связности. Возможность добавлять метки к друзьям, например когда познакомились, при каких обстоятельствах. Экпорт в файл само собой.
    • 0
      Здорово! Спасибо огромное за теплые слова и предложения! Мне нравится идея с тулбаром. Хотелось бы очень многое прикрутить, т.к. разработчик во мне находит тысячу и одну полезную фичу, а вот перегрузить интерфейс страшно :). Да и чтобы скрыть свои дизайнерские недостатки пытаюсь по-минимуму делать элементов управления :).
  • +4
    Ого, спасибо, полезная штука…

    • 0
      O_O
      Внезапно :). Ваш друг?
      • 0
        Друг друга друга.
  • +2
    Я бы еще сделал чтобы в зависимости от количества друзей увеличивался квадратик пользователя. а то когда на страницу > 9000 квадратов, трудно попасть в главного
  • 0
    Какая-то трабла в хроме: окно авторизации закрывается сразу после открытия, успевает только на 1сек показаться.
    В 12й лисе строит граф, показывает его, но не показывает аватарки.
    В Opera Next 1433 показывает аватарки, но не показывает, граф.

    Опять у меня ничего не работает(
    • +1
      У меня в хроме не запустился куб((
      В фоксе 12: для Контакта нет синих квадратиков — только связи, ухватить мышкой не за что чтобы переместить друзей относительно друг друза
      для Фэйсбука — вместо контактов чёрные квадраты и за квадраты перемещать друзей не могу, перемещается весь граф
      опера не заработала, тоже ошибка вебгл
      небольшой багрепорт clck.ru/d/YBLrjhY719U9v

      По мне так крайне необходимо:
      — кнопка шаринга в соцсети
      — кнопка выхода из аккаунта
      — небольшая кнопка инструкции из которой открывается окно где можно прочесть управление (на работе не у всех есть возможность посмотреть ютуб, а некоторые мои знакомые ходят в соцсети только с работы:)
      — возвращение «к себе», а точнее к своему самому ближайшему кругу — центрирование этого круга границах области просмотра (хотя это спорно, но как то же надо возвращаться «назад»)

      Ну всякие мелочи по интерфейсу это к Артемию Лебедеву и иже с ними. Мне как пользователю главное функционал. И последнее — НЕ перегружайте интерфейс, даже в таком виде штука классная
  • 0
    Идеально было бы еще:
    -Раскрыть «друзей друзей». А то на каждом дважды тыкать замучаешься.
  • 0
    vk.com/app2353824_14882053 — одно из приложений для ВК
    apps.facebook.com/challenger_meurs — одно из приложений для ФБ

    • 0
      А что является ограничивающим фактором в скорости построения? Или это так специально?
      • 0
        Предыдущий комментарий предназначался для первого уровня.
      • 0
        Я не нашел bulk API В Контакте, чотбы одним махом вытащить граф всех друзей. Потому для каждого друга запрашиваются его друзья отдельно, и граф достраивается постепенно
        • 0
          Это запрашивание происходит на клиенте?
          Если да то можно спокойно тащить сколько получается, а не раз в секунду.
          • 0
            Да, все идет с клиента, но с использованием ВКонтактовской библиотеки OpenAPI — они могут и ограничивать скорость…

            Среди кодов возвращаемых ошибко в документации описан код «Слишком много запросов». Пока не буду пытаться ускориться обходом API. Скорре наоборот, как советовал deNULL воспользуюсь execute() методом
  • 0
    От чего зависит расстояние от меня до друга?
    • +3
      Только от сил действующих на узлы, никакой дополнительно метрики В Контакте я не использую… На каждый узел действует несколько сил
      — узлы отталкиваются друг от друга по закону Кулона
      — узлы связанные ребром притягиваются к друг другу по закону Гука
      — масса узла определяется количеством его связей. Чем больше связей — тем «тяжлее» узел, и тем сильнее он отталиквает всех соседей.
      — вес ребра я пока определяю тоже количеством связей целевой вершины.
  • +2
    Паузу бы и отмену =) А так — очень здорово, спасибо за труды.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    А можно как-то посмотреть граф для группы(сообщества)? И ещё граф для произвольного человека, без себя.
  • 0
    Очень поравилось! Граф классно показывает «разделение» друзей по группам.
  • 0
    Я вообще не знаю зачем мне это, но очень понравилось =)
  • 0
    Если зайти с одной странички вк, потом сменить ее, то даже после обновления кругов они будут строится по старой страничке.
  • 0
    Браво! шикарно просто! Спасибо за опен сорс — как раз нужно было что-то подобное для визуализации сеток сайтов :)
  • 0
    Какая-то мистика. Первый раз все работало корректно, после перезапуска браузера все сломалось, вижу только аватарки. Яндекс.хром 18.0.1025.164
    • 0
      WebGL может капризничать. Попробуйте еще раз рестартануть браузер
      • 0
        Все пришло в норму.
        Кстати, было бы не плохо, если бы была возможность выделять связи конкретного человека не только наведением курсора, но и одиночным кликом.
  • +1
    Очень простой хак, как легко шарить картинку (Firefox Only):

    1. Дожидаемся окончания загрузки
    2. Нажимаем ПКМ в области графики, «Save image as»
    3. Сохраняем картинку, вставляем в VK.
    4. Profit
  • +1
    Почему еще никто не предложил кэшировать запросы о пользователях?
    Или нельзя?
  • 0
    У меня граф к сожалению представлен без картинок, вот так



    ubuntu 10.04 Chrome

    Эти графы очень крутая штука, это как индивидуальная подпись человека. Я уже как-то здесь давал пруфлинк на свой нынезаоброшенный блог, про анонимность в сетях GSM: dlinyj.ru/apparatnaya-anonimnost-v-setyax-gsm/

    Мой респект за идею. С удовольствием поглядел бы графы других моих друзей. А так же графы, например ЖЖ. Так интересно поглядеть связи.

    З.Ы. Нехватает возможности вращения графа.
    • +2
      У меня пролагалось и заработало. В восхищении. На счёт вращения и растягивания графов всё актуально. Куда переводить деньги на поддержание проекта? (Вопрос полностью серьёзен)
      • 0
        Спасибо огромное :). Лучше всяких денег ваша поддержка :)!
  • +3
    Меня подобная идея посещала уже давно, я даже начал писать простенькое приложение непосредственно в самой сети — так как писал на флэше, проблем с отображением аватарок не было. Правда, я смалодушничал и воспользовался готовой библиотекой для укладки графа, да и параметры не докрутил — картинка «стабилизируется» небыстро (зато в некотором смысле красиво :).

    Вставлю пару полезных советов, исходя из опыта работы с API ВКонтакте: обратите внимание на методы friends.getMutual (вернуть общих друзей у двух пользователей) и execute (позволяет объединить несколько запросов к API в один запрос). В моем приложении в один execute успешно запихивается сразу 25 запросов friends.getMutual — соответственно, связи загружаются значительно быстрее.
    • 0
      Ваша реализация мне понравилась больше. Хотя бы потому, что отрисовывается быстрее и стабильнее.
    • 0
      Сделано неплохо, но даже при моём не самом большом количестве друзей в сотню, уже трудно понять куда идут линии.
    • 0
      Спасибо за советы! Обязательно попробую ускориться.
  • 0
    Вам бы кэш всего этого прикрутить :)
    А то долго грузится с API
  • +2
    image
    Кривость вылезла.
    Mac os X 10.7.4, хром 19.0.1084.52

    Ну да ладно.

    Тыкаю на рандомных друзей и смотрю как разрастается дерево и умирает мой ноут!
    Это офигенно.

    Спасибо, залип.
  • 0
    Классно сделано! Красиво, быстро, наглядно!
  • +1
    Держите плюс, граф!
  • 0
    Я думаю не лишним функционалом будет возможность перетаскивания квадратиков. А-то бывает они автоматом встают не очень удобно, особенно когда этих квадратиков много.
    • 0
      Согласен!
  • 0
    Спасибо, я тоже писал похожую библиотеку только для canvas и судя по сложности конечно моя значительно проще/хуже вышла
  • 0
    И ещё не плохо было бы оставлять подсвеченными линии связи когда кликнешь по квадратику, а не только при наведении курсора.
  • +3
    Мужик, ты крут! Моя мама аплодирует тебе стоя. Теперь мой младший брат под колпаком :)
    • 0
      Упс :).
      • 0
        Да ништяг. Теперь она по крайней мере знает, что его круг общения типичная тупая гламурная школота, а не всякие гопники-наркоманы, как она считала все это время :)
        • 0
          Но ведь никто не мешает ему френдить только «тупую гламурную школоту», при этом вращаясь в среде гопников и наркоманов.
          • 0
            НУ конечно не мешает. Но это должна быть связанная тусовка школоты, чтобы она сформировала заметный такой ком.
  • 0
    Ещё не помешал бы счётчик количества квадратиков и связей.
  • 0
    Если вы добавите возможность указывать как стартовую точку не только себя но и других людей а также группы или публичные страницы сммщики вас будут боготворить.

    Эту идею можно развивать, в плане сегментации по полу, возрасту, географическому положению и т.д.

    (как идея для платной версии)

    А если вы будете сохранять результаты поисков на своем сайте в общую базу и потихоньку собирать общий граф вконтакта то сможете реализовать поиск пути от одной личности до другой через общих знакомых. А за такой сервис будут готовы платить.
    • +1
      А если вы будете сохранять результаты поисков на своем сайте в общую базу и потихоньку собирать общий граф вконтакта то сможете реализовать поиск пути от одной личности до другой через общих знакомых. А за такой сервис будут готовы платить.

      Такой сервис уже существует и бесплатен.
      • 0
        Спасибо, за ссылку

        Но у автора статьи визуализация, как мне кажется, намного лучше. Помогает не просто отследить путь но понять через какие связки пользователей проходит этот путь.
        • 0
          Ну так цели же совсем разные. У автора топика речь идет про блуждание по своим «окрестностям», а тут сервис, чтобы именно искать путь от одного определенного пользователя до другого.

          Лично я, кстати, в момент его выхода был поражен, что вообще такую непростую алгоритмическую задачу удалось эффективно решить.
  • 0
    Год назад начинал писать аналогичную программу, правда хотел сделать трёхмерной: вы — вершина пирамиды, в зависимости от количества общих друзей меняется расстояние от вершины, а угол от вершины меняется в зависимости от «качества» связи. Тогда правда не до конца разобрался с контактовским API, и сама визуализация получилась кривоватая. У вас бы хорошо вышло, если полученный граф можно было бы вытягивать вверх от себя: группы друзей уже есть, ввести пропорциональное расстояние и проекцию этого дела.
  • 0
    Только у меня хабраэффект?
    • 0
      У меня работает (тьфу-тьфу-тьфу). Воспроизводится во всех браузерах?
      • 0
        Сам сайт не открывается. Chrome 19.0.1084.52 m.
        • 0
          Вы заходите по прямой ссылке? вот так: www.yasiv.com/vk? Ато у меня днс не работает, если идти на корневой домен, без www префикса…
          • 0
            Да, www указываю. Просто видимо у моего провайдера DNS для этого домена еще не обновились.
  • +1
    А я при помощи этой штуки вычислил всех девушек, которых мой лучший друг от меня прячет) Ей можно найти массу применений, спасибо)
  • +1
    А как вы просмотриваете второй круг? Таких контролов там нет(
    • +1
      дабл клик на квадратик и открываются его связи. Ну и цвет им рекомендуется задать.
  • 0
    Аватарки можно кешировать и пережимать (кроп квадратом) на другом сервере. Могу написать скрипт и выделить 1гб на своем сервере, если интересно.
  • 0
    Я как-то раз хотел построить граф хабра (по мотивам одноименной статьи где-то на хабре), но около 200к нод/еджей не потянула ни моя видяха, ни проц. Также, я не нашел подходящей софтины, при помощи которой можно было бы это отрендерить (а перепробовал я не мало разных). Поэтому как бы получается, что я зря мучал сервер, себя и домашний комп.

    Вот упрощенный дамп распарсенного: ifolder.ru/30808425

    Есть и более полный дамп (я почти все парсил), но я не думаю что будет этично его выкладывать. Впрочем, если это кому-нибудь надо для хороших целей — залью в приват (600 метров в json). Также имеются выгруженные аватарки, которых нет в архиве.
  • 0
    Не пробовали копнуть в сторону YQL для использования его, как прокси?
  • 0
    Интересное занятие, которое в любой момент можно перевести из состояния хобби в практически применимую научную деятельность различных областей, особенно, где используется статистическая обработка данных (например, медицина).
    Очень понравилась реализация идеи! Утянул попользоваться для курсовой. Спасибо!
  • 0
    По поводу популяризации: поставьте кнопку «мне нравится» из вконтакта.
  • 0
    Автор, поделитесь статистикой посещений, пожалуйста! :-)
    • +1
      Почти 65 тыщ уникальных визитов с момента публикации. 25 с Хабра, 22 с Вконтакта. Кнопку «Мне Нравится» нужно было ставить в первый день — было моей ошибкой :). Среднее время на сайте — 3 минуты. Большего успеха у меня еще не было. Спасибо большое, Хабр :)!
      • 0
        Спасибо! А выложите через несколько дней скриншот графиков посещений за несколько дней, чтобы можно было увидеть динамику рост/падение? :-)
        • 0
          вот четыре года спустя — делюсь. За все:
          page views: 615,771
          unique page views: 402,895
          Avg time on page: 00:05:02
          Bounce rate: 67.48%

          Трафик падал стабильно до сентября 2012, после чего остановился на 7-9 тысячах посещений в месяц.
  • 0
    Спасибо большое за Ваши труды. Опциональный пункт номер 3 я выполнил.
    У меня есть предложения:
    1)Хорошо бы при клике на кубик человека сделать наиболее короткое расстояние от него до себя.
    2)Выделять несколько большим кубиком того человека, у которого с вами много общих друзей (так будет видно центры объединения)
  • 0
    Пожалуйста, добавьте небольшую текстовую справку по возможностям. О двойном клике узнал, например, из комментариев.

    Отличная штука, спасибо!
    • 0
      И, ради любопытства, добавьте, пожалуйста, «добавить друзей всех друзей»… Интересно, выдержит ли компьютер :-)))
  • 0
    Не по сабжу.
    Что за музыка использовалась в демо?
    Уж очень понравилось =) Щас найти никак не могу =)
  • 0
    Уважаемый автор пришло время делиться скриншотами с яндекс/гугл метрики с динамикой роста и падения посещаемости :-) Очень интересно =)
    • +1
      image

      И на всякий случай на твитпике. Вирусного распространения не произошло. Я там писал что ни бум бум в маркетинге (это правда), но такого успеха я совсем не ожидал. Больше 2000 лайков на ВК, больше 1000 твитов, больше 300 фолловеров на гитхабе и главное очень много ценных советов и теплых слов поддержки. Что теперь дальше с этим делать и как покорять весь ВК — не знаю :).
      • 0
        Спасибо! 500 тышш посещений!!!
        Вирусное распространение, по идее, будет проявляться иногда в виде некоторых пиковых всплесков :-) Например какой-нибудь блогер выложит себе и с него все потырят, или залайкает кто-то с кучей друзей и снова пик небольшой.
        Если хотите покорять весь ВК, для начала можно создать группу, поприглашать друзей, попросить поприглашать друзей друзей, залайкать. И потом от лица группы выкладывать новости: «узнай, сколько рукопожатий до Медведева», «появилась возможность выкладывать картинку своей сети себе на стену» ну и т.п. :-)

        Что с этим делать? Мне бы ваши проблемы :-)) как минимум это огромный плюс в ваше CV. Ну вам, конечно, может быть все равно, если вы работаете там, где хотите работать всю оставшуюся жизнь :-)
  • 0
    Очень полезная штука! Автору респект!
  • 0
    upd: на моей стороне косяк, всё работает.
    • 0
      опять сломалось, 404 :(
      • 0
        Вы точно с www в начале вводите?

        www.yasiv.com/vk — вот так должно работать…
        • 0
          Без ввв делал, как собственно было указано в посте изначально, и разместил ссылку в вк, собственно оттуда и узнал что 404 стала :) с ввв всё работает. спасибо.
  • 0
    При входе в ВК выдает "{«error»:«invalid_request»,«error_description»:«Security Error»}". Проект все?
    • 0
      Проверил, все работает. Попробуйте:

      1. Открыть vk.com, и выйти из сайта.
      2. Снова авторизироваться на vk.com
      • 0
        Да, помогло. Спасибо!
  • 0
    Вот это красота! Уже добавлено разделение по полу. Спасибо! Я лучше понимаю теперь круг своих друзей. Вот даже подписал крупные группы.

    image
    • 0
      Если удалить себя на графе, то группы станут более четкими, также появятся точки без связей — в большинстве это будут случайные знакомые
      • 0
        Спасибо. Интересно. Надо попробовать. Только это не «случайные знакомые», а «разные девушки», ну и ещё разные тематические знакомства, они не случайные, а наоборот целенаправленные. =)
  • 0
    Как можно это использовать на практике? Допустим, есть человек, с которым мне хочется познакомиться. Найдена связь через «четыре с половиной» рукопожатия. Что дальше?
  • 0
    Можно добавлять еще сети, а удалить как-нибудь можно? (Не удаляя по отдельности людей.)
  • 0
    Ничего не предъявляю. Но вчера с моего аккаунта VK начали писать сообщения рекламного характера в некоторых группах с ip-шника откуда-то из Калуги. Я точно нигде ничего не засветил, никуда ничего не вводил, не подключался к чужим wi-fi сетям, ничего подозрительного не устанавливал. Однако позавчера заходил на этот www.yasiv.com/vk. Я ничего не утверждаю. Просто как факт.
    • 0
      Я просто реально не представляю, где мог слить пароли. И раньше такого никогда не было.
    • 0
      Искренне сочувствую. Визулизация вконтакте использует аутентификацию самого вконтакта, которая проходит по https (зашифрованный протокол). Врядли вас могли хакнуть через yasiv.

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