Визуализация на Twitter връзки с Twings

Винаги съм намирал за интересно да видя дали хората, които аз следвам в Twitter ме следват обратно и как, разбира се, тези хора са свързани по някакъв начин един с друг. Особено след като LinkedIn пуснаха тяхна подобна визуализация, винаги съм смятал, че Twitter остава недопрограмиран :). И естествено, визуалната презентация (визуализация) на тези връзки трябваше да се постигне по някакъв начин. И в крайна сметка за връзките избрах точки и кръгове.

Визуализация на Twitter връзки с Twings

Основната идея беше този инструмент да работи основно на клиентската машина. Използване AJAX за дърпане на данните, localStorage за да се съхранят те временно в браузъра и SVG (от HTML5) за визуализацията. След като тези технологии са така изброени и сами се сещате, че тази “апликация” ще върви само в модерни браузъри (Chrome 10+, Firefox 4+, IE9+).

Визуализирайте Twitter връзките си сега!

Самата идея е базирана на това, как съм свързан с другия акаунт. Всеки от контактите се маркира като follower, following или приятел (т.е. човек, който ме следва и аз го следвам обратно). Ако имате голям брой followers и following връзки, определено може да изникне проблем с localStorage лимита, който за повечето браузъри е около 5MB.

Финалната стъпка е да се създаде визуализацията, за която избрахме SVG. Използва се проста математика за да се създадат кръговете от Туитър акаунти. За момента няма специфично правило написано в апликацията, под което да се подреждат акаунтите. Просто ги поставяме като точки с различни настройки (цветове и радиус) за различните видове акаунти. Тази част най-вероятно ще се ъпгрейдне, за да може да се визуализира по някакъв критерий като например популярност или нещо друго.

Можете да минете отгоре с мишката (hover) върху точките и по този начин ще видите повече информация за съответния контакт. Съответно при кликане, ще ви заведе на неговата страница в Twitter.

Визуализирайте Twitter връзките си сега!

* Twings е разработена заедно и с помощта на Ivan Lazarevic