Вовед

Во светот има милиони програмери кои работат на уште толку проекти , тие работат заедно во цел да го направат софтверот подобар создаваат огромни проекти кои имаат преголеми количини на код. Дел од познатите оpen-source страни објавуваат статистики за тоа колку проекти имаат ,Source Forge има преку 230 000 проекти и преку 2 милиони регистрирани корисници , Google Code има преку 250 000 проекти. Едно од прашањата кое сигурно би го поставиле е како може да се следи сето тоа ? Една од опциите е техниката за органска визуелизација на информации. За разлика од повеќето апликации за визуелизација кои даваат квантитативен поглед на податоците идејата тука е да се даде квалитативен. Квалитативниот поглед на информациите не е наменет да ги замени досегашните техники туку да ни даде приказ за еден тип на полежерни корисници . Code Swarm e почнат како проект на Michael Ogawa од VIDI лабораторијата во универзитетот Дејвис.

   Слични проекти

 Некои од техниките се направeни под  директно влијание на Pousman[1] и Wattenberg[2] . Тие се основачите на концептот на лежерена визуелизација на информации која според основачот на овој проект е еден од најбитните делови. Целата идеја е да се направи анимирана  визуелизација која би привлекла внимание и на не толку технички личности. Исто така голема поврзаност има и органскиот дизајн на информации кој би можел да се разгледува  како пресек помеѓу визуелизацијата на информации и генерирачка уметност.

         

Софтверска визуелизација

Има повеќе различни системи кои прават визуелизација на а софтвер пример е SeeSoft [3] кое претставува алатка за линиска визуелизација на софтверски проекти. Исто така постојат системи кои се по аналитички од code swarm но тука главен фокус имаат луѓето а структурата на кодот е ставена во втор план. Дел  од таквите системи се групирани под името Visual Code Navigator[4].Првиот од нив се вика CVSscan и е наменет за големи софтверски проекти кога одржувањето се одвива од различен тим од тимот кој оригинално работел на проектот. На овој начин може да се забележат кој промени во даден период кој програмер ги правел и да се направи корелација меѓу структурата на  кодот и неговата еволуција низ времето. Друг проект е  CSV: Code Structure Visualization наменет за фазата на пишување и дебагирање. Ги визуализираа синтаксичките делови како класи , функции... Алатката овозможува механизам на прашања со кој може да се направи лесна навигација на кодот.

 

 

 

CodeSaw[5] и StarGate[6] ja прикажуваат врската помеѓу допринесувачите на кодот и комуникацијата меѓу програмерите.Code Saw користи повеќе новоски временски линии со придонесот на горниот дел од оската а комуникацијата на долниот дел. Од друга страна пак StarGate ја прикажува комуникацијата во центарот на кругот а податоците во надвор-ешните нивоа . Двата прикази даваат статични слики додека code swarm e анимиран. Во примерот со StarGate јасно се гледа комуни-кацијата меѓу програмерите кои се означени со кругови кои се  во централниот дел. Околу нив во надворешниот дел се наоѓаат податоците на кои тие работеле. Видеото со детално објаснување е дадено во прилог или може да се превеземе од официјалната страна [7].

 

 

 

 

 

 

 

Генерирачка уметност

Авторот на code swarm бил инспириран до страна на уметниците  кои го користат Processing , кај нив  на најразлични начини се генерираат визуелни делови. Некои од  проектите се со по комерцијални цели , има проекти каде генерираат маички од термини со пребарување на google или пак накит со некоја математичка формула. Дел од нив може да се најдат на презентациската страна на Processing.

 За Processing

Во основа тоа е програмски јазик  но доаѓа заедно со развојна околина , исто така постои и како интернет заедница уште од 2001 каде се труди да го вклучи софтверот како алатка во визуелните уметности. Основната идеја зад овој јазик е да сен направи софтвер со кој може да се учат основи на програмирање со визуелен контекст, но за брзо време прераснува во алатка која ја користат и професионалци. Софтверот изработен во овој јазик работи на повеќето софтверски платформи и едноставно може да се експортира во аплети за на веб.

Графичките елементи од програмите може да се зачуваат како PDF , TIFF , JPG како и во повеќето од распространетите графички формати. Во основа јазикот работи на JVM но има одредени имплементации кој овозможуваат работа во JavaScript .Processing е основано од страна на Ben Fry и Casey Reas во 2001 додека биле студенти во MIT Мedia Lab, за време на еден од предметите каде изучувале изградба на компајлери решиле да направат нешто уникатно .Од првата верзија до сега е надградуван во многу факултети ширум светот .

  Органска визуелизација на податоци

Техниките за дизајн на статични информации се доста познати  но нивната примена кога имаме динамички системи е многу тешка. Органски дизајн на информации e термин кој го поставува Ben Fry во својот магистерски труд [9] . Во основа идејата е да се избегнат сегашните методи како стебла , паралелни координати , пити  и така натаму. Со тоа што ќе му се даде слободна на податочните структури кои ги опишуваат податоците  да влијаат меѓусебе со што се овозможува претстава на податоци кои се менуваат многу брзо  и е добар избор кога имаме потреба од квалитативно знаење .

Еден пример за ваков тип на визуелизација е  од магистерската на Ben Fry  кој се вика Anemone или како што авторот го нарекува “Организам што го мониторира веб сообраќајот”.

Code Swarm e класичен пример за ваков тип на визуелизација ,  баш тука е потребно да се прикажат временски поврзани податоци .

Некои други проекти кои ги користат истите принципи се glTail[11] каде се прикажуваат во реално време барањата до веб сервер како кругови со различни големини кои од левата на десната страна се истураат во средишниот дел. Големината на круговите соодветствува на големината во бајтни на барањето  а бојата која специфична страна се бара. Единствените сличности со Anemone се тоа што структурата ја прикажува со граф.

Дел од концептите кои се користат во Code Swarm се базираат на техниките изработени од страна на Andrew Vande Moere  поспецифично техниката  information flocking  [12] , идејата е да се користат swarm пристап на децентрализиран систем каде лесно би се препознавале различните формации кои ќе настанат  како и специфичните придвижувања. Но проблемот е што тој генерира статичка слика а не анимација.  Однесувањето на елементите  следат одредени правила како : избегнување на колизии , изедначување на брзина , центрирање , сличност на податоци и создавање на формации.

         Code Based Repositories

Овој тип на системи ќе го разгледаме само од аспект на визуелизација . Code based Repositoris или уште познати како системи за верзионирање се нешто без кое било кој поголем проект не може да се замисли.  Идејата е да се чуваат верзии о секоја промена на било која датотека од системот што се работи. На слика 5 може да се види основен модел за верзионирање. Со зелена боја е означена Trunk верзијата која моментално е работна верзија. Жолтите елементи се копии кои заминале во некоја друга насока, пример за таков тип на код е кога имам повеќе сајтови со иста осново на кодот но со различна намена. Tag би било одредена точка  од Trunk која се зема како копија  и се остава како таква пр. Верзија 1.1  на некоја програма. Системите за верзионирање не се ограничени на код , тие се  почесто имаат примена во сите типови  на компјутерски програми,пример за такви програми се Wiki-јата или пак Google docs.

Најпознат систем за версионирање е Subversion (SVN) за кој првично има подршка од Code Swarm . Во моментот на пишување на овој текст има подршка за SVN ,CVS , Git, Mercurical ,Perforce , Visual Source Safe ,Darcs , Wikiswarm.

Во основа може да се прилагоди било кој систем , единствено потребно е да се направи конвертор за во code swarm XML форматот на логови .

 

 Code Swarm

Проектот е изработен во Processing програмскиот јазик , изборот е токму поради неговиот капацитет за брза промена на графички елементи. Како што беше претходно кажано  се користи органска претстава на информациите. За да се постигне поставената цел се користи едноставна верзија на spring embedder алгоритамот. Кратко објаснување за начинот на работа на овој алгоритам  има веб страната на Wolfram research  [13].  Во основа начинот на исцртување работи на следните принципи :

-          Кога програмер ќе комитира датотека се креира нов јазол помеѓу програмерот и датотеките што се привлекуваат меѓу себе. Како што времето одминува силата со која датотеката го влече програмерот кон себе  и тие полека се оддалечуваат.

-          Датотеките се дистанцираат меѓусебно , па на тој начин се избегнува препокривање на неповрзани датотеки

-          Програмерите ниту се привлекуваат ниту се оддалечуваат меѓусебно, што значи дека тие се позиционирани само од датотеките.

-          Два блиски програмери работата на истите датотеки  се поблиску еден до друг

-          За долнително да се зголеми функционалноста се користат виизуелни карактеристики како бои на датотеките ,фонтови , сетирања на физичкиот модел како на пример сили на привлекување / одбивање , анимациски сетирања како бој на слики во секунда и сл .  

     Случајот со Еclipse

Како  еден од многуте примери изработени од Michael Ogawa за детално разгледување  го избрав случајот со визуелизацијата за  Eclipse IDE бидејќи таму полесно може да се објасни оваа визуелизација. Во 2001 eclipse open-source IDE се  објавува во јавноста  во оваа визуелизација може да се види целосната историја на проектот за само дел од времето. Имињата на програмерите се појавуваат како што испраќаат датотеки до системот и се додека работат на нив тие лебдат околу

 

code_swarm - Eclipse (short ver.) from Michael Ogawa on Vimeo.

Visualizing the commit history of the Eclipse IDE project.
Project page: http://vis.cs.ucdavis.edu/~ogawa/codeswarm/
Open source: http://code.google.com/p/codeswarm
Music:
"Orange" by Etherfysh
http://magnatune.com/artists/etherfysh
Used with CC by-nc-sa license.
Made with Processing. http://processing.org

програмерот. Со црвена боја се датотеките со код , со светло сина сликите а со темно сина документацијата ,во долниот лев агол се наоѓа хистограм  на кој се црта вкупната големина на датотеките во даден момент. Секогаш кога некој ќе комитира датотека неговото име се зголемува . Некаде во 2003 големина на хистограмот а и како може да се забележи голем пораст да датотеките , тоа е  така бидејќи во тој период IBM се вклучува во проектот и тие комитираат некои готови модули. Исто така може да се забележи и дека секоја година кон крајот на декември кога обично има празници се намалува бојот на добиени датотеки , друга работа што се забележува е дека пред секое големо објавување на нова верзија драстично расте добиениот код. 

Genrepsoft SVN

Genrepsoft претставува  фирмата каде part time / full time  работев  две години . Па решив и за еден од проектите на кој работевме да направам видео . Интересен дел од оваа визуелизација е тоа што додадени се повеќе типови на податоци кои се разгледуваат. Во основа најбитни се Java кодот , Html , Jsp/ Jspx, XML , слики  и документација. Дополнително може да се забележи дека во периодите кога сме имале сесија за полагање на факултет  или пак биле годишни одмори активноста моја се намалува исто така  што повеќе време се поминува на дадениот проект тоа повеќе датотеки кружат околу тој програмер како  во случајот со  stojan кој беше одговорен програмер за овој проект. Иако овој начин не дава реална слика на тоа кој колку  работел дефинитивно дава слика на  комплексноста на проблемите што се решаваат.

SvnGenrep from Mite Mitreski on Vimeo.

Twitter Code Визуелизација

Twitter Code Swarm from Ben Sandofsky on Vimeo.

April 2006 to January 2010.
Projects include the main Ruby app, Flock, the streaming API, and mobile site.
Music is "Undercurrent" by Jami Sieber, licensed via Magnatune.
http://magnatune.com/artists/albums/sieber-lush/hifi_play

Кон крајот на јануари 2010 еден од прогрмерите на community страната twitter  објави визуелизација на code_swarm на кодот од оваа страна. Постојат повеќе разлики во физиката на неговата верзија исто така за разли од тоа што претходно имаше имиња на програмерите сега се додадени  наместо тоа нивни слики но во основа концептот е ист. Code Swarm од своето појавување предизвика голем интересот низ програмерите и  постојат неколку различни верзии на кодот и деловите за физиката .

 

Иден развој

Концептот на органска претстава на информациите е доста интересен и може да се примени во најразлични области.  Лежениот приказ на податоците каде  се гледаат најразличните промени како целина и дел од swarm даваат друг поглед на постоечките информации што дефинитивно овој проект ќе биде интересен и за во иднината. Добар показател е и што проектот е open-source и секој може да се вклучи или да направи своја варијанта  од истиот. Јас сум дел од овој проект од крајот на 2008 година и оттогаш има претрпено големи промени . За мене најинтересни се промените кои се во делот наречен physics-engine каде може да се направат доста промени. Дел од идниот развој би бил и GUI верзија со што би се направил подостапен за сите . Исто така бидејќи форматот на податоците е едноставна верзија на XML овој систем релативно едноставно може да се примени и во други области. Во секој случај може да се каже дека  Code Swarm е интересен  приказ кој дава значителни промени во начинот на визуелизација на податоците .

    Референци и линкови

[1]      Z. Pousman, J. Stasko, and M. Mateas. Casual information visualization: Depictions of data in everyday life. Transactions on Visualization and Computer Graphics, 13(6):1145–1152, 2007.

[2]      M. Wattenberg. Baby names, visualization, and social data analysis. InSymposium on Information Visualization, page 1. IEEE, 2005.

[3]      S. G. Eick, J. L. Steffen, and E. E. Sumner, Jr. Seesoft-a tool for visualizing line oriented software statistics. Transactions on Software Engineer-ing, 18(11):957–968, 1992

[4]      http://www.win.tue.nl/~lvoinea/VCN.html, Visual Code Navigator

[5]      E. Gilbert and K. Karahalios. CodeSaw: A social visualization of distributed software development. INTERACT: Human-Computer Interaction, pages 303–316, 2007.

[6]      M. Ogawa and K.-L. Ma. StarGate: A unified, interactive visualization of software projects. In Pacific Visualization Symposium, pages 191–198.IEEE, 2008.

[7]      http://vis.cs.ucdavis.edu/~ogawa/stargate/ ,StarGate visualization.

[8]      http://processing.org/exhibition/ ,  various Processing projects

[9]      B. J. Fry. Organic information design. Master’s thesis, School of Architecture and Planning, Massachusetts Institute of Technology, 2000.

[10]  http://benfry.com/anemone/index.html , Anemone , Using the process of organic information design to visualize the changing structure of a web site, juxtaposed with usage information

[11]  E. Simonsen. glTail and glTrail. http://www.fudgie.org/

[12]  A. V. Moere. Time-varying data visualization using information flocking boids. In Symposium on Information Visualization, pages 97–104. IEEE,2004.

[13]  http://reference.wolfram.com/mathematica/tutorial/GraphDrawingIntroduction.html  Spring Embedded graphs

[14]  http://en.wikipedia.org/wiki/Subversion_(software) , Versioning with Subversion

[15]  http://code.google.com/p/codeswarm/ , CodeSwarm source and project site