Skip to main content
Search form
  • 00:00

    JOHN HART: So for most data visualization tasks,we're just going to need two dimensional computer graphicsto plot and display the data.In order to do that, we'll need to usedifferent coordinate systems.We use a different coordinate systemto plot the data than we used to display the data.We're going to use two dimensional graphics a lotwhen we visualize data.

  • 00:20

    JOHN HART [continued]: We're used to using two dimensional graphics.For example, for plotting functions.And so we'll focus on two dimensional graphicsnow as we look at methods for using graphicsfor visualization.What we're going to learn is the differencebetween vector graphics, which are used to specifytwo dimensional graphics.And raster graphics, which are used to display

  • 00:42

    JOHN HART [continued]: two dimensional graphics.And then we'll look at the coordinate system specificallythat are used for each of them.Vector graphics are the graphics that are used for drawing.We're used to drawing, we take a penand we'll put our pen down at one point.And then we'll move our pen across the paper,and then lift our pen up at another point

  • 01:03

    JOHN HART [continued]: and you get a nice straight line between them,a nice continuous line.In raster graphics, it's the graphicsthat are used, for example, for our televisions and our phones.There are rectilinear array of pixels,and these pixels are assigned colors.And by assigning certain pixel certain colors,you can represent those same shapes.

  • 01:25

    JOHN HART [continued]: So you will draw a shape using vector graphics.You will describe a point where youwant to start a line and a point where you want to stop a line,and you'll get either a straight line or a smooth curved linebetween them.And those will be converted to raster graphicsfor display, which will consist of the pixels thatget illuminated along that path in order

  • 01:48

    JOHN HART [continued]: to display that path that you described as a vector graphics.So this process is called rasterization.And so we'll specify a primitive as in a vector graphics format,we'll describe vertices, points on the plane.And then we will connect those points with strokes.In this case, with straight lines but

  • 02:09

    JOHN HART [continued]: they could be curved paths.And then those strokes can enclose a region.And so we can fill that region and we mayassign a color for that region.And for strokes, we may assign a color and a width of the strokeor have the stroke stylized, say with dashed lines or so on.The process of rasterization starts with these primitives

  • 02:31

    JOHN HART [continued]: defined by these few data points,and converts them into an array of pixels.So that they can be displayed.And so, this raster format representation of this triangleis as an array of pixels.And the dashed lines represent the original primitiveon the left, superimposed over the array of pixels

  • 02:52

    JOHN HART [continued]: that are representing it.And in this case, we have pixels along the edges thatare colored blue, and pixels in the field in regionthat are colored pink.And you'll notice when we rasterize a shape,we can get aliasing.And that's the fact that this nice straight line herein our vector graphics representation

  • 03:12

    JOHN HART [continued]: appears as a staircased line.You get these stairstep artifactswhen you rasterize a smooth straight lineand because those stairsteps try to look like the original linebut look a little bit different.We call that an alias.And that problem is called aliasing.When we draw primitives in two dimensions--

  • 03:33

    JOHN HART [continued]: when we want to draw shapes for two dimensional graphics,for example, for plotting functions,we're going to need to coordinate systemin which to draw those shapes.So we know where to place the vertices, for example,of a triangle.And so we need to define a coordinate system.And these coordinates, I will call canvas coordinates,they're the coordinates that we'regoing to draw things with.

  • 03:54

    JOHN HART [continued]: In this case, the canvas coordinateshave been defined to go from minus 1 minus 1 to 1, 1.And so they set up the square region of a plane.The origin would be here in the middle.You can define your canvas coordinatesto be anything you like.You want to define them to be something convenient sothat you can draw your shapes without a lot of trouble.

  • 04:15

    JOHN HART [continued]: In this case, I've drawn a plot of a parabola.The parabola y equals x squared.And so I've got a curved path starting at this point heregoing to this point here.And I've defined my canvas coordinate systemto be something convenient for that plot.In this case, I've started going from minus 1/8,minus 1/8 to 1 1/8.

  • 04:38

    JOHN HART [continued]: 1 1/8.And that's so that, as, I move 1/8, 1/8 in, I'm at the 0,0 in my coordinate system.And I can draw my plot going from 0, 0 to 1, 1 here.And then I've got an additional 1/8of a unit surrounding the plot in orderto do things to add metadata like the title

  • 04:59

    JOHN HART [continued]: of the visualization and draw the axes and label the axes.So that's convenient.But as I'm resizing the display, Imay want the fonts to be larger or smaller.And I'll need a bigger margin surrounding the plot,or I may want the plot to be largerand the margin to be smaller.So in two dimensional computer graphics,

  • 05:20

    JOHN HART [continued]: we can set up hierarchical coordinate systems.And this just means you have a canvas in a canvas.In this case, we have a yellow canvasthat is the coordinate system for the entire plot,the entire visualization.And then we have an inner canvas.That is a coordinate system just for the plotted data.

  • 05:40

    JOHN HART [continued]: In this case, the parabola and so I'veset up the outer coordinate systemto go from 0, 0 to 1,1 in this region.And then I've set up an inner coordinate systemto go from 1/10 to 9/10 and 1/10, 1/10, to 9/10, 9/10 here.And I've defined its coordinate system to go from 0, 0 to 1, 1.

  • 06:04

    JOHN HART [continued]: So now, I can plot inside this coordinate systemusing coordinates that are convenient for plottingthis parabola.And then I can plot in this outer coordinate system usingcoordinates convenient for drawing the decorations,the axes, and the title.And so we can define whatever coordinate system we want,wherever we want in order to make it more convenient to draw

  • 06:26

    JOHN HART [continued]: a two dimensional graphics.There's also screen coordinates.And these are the coordinates thatare used for raster graphics, for the displayof the information.And then this coordinate system, wehave a grid going from 0, 0 to whatever our screenresolution is.In this case, since we're going from 0, 0,

  • 06:48

    JOHN HART [continued]: we go to our horizontal resolution minus 1,vertical resolution minus 1.If our screen resolution was 100, 100,we'd be going from 0, 0 to 99, 99.And the pixels are located on these grid intersections.And so you have a integer coordinate

  • 07:09

    JOHN HART [continued]: for each pixel location, which is usefulwhen you're actually displaying an image using these pixels.You want to be able to locate each one of these pixels.And so there is a canvas to screentransformation that happens.So we're going to define our coordinate system goingfrom some left bottom point to some right top point.

  • 07:34

    JOHN HART [continued]: And then we're going to plot using those coordinates.And those coordinates are going to be convertedto the corresponding pixel locationson our display screen.And those pixel locations are goingto be defined someplace on the display screen starting at xyand going to the point x plus the width and pixels minus 1,

  • 07:54

    JOHN HART [continued]: and then y plus the height and pixels minus 1.So this coordinate system happens automatically.And you can define these coordinates to be anything.And you can define these coordinates to beany location on the screen.And so your 2D graphics that you're plotting on your canvascan be automatically resized and repositioned anywhere

  • 08:15

    JOHN HART [continued]: on the screen just by controlling this canvasto screen transformation.You can also work directly in screencoordinates by setting up a canvas to screen transformationthat uses canvas coordinates that match up with your screencoordinates.In this case, you're just sending your left edgeand your bottom edge to x and y, and your right edge

  • 08:35

    JOHN HART [continued]: and your top edge to x and y plus the width minus 1and the height minus 1.And in this case, you can specifythe coordinates of your primitivesand vector graphics using the same coordinates for the pixelsthat will be translated to.I don't recommend doing this because when you'reworking in screen coordinates, you'renot going to know what your output screen display

  • 08:59

    JOHN HART [continued]: device might be.It could be a cell phone.It could be a television.It could be a watch it could be a video wall.And all of those will have different resolutions.And you want to make sure that your two dimensionalgraphics is properly displayed.It's not too small or too large when it'sdisplayed on different devices.So it's better to work in some canvas coordinates

  • 09:20

    JOHN HART [continued]: that's convenient for you, and let the canvasto screen transformation worry about converting itto the corresponding pixels.So what have we learned?We've learned that vector graphicsis used to describe shapes.And that raster graphics are whatwe use to display those shapes using a table of pixels.

  • 09:43

    JOHN HART [continued]: And that we can set up coordinatesthat are convenient for us to plot in a canvas.And those coordinates are different from the rastercoordinates that we use to display the canvas.And we can set up canvases within a canvas, whichallows us to divide up the screen in ways thatmake it more convenient for us to set up a two dimensional

  • 10:03

    JOHN HART [continued]: visualization display.So we learned that we describe shapes using vector graphics,but we display shapes using raster graphics.We can describe our shapes using the coordinate system of rastergraphics, the coordinate systems of the screens pixels.Or we can describe them using the canvas coordinatesof our vector graphics.

  • 10:23

    JOHN HART [continued]: Or we can use whatever coordinatesystem is most convenient for us to plot the data.

Video Info

Series Name: Data Visualization

Episode: 4

Publisher: University of Illinois

Publication Year: 2016

Video Type:Tutorial

Methods: Data visualization, Visual representations

Keywords: communication aids; computer graphics; coordinate systems; coordinate transformation; data visualisation; graphical presentation of data; raster; vectorization ... Show More

Segment Info

Segment Num.: 1

Persons Discussed:

Events Discussed:



John C. Hart, Professor of Computer Science at the University of Illinois—Urbana-Champaign, discusses two-dimensional computer graphics to plot and display data, including vector and raster graphics, and working with canvas, hierarchical, and screen coordinate systems.

Looks like you do not have access to this content.

2-D Graphics

John C. Hart, Professor of Computer Science at the University of Illinois—Urbana-Champaign, discusses two-dimensional computer graphics to plot and display data, including vector and raster graphics, and working with canvas, hierarchical, and screen coordinate systems.

Copy and paste the following HTML into your website