1. Rectangles. How does SVG understand coordinates?
The coordinate system starts at the top left corner. Positive y values move down towards the bottom. SVG elements are just HTML tags, so we can use CSS to apply styles. In general use classes and the <style> block to apply styles, but here I wanted to avoid scrolling up and down. This example uses several important styles for color and transparency. Semi-transparency is really useful for showing density in data.
2. Paths. This is the most complicated SVG element, but also one of the most useful. It contains a tiny programming language. Do some experiments on your own to see the effect of L vs M. (Hint: it matters for stroke but not fill.) Check the API linked above for nifty features like Bezier curves.
In-class project: Make a plot like Minard's. Coordinate and color information is included in an HTML comment.
3. 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? Challenge: add rotate() and scale() to the transform block to make the "movable" circle match the "target" circle. Does the order of operations matter?
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.
In the first panel, there is just a circle at 0,0 in the shifted coordinate system, which corresponds to 50,50 in the actual plot. In the second panel I'm using a translate() transformation to move the circle to the right. In the third panel I apply two transformations: scale() and translate(). scale() stretches things -- it's like multiplying all coordinates by a constant. In the fourth panel I'm doing the exact same transformations, but in the opposite order. You can tell that in the first case the scale is applied after the translate: the circle not only gets bigger, it also moves, because its horizontal position is non-zero and is also being scaled. Finally, the last two panels show the effect of rotate(). In the first case the circle is rotated 160 degrees clockwise around the 0,0 position (ie the center of the SVG, after the global translation). In the last case, the circle is rotated before it is moved, which has no visible effect.
