The final usable application is web-based, so we have a basic server-client interaction and the client can run the application on a web browser. The application was tested and usable through the major defused web browsers.
Web applications use web documents written in a standard format such as HTML, JavaScript and CSS for page styling. All the interactive graphical and visual effects can be made through the definition of some javaScript procedures along with the elaboration of the HTML canvas objects. The engine and libraries used to create a dynamic web content page are: vis.js[2], and d3.js[1]. In this section we will describe the main graphical elements and their dynamics. In the last section we will show a summary graphical view of all the system with the integration of all components, along with a user interaction example with the system.
4.4 Graphical visualizations 63
4.4.1 The network graph
Network graphs are used to represent entities communication, data orga-nization, computational devices, the flow of computation, etc. For our project we used the graph network to generate a social map for the contacts inside the emails archive analyzed. The graph visualization will be adopted in two of the four basic visualization panels: Relationships network and message traffic network (see Section. 3.2.1). Both these visualizations need a dataset composed from a list of nodes and edges, these components along with their attributes define the skeleton composition of a graph. The style and shape of the graph nodes and edges need to be adaptable to dynamic modifications, this feature is needed in order to represent some entities characteristics, e.g:
nodes degree, edges weight, nodes domain ...etc.
Graphs will be represented visually by drawing circles for every different vertex (node/contact), and drawing an arc between two vertices if they are connected by an edge. In case the graph is directed, the direction is indicated by drawing an arrow arc. Vertexes and arcs color and size will represent different information according to the user choices. The correct positioning of the vertexes is very important for a conceptual understanding of the network, and for an easier graphical interaction.
We define 4 different style variables to display and view different infor-mation: Node size, Edge size, Node color, Edge color. The user can choose what kind of information each one of these variables will show (e.g: node sizes can represent the degree of the node). Each network graph (Directed and Undirected) can employ a different style settings. Here we mention the type of info each variable can forward:
Node size:
• Sum of Edges weight
• Degree
• In degree (Directed case)
• Out degree (Directed case)
• Number messages sent (Directed case)
• Number messages received (Directed case)
• None: all nodes will have a default standard size Edge size:
• Weight: number of messages sent between the two nodes
• None: all edges will have a default standard size Node color:
• Cluster: each node will be colored according to the concept cluster it belongs to
• Domain: the email contact domain
• None: all nodes will have same color Edge color:
• Cluster: each edge will be colored according to the concept cluster it belongs to
• None: all nodes will have same color
To implement this visualization and these behaviors we used a javascript library: vis.js. Vis.js is a dynamic, browser based visualization library. It’s designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. In or-der to build our graph we will use the Network component. This visualization is easy to use and supports custom shapes, styles, colors, sizes, images, ...etc.
The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To handle a larger amount of nodes, Network has clustering support. The rendering operations uses HTML canvas.
4.4 Graphical visualizations 65
A vis.Network object needs three basic components for it’s initialization:
an HTML container, the data (nodes and edges), and an object which de-fines the options and configurations of the network. The data object used is a Dataset element, this type of data object help us deal with dynamic data, and allows manipulation of the values. Changes made in the Dataset will automatically be reflected and change the view. A DataSet can be used to store any JSON object by unique id’s. Objects can be added, updated and removed from the DataSet, and one can subscribe to changes in the DataSet.
The data in the DataSet can be filtered and ordered, and fields (like dates) can be converted to a specific type. Data can be normalized when append-ing it to the DataSet as well. The possible interaction events with the graph will be associated to the Network graph just created, by defining the pro-cedures of the type of events we want to handle. (e.g: when clicking on the graph on(′click′)). The system will create two different vis.Network ob-jects: directed and the undirected representation. The scheme in Figure. 4.5 summarizes what has been said. Some of the possible events and available interactions are:
Hover/blur on nodes: this operation will highlight the contact and all the connected edges.
Clicking on a node or edge: will open a section with all the related in-formation, along with same visual effects of the Hover/Blur operation.
Double clicking on a node: will regenerate the network including only the selected node, the connected edges and his neighbor nodes.
Dragging nodes: dragging and re-positioning the nodes freely according to the user necessities.
4.4.2 Circle packing graphic
The concepts will be represented inside a hierarchical circle graphic repre-sentation. The big circles are the different concepts inferred, while the white
Figure 4.5: Creation scheme of vis.Network object
4.4 Graphical visualizations 67
Figure 4.6: Creation scheme of a circlePacking object from d3.js
inner circles represents the words included in each circle. To create this view we used the d3.js javascript library. Like vis.js, it’s also used for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely popular SVG, HTML5, and CSS standards to create an embedded graphical object. Users still have the possibility to interact with the web application through mouse events, which can be defined with ad-hoc proce-dures. In this occasion the only possible event handled is the click on the circle nodes. The input data could be in various formats, although the most common format is JSON, and it’s the one we are going to use. In addition to the data, we need to give as an input the HTML basis container where the d3.js object will be generated. The scheme in Figure. 4.6 summarizes what has been said so far.
4.4.3 Timeline graphic
The Timeline graphic is an interactive 2D chart to visualize the data as a function of time. The data items can take place on a single date, or have a start and end date (a range). The view offers several interactive usage with the graphic, such like moving and zooming in the timeline by dragging
Figure 4.7: Creation scheme of the vis.Timeline object
and scrolling the mouse. Items can be created, edited, and deleted in the timeline, Although in our case the items will be statically created only one time at the initialization of the graphic. The time scale on the axis is adjusted automatically, this operation will also be ignored since the values on the time axis will be represented only as discrete time values. We need to give as an input the HTML basis container, along with the visualization configuration options, such like styling and interactive behaviors. The scheme in Figure. 4.6 summarizes this building procedure.
The possible events handled in this visualization are: the timeline scrolling and the words selections. Mouse clicking on a visualized item (word) will gen-erate the section of information and data related to that item. While scrolling through the timeline will let us visualize all the discrete time values and the correlated words, arranged as a column in relation to their importance (the TFIDF score).