Как стать автором
Обновить

Комментарии 255

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть пара пожеланий:
— Опция «выделить друзей, которые есть в моём списке, но которых нет в списках моих друзей» (т.е. найти вершины, связанные только с исходной и не связанные с другими вершинами)
— Возможность отменить действие «добавить друзей друга в граф»
>>добавить друзей друга в граф
так друзей друзей и не добавляются, только связи между существующими?
Даблклик же?
Каюсь, пропустил видео
Обязательно было выкладывать это в начале рабочего дня? :)
:)
А подгружать картинку, конвертировать её в data uri и вставлять в WebGL никак не получится?..
Очень-очень хорошая идея. Попробую! Спасибо!
Красиво и познавательно! Спасибо за проделанный труд, развивайте!
Спасибо большое!
Ежели у кого в 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
Спасибо, работает.
Gentoo, Chromium 18.0.1025.151
Отличная работа. В идеале, было бы интересно посмотреть на граф всей соц.сети, вот это было бы занимательное зрелище.
Да, я бы тоже рад был построить такое :). Ходят слухи, что полный граф соц-сети выглядит как огроменный ком непонятно чего. Мне кажется, что при правильных весах на ребра графа (сила дружбы) может получится очень даже занятно. Но соц-сети эту информацию скрывают в целях защиты приватности пользователей…
Степени узлов (node degree) в сетях подобного рода распределены экспоненциально (power law), поэтому действительно получится «волосяной комок», который не спасет никакая фильтрация по весу рёбер. Довольно бессмысленное зрелище.
Недавно наткнулся (к сожалению, непомню где) на небольшой занимательный рассказик про недалекое будущее, герой которого для некой Организации писал код робота, который искал закрытые группы в «той самой» соц.сети. Закрытая группа — значит, что её члены связаны только между собой. По прошествию времени он вдруг заметил, что стихла активность в его новостной ленте, что нет ни одного контакта в аське и на звонки больше никто не отвечает. Герой вспоминает про своего робота. Он ищет разгадку и находит какой-то суперсекретный план, согласно которому та самая Организация устраняла эти закрытые группы. Так как у такой группы людей нет внешних связей, то никто и не узнает, что её не стало. Это был план по борьбе с перенаселением. Самого героя миновала сия участь, потому что где-то в коде робота в целях отладки был поставлен 0 на его имени, который он естественно забыл убрать.

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

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

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

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

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

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

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

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

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

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

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

forever alone + Баг ))


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

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

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

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

O_O
Внезапно :). Ваш друг?
Друг друга друга.
Я бы еще сделал чтобы в зависимости от количества друзей увеличивался квадратик пользователя. а то когда на страницу > 9000 квадратов, трудно попасть в главного
НЛО прилетело и опубликовало эту надпись здесь
У меня в хроме не запустился куб((
В фоксе 12: для Контакта нет синих квадратиков — только связи, ухватить мышкой не за что чтобы переместить друзей относительно друг друза
для Фэйсбука — вместо контактов чёрные квадраты и за квадраты перемещать друзей не могу, перемещается весь граф
опера не заработала, тоже ошибка вебгл
небольшой багрепорт clck.ru/d/YBLrjhY719U9v

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

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

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

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



ubuntu 10.04 Chrome

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

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

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

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

Ну да ладно.

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

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

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

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

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

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

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

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

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

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

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

Отличная штука, спасибо!
И, ради любопытства, добавьте, пожалуйста, «добавить друзей всех друзей»… Интересно, выдержит ли компьютер :-)))
Не по сабжу.
Что за музыка использовалась в демо?
Уж очень понравилось =) Щас найти никак не могу =)
Композиция Carly Comando – Everyday
Можно посмотреть здесь: www.digitalcitrus.com/2007/carly-comando-everyday/
Там же есть ссылка на видео, которое сделало её ещё популярнее.
Уважаемый автор пришло время делиться скриншотами с яндекс/гугл метрики с динамикой роста и падения посещаемости :-) Очень интересно =)
image

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

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

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

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

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