Information Visualization - I - PowerPoint PPT Presentation

Loading...

PPT – Information Visualization - I PowerPoint presentation | free to view - id: 1fe736-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Information Visualization - I

Description:

... of information to facilitate reasoning to uncover new facts or relationships ... Need to add .Double (strange design) Rectangle2D.Double ... – PowerPoint PPT presentation

Number of Views:26
Avg rating:3.0/5.0
Slides: 34
Provided by: Somay
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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))
About PowerShow.com