Learn the general concepts of data mining along with basic methodologies and applications. Then dive into one subfield in data mining: pattern discovery. Learn in-depth concepts, methods, and applications of pattern discovery in data mining. We will also introduce methods for pattern-based classification and some interesting applications of pattern discovery. This course provides you the opportunity to learn skills and content to practice and engage in scalable pattern discovery methods on massive transactional data, discuss pattern evaluation measures, and study methods for mining diverse kinds of patterns, sequential patterns, and sub-graph patterns.
1.2.2. 2-D Drawing
Loading...
From the course by University of Illinois at Urbana-Champaign
Data Visualization
571 ratings
University of Illinois at Urbana-Champaign
571 ratings
Course 1 of 6 in the Specialization Data Mining
From the lesson
Week 1: The Computer and the Human
In this week's module, you will learn what data visualization is, how it's used, and how computers display information. You'll also explore different types of visualization and how humans perceive information.
Meet the Instructors
John C. HartProfessor of Computer Science
Department of Computer Science
So in order to use two-dimensional computer graphics for visualization,
we'll need to plot our data in two-dimensional graphics.
So we'll need to learn how to draw things in two-dimensional graphics and how to
set up a drawing canvas in a specific two-dimensional graphics system.
So now we can learn how to draw two-dimensional graphics.
What we're going to learn is how to set up
a two-dimensional drawing canvas and then how to draw things in it.
And we're going to learn how to do this using
this scalable vector graphics specification for two-dimensional graphics.
The scalable vector graphics specification is
a method for describing two-dimensional graphics for a variety of systems.
One of the systems that it works with is HTML,
so you can embed two-dimensional graphics in a web page by
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 view box.
The width and the height describe the width and height, usually in pixels,
of how the graphics will appear in your web page
The viewbox describes the coordinates that you'll be drawing with.
And so these are your canvas coordinates.
It'll start with an x and y coordinates and the canvas will extend to the point x plus w,
y plus h. So it'll have a width and height of w and h units for drawing.
And so the important thing to remember for svg is that this origin,
this x and y, is the upper left corner
and not the lower left corner in my previous example.
svg, particularly when it's being used for a web page,
is being used to describe a document system.
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 when we set up this viewbox,
we're setting up our 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 svg tag,
that's describing the actual display pixels of the - of the result.
And so we're automatically getting a canvas to
screen transformation between these two coordinate systems.
So here's an example of that plot of a parabola y
equals x squared using svg graphing coordinates.
Here's our svg tag.
We'll set up some width and height for some - some number
of pixels depending on our output device,
but we set up a viewbox that's going to give us the coordinates -
the canvas coordinates - 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 and we'll draw the axes 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 graphics specification is another scalable vector graphics canvas.
And in this case, we're going to put the canvas at a point 10 percent in,
since our original canvas goes from zero to one,
10 percent will be 0.1 units by - so we'd have a point 0.1, 0.1 here - that's the x,
y coordinate of the upper left corner of our canvas, our blue canvas.
And it's going to have a width of 80 percent,
that'll be 80 percent of the original drawing coordinates,
so it'll go from 0.1, 0.1 to 0.9, 0.9.
And its width will be 0.8 units and its height will be 0.8 units.
And so I can set this canvas up -
this sub canvas up - and I can set its own canvas coordinate systems.
So this is the coordinates that's going to be
displayed in - in the outer coordinate system.
And then these are the inner coordinates, the blue coordinates,
that we're going to use to draw things in 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 system,
we have to plot it as x comma 1 minus y,
but we can use a coordinate system where we don't need to
rescale things inside the center coordinates.
When we plot data here,
it goes through a coordinate transformation to figure out where
the point is in the yellow coordinate system and then it goes through
another coordinate transformation to get out of the yellow canvas coordinates
into the display coordinates defined by your width and height.
So there's several coordinate system transformations that are happening,
but we're setting up coordinate systems to make it more convenient for us
to draw and letting the computer take care of all the transformations.
As before, we're going to draw primitives by specifying vertices and
then we're going to connect those vertices with
either straight lines or smooth paths - those are called strokes.
And then we can fill in regions with fills and we can
specify various properties for fills and strokes and so on.
And so we can go through the different drawing primitives
available to us in the scalable vector graphics specification.
A very simple one is a circle.
So if I've set my canvas coordinates to go from 0, 0 to 1, 1,
I can specify a circle by specifying its center at the point cx,
cy in canvas coordinates;
in this case, one-half, one-half.
And I can set its radius to be four-tenths of a unit.
Since five-tenths of the unit would get me to the edge,
it leaves about one-tenth of a unit there.
I can set a property of the stroke to be
the color black and I can take - 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.
And this is going to be another useful data visualization tool.
Again, we set up a canvas - a drawing canvas - and then I 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 of the rectangle.
And then I say that I want the lines the - the strokes of
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 path by specifying a bunch of points - 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 point - 0.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.
And that way, I can specify a line by starting here and ending here at 0.2, 0.3.
And then I can specify
the next line by starting at the current position and moving to a new position, 0.4, 0.3.
So these Ms mean move from the previous position to a new position
without drawing a line and these Ls mean move from
a position to a new position while drawing a line.
This way I don't need to - if I'm drawing
a continuous line from one point through several other points,
I don't need to respecify these points,
I don't need to say draw a line from here to here and
then from here to here and specify this point twice,
I can specify this point once and say just draw a point to here from the previous point,
which is the end point of the previous line.
And so this will draw what I wanted to be a block,
I - but I'm missing this - this top part.
And this is part of the path specifications.
I'm drawing a path and this d is the data for the path.
If I want to get this missing line at the top,
I just need to add a z at the bottom.
And the z is - just says close the path.
That means take - draw one last line from
the last point I specified to the first point I specified.
And that will close the path.
And then I can finally - I can fill in
that closed path by just specifying a fill specification.
In this case, I didn't say stroke equals black,
because it may have been set up before that way,
but that would give you a - a black outline of a blue region.
So what did we learn?
We learned how to use the scalable vector graphics specification to make
our own line art for web pages and we figured out how to set up an svg drawing canvas,
which has its origin specification
in the upper left corner instead of the lower left corner.
And then we figured out how to draw a circle or rectangle and any polygonal shape.
So we learned how to set up
an svg drawing canvas and be able to draw simple shapes in it.
The svg canvas can be embedded in a web page.
So this is the first step in being able to set up
an interactive storytelling mode for
data visualization that you can embed in your own web pages.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
