Representasi & Visualisasi Informasi

Representasi & Visualisasi Informasi Jumat, 03 Desember 2010

Jumat, 03 Desember 2010

Shape of song Jumat, 03 Desember 2010

Siklus Hidrologi •


Siklus Hidrologi adalah sirkulasi air yang tidak pernah berhenti dari atmosfir ke bumi dan kembali ke atmosfir melalui kondensasi, presipitasi, evaporasi dan transpirasi. Pemanasan air samudera oleh sinar matahari merupakan kunci proses siklus hidrologi tersebut dapat berjalan secara kontinu. Air berevaporasi, kemudian jatuh sebagai presipitasi dalam bentuk hujan, salju, hujan batu, hujan es dan salju (sleet), hujan gerimis atau kabut.Pada perjalanan menuju bumi beberapa presipitasi dapat berevaporasi kembali ke atas atau langsung jatuh yang kemudian diintersepsi oleh tanaman sebelum mencapai tanah. Setelah mencapai tanah, siklus hidrologi terus bergerak secara kontinu dalam tiga cara yang berbeda: Evaporasi / transpirasi – Air yang ada di laut, di daratan, di sungai, di tanaman, dsb. kemudian akan menguap ke angkasa (atmosfer) dan kemudian akan menjadi awan. Pada keadaan jenuh uap air (awan) itu akan menjadi bintik-bintik air yang selanjutnya akan turun (precipitation) dalam bentuk hujan, salju, es. Infiltrasi / Perkolasi ke dalam tanah – Air bergerak ke dalam tanah melalui celah-celah dan pori-pori tanah dan batuan menuju muka air tanah. Air dapat bergerak akibat aksi kapiler atau air dapat bergerak secara vertikal atau horizontal dibawah permukaan tanah hingga air tersebut memasuki kembali sistem air permukaan. Air Permukaan – Air bergerak diatas permukaan tanah dekat dengan aliran utama dan danau; makin landai lahan dan makin sedikit pori-pori tanah, maka aliran permukaan semakin besar. Aliran permukaan tanah dapat dilihat biasanya pada daerah urban. Sungai-sungai bergabung satu sama lain dan membentuk sungai utama yang membawa seluruh air permukaan disekitar daerah aliran sungai menuju laut. Air permukaan, baik yang mengalir maupun yang tergenang (danau, waduk, rawa), dan sebagian air bawah permukaan akan terkumpul dan mengalir membentuk sungai dan berakhir ke laut. Proses perjalanan air di daratan itu terjadi dalam komponen-komponen siklus hidrologi yang membentuk sisten Daerah Aliran Sungai (DAS).Jumlah air di bumi secara keseluruhan relatif tetap, yang berubah adalah wujud dan tempatnya.

Siklus Hidrologi


Siklus Hidrologi


Siklus Hidrologi

lapisan kedap air


Siklus Hidrologi

lapisan kedap air


Siklus Hidrologi

recharge

air permukaan

aliran air tanah

lapisan kedap air


Deaths by Cholera Dr John Snow 1854

E. Tufte “Visual Display of Quantitative Information” Jumat, 03 Desember 2010

Deaths by Cholera Dr John Snow 1854

E. Tufte “Visual Display of Quantitative Information” Jumat, 03 Desember 2010

Amaztype http://amaztype.tha.jp/


Representasi Berapa banyak bison?






# Bison

Representasi

# Bison

Berapa banyak bison? # Bison


Representasi

# Bison


# Dewasa


# anak

Representasi

# Bison


# Dewasa

8


# anak

4

Representasi

# Bison


# Dewasa

8


# anak

4

Mayan Numerals


Egyptian Numerals


Representasi Solving a problem simply means representing it so as to make the solution transparent (Simon, 1981)

Representasi yang baik – mengijinkan seseorang mencari informasi yang relevan • informasi mungkin ada namun sulit ditemukan

– mengijinkan seseorang menghitung kesimpulan yang diinginkan • komputasi kadang sangat menyulitkan, atau tergantung pada representasi

Saul Greenberg


When do I take my drugs? 10 - 30% error rate in taking pills, same for pillbox organizers Inderal Lanoxin Carafate Zantac Quinag Couma

- - - - - -

Adapted from Donald Norman Jumat, 03 Desember 2010

1 tablet 3 times a day 1 tablet every a.m. 1 tablet before meals and at bedtime 1 tablet every 12 hours (twice a day) 1 tablet 4 times a day 1 tablet a day

Saul Greenberg

When do I take my drugs? 10 - 30% error rate in taking pills, same for pillbox organizers Inderal Lanoxin Carafate Zantac Quinag Couma

- - - - - -

1 tablet 3 times a day 1 tablet every a.m. 1 tablet before meals and at bedtime 1 tablet every 12 hours (twice a day) 1 tablet 4 times a day 1 tablet a day

Breakfast Lunch

Dinner

Bedtime

Lanoxin Inderal Quinag

Inderal Quinag

Inderal Quinag

Inderal Quinag

Carafate

Carafate

Carafate

Carafate

Zantac

Adapted from Donald Norman Jumat, 03 Desember 2010

Zantac Couma

Saul Greenberg

Representasi mana yang lebih baik?

Windows 95 System Monitor Jumat, 03 Desember 2010

Saul Greenberg


Berapa nilai tepatnya


Saul Greenberg




Bagaimana kinerja skrg dibandingkan puncaknya?

Saul Greenberg




Bagaimana kinerja skrg dibandingkan puncaknya?

Bagaimana kinerja berubah seiring waktu?

Saul Greenberg

Dokumen mana yang memiliki isi terbanyak? right menu + properties

Windows 95 File Viewer Jumat, 03 Desember 2010

Saul Greenberg

Di manakah saya?

Navigasi detail + presisi

Navigasi umum + orientasi Windows NT Hover Game Jumat, 03 Desember 2010

Di manakah saya?

Inxight Magnifind Jumat, 03 Desember 2010

Di manakah saya?


Di manakah saya?



Apa yang harus saya kerjakan?

Microsoft Schedule+ Jumat, 03 Desember 2010

Berhakkah saya menerima keringanan pajak?

Example by Saul Greenberg Saul Greenberg


Berhakkah saya menerima keringanan pajak? 80.000

Improvement

70.000

60.000

50.000

40.000 140,0

182,5

225,0

267,5

310,0

Selling price




Improvement

70.000

60.000

50.000

40.000 140,0

182,5

225,0

267,5

310,0

Selling price




Improvement

70.000

60.000

50.000

40.000 140,0

182,5

225,0

267,5

310,0

Selling price



Dua manfaat grafik


Dua manfaat grafik untuk mengkomunikasikan ide


Dua manfaat grafik untuk mengkomunikasikan ide

untuk membangkitkan, menciptakan dan menemukan ide-ide baru,


Types of Symbolic Displays (Kosslyn 89)

• Graphs • Charts • Maps • Diagrams

22 Jumat, 03 Desember 2010

Types of Symbolic Displays • Graphs – at least two scales required – values associated by a symmetric “paired with” relation • Examples: scatter-plot, bar-chart, layer-graph


Types of Symbolic Displays Charts – discrete relations among discrete entities – structure relates entities to one another – lines and relative position serve as links

Examples: family tree flow chart network diagram


Types of Symbolic Displays • Maps – internal relations determined (in part) by the spatial relations of what is pictured – labels paired with locations

Examples: map of census data topographic maps From www.thehighsierra.com


Types of Symbolic Displays Diagrams – schematic pictures of objects or entities – parts are symbolic (unlike photographs) • how-to illustrations • figures in a manual

From Glietman, Henry. Psychology. W.W. Norton and Company, Inc. New York, 1995


Visual Variables

Slides by Sheelagh Carpendale, University of Calgary Jumat, 03 Desember 2010

Visual variables - attributes position – changes in the x, y (z) location

size – change in length, area or repetition

shape – infinite number of shapes

value – changes from light to dark

orientation – changes in alignment

colour – changes in hue at a given value

texture – variation in pattern

motion Saul Greenberg


Visual variables - characteristics Different variable attributes may be: – selective is a change enough to allow us to select it from a group?, If a mark changes in this variable and as an effect can be selected from the other marks easily the visual variable is said to be selective.

– associative is a change enough to allow us to perceive them as a group? Several marks can be grouped across changes in other visual variables.

– quantitative is there a numerical reading obtainable from changes in this variable? If the difference between two marks in this variable can be interpreted numerically, the visual variable is quantitative.

Saul Greenberg


Visual variables - characteristics Different variable attributes may be: – order are changes in this variable perceived as ordered? If the variable supports ordered reading it is an ordered visual variable. This means that a change could be read as more or less (e.g. in size you can order marks according to their area).

– length across how many changes in this variable are distinctions perceptible? The length defines how many values the variable features. For example how many shades of grey can be recognised.

Saul Greenberg


Position selective associative quantitative

100

order length 0


0

10

Size selective associative quantitative order

4X

= >

? >

>

length – theoretically infinite but practically limited – association and selection ~ 5 and distinction ~ 20


>

>

>

Shape selective associative quantitative order

>

>

>

length - infinite variation


>

>

>

>

Shape


Value selective associative quantitative order

<

<

<

<

length – theoretically infinite but practically limited – association and selection ~ < 7 and distinction ~ 10 Jumat, 03 Desember 2010

<

<

Just-Noticeable Difference • Which is brighter?

Saul Greenberg



(130, 130, 130) Saul Greenberg



(130, 130, 130)

(140, 140, 140) Saul Greenberg


Color selective associative quantitative order

>

>

>

>

>

length – theoretically infinite but practically limited – association and selection ~ < 7 and distinction ~ 20


>

>

>

How many 5’s?

385720939823728196837293827 382912358383492730122894839 909020102032893759273091428 938309762965817431869241024

[Slide adapted from Joanna McGrenere http://www.cs.ubc.ca/ ~joanna/ ]

Saul Greenberg


How many 5’s?

385720939823728196837293827 382912358383492730122894839 909020102032893759273091428 938309762965817431869241024

Saul Greenberg


Color


Encoding color Common advice says use a rainbow scale – Marcus, Murch, Healey – problems with rainbows










Orientation selective associative quantitative order

<

length – ~5 in 2D; ? in 3D Jumat, 03 Desember 2010

<

<

?

<

<

<

<

Texture selective associative quantitative order > length – theoretically infinite Jumat, 03 Desember 2010

>

>

>

Motion selective – motion is one of our most powerful attention grabbers

associative – moving in unison groups objects effectively

quantitative – subjective perception

order

?

length – distinguishable types of motion?


Motion


Motion


Latihan • hasil survei pada 2010 menunjukkan, 51% remaja di Jabodetabek telah melakukan seks pranikah..di Surabaya tercatat 54%, di Bandung 47%, dan 52% di Medan. Hasil penelitian di Yogya dari 1.160 mahasiswa, sekitar 37% mengalami kehamilan sebelum menikah •:


latihan 2 • sebuah kelas berisi 50 mahasiswa disurvei mengenai perasaannya saat ini • data yang diperoleh

–34 gembira –6 sedih –8 bosan –2 marah –


Information Visualization

Information visualization is the use of computer-supported, interactive, visual representations of abstract data to amplify cognition.

Readings in Information Visualization: Stuart Card, Jock Mackinlay, & Ben Shneiderman (1999, p. 7)


Information Visualization •

“The process of analyzing and transforming nonspatial data into an effective visual form”

•

“A highly efficient way for the mind to directly perceive data and discover knowledge and insight from it”

•

“The visual appearance of data objects and their relationships”

•

“The transformation of abstract data to a visual representation, which is rapidly understood by the user”


kapan suhu di Puncak Bogor berada di atas 20ºC selama bulan ini? Senin

15 15 14 13 29


Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 29

10 12 12 12

15 18 17 17

Kapan? Senin

15 15 14 13 22


Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 29

10 12 12 12

15 18 17 17


Apakah berhenti di sini? Senin

15 15 14 13 22


Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 29

10 12 12 12

15 18 17 17


15 15 14 13 22

Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 29

10 12 12 12

15 18 17 17

Information visualization is the use of computersupported, interactive, visual representations of abstract data to amplify cognition. Jumat, 03 Desember 2010


15 15 14 13 22

Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 29

10 12 12 12

15 18 17 17

Information visualization is the use of computersupported, interactive, visual representations of abstract data to amplify cognition. Jumat, 03 Desember 2010

+ kontrol interaksi Senin

15 15 14 13 22

Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 29

10 12 12 12

0

35 20


15 18 17 17

29

Slider mempermudah kueri dan eksplorasi Senin

15 15 14 13 22

Minggu

17 10 23 11 12

19 11 12 21

15 15 15 10

0

10 12 12 12

15 18 17 17 35


22 20 18 29

12

+ beberapa bulan 15 15 14 13 22

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 17

10 12 12 12

0

15 18 17 30

15 15 23 13 22

17 10 23 11 12

19 11 27 21

15 15 34 10

18 16 32 29

20

15 18 27 30

29


10 12 29 12

15 15 14 13 11

17 10 15 11 12

35

19 11 12 15

15 15 15 10

11 08 18 10

10 12 12 12

15 18 17 10

abstrakkan 15 15 14 13 22

17 10 23 11 12

19 11 12 21

15 15 15 10

22 20 18 17

10 12 12 12


15 18 17 30

15 15 23 13 22

17 10 23 11 12

20

19 11 27 21

15 15 34 10

18 16 32 29

10 12 29 12

15 18 27 30

29

15 15 14 13 11

17 10 15 11 12

35

19 11 12 15

15 15 15 10

11 08 18 10

10 12 12 12

15 18 17 10

tambah data

0

20

29 61


35

tambah data Compressed Data

Compressed Data

0

20

29 61


35

The classic role of the author

Raw Data

Selection

Encoding

Presentation

User

Information Visualization Robert Spence (2001; p. 13)

Information Architecture Summit 2004 Jumat, 03 Desember 2010

Author

62

The NEW role of the author

Raw Data

Selection

Encoding

Presentation

User

Information Visualization Robert Spence (2001; p. 13)

Information Architecture Summit 2004 Jumat, 03 Desember 2010

Visualization Tool Designer 63

Sebelum lupa......V(^.^) • Buatlah sebuh posting blog di student.ipb.ac.id

• carilah sebuah situs yang menampilkan visualisasi informasi

• berikan ulasan tentang visualisasi informasi situs tersebut

• berikan minimal 5 komentar ke ulasan rekan lain


imagery


Imagery 

Signs, icons, symbols 



Icon design 



Selalu beri label, kecuali yang sudah cukup terkenal

Posisi Image dan Type harus memiliki relasi 



Pilih yang tepat, baik abstrak atau nyata

image “family”

Konsisten dalam penggunaan image 


Identifikasi kebutuhan

Pilih tingkat abstraksi



Mullet & Sano Jumat, 03 Desember 2010









Icon  Icon

adalah grafik dalam sebuah antarmuka yang digunakan untuk mengkomunikasikan informasi kepada pengguna dengan mengekspresikan  Atribut

obyek

 Aksi

atau perintah

 Tipe

pesan



Tipe icon 

Resemblance  Icon

memperlihatkan atau mewakili obyek yang direpresentasikannya, terlihat seperti aslinya  Icon



buku  kamus

Abstract  Sebuah  Icon



representasi abstrak dari apa yang ingin disampaikan

gelas  fragile

Exemplar  Sebuah

image yang menggambarkan contoh atau karakteristik dari sesuatu  Sendok, garpu


 restoran

Tipe Icon 

Arbitrary  Tidak

langsung berhubungan, semaunya saja, harus ada pembelajaran  Lambang



turn of, restart, standby pada Windows XP

Analogy  Secara

fisik atau semantik memiliki hubungan dengan sesuatu  Gambar


gunting  cut

Idioms 

Menggunakan komponen GUI yang sudah umum Window manipulation

Files

Standard typographic controls Toolbars and tooltips

What you see is what you get displays

Pulldown menus

Dialog box item

Microsoft Powerpoint Jumat, 03 Desember 2010

Cascading menu

Chart Junk: A common error Information display is not just pretty graphics – graphical re-design by amateurs on computers gives us “fontitis,” “chart-junk,” etc.

Saul Greenberg


Chart Junk:

E. Tufte Visual Display of Quantitative Information Jumat, 03 Desember 2010

Cotton production in Brazil, 1927

Chart Junk:

Removing deception and simplification

Saul Greenberg


Chart Junk:


Saul Greenberg


Chart Junk:


Saul Greenberg


Chart Junk:


70

Maintenance cost / year

65 60 55 50 45 40 35 30 25 20 15 10 5 0 Ford


GM

Pontiac

Toyota

Saul Greenberg

Data density New York Weather History – 181 numbers/sq inch

E. Tufte “Visual Display of Quantitative Information” Saul Greenberg


Small multiples Learn once – invite comparisons


Saul Greenberg

Small multiples:

E. E. Tufte Tufte Visual Visual Display Display of Quantitative of Quantitative Information Information Jumat, 03 Desember 2010

Showing time and change

Saul Greenberg

Small multiples:


Showing time and change

Saul Greenberg

Overview & detail for comparisons using small multiples and data density


PhotoFinder

University of Maryland Human Computer Interaction Laboratory http://www.cs.umd.edu/hcil/ Jumat, 03 Desember 2010

Table Lens

Inxight Table Lens Jumat, 03 Desember 2010

Table Lens


Table Lens


Infinite Zoom

Pad++: A Zoomable Graphical Sketchpad for Exploring Alternate Interface Physics. Bederson et al Journal of Visual Languages and Computing 7, 1996 Jumat, 03 Desember 2010

Fisheye Menus

Bederson, B.B. (May 2000) University of Maryland www.cs.umd.edu/hcil/fisheyemenu/ Jumat, 03 Desember 2010

Fisheye Text groupware

Carl’s focus

Saul’s focus (local user) Andy’s focus Greenberg, Graphics Interface Jumat, 03 Desember 2010

Case study: Concept mapping

Saul Greenberg



Saul Greenberg



Saul Greenberg


Saul Greenberg


Saul Greenberg


Main view in foreground

Overview in background

Saul Greenberg


Perspective Wall

Leung and Apperly TOCHI’94

Mackinlay / Robertson / Card: Proc ACM CHI'91 Jumat, 03 Desember 2010

Document Lens

Robertson, Mackinlay ACM UIST 1993 Jumat, 03 Desember 2010

Saul Greenberg

Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98

Data Mountain


Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98

Data Mountain


Task Gallery

www.research.microsoft.com/ui/TaskGallery/ Jumat, 03 Desember 2010

Cone Trees

Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91 Jumat, 03 Desember 2010

Hyperbolic Lens

Xerox Parc - Inxight Jumat, 03 Desember 2010

Hyperbolic Lens

Xerox Parc - Inxight Jumat, 03 Desember 2010

Route Maps Overlaid Route

Sketched Route

Agrawala and Stolte, Rendering Effective Route Maps, SIGGRAPH 2001 Jumat, 03 Desember 2010

49

Saul Greenberg

2004 presidential election

Matthew Ericson, NY Times

50

Saul Greenberg



Matthew Ericson, NY Times

51

Saul Greenberg



http://www-personal.umich.edu/~mejn/election/

52

Saul Greenberg


From Cartography, Dent Jumat, 03 Desember 2010

53

Saul Greenberg

From Cartography, Dent Jumat, 03 Desember 2010

54

Saul Greenberg

55

Saul Greenberg


Phan et al. 2005 Jumat, 03 Desember 2010

56

Saul Greenberg

Dynamic Queries

TimeSearcher: Hochheiser and Shneiderman 2001 58

Saul Greenberg


webtrends

Saul Greenberg


Newsmap

Saul Greenberg


Newsmap

Saul Greenberg


newsmap

Saul Greenberg


Flickertime

Saul Greenberg


Saul Greenberg


CrazyEgg

Saul Greenberg


Military funds

Saul Greenberg


We Feel Fine

Saul Greenberg


Wikipedia

Saul Greenberg


Websites as Graphs

Saul Greenberg


Interactive History Timeline

Saul Greenberg


Displaying connection

Saul Greenberg


Saul Greenberg


Saul Greenberg


Search

Saul Greenberg


gravitate

Saul Greenberg


Musician taste

Saul Greenberg


fidgt

Saul Greenberg


Music History

Saul Greenberg


Shape of Song

Saul Greenberg


Musicmap

Saul Greenberg


Musicovery

Saul Greenberg


Language Poster

Saul Greenberg


Displaying Websites

Saul Greenberg


Saul Greenberg


Articles & Resources – visualcomplexity.com

Saul Greenberg


infosthetics

Saul Greenberg


Saul Greenberg


Saul Greenberg


Latihan • Pilih sebuah obyek fisik (mobil, anda, rumah), kemudian identifikasi atribut2 yang dimilikinya. Buat sketsa representasi visual yang mungkin untuk obyek terpilih. • Kumpulkan hari ini.

Saul Greenberg


What you now know Good representations – captures essential elements of the event / world & mutes the irrelevant – appropriate for the person, their task, and their interpretation

Information visualization – Tufte’s principles – overview first, zoom and filter, then details on demand – many techniques now available

Saul Greenberg


Representasi & Visualisasi Informasi

Recommend Documents