Web Fundamentals

Websites are usually written using three languages:

HTML

Hypertext Markup Language is used to structure content for web browsers. These contents are identified by tags. Each tag creates a specific type of element so that the browser can understand which part of the document is a heading, which is a paragraph and so on. A tag starts with an angle bracket < and ends with another angle bracket >. An HTML page has to have the following tags at the minimum:

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    
  </body>
</html>

CSS

Cascading Style Sheets are used to change the style of HTML elements and their position. A simple CSS stylesheet looks like this:

body {
  background-color: white;
  color: black;
}

CSS styles consist of selectors and rules. Selectors identify specific elements of the HTML document. Rules are properties that, cumulatively, form the styles

We connect selectors and rules using curly brackets:

p {
  font-size: 12px;
  line-height: 14px;
  color: black;
}

The code above select paragraph elements <p></p> and changes their font size, line height and colour properties.

D3 uses CSS-style selectors to identify elements on which to operate, so it’s important to understand how to use them.

There are three ways to select HTML elements in CSS:

CSS rules can be included directly within the head of an HTML document, like so

<head>
<style type="text/css">
  p {
    font-family: sans-serif;
    color: blue;
  }
</style>
</head>

or saved in an external file with a .css suffix, and then referenced in the HTML document’s head:

<head>
  <link rel="stylesheet" href="style.css">
</head>

SVG

Scalable Vector Graphics is a text-based image format. Meaning, you can specify what an SVG image should look like by writing simple markup code, like HTML tags. SVG code can be included directly in any HTML document. SVG shapes don’t lose its quality when scaling up and down. D3 is at its best when rendering visuals as SVG.

SVG canvas

Before drawing anything in SVG, an SVG tag must be created. It is the canvas on which SVG visual elements are rendered. The SVG tag takes a width and a height attributes.

Here’s a little circle that I just coded into this page:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="30"
  fill="blue" stroke="gray" stroke-width="1"/>
</svg>

Go ahead — right-click on it: it’s not an image! Zoom your browser and you’ll see it scales up and down smoothly, as a vector graphic should.

SVG is powerful with D3; it provides a range of visual opportunities that aren’t possible with regular HTML elements.

SVG coordinates

The (0, 0) coordinate in SVG in the top left corner of the SVG canvas, the x-axis increase to the right while the y-axis increase towards the bottom. This means that a shape with y value = 1 is higher than another with y value =3. It might be unusual to you, but you will get used to it.

SVG basic elements

SVG shapes must be included between the <svg></svg> tag we talked about earlier. We will explore some of the basic shapes. These shapes share some common attributes, including stroke, fill, stroke-width, stroke-opacity and fill-opacity.

Rectangle

<rect x="0" y="0" width="500" height="50"/>
	

the x and y are coordinates of the top left corner of the rectangle, the width and height are as you would guess, the dimensions of the rectangle.

Circle

<circle cx="225" cy="22" r="20" stroke="black" stroke-width="3" fill="red"/>
	

cx and cy are the x and y coordinate of the centre of the circle, while r is the radius of the circle. stroke represents the colour of the stroke, stroke-width represent the stroke thickness and fill is the fill colour.

Line

<line x1="5" y1="5" x2="400" y2="50" stroke="black"/>
	

x1 and y1 are the x and y coordinates of the first point of the line, while x2 and y2 are the x and y coordinates of the second point of the line. Stroke colour must be specified for the line to be visible.

Text

<text x="200" y="20" text-anchor="middle">Hello</text>
	

x and y specify the coordinates, text-anchor controls the positional base point on the baseline of the text. It defaults to the low left corner.

Path

<path d="M150 0 L75 200 L225 200 Z"/>
	

The path is a great SVG element to draw complex shapes, including outlines of maps. It uses d attribute, which describes the path through a string that contains a series of path commands. Later, we will use D3 functions to define the d attribute of a path.

DOM

The Document Object Model refers to the hierarchical structure of HTML. Each bracketed tag in the HTML document is an element, and we refer to elements’ relative relationships to each as: parent, child, sibling, ancestor, and descendant. body is the parent element to its children, h1 and p and so on (which are siblings to each other). All elements on the page are descendants of html.

JavaScript

JavaScript is a dynamic scripting language that can instruct the browser to make changes to a page contents after it has already loaded.

Scripts can be included directly in HTML, between two script tags preferably at the end of the body tag.

<body>
  <h1>Title</h1>
  <p>This is a really interesting paragraph.</p>

  <script type="text/javascript">
    alert("Hello, world!");
  </script>
</body>

or stored in a separate file, and then referenced in the HTML (commonly in the head):

<head>
  <title>Page Title</title>
  <script type="text/javascript" src="myscript.js"></script>
</head>

Developer Tools

Be familiar with your browser’s developer tools. In Chrome you can open the developer tool by clicking View > Developer > Developer Tools and in Safari click Develop > Show Web Inspector

The web inspector shows you the current state of the DOM. This is useful because code may modify DOM elements dynamically. In the web inspector, you can watch elements as they change. You’ll also use the JavaScript console for debugging. In Chrome View > Developer > View Source. In Safari Develop > Show Page Source shows you the original HTML source of the page.

Sublime Text

We will use Sublime Text to write and edit code. It is already installed on the computers in the lab. To install it on your personal computer, click on the link to download and install Sublime Text for Mac or Windows.

You are going to use a template for you Info Vis. project. Click on the link to download the compressed folder. Unzip the folder and open it in Sublime Text. Explore the contents, and don't worry if there are lines that you don't understand yet. We will go through it all later.

Localhost

You can test your website on the local host using Python. Open the terminal on Mac or the Command Prompt on Windows and type python . Take a note of the version number. Is it 2 or 3. In the example below, it is python 2. Type exit(). In the terminal/Command Prompt, type cd and move your mouse to the Finder on Mac or Windows Explorer on Windows. Navigate to the folder where your website code is (Template in this case). Click on the folder and drag it to the terminal/Command Prompt next to the cd command that you typed earlier and hit the return key. This will make the terminal/Command Prompt navigate to that folder. To run the local host, type python -m SimpleHTTPServer if you have python2 or python3 -m http.server in case you have python3. Open a web browser and type http://localhost:8000 in the search filed. This will run the index.html file in your folder on your local machine.

Running localhost using python

More Resources

Sarkar, S. and Hussein, D.A., 2018, D3 Tutorials for Information Visualisation Design Studio, University of Sydney.
Email: somwrita.sarkar@sydney.edu.au, dhus4848@uni.sydney.edu.au