Description
We will work on this in class, including a demonstration. The part at the end labeled “Assignment” must
be completed and turned in on Dropbox by April 20.
Note heavy thanks to Carlos Scheidegger’s materials, which I encourage you to read for a bit more on
the subject. He links to Mozilla’s references which are also great.
Scheidegger: https://cscheid.net/courses/fal17/csc544/lecture2.html
Mozilla Developer Network: https://developer.mozilla.org/en-US/
First off, creating a webpage is as simple as creating any text file. Open up an editor. You want to save
it with a html extension so your operating system recognizes it as a web file. Then we can just open the
file in a browser to be rendered. To put some actual HTML in a file, copy the below code (by typing it
yourself, this is an image).
This is boilerplate code that you should copy for just about any web page. Note the overall structure:
• First is the simple declaration that this is an html file
• Second is the opening html tag. We open a tag of type X by writing
• There are two sections to the html document, each marked by its own tag, head and body
• The header includes the title, marked with its own tag, and a character set (encoding) setting
telling the browser this file can contain Unicode characters (like non-English letters and emoji).
• The meta tag has an argument, the ‘charset=’ part, but it does not have contents. Therefore,
there is no closing tag, it just ends with a />.
Content that we want on the page will be put in the body section. Since this is markup language, we can
use different tags to markup our text. For example, let’s mark some things as headers, bold and italics:
This is my title
Open the page in Chrome to see how this is rendered.
One especially useful type of html element is an SVG area, defined with an SVG tag. Include this in the
body:
This creates a blank SVG canvas you can draw on by inserting graphical elements. When we create real
visualizations, we will add the elements by code. Here are some examples from Scheidegger’s materials:
Path is especially powerful and hard to use. You can draw whatever you want with it, so it is worthwhile
to play around with it a bit. Try putting some of these shapes together in your file. Note that the
coordinate axes do not work as you expect – the y axis points downward. Finally, there is one error in
this code that means it still works but won’t perform as expected when more is added to the canvas –
can you spot it?
Two more useful things: (1) you can apply transformations to these tags, like translating, rotating and
skewing. This means if you wanted to draw that path above, but tilted 45 degrees, you don’t have to
calculate the positions where the points would be after rotation. Instead you can apply the 45 degree
rotation to the path object. And (2), you can group tags together so that you can apply the same
transformations to all of them at once. This is extremely useful, especially when we start talking about
interactions. Here is an example where I have added a circle at each control point of the path and then
used a group (g tag) to make them one group which I rotate. The rotation is covered on this page of the
Mozilla documentation (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform).
Note that there are optional arguments to the rotation to specify what point to rotate around and the
translation (moving left and right) happens before the rotation, i.e. moving to the right means moving
along the 45 degree line in this case.
Assignment
The assignment component is very simple – you will create two pages, each with different ‘drawings’
made from SVG elements. Submit the two HTML files.
I recommend drawing on paper first and thinking about how to calculate the coordinates.
1. Draw a bar chart
a. You can make up a handful (5) of data points.
b. Use rectangles, lines and text to create axes and labels along with the
2. Draw a smiley face !
a. Use circles and paths
b. Add a few lines of hair (use paths so they curve)