У меня есть хобби. Я ночами (в нерабочее время) пишу библиотеку укладки графов: 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. Я забавы ради начал достраивать сеть от мало знакомого мне друга в неизвестность и такая картина наблюдалась очень часто:
Что скажете?
Мне очень-очень важны ваши отзывы и предложения. Это всего лишь мое хобби, но я очень люблю его. Понимаю, что все еще сыровато, и на огромных графах (больше 2000 узлов) все работает слишком медленно. Но вместо того, чтобы пытаться сделать все правильно с первого раза, я хотел бы спросить у вас, что бы вы посоветовали сделать лучше? Ну и буду очень рад, если присоединитесь к проекту и поможете сделать его еще лучше :).
- Разработка веб-сайтов
- JavaScript
Источник: habr.com
VK Messages Visual Statistics
Бесплатный плагин VK Messages Visual Statistics предоставляет полную статистику переписки, а также информацию о друзьях в социальной сети Вконтакте (ВК / VK). Приложение разработано для тех, кто хочет видеть, кто заходит на страницу без цели, и с кем общается пользователь.
Мастер-класс «Как быстро найти клиентов и партнеров в ВК. Работа по новой системе»
Функции плагина
Все данные представляются в виде круговой диаграммы. Иконки отображают активность пользователей. В центре находится ID владельца страницы. Чем ближе иконка к центру, тем активнее собеседник. Они могут меняться в зависимости от количества сообщений и обновляются с каждым новым письмом.
- статистика входящих и исходящих сообщений;
- сравнение сообщений за отдельный промежуток времени;
- данные по количеству символов (с пробелами / без пробелов);
- наложение графиков для визуального оформления;
- сравнение по каждому собеседнику.
Примечание: приложение постоянно обновляется и исправляется. На данный момент программа доступна с открытым кодом. То есть любой желающий с определёнными навыками может создать свою версию приложения с аналогичными или доработанными функциями.
Как скачать программу
Приложение можно скачать с официального магазина Google Chrome. Плагин не требует платной подписки и распространяется абсолютно бесплатно.
Пошаговая инструкция для установки:
- Перейдите по этой ссылке.
- Нажать клавишу «Установить».
- После загрузки выбрать кнопку «Установить расширение».
- После установки система потребует авторизоваться во ВК. Нужно ввести логин и пароль.
- Разрешить доступ к личной информации.
- Можно пользоваться плагином.
VK Messages Visual Statistics открывает большие возможности для пользователей. Плагин проверяет активность собеседников, строит яркие диаграммы и устанавливается просто. Даже новичок справится с инструментом.
Источник: vkgid.ru
Визуализация ВКонтакте
+31 
5 36 
Поделиться
| MoD_X 6212 | 0 209 видео 191 пост 10 друзей |
anvaka (Andrei Kashcha) — «Это мои друзья. Каждая точка — человек. Линия между точками обозначает дружбу. Более подробное описание есть на хабре: habrahabr.ru/post/144758/
Для того чтобы построить свою сеть нужно проверить поддерживается ли WebGL вашим браузером. get.webgl.org/ — должен быть виден кубик. Если кубик виден, идем на www.yasiv.com/vk — это ваша сеть друзей.
Увы, ВКонтакте не поддерживает (пока) возможности вставки изображений в текстуры, потому видны только точки, вместо лиц.
Визуализация построена при помощи моей библиотеки укладки графов vivagraph.js (https://github.com/anvaka/VivaGraphJS ). Граф рисуется посредством WebGL.
ЗЫЖ читал несколько раз настороженные отзывы о недоверии программе. Весь код — открытый. Любой разработчик может посмотреть что делает сайт. Все взаимодействие ведется исключительно с серверами ВКонтакте. Ни при каких обстоятельствах я не буду сохранять ваши данные у себя. Ваша сеть — ваша, и я ценю вашу безопасность так же, как ценю свою.»
Источник: hlamer.ru