Notes of Lecture 1

1- Data display requires planning:

 Complex datasets can be accessed, explored & analyzed
2- The greatest challenge of our information rich era:
 How can these questions be answered quickly
3- Data is moving target
4- When beginning visualization: focus on all data that has been collected
5- Visualization starts with questions
 Why was data collected
 What’s interesting about it
Most important of understanding data is: identifying question that you want to answer
6- Process of understanding data begins with set numbers & question
7- Process are:
 Acquire: Obtain the data, from a file on a disk or a source over a network.
 Parse: Provide some structure for the data’s meaning, and order it into categories.
 Filter: Remove all but the data of interest.
 Mine: Apply methods (statistics or mining)
 Represent: Choose a basic visual model, such as a bar graph, list, or tree.
 Refine: Improve the basic representation to make it clearer.
 Interact: manipulating the data or controlling what features are visible.
Visualization should convey the unique properties of dataset.
8- Functions of each process:
 Acquire: loadString() , loadBytes()
 Parse: split()
 Filter: for(), if (item[i].start with())
 Mine: min(), max(), abs()
 Represent: Map(), EndShape(), BeginShape()
 Refine: fill(), strokeWeight(), smooth()
 Interact: mouseMoved(), mouseDragged(), keyPressed()
Notes of Lecture 2
1- Processing is simple programming environment to make it easier to develop visually apps
with animations and provide users with feedback by interaction
2- Processing program called sketch
 Stored in sketch book access by: “file sketch book”
3-  To open sketch from anywhere on pc: “file open”
 Advanced programmers need not use the processing may instead use its libraries
with the Java environment of choice.
4- Basic mode:
 program written as list of statements
 series of commands are used to preform task or create single image without
animation

5- Continuous sketch:
 interactive programs are drawn as series of frames by add setup() & drawn()
6-  To package your current sketch as applet inside sketch folder
 To open your sketch in browser by open (index.html)

Ali Elsayed 1|Page

7-  Save frame() function: to save Image
 Add end of draw() “save frame()”: produce numbered sequence of TIFF- format
Images
 Save frame(“name.type”): specify your own name and type of image
 Size(): sets global variables width & height
 ellipse(width/2, height/2, 50, 50): To middle in screen.
8- The Java2D renderer:
 used by default
 ideal for high-quality 2D graphics
 in speed: working with pixels is slower (Disadvantage)
The Processing 2D renderer:
 P2D is faster than the default Java2D renderer
 it lacks support for stroke caps and joins on thick lines (Disadvantage)
 when you need to directly manipulate the pixels of an image or video.
The Processing 3D renderer:
 It also produces 3D graphics inside a web browser, even without the use of a library
like Java3D
 can draw thousands of triangles very quickly.
 Image quality is poorer (Disadvantage)
 the smooth( ) command is disabled, and image accuracy is low (Disadvantage)
Notes of Lecture 3
1- PImage to declare type of variable that store image
 example: PImage mapImage Where: PImage is type & mapImage is variable
2-  loadImage("map.png") to loads image named (map)
 Background() to set the background color
 locationTable.getFloat( ) to read each location’s coordinates (x and y values)
3-  important to find the minimum and maximum values for the data, because that
range will need to be mapped to other features (such as size or color) for display
 Another refinement option is to keep the ellipse the same size but interpolate
between two different colors for high and low value
4-  Fill(between) to put color between rang
5- Two-Sided Data Ranges
 better option would be to use separate colors for positive or negative Because the
values in the data set are positive and negative
Notes of Lecture 4
1- Time Series: is a type of data set that describes how some measurable feature (for instance,
population, snowfall, or items sold) has changed over a period of time.
2-  determine the minimum and maximum of each of the columns in the pre-filtered
data set.
 setting the minimum to zero provides a more accurate comparison between the three
data sets.
3- Cating Function: refers to a way to convert a variable from one type to another.
 getRowNames( ) method inside FloatTable returns a String array that can be
converted with the int( ) casting Function
4-  The rect( ) function normally takes the form rect(x, y, width, height)
 rectMode(CORNERS) changes the parameters to rect(left, top, right, bottom), is
useful because our plot’s shape is defined by the corners.

Ali Elsayed 2|Page

 5-  code: (for note of columnCount)
void keyPressed( ) {
if (key == '[') {
currentColumn--;
if (currentColumn < 0) {
currentColumn = columnCount - 1;
}} else if (key == ']') {
currentColumn++;
if (currentColumn == columnCount) {
currentColumn = 0;}}}
 This method will rotate through the columns as the user presses the [ and ] (bracket)
keys
 Ex: if columnCount is 3 the possible currentColumn values are 0, 1, and 2. Where
possible is currentColumn = count -1
6- ceil(): which rounds a float up to the next int value.
 Ex: ceil(4.3) = 5
floor(): function is used to round a float down to the nearest integer
 Ex: floor(4.3) = 4
Notes of Lecture 5
1- nofill(): To represent Time Series as simple line
2- drawPoints( ): draws the data with beginShape( ) and endShape( ) that draw continuous line for
time series.

3- 
To mix lines and points in the representation to create a background line can Modify the
end of draw( )
4-  Rollovers: To highlight individual points when the mouse is nearby, you can implement a
rollover effect in your plotting function. This involves checking the distance between the
mouse pointer and each point, and if the mouse is close enough to a point, you highlight
that point.
5- prevent the spikiness of the plot:(Refine phase of process)
 Connecting the points with a curve is often a better option because it prevents the
spikiness of the plot from overwhelming the data itself.
 By: curveVertex( ) it connects successive points by fitting them to a curve.
 Note: it is similar to vertex()
 Vertex() is fitting point to a straight line

6- Another variation of drawDataLine( ) draws the values as a filled area.

 modify the end of the draw( ) method by noStroke(), fill()

Notes of Lecture 6
1- Where to Find Data:
 The first tool is good search engine.
 Effective searching using the proper keywords.
 Government web sites are often useful sources of data because the information collection owned
by the public without copyright
 some organizations make their data available through publicly documented and supported APIs
2- Tools for Acquiring Data from the Internet:
 from local or from http:// addresses:
o Processing provides the loadStrings( ), loadBytes( ), and loadImage( ) methods

Ali Elsayed 3|Page

  grabbing data from the Web: each can be used to download the contents of a web page and save
it to a file.
o Wget: simple for straight forward downloads because it handles file naming (original
name)
 Ex: wget http://www.oreilly.com/catalog/covers/9780596515935_cat.gif
o cURL: need to specify output file as (**** >name of file ) where * is http://addresse &
sends output to the console
 Ex: curl http://www.oreilly.com/catalog/covers/9780596515935_cat.gif > image.gif
3- for handling downloads from URLs:
 NcFTP: is particularly handy for efficiently downloading entire directories from an FTP server
 Links:
o Is primarily a text web browser.
o can be used from the command line replacement for Wget or cURL if (Wget or cURL
are not available)
4-  Data source is a file placed in the data folder of a Processing sketch.
 Files can also be located at specific Uniform Resource Locators(URLs)
 Loading from URLs is less useful when running as an applet.
 Global String variable named sketchPath specifies the absolute path to the sketch folder.
 dataPath(): this can be used to interface to other methods that require a full path.
 savePath():
o prepends the sketchPath value to a filename or path supplied as a parameter
o It also creates any intermediate folders if they do not exist.

5- Loading Text Data:

 loadStrings: To read a file as lines of text & handles loading files from URLs.
 When files are very large, it may be more useful to read one line at a time from the file.
createReader( ): Creat a BufferedReader object from a file in the data folder, an absolute path to a
local file or from URL
EX:

6-  you can collapse the Acquire and Parse steps of the process together for greater efficiency.
o Rather than read a large file into memory and then parse it, it’s often better to parse the
data while it’s being read.
 A common use of the File object is: to list files in a directory, which is handled with the list( )
method of the File class

♥♥!‫ال تنسوا والدي في دعائكم فضال‬

♥‫موفقين‬

Ali Elsayed 4|Page