2-D Drawing

JOHN HART: So, in order to use two-dimensional computergraphics for visualization, we'llneed to plot our data in two-dimensional graphics.So we'll need to learn how to draw thingsin two-dimensional graphics and howto set up a drawing canvas in a specific two-dimensionalgraphics system.So now we can learn how to draw two-dimensional graphics.

JOHN HART [continued]: What we're going to learn is how to set upa two-dimensional drawing canvas and then howto draw things in it.And we're going to learn how to do this using the ScalableVector Graphics specification for two-dimensional graphics.The Scalable Vector Graphics specificationis a method for describing two-dimensional graphicsfor a variety of systems.

JOHN HART [continued]: One of the systems that it works with is HTML.So you can embed two-dimensional graphics in a web pageby putting an SVG tag in your HTML code for the web page.And this is an example SVG tag.It has a width, a height, and a viewbox.The width and the height describe the width and height,

JOHN HART [continued]: usually in pixels, of how the graphics willappear in your web page.The viewbox describes the coordinatesthat you'll be drawing with, and so these are your canvascoordinates.It'll start with an x and y coordinate.And the canvas will extend to the point x plus w y plus h.

JOHN HART [continued]: So it'll have a width and height of w and h units for drawing.And, so, the important thing to remember for SVGis that this origin, this x and y,is the upper-left corner and not the lower-left cornerin my previous example.SVG, particularly when it's being used for a web page,is being used to describe a document system.

JOHN HART [continued]: And we tend to read left to right, top to bottom,and the coordinate system is set up appropriately.The other thing to remember is that whenwe set up this viewbox, we're setting upour canvas coordinate system.These are the coordinates we're going to be drawing with.And when we describe the width and the height of the SVGtag, that's describing the actual display

JOHN HART [continued]: pixels of the result. And so we're automaticallygetting a canvas-to-screen transformationbetween these two coordinate systems.So here's an example of that plot of a parabola yequals x squared using SVG graphing coordinates.

JOHN HART [continued]: Here's our SVG tag.We'll set up some width and heightfor some number of pixels, depending on our output device.But we set up a view box that's goingto give us the coordinates, the canvascoordinates, that we're going to use to draw the graph.And so we'll set up coordinate systems going from 0,0 to 1, 1 for canvas coordinates to draw in.

JOHN HART [continued]: And we'll draw the axis, title, and other decorations.Then we can set up another canvas with another SVG tag.And so one of the elements of the scalable vector graphicsspecification is another scalable vector graphicscanvas.And in this case, we're going to put the canvas at a point 10%

JOHN HART [continued]: in.Since our original canvas goes from 0 to 1,10% would be 0.1 units.So we'd have a point 0.1, 0.1 here.That's the x-y-coordinate of the upper left cornerof our canvas, our blue canvas.And it's going to have a width of 80%.That'll be 80% of the original drawing coordinates.

JOHN HART [continued]: So it'll go from 0.1, 0.1 to 0.9, 0.9.And its width will be 0.8 units, and its heightwill be 0.8 units.And so I can set this canvas up, this sub-canvas up.And I can set its own canvas coordinates systems.So this is the coordinates it's goingto be displayed in in the outer coordinate system,

JOHN HART [continued]: and then these are the inner coordinates,the blue coordinates, that we're going to use to draw thingsin this blue coordinate system.So its canvas coordinates extend from 0, 0 to 1, 1.0, 0 to 0 plus 1, 0 plus 1.So then we can plot the data.In this case, since we're starting at the lower left

JOHN HART [continued]: system, we have to plot it as (x,1-y) But we can usea coordinate system where we don't need to rescale thingsinside this inner coordinates.When we plot data here, it goes througha coordinate transformation to figure outwhere the point is in the yellow coordinate system,and then it goes through another coordinate transformationto get out of the yellow canvas coordinates

JOHN HART [continued]: into the display coordinates defined by your widthand height.So there's several coordinate system transformationsthat are happening.But we're setting up coordinate systemsto make it more convenient for us to drawand letting the computer take careof all the transformations.As before, we're going to draw primitivesby specifying vertices, and then we're

JOHN HART [continued]: going to connect those vertices with either straight linesor smooth paths.Those are called strokes.And then we can fill in regions with fills.And we can specify various propertiesfor fills and strokes, and so on.And so we can go through the different drawing primitivesavailable to us in the Scalable Vector Graphic specification.

JOHN HART [continued]: A very simple one is a circle.So if I've set my canvas coordinatesto go from 0, 0 to 1, 1, I can specify a circleby specifying its center at the point cx, cy, in canvascoordinates, in this case, 1/2, 1/2.And I can set its radius to be 4/10 of a unit.Since 5/10 of the unit would get me to the edge,

JOHN HART [continued]: it leaves about 1/10 of a unit there.I can set a property of the stroke to be the color black.And I can set the property of its fill to be the color blue.And I get a black circle with a blue interior as a result.And that will be embedded, in this case, in my web page.You can also specify a rectangle.

JOHN HART [continued]: And this is going to be another useful data visualization tool.Again, we set up a canvas, a drawing canvas, and thenI say rect.And I specify a point.In this case, 0.3, 0.2 gives me a single point,and then I specify the width and the height of the rectangle.And this point I've specified will be the upper left point

JOHN HART [continued]: of the rectangle.And then I say that I want the lines, the strokesof the rectangle, to be black.And I want it to be filled with a blue color.And I get this resulting rectangle.You can also specify paths.In this case, I've specified a pathby specifying a bunch of points--

JOHN HART [continued]: 0.2, 0.1, 0.2, 0.3, 0.4, 0.3, through here.And then I've specified a bunch of commands.And these commands are moved to the point0.2, 0.1, so move without drawing a line,and then move while drawing a line from 0.2, 0.1 to 0.2, 0.3.

JOHN HART [continued]: And that way, I can specify a lineby starting here and ending here at 0.2, 0.3.And I can specify the next line by startingat the current position and movingto a new position 0.4, 0.3.So these Ms mean move from the previous positionto a new position without drawing a line.

JOHN HART [continued]: And these Ls mean move from a position to a new positionwhile drawing a line.This way, I don't need to, if I'm drawing a continuous linefrom one point through several other points,I don't need to respecify these points.I don't need to say, draw a line from hereto here, and then from here to here,and specify this point twice.

JOHN HART [continued]: I can specify this point once, and say, just draw a pointto here from the previous point, whichis the endpoint of the previous line.And so this will draw what I wanted to be a block I,but I'm missing this top part.And this is part of the path specification,so I'm drawing a path.And this d is the data for the path.

JOHN HART [continued]: But I want to get this missing line at the top.I just need to add a Z at the bottom.And this Z just says close the path.That means draw one last line from the last point I specifiedto the first point I specified.And that will close the path.And then I can finally fill in that

JOHN HART [continued]: closed path by just specifying a fill specification.In this case, I didn't say stroke equals blackbecause it may have been set up before that way,but that would give you a black outline of a blue region.So what did we learn?We learned how to use the scalable vector graphics

JOHN HART [continued]: specification to make our own line art for web pages.We figured out how to set up an SVG drawing canvas, whichhas its origin specification in the upper-left corner insteadof the lower-left corner, and then wefigured out how to draw a circle, a rectangle,and any polygonal shape.So we learned how to set up an SVG drawing canvasand be able to draw simple shapes in it.

JOHN HART [continued]: The SVG canvas can be embedded in a web page.So this is the first step in beingable to set up an interactive storytellingmode for data visualization that you can embed in your own webpages.[MUSIC PLAYING]