comparison of javascript graph libraries
TRANSCRIPT
UNIVERSITY OF WATERLOOSoftware Engineering
Comparison of JavaScript Graph Libraries
University of WaterlooWaterloo, Ontario
prepared by
Yuguang ZhangStudent ID: 20311196
Userid: y279zhan2B Software Engineering
January 1, 2011
1828 Blackwater Rd.London, ONN5X 4J4
January 1, 2011
Charles Stross, DirectorSoftware EngineeringUniversity of WaterlooWaterloo, ON N2L 3G1
Dear Sir,
I have prepared the enclosed report “Comparison of JavaScript Graph Libraries” as my2B Work Report for academic credit following my work-term. This is my third work report.
I have been working on a personal project to display the university’s course catalog, ina form that is easy to navigate. One of the goals of the project was a tree diagram forthe prerequisites of each course. My initial assumption was that each course only had oneset of prerequisites. This assumption simplified the implementation to the degree that noclient-side interactivity was required. However, on careful examination of the dataset forprerequisites, it was found that many courses had multiple sets of possible prerequisites.Therefore, client-side interactivity would be beneficial and could reduce program complexityin the case where alternatives are to be shown.
Following this paradigm, a prerequisite diagram would be drawn using JavaScript. Thenodes of the diagram are toggled to show an alternative list of prerequisites. The pur-pose of this self-study report is to find and justify the library to be used for rendering thevisualization of data in the project.
I would like to thank Thomas Dimson for developing the LATEX class used to typeset thisreport. I hereby confirm that I have received no further help other than what is mentionedabove in writing this report. I also confirm that this report has not been previously submittedfor academic credit at this or any other academic institution.
Sincerely,
Yuguang Zhang
Executive Summary
This report will help web developers who are interested in visualizing graphs in JavaScript
decide on a library to use. The web developer will have a clear idea of limitations and
capabilities of JavaScript graph visualization libraries. Two libraries that are able to draw
graph structures are JavaScript InfoVis Toolkit (JIT) and Dracula. The recommendations
in this report are specific to web applications that require interactivity and are limited to a
short development time.
The two graph libraries are evaluated by their support for AJAX and the quality of the
graph visualization. The sections of the report are ordered by importance, and each section
compares JIT with Dracula. A high level overview of the processes involved in drawing a
graph with each library is given. Next, AJAX support, which is essential for interactive
data driven applications, is examined. Third, the graph visualization is compared. Finally,
browser compatibility, the last concern due to newer browsers always having better standards
support, is briefly discussed.
Both JIT and Dracula are both able to satisfy basic project requirements. Dracula
requires more development time to implement the same feature set as JIT. However, Dracula
is easier to get started with. JIT has a low-level graph implementation that allows switching
of nodes. Dracula is expedient when it comes to drawing the graph, but not when changing
it.
This report recommends JIT for use on data visualization projects for the web that require
interactivity. This will allow fast progress during development and ensure the requirements
of the application users are met.
ii
Table of Contents
Executive Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Table of Contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
1.0 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.0 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
3.0 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
4.0 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
5.0 Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
6.0 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
7.0 Specifying and Drawing the Graph . . . . . . . . . . . . . . . . . . . . . . 5
7.1 JIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
7.2 Dracula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
8.0 Interactivity and Dynamic Rendering . . . . . . . . . . . . . . . . . . . . 7
8.1 AJAX Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
8.2 Data Structure for Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
9.0 Visualization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
9.1 Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
9.2 Graph Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
10.0Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
11.0Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
iii
12.0Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
iv
1.0 Introduction
When developing web applications, JavaScript can help make the content more interactive.
JavaScript libraries can help the developer abstract implementation details and complete the
project faster. JavaScript graph visualization libraries differ in implementation and suitable
application, some requiring a specific data structure for input, others have simpler methods
for specifying the graph. Besides the notation for transferring data, AJAX support is worth
a close examination, since it determines the interactivity of the web application.
The ability to redraw nodes with AJAX is one criteria of the framework. A clean notation
for relationship between the nodes of a graph is complementary. This would in turn reduce
server-side processing for the graph. AJAX support is essential for reducing development
time. When adding or removing nodes, transitions can make the user experience smoother.
Relevant animations are particularly useful for getting the users attention. After updating
the graph with AJAX, the user must be notified of the change. Animations for drawing and
removing nodes are cues that can help the user understand how to interact with the graph,
making the interface more intuitive.
Lastly, browser support is always a consideration when developing web applications. It
is important to ensure that the graph works on all browsers. Popular browsers including
Internet Explorer 7 and 8, Firefox 3, Chrome, and Opera need to be checked.
2.0 Background
I have been working on a personal project to gather course information from the undergrad
academic calendar and display it in a user-friendly way. For the client-side part of the
web application, a navigable tree of nodes is required. This is one of the primary goals of
1
the project. There are many aspects to this problem, including displaying the information,
storing it, and gathering the data. How the data is displayed is completely independent
from how it is gathered, because the separate functions are modularized. At the time this
report is written, the only steps left required to display the information in a tree form are
functions to transform data into a form which can be used by the JavaScript library and the
code written using the library to display the tree.
For manipulating the data, several functions were already written. They include a re-
cursive function that returns a recursive list of course prerequisites, as well as two other
functions that return the connections between nodes and the nodes separated by levels.
Since this is one small component of the entire project, I decided to devote at most an entire
weekend to it to build a prototype that meets all of the specifications.
There are a few design constraints limiting the qualifying JavaScript library. First, the
library must be capable of rendering lines and nodes. Second, the rendered graph must allow
user interaction with nodes. Third, the method for drawing the graph must be standards
compliant and be supported on all five major browsers.
3.0 Purpose
There are several design constraints for the library to be used for visualization. First, the
graph library should support an Ajax method for updating nodes. Along with dynamically
adding or removing nodes of the graph, most of the intensive processing should be done
by the client. Related to the amount of processing done by the server is the notation for
specifying relationship between nodes. If the notation requires specific edges between all of
the nodes, more computation is required than a notation that supports recursive structures.
Second, the visualization is a major part of the user experience and should have relevant
2
animations. Animations for drawing and removing edges are the most applicable ones.
Moreover, the nodes should by default be drawn as a tree, with each children of a node
drawn at the same level of height. Preferably, the nodes have styling options so that it can
be customized to fit the rest of the application.
Third, browser support is an important consideration when developing any web appli-
cation. The underlying technology used by the library should be forward compatible and
standardized. All major browsers should be supported, with improvements or enhancements
in the newer releases.
4.0 Scope
This report includes qualitative and quantitative analyses of two JavaScript graph libraries,
Dracula and JIT. Both are selected because they meet the constraints. Additionally, they
represent two different approaches to drawing graphs. One has separation of the the graph
model, layout algorithms, and rendering scheme layers. The other is has a specialized class
to handle all graph operations.
5.0 Audience
The audience is expected to have a basic understanding of tree graphs along with some
understanding of HTML and JavaScript. In addition, a knowledge of how AJAX works is
helpful.
3
6.0 Outline
The different sections of this report cover the analysis of Dracula and JIT. The major sections
analyze the graph specification, AJAX support, data visualization, and browser support,
respectively. The final sections cover the conclusion and recommendations.
4
7.0 Specifying and Drawing the Graph
In the simplest usage cases, JavaScript graph libraries take the graph specifications, rendering
the nodes and edges of the graph. JIT and Dracula take different inputs for the graph, but
have similar processes in rendering it. Because JIT provides many methods for manipulating
the graph with a high level of abstraction, there is no need to modify the process for drawing a
graph. However, there are areas that can be customized when creating nodes and requesting
new nodes. On the contrary, Dracula is a much smaller library. Consequently, the rendering
process needs some additions and modifications to suit the needs of the application.
7.1 JIT
The JavaScript InfoVis Toolkit (JIT) has a specialized visualization class for drawing trees.
Drawing a graph in a tree structure takes four steps. First, a new Space Tree instance is
created. Second, a method is called to load JSON into the tree object. Third, the node
positions and layout are computed. Finally, a click is simulated on the root node to draw
the graph. The purpose of the click is to center the graph on the root node, as Space Tree
has a feature that animates nodes that are clicked. [13]
The graph is specified in JSON notation when using the JavaScript InfoVis Toolkit. In
JSON notation, brackets act as containers, much like dictionaries in Python, which is used
on the server side. Square brackets hold arrays. Properties and values are separated by
colon. [5]
Each graph node in the JSON has several properties. The id is a unique identifier for
the node. The name is the text displayed for the node. Data stores optional information
not used by JIT. The children property of a node contains an array of other nodes or can be
empty.
5
The onCreateLabel method is called when each DOM label is created. [12] Event handlers
are registered and label styles are set in this method. An HTML label element is passed.
Styles are set using JavaScripts object.style.property syntax. To add more flexibility to how
labels are displayed, JIT also supports SVG and Canvas labels. [3] SVG elements can be
rotated so that the label text does not need to be horizontal.
JIT provides an optional request method that allows nodes to be populated to a certain
depth. For instance, if a node is removed and only the next level of children added, this
method is called until the children are a certain depth from the root node specified. This is a
method for dynamically retrieving nodes. It is asynchronous, supporting a callback function
that can be registered to make the AJAX request to populate nodes. [12]
7.2 Dracula
The Dracula library is divided into three layers, consisting of the graph model, layout algo-
rithms, and rendering schemes. The graph model is an object which keeps track of nodes
and edges that are added using methods in the graph class. The layout class positions nodes.
The renderer class uses another JavaScript library, Raphael, to draw the graph as an SVG
image. [6] This layer also supports registering events to shapes.
Drawing a graph using Dracula is simple. A new graph object is created, which contains
arrays for nodes, edges, and snapshots. Snapshots are saves of previous graph states. There
are functions to add nodes and edges. The addNode method simply takes the name of a
node as an argument and adds a node to the node array. The addEdge method takes two
node names and adds an edge to the array. [15] If the nodes do not exist, the nodes are
created automatically when the edge is added. Each edge stores source, target, and styling
information.
6
The layout algorithm takes the graph model as an argument and calculates the position
of nodes. There are two layout modes available, spring and tree. Spring layout positions
nodes randomly so that they are equally spaced. Tree layout positions nodes in a tree shape.
The rendering scheme takes a graph as an argument and draws it using the Raphael
library. Node and edge styles can be customized by passing extra arguments to the addNode
method of a graph. The label for a node, by default the same as the name in the graph
model, is rendered at the center of the node.
8.0 Interactivity and Dynamic Rendering
One major benefit of using JavaScript to draw graphs rather than generating static images
server-side is that the users can interact with the graph. Interactive client-side applications
depend on AJAX. JIT has functions specifically designed for populating nodes with AJAX.
On the contrary, Dracula simply lacks support for AJAX. However, Dracula is capable of
more animations and allows more events to be registered than JIT.
8.1 AJAX Support
JIT has a native function for requesting AJAX tree nodes, the request method. This is called
when an empty node is clicked. The nodes sub-trees are requested and drawn. The request
method is a high-level implementation for generating on-demand nodes. For the needs of the
project, low-level details need to be controlled, making the request method unsuitable. JIT
provides addSubtree and removeSubtree specifically for adding or removing sub-trees from
nodes. [13] Furthermore, onclick event handlers can be registered with each label. These
functionalities, combined together, allow switching of nodes to show an alternative list of
prerequisites. Overall, JIT has a well-rounded API to support AJAX.
7
Contrarily, Dracula has no native AJAX support and lacks methods required to execute it
for the project. The method for removing nodes is not implemented. Only the rendering class
uses the Raphael SVG drawing library and can remove elements from the drawing. Because
the rendering class takes the graph as an argument, it is impossible to remove nodes simply
by deleting them from the graph object. The separation of layers makes communication
between them difficult. Changes to the graph model do not propagate to the rendering
layer. Therefore, nodes cannot be added or removed dynamically with Dracula.
8.2 Data Structure for Nodes
The data structure for specifying the tree is directly related to the amount of processing
required for the back-end. Since a recursive query is used to generate prerequisites, it is
more convenient to use a notation for specifying nodes that supports recursive structures.
JIT requires the back-end to generate a JSON data structure to represent the tree. Since
there is a children property in each node object, fully recursive structures are supported. The
child property is of type Array and contains a nodes children. [14] Besides during the initial
load, JSON is used throughout the library to specify tree or graph structures, including
adding and removing nodes.
With Dracula, the back-end has to provide two sets of data for the graph. The edges
between nodes must be specified to draw lines between them. This is in the format of node
pairs passed as arguments to a function. Specifying nodes are optional for drawing the graph,
since they are added automatically. However, in order to avoid overlapping of edges, the
nodes for each level must be provided in a certain order, from left to right, top to bottom.
The nodes on each level are specified before moving on to the next. This is done by simply
passing the nodes name in a function call. Certainly, the lack of JSON structure has a side
effect. Edges in the graph model are used to keep track of relationships between nodes.
8
To find the children of a node, all edges are searched. Each edge has a source and target
property. The source’s id must match the node’s id to find its children. In summary, there
are many drawbacks compared to JIT when adding and removing nodes because the default
graph structure is not recursive.
9.0 Visualization
Visualizing the information contained in data is critical to communicating it. There is a
huge difference in user experience between navigating through several pages to obtain a list
of prerequisites and getting a glance of it as a tree structured graph. In the first case, the
users flow of thought is interrupted as each page loads, and the user must keep track sequence
of prerequisites. In the second case, an intuitive graph structure along with the animations
allows the user to immediately find the information they are looking for. In order to realize
the user interface for the second case, animations should make interacting with the graph a
smooth experience. Nodes should be styled in a way that encourages user interaction.
9.1 Animations
Although JIT comes with fewer animations compared to the Raphael based library Dracula,
it has all of the most essentials ones. JIT has animations for adding and removing nodes.
In addition, tooltips can be added for mouse hovers. The animation for adding a node
simply traces the branch of the tree drawn as a line and fades in the node. Styled tooltips
can be added for mouse hovers. These animations are particularly relevant for visualizing
prerequisites as a tree structure.
In Dracula, nodes are drawn as shapes, which can be colored and labeled by setting
attributes of the SVG element.[8] These can be set directly through an attr method. Many of
9
the styling options and animations in the SVG specification are supported in Dracula through
an optional Raphael parameter that can be passed when making a node. [16] The optional
parameter, a lambda function, uses Raphael to set styles and animations. [15] It takes the
SVG element Raphael draws on and the node as arguments and returns a Raphael set of
objects. As a result, Dracula has all the SVG drawing capabilities of Raphael. Although the
Dracula library could be customized to animate the drawing of a tree the same way as JIT,
Dracula by default does not come with relevant animations. Conversely, it comes with a few
animations to support dragging. When a node is clicked, the node fades in color, which is
not particularly useful for the current application.
9.2 Graph Layout
JIT has all the basic features for drawing tree structured graphs. JIT lays out nodes so that
edges do not overlap, except for the case where the children refer to parents as children.
However, this case does not occur when simply displaying prerequisites. At any rate, JIT
lays out the nodes in an aesthetically pleasing way. [4] Equally important, nodes can be
styled with several properties. [11] The style options include the nodes shape, color, opacity,
height, and width.
Dracula has support for tree mode layout [10] in which nodes are laid out from top to
bottom, level by level. All of a nodes children are on the same level, however, Dracula needs
nodes to be arranged level by level to avoid edges crossing. There is no attempt to prevent
overlapping of edges in the layout algorithm. Fortunately, there were Python functions
written to process nodes and separate them into different levels which are suitable for this
task. Nodes can be styled using an object passed when creating them without directly
using Raphael. [15] This is mostly a convenience and supports gradients, stroke styles, font
options, rotation, and position options.
10
10.0 Browser Support
Both libraries have support for all major browsers. JIT uses the HTML5 Canvas element,
and Dracula uses SVG. For versions of IE that doesnt support Canvas, the ExCanvas library
bridges the gap. Similarly, the Raphael based library Dracula uses VML in place of SVG
for IE. [17] The next release of IE is expected to be on par with modern browsers, as IE9
supports both Canvas and SVG. [18]
Although the underlying implementation behind Dracula supports IE, it only works in IE
with a small tweak. Specifically, the forEach loop needs to be changed to a for loop. [9] This
is because IEs JavaScript implementation does not have forEach. JIT has higher performance
due to everything being rendered as a pixel compared to Raphael, which updates the XML
document, adding complexity. On a surprising note, JIT is noticeably slower in browsers
that dont have modern JavaScript engines, since all animations and drawings are calculated
using JavaScript. However, the JavaScript engine is expected to improve in IE9[19], which
will make the animations smoother.
11.0 Conclusions
JIT has a specialized class for tree graphs that makes adding and removing nodes simple.
Creating a tree graph only requires initializing the class, loading the graph specification, and
calling methods to compute the layout. JIT comes with support for JSON, which is used to
load the initial graph structure. JITs node representation is particularly suitable for recursive
structures, as each node can have children. Each node has an extra data property, which
can be customized to store the iteration number through prerequisites. In addition, JIT has
a method for repeatedly requesting nodes until the tree has a certain depth. This feature
can be used for loading the tree initially or populating the tree after nodes are removed.
11
The Dracula graph library has three layers for the graph model, layout algorithms, and
rendering schemes. This separation of layers makes it easy to add nodes to the graph model
or style nodes and edges on the drawing. However, this separation of layers also increases the
complexity of implementing a method for removing nodes from the drawing. Nodes cannot
be removed simply by changing the graph model. When creating the graph, Dracula allows
the graph to be specified by the connections between nodes. This makes the learning curve
for the library short, as there is a minimal amount of structure in the graph specification.
On the other hand, it does come with drawbacks for manipulating nodes with AJAX.
JIT has better AJAX support compared to Dracula. Dracula is hardly intended to be
used with AJAX for changing the graph, as it does not support removing nodes. Further-
more, Dracula requires additional processing of the tree as input before it can be drawn.
On the other hand, JIT has methods for adding and removing nodes and JSON for tree
structure. The JSON data structure is recursive, allowing nodes to be nested.
When it comes to visualizing recursive structures, JIT has more relevant animations and
offers more features. The animations are geared towards displaying trees, with contraction
and expansion animations for adding and removing nodes. Not only do the layout algorithms
avoid overlapping of edges in the graph by default, but also several node appearance options
can be styled.
Dracula has a plethora of available animations and styling options for visualizing general
graph structures. These are not built into Dracula or specific for drawing tree structures.
Nevertheless, Dracula can be customized to include animations for drawing trees due to its
support of SVG. Although the layout algorithm does not prevent overlapping of edges, a
pre-written python function can order nodes to be drawn in a sequence so that they do not
overlap. When styling nodes, Dracula makes it convenient to set a large number of options.
Dracula and JIT use different web technologies for rendering graphics. Dracula has a
12
slight incompatibility with IE that can be fixed. IE9 is expected to natively support Canvas
and SVG, the underlying technologies behind JIT and Dracula. In terms of compatibility
with older versions of IE, the only issue with JIT is that there is a noticeable performance
penalty.
13
12.0 Recommendations
Because the Dracula graph library lacks essential methods required for the project, it should
be avoided unless the project timeline can be extended. Even if the timeline is extended, the
three layer structure of the library may result in unexpected problems during development.
Due to the short development time allocated for this part of the project, it is unsuitable
to use Dracula even if more animations and styles are available. They are simply too general
to use for drawing tree graphs. It is recommended to use JITs specialized class for drawing
trees, as this will fulfill the basic project requirements and shorten development time.
In order to avoid patching future releases of Dracula for IE support, it is suggested to
use JIT. Both libraries use standardized web technologies, while using JIT can save a small
amount of time due to out of box support for all major browsers.
14
References
[1] F. Potencier, “Practical symfony”, http://www.symfony-project.org/jobeet/1_4/
Doctrine/en/ (current April 2010).
[2] F. Potencier, “Chapter 5 - Configuring Symfony”, in The Definitive Guide to sym-
fony, http://www.symfony-project.org/book/1_0/05-Configuring-Symfony (cur-
rent April 2010).
[3] N. G. Belmonte, “HTML, SVG or Canvas Labels?”, http://blog.thejit.org/2009/
08/30/html-svg-or-canvas-labels/ (current December 2010).
[4] N. G. Belmonte, “Drawing Trees”, http://blog.thejit.org/2009/08/05/
drawing-trees/ (current December 2010).
[5] P. Hunlock, “Mastering JSON ( JavaScript Object Notation )”, in The Javascript
Reference Series, http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_
Object_Notation_) (current December 2010).
[6] D. Almaer, “New Javascript/Canvas Graph library”, http://ajaxian.com/archives/
new-javascriptcanvas-graph-library (current December 2010).
[7] M. Sucan, “SVG or Canvas? Choosing between the two”, http://dev.
opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
#comparison-of-svg-and-canvas (current December 2010).
[8] D. Baranovski, “RaphalJavaScript Library Documentation”, http://raphaeljs.com/
reference.html#attr (current December 2010).
[9] J. Philipp, “Dracula Graph Library”, http://www.graphdracula.net/ (current De-
cember 2010).
15
[10] J. Philipp, “Short update: new code and tree mode”, http://www.graphdracula.net/
2010/11/09/short-update-new-code-and-tree-mode/ (current December 2010).
[11] N. G. Belmonte, “Options.Node.js”, in JavaScript InfoVis Toolkit API Documentation,
http://thejit.org/static/v20/Docs/files/Options/Options-Node-js.html
(current December 2010).
[12] N. G. Belmonte, “Options.Controller.js”, in JavaScript InfoVis Toolkit
API Documentation, http://thejit.org/static/v20/Docs/files/Options/
Options-Controller-js.html (current December 2010).
[13] N. G. Belmonte, “Spacetree.js”, in JavaScript InfoVis Toolkit API Documentation,
http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html
(current December 2010).
[14] N. G. Belmonte, “loadJSON”, in JavaScript InfoVis Toolkit API Documentation, http:
//thejit.org/static/v20/Docs/files/Loader/Loader-js.html#Loader.loadJSON
(current December 2010).
[15] J. Philipp, “Documentation”, http://www.graphdracula.net/documentation/ (cur-
rent December 2010).
[16] E. Dahlstrm et al., “Scalable Vector Graphics (SVG) 1.1 (Second Edition)”, http:
//www.w3.org/TR/SVG/ (current December 2010).
[17] D. Baranovski, “RaphalJavaScript Library”, http://raphaeljs.com/ (current Decem-
ber 2010).
[18] R. Bango, “An Introduction to the HTML 5 Canvas Element”, http://msdn.
microsoft.com/en-us/scriptjunkie/ff961912.aspx (current December 2010).
[19] S. Niyogi, “The New JavaScript Engine in Internet Ex-
plorer 9”, http://blogs.msdn.com/b/ie/archive/2010/03/18/
16
the-new-javascript-engine-in-internet-explorer-9.aspx (current Decem-
ber 2010).
17
Glossary
AJAX A group of techniques for creating interactive web applications, in which applications
can retrieve data from the server asynchronously in the background without interfering with
the display and behavior of the existing page.
HTML Hypertext Markup Language: a set of tags and rules (conforming to SGML) for
using them in developing hypertext documents.
CSS Cascading Style Sheets are declarations that describe how a document should be pre-
sented on the Web.
Python A simple, high-level interpreted language invented by Guido van Rossum in 1991.
JavaScript A scripting programming language most commonly used to add interactive fea-
tures to webpages.
18