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:
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.
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).
Now let's move the origin to the center. The g tag assigns 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!