Coding Examples for Relationship Visualizations

Technically speaking

We use three languages to create the examples: HTML, SVG, and JavaScript. We also use a library of JavaScript code called Raphaël.

HTML and SVG

HTML and SVG are known as markup languages. They carry content and extra information about that content, they enable people to mark up content with additional information.

They are written in very much the same way. Here's an example of HTML in which we create a paragraph containing the words "Hello, world!":

<p class="greeting">Hello, world!</p>

Here is an example of creating a rectangle in SVG:

<rect width="400" height="300"/>

Both languages use tags to create elements of a given type. Writing a p tag creates a paragraph element in a page. Writing a rect tag creates a rectangle element in a page. Each language supports specific tags. We'll introduce a few, but we'll leave you to explore them in depth.

Tags in both HTML and SVG hold additional information in the form of attributes. class="greeting" and width="400" are attributes. Writing an attribute in a tag creates an element with meta-data. Our rectangle isn't any old rectangle, it's a 400 pixel wide rectangle. Each type of element supports specific tags. We'll only cover a few.

Tags in both languages can be nested within other tags. A web page is composed of a hierarchy of nested tags. This is what nested tags look like:

<ol class='languages'>
    <li>HTML</li>
    <li>SVG</li>
    <li>JavaScript</li>
</ol>

We have written an ol tag containing three li tags. This creates an ordered (numbered) list element containing three list item elements. When rendered in a browser, the list items are automatically numbered: 1, 2, 3.

JavaScript and Raphaël

JavaScript is a programming language used primarily to make web pages interactive. People use JavaScript to create and manipulate HTML and SVG elements. People also use JavaScript to communicate with web servers to send and retrieve data, but we won't cover that in these exercises.

We use a JavaScript library called Raphaël in order to create and manipulate SVG elements with more flexibility. This is what it looks like to create an SVG rectangle using Raphaël:

drawingArea.rect(0, 0, 400, 300);

We'll explain Raphaël in more detail as we go on.

Find more information about Raphaël, including many more examples on the Raphaël website.

Hello World

You will need a text editor that exports plain-text files in order to follow along with the examples. On the Mac, consider TextWrangler, on Windows try Notepad. TextWrangler is free, Notepad comes installed with Windows.

Each example builds upon the same setup, a folder containing two files:

raphael.js: a JavaScript file containing the Raphaël library
index.html: an HTML file we'll open in a web browser to see our work

Download raphael.js from the Raphaël website.

index.html should contain this:

<!DOCTYPE html>
<html>
    <head>
        <title>Relationship Visualizer Explorations</title>
        <script src="raphael.js"></script>
    </head>
    <body>
        <h1>Relationship Visualizer Explorations</h1>
        <div id="myDrawingSpace"></div>
        <script>
        </script>
    </body>
</html>

Our document has three tags you should notice: head, body, and script. The head tag holds other tags providing additional information about our page. Our head tag contains two tags now. A title tag, which sets the title in your browser's title bar, and a script tag. The script tag loads Raphaël so we can use it in our page.

Generally, the body tag is where we put page content. Our body tag contains three tags; an h1, a div, and another script. Writing an h1 tag creates an important heading, often the headline of a page. the div tag creates an empty division element. The div will not appear if you load the page now. We'll use Raphaël to draw shapes into it. The second script tag is where we will write JavaScript to create SVG shapes, and eventually to make them interactive.