Information Visualization - I

1
Information Visualization - I

• Yaji Sripada

2
In this lecture you learn

• What is information visualization?
• Designing Visualizations
• Basic concepts in Java 2D

3
Introduction

• Visualization is the use of graphical techniques
  to communicate information and support reasoning
  or analysis
• Visualizations are cost-effective because they
  exploit
• powerful human visual processing capabilities and
• high quality graphics created at low cost
• Two kinds of visualizations
• Scientific Visualization
• Information Visualization

4
Scientific Visualization

• Visual modelling of scientific data using
  computer graphics
• Examples
• In our department
• HEX program develops visualizations of protein
  docking
• http//www.csd.abdn.ac.uk/hex/gallery/
• molecular structural data is hard to understand
  without visualization
• Laboratory of Neuro Imaging, UCLA
• Visualization of brain models
• http//www.loni.ucla.edu/SVG/
• Focus is
• on modelling (visually) the input data as close
  to reality as possible
• Not on presenting abstractions or relationships
  from the input data

5
Information Visualization (IV)

• Visual presentation of abstractions or
  relationships underlying input data
• IV has two goals
• Communication
• to communicate a rich message
• Problem solving/ reasoning/ analysis
• to display large amount of information to
  facilitate reasoning to uncover new facts or
  relationships
• Limited screen sizes pose a serious challenge for
  using IV on very large data sets
• Therefore the main task is to pack large
  information into a simple graphic
• Highlighting all the required (important)
  information
• Creative art?

6
Message Communication - Example

• Napoleans 1812 campaign on Russia
• Input data
• Size of army
• at the start of the campaign 442,000
• at the end of the campaign 10,000
• Location of the army (2 dimensions)
• Direction of the armys movement
• Temperature and
• Time

7
Minards Drawing
Created in 1861 by French engineer Charles Joseph
Minard
8
Minards Drawing (2)

• Considered the best graphic ever produced
• Inspiration for modern IV researchers
• Plots all the data corresponding to all the six
  input variables
• Clearly shows the message underlying the input
  data
• Gradual reduction in the size of the army
• Linked to the gradual fall in temperatures
• Input data is complex
• Yet, most important information abstracted out
  and presented in a simple graphic

9
Problem Solving - Example

• London cholera epidemic of 1854
• At that time, two hypotheses of causes of
  cholera
• Cholera is related to miasmas concentrated in the
  swampy areas of the city
• Cholera is related to ingestion of contaminated
  water
• Input Data
• Locations of deaths due to cholera
• Locations of water pumps

10
Dr Snows Cholera Map
Dots locate deaths due to cholera
Crosses Locate water pumps
11
Dr Snows Cholera Map (2)

• Plotting the input data on the map helped Dr Snow
  
• to detect the epicentre of the epidemic
• Close to a pump on Broad Street
• Considered a classic case of visualization
  helping reasoning with data

12
Design Technology

• There are two requirements for developing
  visualizations
• Graphic Design
• mapping information (raw or filtered) into a
  graphic
• Mapping data/information to display variables
• Position, orientation, size, motion, colour etc.
• Technology
• achieving the design programmatically
• Graphics programming, flash programming etc

13
Graphic Design

• Mapping
• Data to some graphical element
• Such as a cross.
• data attributes to the attributes of the
  graphical element
• Such as colour, size, shape etc.
• Order of priority for representing quantitative
  data
• Position
• Length
• orientation
• Size
• colour

14
Inputs to the design process

• Data - size and data type
• User Task
• User characteristics
• System resources - PC vs Graphics work station
• Standards/guidelines

15
Designing Information Visualizations

• Gospel like guidelines
• If the underlying data is simple, keep the
  graphic simple
• If the underlying data is complex, make the
  graphic look simple (e.g., Minards Graphic)
• Always tell the truth - Do not distort the data
• Maximize the data-ink ratio (Edward Tufte,
  www.edwardtufte.com)
• Data-ink ratio data-ink/total ink used on the
  graphic

16
Graphics Technology JAVA2D

• Ehud Reiter

17
Simple 2D Graphics

• Draw a 2D (not photo realistic) picture
• Simplest type of graphic
• Similar to drawing with Paint
• Use Java2D package
• Not terribly well designed
• Like a lot of Java

18
Drawing with Paint

• Create canvas
• Select parameters
• Edge colour, fill colour
• Line thickness, (line type)
• Draw shape
• Rectangle, Ellipse, Line,
• Filled or outline
• Draw Text (font)
• Transform (flip, rotate, etc)

19
Drawing with Java 2D

• Create canvas widget in GUI
• Usually new subclass of JPanel
• Set parameters
• Line thickness, type (eg, dashed), colour
• Fill colour, pattern
• Compositing, clip
• Draw shapes
• Rectangle, Ellipse, Line,
• Filled or outline
• Draw text (font, colour, angle, )
• Transform (before drawing, not after)

20
Creating a canvas widget

• Define a subclass of JPanel
• Directly, or use Jpanel template
• In this subclass, include a paintComponent(Graphic
  s g) method
• In the paintComponent method, include code for
  drawing graphics
• Cast parameter to Graphics2D object to use Java2D
  package

21
Draw a square

• import java.awt.
• import java.awt.geom.
• import javax.swing.
• public class gPanel extends JPanel
• public void paintComponent (Graphics g)
• super.paintComponent(g)
• Graphics2D g2 (Graphics2D) g
• g2.fill(new Rectangle2D.Double(20,20,30,30))

22
Creating in GUI

• In main GUI, add a panel, and then add your
  graphics panel to this panel (in constructor,
  after initComp), then pack()
• public graphicdemo()
• initComponents()
• jPanel1.add(new gpanel())
• pack()
• Wont look right in Design View
• Set jPanel1 layout to Border if problems
• Easier to create with an IDE such as NetBeans

23
paintComponent

• This routine is called whenever
• Panel first appears
• Panel re-appears
• De-iconified
• No longer hidden
• Repaint() is called by code
• Code should call repaint() if graphics changes

24
Coordinate system

• By default, coordinates and sizes are specified
  in pixels.
• Can set up a user coordinate system that is
  independent of actual size
• Always goes from 0 to 100 (for example),
  regardless of actual size in pixels
• Use scale method

25
Scale example

• // establish 0..100, 0..100 coordinate system
• // (0,0) is top-left
• g2.scale(getWidth()/100.0,getHeight()/100.0)
• // establish 0..100, 0..100 coordinate system
• // (0,0) is bottom-left
• g2.scale(getWidth()/100.0,-getHeight()/100.0)
• g2.translate(0.0,-100.0)

26
Coordinate Systems

• Major difference between MS paint and drawing
  with Java code
• Becomes more important with more complex graphics
• 3-D graphics needs 3-D coord system
• Photo-realism requires specs of light source,
  viewer position in coord system
• Wont do this here (adds complexity)

27
Drawing Shapes

• Set parameters
• Colour, stroke (line thickness, style), etc
• g2.draw(Shape) -- outline
• g2.fill(Shape) -- filled
• Many shapes (see java.awt.geom)
• Rectangle2D, Ellipse2D, Line2D, Arc2D,
  RoundRectangle2D, CubicCurve2D,
• Need to add .Double (strange design)
• Rectangle2D.Double

28
Parameters

• setColor -- drawing color
• setStroke -- line type
• setFont -- font for text
• setComposite how overwriting is done
• setTransform -- transformation

29
Example

• Draw ellipse, not filled, pink outline, 3 units
  thick
• // set drawing color
• g2.setColor(Color.red)
• // set line thickness
• g2.setStroke(new BasicStroke(3))
• // draw ellipse outline (g2.fill would draw
  filled ellipse)
• g2.draw(new Ellipse2D.Double(40,40,20,20))

30
Shapes

• Higher-level representation than bitmap
• Can draw in different ways in Java2D
• Outline or filled
• Parameters
• Can test if point in a shape
• Contains method
• Useful for mouse-click processing

31
Text

• Can add text
• drawString Specify origin, string
• Specify colour, stroke before drawing
• Also font
• // draw hello in top left
• //may not work if transform applied!
• g2.drawString("hello",10,10)

32
Controlling graphics

• Add class variables which paintComponent()
  examines
• Give these a value
• Call repaint()

33
Example

• // class variable
• int ellipseSize 20
• // new method, changes size and repaints
• public void setEllipseSize (int size)
• ellipseSize size
• repaint()
• // paintComponent uses ellipseSize var
• g2.draw(new Ellipse2D.Double(40, 40, ellipseSize,
  ellipseSize))