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

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

    У меня есть хобби. Я ночами (в нерабочее время) пишу библиотеку укладки графов: 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 узлов) все работает слишком медленно. Но вместо того, чтобы пытаться сделать все правильно с первого раза, я хотел бы спросить у вас, что бы вы посоветовали сделать лучше? Ну и буду очень рад, если присоединитесь к проекту и поможете сделать его еще лучше :).
    Поделиться публикацией
    Комментарии 255
      +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
                                              А подгружать картинку, конвертировать её в 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
                                                                                                          Друзья друзей — вручную каждого добавляли?
                                                                                                            0
                                                                                                            Прошло 5 лет с того сообщения и я не упомню :-)
                                                                                                            Совершенно точно что писал какой-то скрипт. Может быть он даже где-то сохранился.
                                                                                                            В ручную я не мог это сделать — слишком много точек.
                                                                                                        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
                                                                                                                                                                                                                              По поводу популяризации: поставьте кнопку «мне нравится» из вконтакта.