Download Gnutella Vision - groups.sims.berkeley.edu (ssl)

Comparative Analysis
Gnutella Vision: http://www.sims.berkeley.edu/~rachna/courses/infoviz/gtv/
Touch Graph: http://www.touchgraph.com/TGGoogleBrowser.html
Social Circles: http://www.marumushi.com/apps/socialcircles/index.cfm
Synapsis: http://www.marumushi.com/apps/synapsis/index.html
Visual Thesaurus: http://www.visualthesaurus.com/online/index.html
Friendster: http://www.friendster.com
Ontopia: http://www.ontopia.net/
Gnutella Vision
http://www.sims.berkeley.edu/~rachna/courses/infoviz/gtv/
Gnutella vision is a real time visualization of the Gnutella peer-to-peer network.
From: http://www.sims.berkeley.edu/~rachna/courses/infoviz/gtv/paper.html
Nodes on the network are drawn as circles of varying colors and sizes on the graph.
Nodes gradually appear on the network, brighten as connections occur, and then darken
as the connection is ignored or dropped.
Each node in the network is displayed as a filled circle whose size is proportional to the
number of files that the node claims to be offering.
If the circle is large enough, we display just the number of files inside the circle. If the
circle is large enough to contain the IP address of the host, we display this also.
The concentric rings displayed on the graph background help the user to determine the
distance of the node from the center node, by the shortest-known path. The rings also
provide a central point of focus for the selected node. Each node lies on the ring
corresponding to its shortest network distance from the central node. The rings are drawn
in faint pink to make this network distance apparent. A node is allocated a sector of its
ring, within the sector assigned to its parent, where the angular size of the sector is
proportional to the total size of the node and all its descendants. The central node gets all
360 degrees to allocate among its children based on their sizes; each child then allocates
its angular sector among its children, and so on.
The color of nodes and their borders indicate their connection state: when we first learn
about a node, it appears in white. Blue indicates that we are trying to connect and yellow
indicates that a connection has been successfully established. When we either can not
connect to a node, because it has rejected us or because we have been suddenly dropped,
it will appear grey. Nodes with a black border are pending further action, while nodes
with a grey border have been examined and set aside. Thus, nodes that are no longer
important to us fade into the background.
Lines between nodes indicate connections between them. The color of the line indicates
direct/indirect connections between nodes.
Whenever we see a query message arrive from a particular node, the search string is
displayed in a small font at the top of the node (we do not know if this node actually
originated the query or is simply passing it along to us). The search string is also added to
the history of search strings, shown in a larger font but a faint grey color, that scrolls up
the left side of the display. This gives the users a sense of the amount of query activity on
the network graph itself, while also providing a longer history to provide an idea of the
currently popular search terms.
Users can also interact with the interface by clicking on nodes and receiving feedback:
Right-clicking on a particular node shows more detailed information about it on a status
line at the bottom of the display: we see the IP address and port number, the number of
files offered, the total number of kilobytes of data offered, and a count of the types of
messages we have seen from the node. The node momentarily turns pink to indicate that
it has been clicked.
Finally, users can recenter the graph around a particular node by shift-clicking on it. The
node turns purple to indicate that it has been selected, and moves to the central focus,
while the other nodes quickly shift position. The new central node then returns to its
original color.
Short summary of how info viz was used:
Node size = number of files
Node color and border = connection state
Line color = direct/indirect connections between nodes
Text = node info and search queries
Interactivity = drop searches, click on nodes
The GnuTellaVision visualization was createed with Python and Tkinter ("Tk interface"-the de-facto Python interface to the Tk GUI toolkit).
Additional Observations:
 The network looks like it displays up to four generations of nodes
 When a user wants browse the network they shift click on a node to move it to the
center. The display then animates the shifting of the nodes
 Data is shown in two places. Queries scroll up the left side of the screen in light
gray. Data about the node (IP address, number of files it is offering, and file size)
and about messages we have received form this node (and types of messages) is
displayed in black text on the bottom of the screen. This is difficult to read
Touch Graph
http://www.touchgraph.com/TGGoogleBrowser.html
Touch Graph is a visualization of the search results from Google’s ‘similar-page’ results.
User’s begin using this visualization by entering in a URL. Double clicking on a node
retrieves the top 10 URLs that are similar to it, and then goes one level further to retrieve
the top 10 URLs related to each of those.
Info buttons appear when you move a mouse over a node. Clicking on an info button will
cause a pop up window will appear containing information about the page. This info
consists of the same information as is displayed during a regular Google search, such as
the page title, summary and a snippet. Also included is a hyperlink that when clicked will
open the page in an external browser window. Use the button at the top of the pop up
window to close it.
Edge colors reveal the relationships between the nodes at their endpoints. Dark gray
edges indicate that the nodes at the endpoints are closely related, and light gray that the
relationship is looser.
When one moves the mouse over a node one sees the gray edges colored blue and red. A
red edge indicates that when one does a Google similar-page for the source site, i.e
levi.com , the target site, guess.com will appear on Levi's similar page list. A blue edge
indicates the reverse relationship, for instance that when one does a search on
dockers.com that levi.com will appear on Dockers similar page list. Both red and blue
edges can be present simultaneously as is the case between Levi and Dockers.
Observations
 The searched for node is highlighted so that it is distinguished from the rest
 Pop-up buttons are an effective way to present additional info
 When you scroll over a node the ‘more info’ button pops up and the highlighting
shifts from the searched for node to the scrolled over node
 More info button can be difficult to click on. It would help if it was larger.
 When there are many connections, it is helpful to highlight the connection that
you scroll over so that you can distinguish it from the others
 The size of the pop-up varies according to the amount of data for that node
 It is intuitive to double click on a node to make it the central point of search
 The entire network is displayed at once.
 Zoom is used effectively via a scroll bar at the top. You can navigate the network
through additional scroll bars on the left and right. All the scroll bars look the
same. Zoom should be distinguished from the rest.
 Even when you zoom way out the visualization tries to cram in the same amount
of detail. Detail should have been added as the user zooms in.
 Users can select the node label (name or URL).
 Users can select the number of node children it would like to display from the
center node.
Social Circles
http://www.marumushi.com/apps/socialcircles/index.cfm
Synapsis
http://www.marumushi.com/apps/synapsis/index.html
Synapsis is an application that partially visualizes network traffic. It is the uppermost
layer for Carnivore, a network surveillance tool. Carnivore is an application that listens to
all data traffic in a network (email, web surfing, etc.). Data travels on the Internet
between two computers in packets. The Synapsis client visualizes the actual packets
flowing on the network and partially reveals the network topology. Synapsis uses Flash
to build its visualization component.
Observations
 Synapsis uses an attractive color scheme, although it is not clear with the colors
indicate.
 Not clear what size of the node indicates
 It uses a pull down menu from the top which lists all the nodes. Nodes are
recentered by clicking on one of them listed from the pull down menu.
 Node Ids are too long to have inside the node so they are shown next to the node
in light grey
 Is not clear what the relative position of the nodes indicate