Data Visualization

||Jai Sri Gurudev||

Adichunchanagiri University
Faculty of Engineering Management & Technology
Department of Information Science & Engineering

Orientation Program
Day & Date: Monday | 17 Feb 2025
Time: 11AM

By,
Mrs. Afsha Firdose
Assistant Professor
Department of ISE
UNIT 1 : INTRODUCTION TO
COMPUTER GRAPHICS

Prepared By,
Prof. Afsha Firdose
Assistant Professor
Department of ISE
 Computer Graphics
• Computer have become more powerful tool for the rapid and economical production of
pictures.
• Early applications in engineering and science had to rely on expensive and cumbersome
equipment.
• Example: computer graphics were used in computer-aided design (CAD) for the
aircraft and auto industries. They were limited by high hardware costs and non-portable
software.
• Computer graphics was used to display simple data graphs usually plotted on a character
printer.
 What is computer graphics?
• Computer Graphics is the creation and manipulation of images or pictures with the
help of computers.

• Computer graphics started as a technique to enhance the display of information

generated by a computer.

• This ability to interpret and represent numerical data in pictures has significantly
increased the computer’s ability to present information to the user in a clear and
understandable form.

• Large amount of data are rapidly converted into bar charts, pie charts, and graphs.

• The major product of computer graphics is a picture. With the help of CG, pictures
can be represented in 2D and 3D space.
Contd..
• Many applications show various parts of the displayed picture
changing in size and orientation. Such type of transformations i.e.
the pictures can be made to grow, shrink, rotate and etc. can be
achieved through CG.
• The display on them is often too big to be shown in their entirety.
Thus, with the help of CG, a technique called clipping can be used
to select just those parts of the picture that lie on the screen and to
discard the rest.
• CG is in daily use in the field of science, engineering, medicine,
entertainment, advertising, the graphic arts, the fine arts,
business, education etc.
 Pixel (picture element)
• A pixel is the smallest piece of information in an image.

• Pixels are normally arranged in a regular 2D grid, and are often

represented using dots or squares.

• The intensity of each pixel is variable; in color systems, each pixel has
typically three or four components such as red, green, and blue, or cyan,
magenta, yellow, and black.
 Resolution
• Resolution is the number of rows that appear from top to
bottom of a screen and in turn the number of pixels or pixel
elements that appear from left to right on each scan line.
• Based on this resolution only the effect of picture appears on
screen.
• In other words greater the resolution greater will be the clarity
of picture. That is resolution value is directly proportional to
clarity of picture.
 Resolution Settings
1) Image Resolution: It refers to pixel spacing. In normal PC
monitor it ranges between 25 to 80 pixels per inch.

2) Screen Resolution: It is the number of distinct pixels in each

dimension that can be displayed.

• For example, a computer with a display resolution of 1280 x 768

will produce a maximum of 98,3040 pixels on a display screen.
Each pixel has a unique logical address, a size of eight bits or
more and, in most high-end display devices, the ability to project
millions of different colors.
 Text mode

• Text mode is a personal computer display setting that divides

the display screen into 25 rows and 80 columns in order to
display text without images.
• In text mode, each box can contain one character. Text mode
contrasts with graphics mode, which features an array of
pixels instead of text boxes.
• Text mode is also known as character mode or alphanumeric
mode.
 Graphics mode

• Graphics mode is a computer display mode that

generates image using pixels.
• Today, most users operate their computer in a
graphics mode opposed to a text mode or command
line environment.
 COMPUTER GRAPHICS APPLICATION

1. Graphs & Charts

Visualizing data for research, reports, and
publications.

2. CAD/CAM stands for computer-aided

design and computer-aided manufacturing.
Designing buildings, automobiles, and aircraft
is done with the help of computer-aided
drawing, this helps in providing minute details
to the drawing and producing more accurate and
sharp drawings with better specifications.
For example, many mechanical parts are
designed in a 3D computer modeling package
and then automatically produced on a computer-
controlled milling device.
3. Virtual Reality: is a technology that creates a simulated environment,
allowing users to feel like they are in a different place or world. (simulated 3D
environment)
• Interactive experiences for training, design, and exploration.
4. Data visualization: translates complex data sets into visual formats that are
easier for the human brain to understand such as Charts, Graphs, Maps,
Dashboards.
5. Education and Training:
• Educational Aids: Computer models for learning and understanding
complex systems.
• Simulators: Specialized systems for training pilots, air traffic controllers,
etc.
6.Computer Art
7. Entertainment:
• Television Production: Using computer graphics in TV shows and
movies.
• Motion Pictures: Creating special effects and animated characters.
• Music Videos: Visualizing music through animation and graphics.
8. Image Processing
• Picture Enhancement: Improving the quality of existing images.
• Image Analysis: Extracting information and patterns from images.
• Medical Applications: Using image processing in tomography and
surgical simulations.
9. Graphical User Interfaces
• It is common now for applications software to provide graphical user
interface (GUI).
• A major component of graphical interface is a window
manager that allows a user to display multiple, rectangular
screen areas called display windows.
Video Display Devices

Cathode-ray Tube(CRT)

Raster Scan Random Scan

Display Display
 Cathode Ray Tube (CRT)

• The most common graphics output device is the video

monitor which is based on the standard cathode ray tube
(CRT) design. Figure illustrates the basic operation of a CRT.

Figure : Cathode Ray Tube (CRT)

 Contd..
• As shown in above figure, it consists of electron gun, focusing system, deflection

plates and a phosphor-coated screen.

• Electron gun is the primary component of a CRT. When the heat is supplied to the

electron gun by directing a current, a beam of electrons emitted by an electron gun,

passes through focusing and deflection systems that direct the beam toward specified

positions on the phosphor-coated screen.

• The focusing system in a CRT is needed to force the electron beam to converge into a

small spot as it strikes the phosphor.

• There are two pairs of deflection plates - Horizontal deflection plates and vertical

deflection plates.

• One pair of plates is mounted horizontally to control the vertical deflection, and the

other pair is mounted vertically to control horizontal deflection.

Contd..
• The beam passes between the two pairs of deflection plates and positioned on the

screen.

• The phosphor then emits a small spot of light at each position contacted by the

electron beam.

• Because the light emitted by the phosphor fades very rapidly, some method is needed

for maintaining the screen picture.

• One Way to keep the phosphor glowing is to redraw the picture repeatedly by

quickly directing the electron beam back over the same points. This type of display

is called a refresh CRT.

• In CRT monitors there are two techniques of displaying images:

1) Raster scan displays

2) Random scan displays

 1. Raster Scan Displays

Figure 2 : Raster Scan Display Figure 3 : Horizontal and Vertical

Retrace
 Raster Scan Systems

Figure 4: Architecture of a simple raster system

Contd..

Figure 5: Architecture of a raster system

 Raster Scan Display Processor
• Figure 9 shows one way to set up the organization of a raster system
containing a separate display processor, sometimes referred to as a
graphics controller or a display coprocessor.

Figure 6: Architecture of a raster-graphics system with a

display processor
2. Random Scan Display/ Vector-Scan Display/ Calligraphic Displays

Figure 7: Random Scan Display

Random-Scan Systems/ Random-Scan Display
Processor

Figure 8: Architecture of a simple random scan system

Graphics Software
• There are two broad classifications for computer-graphics software

1. Special-purpose packages: generate pictures, graphs, charts, painting

programs or CAD systems in some application area without worrying
about the graphics procedure

2. General programming package: GL (Graphics Library), OpenGL,

VRML (Virtual-Reality Modeling Language), Java 2D And Java 3D
 Introduction to
Computer Graphics with OpenGL/GLUT
 What is OpenGL?
• A software interface to graphics hardware
• A basic library of functions is provided in OpenGL for specifying graphics
primitives, attributes, geometric transformations, viewing transformations,
and many other operations.

• Graphics rendering API (Low Level)

– High-quality color images composed of geometric and image

primitives

– Window system independent

– Operating system independent

 Basic OpenGL Syntax

• Function names in the OpenGL basic library are prefixed with gl. The
component word first letter is capitalized.

eg:- glBegin, glClear, glCopyPixels, glPolygonMode

• Symbolic constants that are used with certain functions as parameters are
all in capital letters, preceded by “GL”, and component are separated by
underscore.
eg:- GL_2D, GL_RGB, GL_CCW, GL_POLYGON,
GL_AMBIENT_AND_DIFFUSE.
• To indicate a specific data type, OpenGL uses special built-in, data-type
names
eg: GLbyte, GLshort, GLint, GLfloat, GLdouble, Glboolean
Related Libraries:
1. OpenGL Utility(GLU)
2. Open Inventor
3. Window-system libraries
4. OpenGL Utility Toolkit(GLUT)

Header Files:
#include <windows.h> //precedes other header files for including Microsoft windows
version of OpenGL libraries

#include<GL/gl.h>
#include <GL/glu.h>
 Display-Window Management Using GLUT
Step 1: initialization of GLUT
glutInit (&argc, argv);
Step 2: title
glutCreateWindow ("An Example OpenGL Program");
Step 3: Specification of the display window
glutDisplayFunc
Step 4: one more GLUT function
glutMainLoop ( );
Step 5: these parameters using additional GLUT functions
glutInitWindowPosition(50,100);
glutInitWindowSize(400,300);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
 A Complete OpenGL Program

• Step 1: to set background color

• glClearColor (1.0, 1.0, 1.0, 0.0);
• Step 2: to set window color
• glClear (GL_COLOR_BUFFER_BIT);
• Step 3: to set color to object
• glColor3f (0.0, 0.4, 0.2);
#include <GL/glut.h> // (or others, depending on the system in use)
void init (void)
{

glClearColor (1.0, 1.0, 1.0, 0.0); // Set display-window color to

white. glMatrixMode (GL_PROJECTION); // Set
projection parameters. gluOrtho2D (0.0, 200.0, 0.0, 150.0);
}
void lineSegment (void)
{

glClear (GL_COLOR_BUFFER_BIT);// Clear display window.

glColor3f (0.0, 0.4, 0.2); // Set line segment color to green.
glBegin (GL_LINES);
glVertex2i (180, 15); // Specify line-segment geometry.
glVertex2i (10, 145);
glEnd ( );
glFlush ( ); // Process all OpenGL routines as quickly as possible.
}
 void main (int argc, char** argv)
{
glutInit (&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition (50, 100);
glutInitWindowSize (400, 300);
glutCreateWindow ("An Example OpenGL Program");
init ( );
glutDisplayFunc (lineSegment);
glutMainLoop ( );
}
 Coordinate Reference Frames
Screen co-ordinates:

✔ Locations on a video monitor are referenced in integer screen coordinates, which

correspond to the integer pixel positions in the frame buffer.

✔ Scan-line algorithms for the graphics primitives use the coordinate descriptions to
determine the locations of pixels

✔ Example: given the endpoint coordinates for a line segment, a display algorithm must calculate
the positions for those pixels that lie along the line path between the endpoints.

✔ Since a pixel position occupies a finite area of the screen, the finite size of a pixel must be
taken into account by the implementation algorithms.

✔ For the present, we assume that each integer screen position references the centre of a pixel
area.

✔ Once pixel positions have been identified the color values must be stored in the frame buffer
i) setPixel (x, y);

● stores the current color setting into the frame buffer at integer position(x, y), relative to
the position of the screen-coordinate origin
ii) getPixel (x, y, color);
● Retrieves the current frame-buffer setting for a pixel location;
 Absolute and Relative Coordinate Specifications
• Absolute coordinate:

⮚ So far, the coordinate references that we have discussed are stated as

absolute coordinate values.
⮚ This means that the values specified are the actual positions within the
coordinate system in use.
• Relative coordinates:

⮚ However, some graphics packages also allow positions to be specified using

relative coordinates.
⮚ This method is useful for various graphics applications, such as producing
drawings with pen plotters, artist’s drawing and painting systems, and
graphics packages for publishing and printing applications.
⮚ Taking this approach, we can specify a coordinate position as an offset from
the last position that was referenced (called the current position).
 Specifying a Two-Dimensional World-Coordinate
Reference Frame in OpenGL

⮚ The gluOrtho2D command is a function we can use to set up any 2D

Cartesian reference frames.
⮚ The arguments for this function are the four values defining the x and y
coordinate limits for the picture we want to display.
⮚ gluOrtho2D function specifies an orthogonal projection
 glMatrixMode
(GL_PROJECTION);
glLoadIdentity ( );
gluOrtho2D (xmin, xmax, ymin, ymax);

The display window will then be referenced by coordinates (xmin, ymin) at the lower-
left corner and by coordinates (xmax, ymax) at the upper-right corner, as shown in
Figure
 OpenGL Point Functions
⮚ The type within glBegin() specifies the type of the object and its value can be as follows:
• GL_POINTS
⮚ Each vertex is displayed as a point.
⮚ The size of the point would be of at least one pixel.

⮚ Then this coordinate position, along with other geometric descriptions we may have in our
scene, is passed to the viewing routines.
⮚ Unless we specify other attribute values, OpenGL primitives are displayed with a default size
and color.

⮚ The default color for primitives is white, and the default point size is equal to the size of a single
screen pixel.

⮚ Syntax:
Case 1:

glBegin (GL_POINTS); glVertex2i (50,

100);
glVertex2i (75, 150);
glVertex2i (100, 200);
 glEnd ( );
Case 2:

we could specify the coordinate values for the preceding points in arrays such as int
point1 [ ] = {50, 100};
int point2 [ ] = {75, 150}; int point3 [ ] =
{100, 200};
and call the OpenGL functions for plotting the three points as

glBegin (GL_POINTS); glVertex2iv

(point1); glVertex2iv (point2);
glVertex2iv (point3); glEnd ( );
Case 3:

specifying two point positions in a three dimensional world reference frame. In this case, we
give the coordinates as explicit floating-point values:
glBegin (GL_POINTS); glVertex3f (-78.05,
909.72, 14.60);
glVertex3f (261.91, -5200.67, 188.33);
glEnd ( );
 OpenGL LINE FUNCTIONS
⮚ Primitive type is GL_LINES

⮚ Successive pairs of vertices are considered as endpoints and they are connected to
form an individual line segments.
⮚ Note that successive segments usually are disconnected because the vertices are
processed on a pair-wise basis.
⮚ we obtain one line segment between the first and second coordinate positions and
another line segment between the third and fourth positions.
⮚ if the number of specified endpoints is odd, so the last coordinate position is ignored.
Case 1: Lines
glBegin (GL_LINES);

glVertex2iv (p1); glVertex2iv

(p2); glVertex2iv (p3);
glVertex2iv (p4); glVertex2iv
(p5);
glEnd ( );
 Case 2: GL_LINE_STRIP:

Successive vertices are connected using line segments. However, the final vertex is
not connected to the initial vertex.
glBegin (GL_LINES_STRIP);
glVertex2iv (p1); glVertex2iv (p2);
glVertex2iv (p3); glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );

Case 3: GL_LINE_LOOP:

Successive vertices are connected using line segments to form a closed path or loop
i.e., final vertex is connected to the initial vertex.
glBegin (GL_LINES_LOOP);
glVertex2iv (p1); glVertex2iv (p2);
glVertex2iv (p3); glVertex2iv (p4);
glVertex2iv (p5);
glEnd ( );
 Point Attributes
Basically, we can set two attributes for points: color and size.
Opengl Point-Attribute Functions
Color:

🡺 The displayed color of a designated point position is controlled by

the current color values in the state list.
🡺 Also, a color is specified with either the glColor function or the glIndex
function.
Size:
🡺 We set the size for an OpenGL point with
glPointSize (size);
and the point is then displayed as a square block of pixels.
Ex:
glColor3f (1.0, 0.0, 0.0);

glBegin (GL_POINTS);
glVertex2i (50, 100);
glPointSize (2.0);
glColor3f (0.0, 1.0, 0.0);
glVertex2i (75, 150);
glPointSize (3.0);
glColor3f (0.0, 0.0, 1.0);

glVertex2i (100, 200); glEnd

( );
 Line-Attribute Functions OpenGL
In OpenGL straight-line segment with three attribute settings: line color, line-width, and line style.
OpenGL Line-Width Function
🡺 Line width is set in OpenGL with the function
Syntax: glLineWidth (width);
OpenGL Line-Style Function
🡺 By default, a straight-line segment is displayed as a solid line.
Syntax: glLineStipple (repeatFactor, pattern);

Pattern:

🡺 Parameter pattern is used to reference a 16-bit integer that describes how the line
should be displayed.
🡺 1 bit in the pattern denotes an “on” pixel position, and a 0 bit indicates an “off”
pixel position.
🡺 The pattern is applied to the pixels along the line path starting with the low-order
bits in the pattern.
🡺 The default pattern is 0xFFFF (each bit position has a value of 1),which produces a
solid line.
 Curve Attributes
Parameters for curve attributes are the same as those for straight-line segments.

🡺 We can display curves with varying colors, widths, dot-dash patterns, and
available pen or brush options.

🡺 Methods for adapting curve-drawing algorithms to accommodate attribute

selections are similar to those for line drawing.

🡺 Raster curves of various widths can be displayed using the method of

horizontal or vertical pixel spans.
Case 1: Where the magnitude of the curve slope |m| <= 1.0, we plot vertical spans;
Case 2: when the slope magnitude |m| > 1.0, we plot horizontal spans.
 Different methods to draw a curve

Method 1: Using circle symmetry property, we generate the circle path with vertical
spans in the octant from x = 0 to x = y, and then reflect pixel positions about the line y =
x to y=0.
Method 2: Another method for displaying thick curves is to fill in the area between two
Parallel curve paths, whose separation distance is equal to the desired width. We could
do this using the specified curve path as one boundary and setting up the second
boundary either inside or outside the original curve path. This approach, however, shifts
the original curve path either inward or outward, depending on which direction we
choose for the second boundary.
Method 3:The pixel masks discussed for implementing line-style options could also be
used in raster curve algorithms to generate dashed or dotted patterns
Method 4: Pen (or brush) displays of curves are generated using the same techniques
discussed for straight-line segments.
Method 5: Painting and drawing programs allow pictures to be constructed interactively
by using a pointing device, such as a stylus and a graphics tablet, to sketch various curve
shapes.
 Line Drawing Algorithm
✔ A straight-line segment in a scene is defined by coordinate
positions for the endpoints of the segment.
✔ To display the line on a raster monitor, the graphics system
must first project the endpoints to integer screen
coordinates and determine the nearest pixel positions along
the line path between the two endpoints then the line color
is loaded into the frame buffer at the corresponding pixel
coordinates
✔ The Cartesian slope-intercept equation for a straight line is
• y=m * x +b >(1)
• with m as the slope of the line and b as the y intercept.
 Bresenham’s Algorithm(Line Drawing)
It is an accurate and efficient raster line generating algorithm developed by
Bresenham. This algorithm uses only incremental integral calculations.
Bresenham’s Line-Drawing Algorithm for |m| < 1.0
1. Input the two line endpoints and store the left endpoint in (x0, y0)
2. Set the color for frame-buffer position (x0, y0); i.e., plot the first point
3. Calculate the constants ∆x, ∆y, 2∆y, and 2∆y - 2∆x, and obtain the starting
value for the decision parameter as p0 = 2∆y-∆x
4. At each xk along the line, starting at k = 0, perform the following test: If pk <
0, the next point to plot is (xk + 1, yk ) and pk+1 = pk + 2∆y Otherwise, the
next point to plot is
(xk + 1, yk + 1) and pk+1= pk + 2∆y - 2∆x
5. Repeat step 4 ∆x - 1 more times.