Notes for Monday, August 28

You can access these files from the course Github repository. The repository will be updated with notes shortly after class. While I encourage you to make use of a local copy of the repository so you can take notes, the version at this site will always be up-to-date and accessible. Execute a git pull in your repository directory to download new files. Prompt files won't change after posting, so feel free to modify them as you like. Here is an informal guide to git.

To develop efficiently, have a local web server running. Python has a simple, built-in server. Use python -m http.server for python 3; use python -m SimpleHTTPServer 8000 for python 2 (execute python in cmd for version number).

Here are some SVG resources:

HTML for today:

Shapes and Coordinates

The coordinate system starts at the top left corner, (0,0). Positive y values move down towards the bottom. Positive x values move towards the right. We can use DOM attributes or CSS to apply styles to elements.

Today is the best day ever, because we are drawing!


This is the most complicated SVG element, but also one of the most useful. It contains a tiny programming language.


Transformations are another useful (but a bit tricky) tool. How do we stretch, rotate, and shift elements, and how does the order of these operations affect the result?

Wrapping all elements in a translate() transformation moves the coordinate system. We often want to do this to add a margin around a plot while keeping our mapping from data to x,y positions simple.

First, let's mark the origin, (0,0). The g tag groups elements together.

Now let's move the origin to the center. You can use a g tag to assign properties to sets of elements.

Let's create some circles in our translated space.

Let's perform a translation on one of the circles.

Let's both perform a translation and scale one of the circles.

The order matters! What happens if we scale first and then perform a translation?

Finally, let's try rotating our coordinate system.

Note: It can be very confusing if you get the order wrong when rotate() gets involved!

Takeaway: Transforms can include many commands separated by spaces. They are run starting at the end of the string, working backwards. For commands that do things with respect to the origin (scale, rotate), put them at the end. For commands that move points, put them at the start unless you know exactly why you need them at the end.

For advanced users: Transforms are building up an affine transform matrix by running those commands. Because each command manipulates the matrix, they build on past commands. Some commands like translate just add terms to the matrix. Others multiply the matrix, introducing the origin dependency mentioned earlier. You can manually define the affine transform if you like -- check the SVG documentation for more details.