New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here


by: Brennan Schmeler


Brennan Schmeler
GPA 3.93

Marilyn Ostergren

Almost Ready


These notes were just uploaded, and will be ready to view shortly.

Purchase these notes here, or revisit this page.

Either way, we'll remind you when they're ready :)

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Marilyn Ostergren
Class Notes
25 ?




Popular in Course

Popular in Informatics

This 58 page Class Notes was uploaded by Brennan Schmeler on Wednesday September 9, 2015. The Class Notes belongs to INFO 424 at University of Washington taught by Marilyn Ostergren in Fall. Since its upload, it has received 10 views. For similar materials see /class/192216/info-424-university-of-washington in Informatics at University of Washington.


Reviews for INFO VIS & AESTH


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 09/09/15
nfo424 UW iSChool 1022007 Today s lecture Purposes owasuahzatwon Graphwca ExceHence amp Graphwca Integmtv Tufts szuahzatwon Crmque Info 424 Dwscusswon Gapmmder szuahzmg tram schedmes Graph ca ExceHence szuahzmg murse schedu es The Visua Display onuanmanve Inbrmanon eh 1 e 2 show Me me Numbers eh 1 Questuns sa far7 Data Pictur Insight What Is the purpose of Vls eh other Ahahaa Educ hah Mun turmg AM a thmkmg mahhha he areas hha mmun Datum Pmb em 50 mg T Ehhahee EDgann nswght ntertammen Decnratmn The 905 omsuahzamh s nswght not pwctures WWW Mam Hear and Me amem Do you know the answer Few Example V quot Yes Comm e Presentatmn cummumcatmn educatun What Sa es retain2 a FEW eta message au EHEE ntherprnducts Tufte DESEHptDn tabu atmn TD whum The manager NO m charge Exp uratmn ana ys s Prub em samhg p anmng A e a hmkmg reasumng Creator or vwewer7 UsuaHv a oop HM Maureen Stone StoneSoup Consulting 1 nfo424 UW iSchooI 1022007 Flow lines or ow maps Dr John Snow1545 Measured data mlu39 SI NSPIH ARM AVERAGE own mmva M scum unnnnss FilmFinder 1994 y 2quot f um in mu m u m mu m m m m vm mo nu m an o Ewangongng 17 Ahlberg amp Shneiderman u of Maryland Vdeo Tableau Software Tool I1 uiu M wvw ii ii quot39quoti l ww u ir9vVIMm quotWWW m 1anme uihlnvn nw m u all 1 is 7 Maureen Stone StoneSoup Consulting Quantitative Information Numbers numeric relationships Tufte39s taxonomy 0 Tables and graphs 0 Data maps 0 Time series 0 Relatonal graphics nfo424 UW iSChool 1022007 6293 London 9 Harry Beck 1931 London Underground schemanc map Maureen Stone StoneSoup Consulting 3 nfo424 UW iSchool 1022007 Relational Graphical Excellence In brief Interesting data complex deas multivariate Clear precise concise presentat on dataink rat 0 o Accurate commun cat on lie factor mum i mm Enjum39lufpr UVerJlt39 url Aces interesting data i g n substance 5 Complex ideas clarity precision g and efficiency E1 greatest number of ideas shortest time least ink smallest space multiva ria te telling the truth uhh a m in MM mil inn w Honey Relational Us Census Map Multivariate multiple variables Relational Relationship between variables 100 000 s of values Ma in Censu ZEIEIEI eGen n nfUSDlversl 10039s of values Time series train sched ule Effectively sualizing MultiValued Fulowaata M Sing conquot and Texmre E Lungmllzgnsd ng39a fn isumaa39iunjii 7 variables including ow lines i vorllol Stro gly negative Reynolds snearslress green 9 Arrival amp departure times lime at stop number of trains direction relative speeds name amp number of sums crossings ngn Serl Strength orange ormagel lla depending on dlreollon Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1022007 Graphical Displays Should Show the data induce the vtewer ta thmk abuut the substanPE rather than abuut methudmugy graphre desrgn the technnmgy ngraph c prnductmns ur surn ethrng 2 52 Avmd drstartrnd what the data h v t a a e e ta earn pare drnerent preees Dfdata Reueat the data at severa evels utdetan ae dusew mtegrated W th the statrstreat and uerhat descnptmns Ufa data set mnevum Ehamer we Page Show the data Graphical Integrity Maxt rmze the Dataslnk Retro representater Dfnumbers Datannk ratm datannktutat wk used P P q ctear detahed Process and thuruudh abehng Erase nnnrdata mk Erase redundant data wk Rama and am shew data uanatun nut desrdn vanat an anated and standardrzed WWW umts Dfmnnetary rnaasurernant mfnrmatnnrcarrymg uanahte mm ensmns shuutd nut exceed mm ens ans m the data must nut duute data uut chnntext In brief Lie Factor Present value relattonshtps accuratew Lre Factor Presentat srze preusely rnatehes data Sue areneet m graph esrze nfeffectm data Avmd area and vet Encudmgs Truth n 9571 ms 5 errar Adjust currency values r m atnn ar ather mrrelated an anges rd 275 nut uncurnrn Nmzmmm ehandes such as pnpulatmn dn 39 Labet carefullv and clearlv W W a 9 Present data m context tre factar by valume 59 NB nut adjusted far rnnatmn Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1022007 Estimating Relationships Whlch lS twlce the slze of the smallest one7 DeSIgn DIstortions Gratultous 3D and perspectlve Nonsul llform lntervals and scales Deslgn Dlstortlon Veaer vs Quarterlv Nanllnear scale perspectlve dlstartlan Include detailed labels clear detalled cornplete Label dlrectlv on tne grap lC Makes drapnlc sel explanatury Malntalns fncus compared to legends A M lmaalmnnmll llama mm I Show context w l cnallenger data Onlv cornplete context snows trend omth Summary Grapnlcal Excellence lnterestlng data mmplex deas multlvarlate c ear preclse mnclse presentatan dataelnlt Accurate carnrnun catan lle factur rata Grapnlcal lntegrlt Present value relatlansnlps accuratelv e lze mat nes data 7 Mn d area and valume encadlnds 7 Ad ust currencv values fur lrl at nn etc Label carefully and dearlv Pr esent data ln cantext Maureen Stone StoneSoup Consulting nfo424 UW iSchooI Visualization Critique Find an example ofa good visualization Analyze it to explain its quality Suggested sources Google images charis graphs daia maps 0nline news sources 0nline scienoe sources Due Monday October 8th at 7am We39ll show in class on Tuesday and Thursday 1022007 Analysis Questions 1 Who is the intended audience 2 What information does this visualization Aw U1 101 represent How many data dimensions does it encode List several tasks comparisons or evaluations s it enable What principles of excellence best describe why it is good Can you suggest any improvements Why do you like this visualization VisCritique Example Ba by growth chart link who is the intended audience Doctors nurses and parenls ror infan boys as a lencton of age In anis can be plotted on the chart and their growui evaluated How many dala dimensons does it encode Length weight age percen ile Length and weight in both metric and English un ts VisCritique Example Baby growth chart M List several tasks comparisons or evaluations t enables 1 it allows a parent 0 see Where their child39s development compares to the populaton 2 it proyides a record that allows a pediatrcian to evaluate a Child39s l OWH l over time 3 it illustrates a normal growth pattern for llifal it boys what principles of excellence best describe why t is good i it makes a large data set coherent 2 it encourages comparisons 5 ltericodes many numbers VisCritique Example Baby growth chart link Can you suggest any improvements The grid lines should be less hold why do you like it i i round it personally userul when my children were babies ror comparing arid evaluating their growth 2 ithink it is a yery Clever layout Maureen Stone StoneSoup Consulting nfo424 UW iSchooI 1022007 Discussion GapMinde Course Sc r hedules html Flash XML 2006 Train Schedules Amtrak vs Tufte Maureen Stone StoneSoup Consulting nfo425 UW iSchool 10052007 Tableau Software Tool Intro to Tableau Software Starting Survey Analysis Fndav 5 Oct 2007 Dana Zellweger Data Transformations Raw Data Raw Data Issues Ducuments Wards Ward Venturs Mlssmg data mum Vanable formats m m H E m V NW a gunman m Vanable types Table strul ure Meamng Polle Zellweger MacZell Consulting nfo425 UW iSchooI 10052007 Data Transformations Clean raw data Calculations Indlvldual Emh Deam Age l1 Structu ral rn ote Pro rn ote Data to Present Cons der user bask Precrse data vs overvrew summarv Actual vs derwed values Examples of derived values Count ank Percent Average rnean vs rnedran Devrat on drtterence Drstnbuton range V standard devratron Trrne senes Correlat on Individuals Professlons Calculation before Calculation after ClaSSmg Structural Promote Professlons Polle Zellweger MacZeII Consulting nfo425 UW iSChool 10052007 Target scatterplot Polle Zellweger MacZeII Consulting 3 INFO 424 Lecture 13 November 8 2007 Lecture 13 Case Studies in Usercentered Interactive InfoVis Desig n In this lecture we will discuss the overall process of usercentered design and consider some case studies of designing interactive information visualization applications Goals for the lecture By the end of the class you will be able to 0 Describe the major steps in usercentered design of interactive infovis applications Understand how to combine the tools and techniques we have learned into a usable system Evaluate tradeoffs between different designs Reading Assignment Robert Spence Information Visualization December 2006 Chapters 2 amp 6 Intro 6 l 62 and 65 7 63 and 64 are optional Text and gures are available online from the class Schedule page Things to consider as you read 1 How and what do you think about the user as you design 2 What are some ofthe design choices that must be made when designing an interactive infovis application Reflection questions These questions are to help you think more broadly about what you ve read and its relationship to the class It is optional but strongly encouraged that you answer them and email your answers to info42 A quot mm to aid in J39 39 in class Email must be received by 11 am on the day ofthe class 1 Look for examples of interactive infovis systems on the web such as your favorite airplane travel site the Metro King County bus travel site at httptransitmetrokcgov a purchasing system such as Amazoncom other systems we have discussed in class or another of your choice What design choices have they made about how a user gets started with an overview with details or in some other way How does a user proceed What operations can a user perform Can the user choose their own path through the system or are the order of steps constrained How can users mark potential solutions 2 Consider the questions above in light of your project INFO 424 Lecture 3 October 4 2007 Lecture 3 Tasks and Data In this lecture we will rst describe the overall process of creating and interpreting an information visualization We will then focus on characteristics of the data and the users tasks and provide a highlevel View of how the data and the tasks in uence the choice of visualization techniques Objectives By the end ofthe class you will be able to 0 Describe the steps involved in creating and interpreting an information visualization o Categorize types of data that are used in information visualizations 0 Understand some common ways of deriving new data from given data 0 List basic tasks that users may want to perform with visualizations 0 Consider the in uence of the desired tasks on the presentation 0 Consider the in uence of the structure size and types of data on the presentation During practicum we will Discuss the Name Voyager assignment Discuss and answer questions about the upcoming class project Reading Assignment Few Show Me the Numbers Chapter 2 Numbers Worth Knowing Shneiderman The Eyes Have It A Task by Data Type Taxonomy for Information V Mm mm 9 W2 hingmn 1 mr A I quot m quot Fve Haven VL96de Questions to consider as you read Few o What are the two basic types of quantitative information and how do they differ o In what ways does quantitative information eXpress relationships 0 Few lists four types of relationships within categories nominal ordinal interval and hierarchical De ne these 0 What are the two ways of computing an average and how do they differ Shneiderman o What is Shneiderman s InformationSeeking Mantra To what does it refer o What 7 data types does he discuss Note that although Shneiderman uses the word types as does Few a more accurate term might be structures Describe each 0 What 7 highlevel user tasks for interacting with an information visualization does he discuss De ne each Reflection questions Optional We encourage you to answer these questions and email your answers to info424gmailcom by 7 am on the day of the class to aid in discussion in class 1 What data are used and depicted in the Name Voyager What is the type of each 2 What data are used and depicted in Minard s map of Napoleon s march on Moscow Again what is the type of each 3 Relate each task that you performed in the Name Voyager assignment eg nding or computing a value comparing to the highlevel tasks that Shneiderman discusses nfo424 UW iSchool 11132007 hat abnutthis wheei thiHQW It snunds a terribiv intErESDNQ Druiect Ah Said the markehnu em wen We re having a i tie aw cuitv there Dimemtw exciaimed Fnrd Difficuitw whet an vnu mean mmeuitw it s the smeie simuiest machine h the Entire Universei Culur erketme em sawed Him wth a hunk AH right Mr gtuSanj igebSEa lyi vuu r2 su ciever vuu teii us what EWSWW I formam ch 5 stuhe Ewen cam Choices Dauqias Adams The Restaurart at the she ofthe Univerxe Today39s lecture Creating coior Perceiving coior Measuring coior ciE XVZ XW CiELAB WWW What creates good Cuiur measurement demu color desgn Tufte s prii icipies apphed Desigi iii ig for em or coior bhhdhess Good ideas executed with superb craft 75 R1 was Enwmmng Information Pevuepiiun Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Materials Pigments amp Paints Scatt red mm a v 9 g 0 The Erg tEat priiip BaH Materials Dyes Organic moiecuies BiniDQicai DHQW snai s buQSi piams EEC Svnl tic WiHiam Perkin Dved Digments ar2 ak25 Mauve Siman earrieia Print amp Film Lavered cuiur Light Summed spectra RGB primaries Dispiais Drulecturs Basisfurdigita minr Perception w Meterieis Pemevtmn Aesthetics Physicai Wnrid Visuai System Mentai Mndeis iigrisimcesi mimic Religieeribw hiee nagging Aprieiieaibaii Siam mp3 Wm i mDi new Miami ugii liar awmiirmrgi eaiaraesiqr Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 11 32007 Physrcal World yrsuar System Mental Models Physical World Spectral Distribution Unevenly distributed Cones o e color receptorsquot 0 Concentrated in fOVE lnslde the e Q Ma ru Cllnl VISI elight nght Con Opponent Perceptual Appear war V5 wavelength Energy Regponse Encodrng 39 Models Mode 7 i i Any source 5 ectrar Encode as separate Color D t drstnputron three values llghtness Space quot95 ncrons Hue o Transmitted B W crEtxn ARGMB ngntness Reflected aturatron o Refracted g ClELAB Munsell we mm rpm FeldGurdeIo ErmaColor n K Peiers Inna Visual System Cone Response W Light path Encode spectra as three values 0 Oomea pupil lens retina 0 Long medium and short LM 0 Optic nerve brain 0 Trichromacy only LMS is seen Retinal cells smuetrm pr Mart erenn o Rods and cones 0 Different spectra can look the samequot Sort of like a digital camera aw Frum A Feld Guide to Dr IalColor A K Pelers Inna Metamerism All spectra that stimulate the same cone response are indistinguishable 1 39 Metameric match CIE Color Measurement CIE Standard Obsener CIE tristimulus VEILIE XYZ Intemat onal standard for specifying color All spectra that create the sarne trrstrrnulus XYZ values look the sarne Stimulus ClE Slnwdmd OD39K39VIN CIE XVZ l 39 x e a a r 1 v r V Z r 1 Ar 70 700 rpm nee GurderoDlngaCoon A K peters Inna Maureen Stone StoneSoup Consulting nfo424 UW iSchooI 1 1132007 CIE XYZ from Displays For any RGB Y rYRgYGbYB YR VG YB Maxrrhurh urmhahce of the drsplav red green blue rgb are linear pixel values srrhrrarw for x and 2 Can be expressed as a matrix X 39 zk I 739 A 39 Z quot 1 VII II R U 3 Y ll umrnanca Pixel value CIE Chromaticity Diagram Separate r Colorfulness xy I Brrghthess v xvz w prOJeCt xvz on a plane Colors that varv onlv h brrghthess prOJeCt to the Same porht Spectra that look the same prOJeCt to the Same porht Drsprey gamut create a mangle Display Gamuts Projector Gamuts Pixel to Luminance Mapping gamma curvequot Same rrhage drttereht mappth Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Culur Models msmwvzmu mm Svsem Mema Made s mam Cane oppanem perceptua xppeayanm Energv Remanse Emamng Made s Made s Spe va E nmde as epavate cam cam m manhmmn wee va ues Wee Spa2 mm mncnans me Wm M mm m as x v z Amway hgmness ammm emm Sue rm we own useWm Metamenm Manse cmm matmng ch cmm measurement Opponent Color De nmon Achmmatm aw R76 and a v aw Separ te Mamas frnm chmma channe s lpnnmnl Wnn xv hr39ury VA b u cawgw Support for Opponent Culur Unmue mack and wme unwmm dmevences Pevcemmn K dawn names cmunumess thsmmvvam mm seem Meme Mam Umque hues 7ND reddwshrureen Lng Cane Oppanem Pemeptua Appeavance Me mages mm a Mama mm 4 Mam 4 Mam r Spenm mm mm cam Cam man are Mm We me was Space Cam 939 9 DW n mns yams V N d mm 6quot Hue Adamanam Co or wswon weno m as an A RG VVB was aaekgmm Redrureen annmahes quot SSWWW 5 7 3 B uerveHnw annmahes Sepavme GELAB CwECAMUZ hgmss mma Mme Anev w ages WW cmmumess Perceptual Culur Spaces CIELAB nghtness U mus Wu cumr 5wa at b Nnnrhnear mman m cm xvz AE de ned fur cumuutmu cumr awarences Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Color Models Visual SVSIEW Mental MDdElS Pliysicaqurlu Light cune Opponent Perceptual Appearance Energy 439 pespunseg Encuding 4 Mudels 4 Mudes c i Emma as Separate Culur cuiorin distributan tnreevaiues iigntness pace Cuntext runetiuns L M S enrorna Hue Adamatmn FM ciE xvz ARVGME iigntne s Eackgruund saturation sze ClELAE ClECAMEI2 Munsel ich lrituitivE lnr Culurdifferences Culurdesign The Magic Number 3 Trichromacy amp Metamerism ree cones color receptors mbers Color representation amp measurement Opponent amp perceptual color t ess luminance 2 enrorna Hue saturation value Color reproduction Mix 3 primarv colors e g RGB Matcn subset of aii coiors gamut Color Appearance Beyond tnree veiues Demo Aesthetics Perception good cooking Even dem d being fo Good painting good coloring is comparableto a good cooking reci e an s tasting and repeated tasting while it is Ilowed And the best tasting still depends on a cook with taste JosefAbers Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Effective Color Design Use color for a purpose Identtfv vDur mfnrmatnn St messages AnalDQV grnups Legrpn tv attentnn a lavermg Destgn test evamate Practtce practtce practtce Envisioning Information avmdmg atastrnpne bemrnes tne nrst pnnmpte m brmgmg ntnrtn mfnrmatmn Above all do no nann 75 R Tune Fundamental Uses To represent or to rmtate reahty To enhven or decorate Color and Function To label pnrnenw Huevanatmn Assnmated wtn color nernes To measure Varv huntness a nrurna Map m data mstnputmn cumr scales ramps rnaps Color and Function To evoke nature Metaphor Svmbnh musrreten dtsttHed expenence Color and Function To decorate beautth Emnttnnal destun Vtsceral St re ectwe Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Contrast and Analogy Contest amp Analo 9V carrtrast drrrererree separates AnalDQV S rmlartv eraups I I I I I I Hue chmma value Value anly Get it right in black amp white Value de nes shape Naedaewrm annadmg r hunmess mrrerenee thuut rerrness venetan rest E Aerass mema In brief Get t Hunt m black 3 wnte Use neuu39al baekeruurrds Grays arrearqra RGB all neaer equal Preferhqht hackqmunds Ava d uverlv saturated calms RGB Navalu Exeemmn Yell Use hueeamrastsparrrrew smauarrrerenuesarerme xfmanv hues then use sxrmlarvalue saturatmn Tu Label Identify by Color cmmrm Valamlal smnaubaesw Cluster Calendar Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Grouping Highllghting x 7 a ma 5 5 may me mu mus meme me 5m 5m 5199 455 565 am Mm as an cu w an m m on as use me an xvzxvzxvzva van 257137n am 25111 um mu mus we we can nun um 2m 5m n15 mmquot nu 2111 son m was ms nu ma seam H55 137555 was au ssu 7193 ma sns em ms nu 5155 em on m w m um Hm m as am an m w Psychuphysics of Labellng Preattentwe pop out asvausammuss asmosammuss mamwazsmv mamwazsmm asvausaramuss nme pmpamaneua nme Pvapamanai in We numbev mmgns he Humhev we Pap am Pupout vs Distingulshable opeout TVD new See distinct vaiues emuxtenenusw Up m 9 under cunthed eunmmns 2n eas v fur reasuname sized sumuh Mare w m a eumuued cumext UsuaHv need a egend Culur Names 5m names Berhn amp Kay Linguist studv Bf names acrnss 2D ianguaues Faund 11 ba u names swrmiar Mnumstm Evniut an aw We may yew We brawn W Controvers about ongmax hypothesis Recentwork b Kay et 5 Rede nes as canstramts mnduiated Ev anuuaue Wnrid Cninr 1er 0 Recammended thahnWare my aheis World Culur Survey wcs Database 33D MunseH emu nativespeakersafll ianquaqes Asked ca name each m Maureen Stone StoneSoup Consulting HHHHHHHHIHHKHI WWmewmdhmkwu nfo424 UW iSchool Tableau Color Example Color Sketches categoncal color palette How manv7 Algnrltnm c7 Slc colors regular and pastel EXtEHSlblE7 Cusmmlzabl27 Color appearance As a funconn cf 5le A funconn cf backg Du Robust and rellable co 1 1132007 r a lor narnes Categorical Colors Tableau names In baslc colors Baslc names 11 Slmple names Blackwnlteqrav El amneer Radqmenhlu2v2llaw was llamas mam Orange ma hrawm Deslgnedtn balance lnk Leglhlv mlared am llnes Tableau names 1n am an Mm black a whlte But nut an gaudy far bars Plus teal Tasteful yetalarful Yellow gt quld Palettebased U1 1 ectwhole palette 2 lndlvldualcolorsfro 3 Standard color s m dlffel39el39lt palettes plcllter Maureen Stone StoneSoup Consulting nfo424 UW iSchool Many many RGBHSVHSL Color Tools Data to Color 1 1132007 To Measure Types ofdaha va ues Nnmma Drdma Human Quahtatwe sEquent a dwergmg ta type WE Numer sca es need an DrdEr saturatmh b ghtness 0er aDDerwmate best f uuanuzed Long mstory m 5 research cartography Different Scales Different Views Density Map UsuaHV a had dea ugmess scab am we vanatmn Hue sm e m hgmness vanatmn Brewer Scales Nomma sca es Dwsunct hues but swm ar Emuhasws Sequenua sca e Varv m huhmess and saturater Varv shghdv m hue Dwergmg sca e cummementarv sequentwa sca es Neutra at zem Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Culur Brewer wwwculmbvewevuvg Tableau Culur Example Color sequences What calms What sequences7 Cuntmuuus Dr euenuzem and huvw Wnrk at eH srzes and m snlatun Real nurnerrc data All ersrneunens mcludmg anthers can39twsuahzethe nrsmere Much harder than colonzmg an rrnage to encourage good practrce Ul must be srmme nut rnunneeune Users nut Expertm calm Dr stamstms c mp De gn Shirt wrtn Brewer ramps Avawlableas RGB Nut cahbrated Modrfy rersnea 7 E lnterpola Custnm Pythnn nude ClELAB RGB preeewrse hnear me Calmiva Sequential Ramps rmwm Diverging Ramps new 1mmquot menu quot7 m um nquot m Data Distribution Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Heat Map default ramp Full Range UV 7 SKEWEd Data SKEWEd Data WWW WW WNW Stepped Threshold SKEWEd Data SKEWEd Data WW WNW Smnesouv comm zuus Maureen Stone StoneSoup Consulting nfo424 UW iSchool 11132007 Multivariate Color Sequences Multidimensional Scatter plot Varlable 1 2 gtgtlt v Varlable 3 4 5 aR G E ii I Usmg Color Dwensons m also5y Dara omnsons I Eeally and Wave Color Weaves 6 varlables 6 hues wmch varv m brlghtness Addmve mlxture blend Weaving versus Blenqu M va and sxeemH Duster Helen Hathshenas Victoria lnterrante OvrlstavherHealEV and Sumzhee Kim How well does it work 39rom The Economist Multispectral Color Imaging mm hubblesll2 avgsol a lathbehmdilheiplduves Color and Shading Shape is defined by lightness shading Color hue saturation labels cmmagemermes shape PET olorhlghhgmstumor mage comes at Shamans Maureen Stone StoneSoup Consulting nfo424 UW iSchool 1 1132007 Culur Overlay Temperature 30 me mlegval cunvululmn in wsuauze 30 um no Culuvvanes um yen in veuawmn nuaasma lempevaluve Vidana lmenanle ana cnagay mason u Minnewla MtgWager as W edw mleuan mlwu Mm Tu Represent or Imitate Reality Illustrative Color Imm ma 41 0 H01 Gmy Analumyu he Human my WWW Mamemnl Raves vwwvngsgav Tu Enliven or Decorate vvmcn has mane Wuvmahum vvmcn Wuuld vuu valhev luuk al 7 VisAahzalmn m sueleclmn dens v sunaues amund n alemiss Man LeWV m aaa Culur Vision Deficiencies CVD Nonstandard eone SML response oanena Medical tn MM rmssmg E 7 Snweak Modeled H v opponent space Achmm tm ans Rec and H axis Maureen Stone StoneSoup Consulting nf0424 UW iSchool 1 1132007 Incidence of CVD Monochromacy r 0 003 c momma y pr We Demawma 1 1 m upwaDDDZD Tota 7 8 005 w w e m Mammy com Faumamhess1 Vischeck Swmu ates dwchromatwc co or wswon de cwencwes Web servme m thnshnu pm m We 2 Ruben Daugherty and NM Maureen Stone StoneSoup Consulting iPhune mamm quotWNWWW Wham mu mumwm x yuuvlwnl m lnw Duume EHEDdE Shapes nrtextures w nGan nfo424 UW iSchool 11132007 Similar colors are the real problem I ll 7 EE it Q 97mm ammo 1mm Accommodation No color set that worksfor all vtewe39s Even accommodatmg moi common tsltmttmg lons thmze depenqu on color Double mm e vade LhmeSm nmzattnn Maureen Stone StoneSoup Consulting INFO424 Information Visualization and Aesthetics Autumn 2005 Assignment 2 Revealing Relationships and Presentation Worth 10 Note You may do this assignment individually or in groups of two But if you do it in groups please follow these three rules 1 Your group of two must not also work together on the project 2 Your group of two must not have worked together on another assignment and 3 Your group of two must combine data collected individually and fully synthesize your individual work into a single joint work Note You must come to the lab on Oct 28 to collect the data necessary for Problem B of this assignment If you do not come to the lab then points will be taken off If for some reason you cannot attend the lab please inform the instructor to make alternative arrangements Problem A TreeMap TreeMap provides methods for structuring data and exploring it dynamically Install TreeMap See course website for help While you learn TreeMap monitor your own learning by keeping notes of your goals and your progress in completing them You should note what you are doing every two minutes or so and record significant events either progress or frustration You should expect to spend approximately 30 60 min learning TreeMap For the crime data found on the course website use TreeMap to answer these questions 1 Does it appear that crimes are differentially committed by one gender or another in different states 2 Which state seems to have the most number of different crimes 3 Do crimes by Native Hawaiians or other Pacific peoples seem to occur more frequently in one state or another 4 Using gender as an example comment on identifying cases that occur infrequently 5 As you learned to use TreeMap briefly discuss three learning phases that you progressed through Notes 1 TreeMap may be more difficult to learn than you might expect In particular there are hidden dependencies between options in the legends filters and hierarchy Thus when learning about the settings manipulate one at a time while holding the others fixed 2 If you encounter unexpected effects click Restore default settings on the main menu tab Fisheye Evaluation In the lab on October 28 we will perform an empirical evaluation of a fish eye menu system In this experiment we will collect performance data on the use of a fish eye menu system and compare results to other systems The performance data will include time to complete the task and the number of errors made Your task is to graph the data collected in the class and draw some conclusions about the performance of fish eye menus Additional details for conducting this experiment will be reviewed in class Please turn over to page 2 INFO424 Information Visualization and Aesthetics Autumn 2005 Assignment 2 Revealing Relationships and Presentation Worth 10 What to hand in Your report should consist of two sections Treemap 1 For each question give the answer and illustrate your answer with a screen shot and appropriate commentary 2 Include a timeline of your learning The timeline reveal the significant stages of your learning Briefly reflect on the ease or difficulty of learning Treemap Fisheye menus 1 In your own words briefly summarize the experiment stating the hypothesis and the method 2 Then present the results in the form of one or more graphs Briefly discuss the results with the aim of drawing some conclusions about the merits of the fish eye interaction technique Grading Guidelines 1 All answers should demonstrate the principles of good information design Clarity and conciseness of presentation are valued 2 You answer the Treemap questions correctly and clearly incorporate graphics into your answers 3 The timeline of your learning reveals interesting features and structure about your learning For example the timeline might show the number of records logged when significant positive and negative events occurred and the major phases of your learning 4 The fish eye menus experiment is introduced and summarized 5 The data for the fish eye menus is graphed clearly and the implications of the data are discussed INFO 424 UW iSChool Presentation Interaction and Case Studies II Spence Informal tron Visualization Chapter 5 Chapter 4 optional Thursday 15 Nov 2007 Polle Zellweger 1 1152007 Today39s Lecture Presenbat on wherehow amp whether to present represented items Interacton manipulating the VleW to see desired items Ca Se Studies Baby Na rneVoyager MetroKC FishCalDatetens VleAll Presentation Fundamental problem ta Space limitations Overview detail vie s Focus context distortion Pan zoom transi ons Time limitations Animation Rapid Serial Visual Presentation Fundamental Problem Scale Most datasets don39t fit on the display Too many variables target of multin vi Too many cases equally common Therefore user must focus on specific variables andor cases Issues raised by focusing Ho specify focus what is the relationship of focus m the rest of the data How does the user shift focus 7 Find new focus e Stay oriented Standard Solution Scrolling Provide a larger virtual screen by allowing user to move with a scroll bar Issue Only one focus Efficient scrolling requires cogn tive ma e lVlus know contents of vll tual screen no Overview e lVlust know the relationship between the current focus and the desired focus 7 Must map relat Ol lSHlD between current and next focl to the elevator pos tions on the scroll bar Polle Zellweger MacZeII Consulting Approach 1 Overview Detail Provide both overview and detail displays Two ways to com ine Time 7 Alternate between overview and detail sequentially Space 7 Use different portons of the screen INFO 424 UW iSchool 1 1152007 Gapminder Approach 2 Focus Context Overview Detail Integrated into a single display Rationale Two Separate displavs Spl t attenton Zooming h des the cont ext Human vision has both fovea and retina FishCal Date Lens 2D distortion Bederson etai 04 Video Fisheye maps Sgence deo 15 Magic Lenses Movable lenses that show a modified view tone etal Xerox PARC 5F Map View Underlying utilities lens Placing lens on map Polle Zellweger MacZell Consulting INFO 424 UW iSChool 1 1152007 More Magic Lenses icLensg Magnifying amp Wireframe lenses on a eng lens Campasmg 2 lenses 2detalHenSeS onamap Vd mp More Focus Context Halos Baumsch et 3 KIDS Hyperbolic Browser Spiral Calendar FishCal DateLens 2D distortion amasmetal m Video Document Lens mayquot uniWAIer Polle Zellweger MacZell Consulting INFO 424 UW iSChool Approach 3 Panning and Zooming Panmng 1 1152007 rncves and can ere stays SUM Zoomm Usem ror cnengrng focal pomt ZUl ZOO mable User interface 5m mm min em Sm Bath mavement crcern ere ecrcss scene er scene increasmg cr deeeesrng the magm catmn cnne abjects m a scene PhotoMesa hEEdersun m Demo Pad Presentation Tool Ken Perhn NYU C QIWH Mum GOAL no Counte rPoint Presentation Tool Z0 ommg Ul to orgamze amp snow Powerpomt shdes Guud ZEIEIi Time Limitations Reprd Serwal szual Presen Present data sequermally and u en qu 2 rep my ere nmmg the pages Ufa bank in brnwse the Bantams nu r Polle Zellweger MacZell Consulting INFO 424 UW iSChool 11152007 Floating RSVP Manually controlled RSVP for browsing film libraw for online purchasing Spence Video 20 Spence Video 21 Spence39s Interaction Model Norman s Action Cycle Information spaces I discrete I Continuous Interaction modes oont39n passive oomposte User intentions explore seek opportunistic involuntary Example 1 Example 1 M39 d 39 P M d 9 inar map VIS V inar map VIS V 7l VXd J39 J39 Info space Static display discrete info space Interaction mode No physical interaction passive interaction Polle Zellweger MacZeII Consulting INFO 424 UW iSchooI Example 15 InfoCan vas 11152007 Info space Interaction mode Spence Video InfoCan vas 39 D sh ate Moving displ y Example 15 Discrete info space icture eierne ow st 0 a sive interaction peripherai awareness nts f environment Spence Video Example 2 Example 2 Entertainment kiosk Ent also WWW Info space Interaction mode 39 ertainment kiosk also WWW Discrete info space Stepped interaction Example 25 Tableau Software Info space Interaction mode Example 25 Tableau Software Discrete info space Stepped interaction V Dispiav c 39 occur on Historv mechanism u ports user expiorane Polle Zellweger MacZell Consulting INFO 424 UW iSchool 1 1152007 Example 3 Example 3 Attribute Explorer 5 Price a Attribute Explorer a mu a 53947 SKIES 53947 SKIES Info space Discrete info space Interaction mode Continuous interaction 0 se can move slIders a I smoothly gt dis a I changes during mouse mot on Spence Video 5 Spence Video 5 Example 35 Circuit Design Info space Interaction mode Spence Video 1 Example 35 Circuit Design Continuous info space Continuous interaction Circle size varies continucc gt dynamicallytriggered popout of correlation Spence Video 1 Example 4 l i I 391 Influence Explorer 7 emu FLT T Ll Info space 7 l r InteractIon mode 39 L Spence Video 31 Example 4 Influence Explorer Discrete info space Composite interaction o uss brushing histograms technique 0 bar color shows sensitiv Spence Video 31 Polle Zellweger MacZell Consulting INFO 424 UW iSchooI 1 1152007 Spence s Interaction Model Funmun explaralibn Figure 55 Enterlammem gum World Wide Web Wmquot Passive leee Table CircunnemgMFrgure composite Engineering desrgrr Sermon 5 A Cammuuus Discrete Information spaces Interaction modes FilmFinder Video 5 de adapted mm mm Slaslm Spotf i re httgwwsgot recom s we mm mm mm mm Spotfire Features Starfield display Tight coupling 0 features to guide the user 0 rapid incremental reversible interactions 0 display invariants 0 continuous display 0 progrssive refinement 0 details on demand We mm mm mm mm Movable Filter Magic Lens ic Lense hanced Dynarmc Quenes vra Movable Frlters Ken Frshkm amp Maureen one cm 1995 s as Edamad mm mm sum Magic Lens Arbitrarilyshaped usually rectangular region 39 some operation that changes the user39s view of the data 0 Movable o Stackable o Augmented by parameters that control the display sme Edamad mm mm sum Polle Zellweger MacZeIl Consulting INFO 424 UW iSchool 1 1152007 Queries Via Magic Lenses High Salaries AND Low Taxes mum u m quotinlnvlJvm High Salaries OR ow Taxes quot39 I W BUF 7nll mm quotquotquotquot39quot Ll 11mm 39 iI quot r s de adapted mm mm Siaslm Realvalued Query quot393 1551 crime indux l l D 139 1 l callnut i i H a l D Ai39llx39lglcm lgt i D ll 7 l u I Fn vorth T lt all C r E FD H j Y Sl de adapted mm mm Siaslm Advantages Liveness Flexibility Ability to specify complex queries Don t use as much real estate for controls 5 we mm W mm mm Disadvantages More complex than DQ sliders at quite as easy to learn and use More difficult to implement me mm W mm mm Summary Spence s Interaction Func un explovalion Figure 5 5 Entenammem gum Wand Wme WED MW Passive CuneeTable 0mm design Flgule 5 5 Composite Equot gineeling deslgn Sec on 54 Canimuuus stuete Information spaces Interaction modes More Case Studies Gapminder Ba by NameVoyager MetroKC oSkope FishCalDateLens Viz4AI EZChooser Polle Zellweger MacZell Consulting INFO 424 UW iSChool 1 1152007 Recalling Shneiderman s Tasks Bazy Mame W39zard Mame voyager Overview see overall patterns trends I Zoom see a smaller subset of the data Filter see a subset based on values Details on demand see VEILIE of objecls Relate see relationships compare values History keep track of actions amp insighls Extract mark amp capture data Adding functionality Interactive Examples Supportmg companson one I ea U of Mar land sz4AH example Ways to select up to 2d harh es perhaps by draggmg eadn ehe to a saved harhes area draw a mlorrcoded hhe graph for each saved harhe aH dwsplayed in the standard Urn erserwes madame other Ideas Onerstop shopprhg for prospectwe parents derwat ehs erharhes EDuntry ererrdrh Eamngs erharhes related harhes h Eknam es other ahddade rerrhs rarheds people W m that harhe more7 PocketPC calendar tool FishCalDateLens 11ny View Agenda view Full Day View Appalmmem dumll maximise maxlmlse maxlmlse w E a a a minimise minimise minimise Polle Zellweger MacZell Consulting INFO 424 UW iSchool 11152007 Scrolling amp searching Evaluation results Tzsls cnmpleled Links EZ Chooser my bnsa me cum SHEDWVEZEHDDSEFdeataSESJSD7d1rEE mwshawcase Babv NameVovager my WWW babvnam award camnamevnvauer nvm rm Metrch http D ans t wank qu os kop e htty Husknpe cum F sHCaVDateLens httu WW 5 mm 2duhm1dat212ns V1 24AM mm WW 5 mm Edudassspnng2 DScmscESEsvmaHwz 4am hum Polle Zellweger MacZell Consulting INFO 424 Lecture 5 October 11 2007 Lecture 5 Introduction to Perception In Lecture 4 we described which visual encodings were most effective for visualizing quantitative information This lecture describes the properties of human vision and perception that underlie those choices Goals for the lecture By the end of the class you will be able to 0 Describe the basic components of visual processing from initial sensation to cognition Explain preattentive processing its strengths and its limits Describe the Gestalt principles of visual perception and their application to visualization Understand how the Bertin semiotics visual language for encoding quantity is applied to visualization not covered in the reading but will be discussed in lecture Describe basic models for color and contrast detail in later lectures During practicum we will View and discuss some of the visualizations handed in for the Assignment 2 Vis Critique Reading Assignment Few Show Me the Numbers Chapter 6 Perception Things to consider as you read 1 What examples of preattentive processing are most used in quantitative visualization 2 Which of the Gestalt principles are most commonly used in quantitative visualization Reflection questions These questions are to help you think more broadly about what you ve read and its relationship to the class It is optional but strongly encouraged that you answer them and email your answers to info42 39 quot com to aid in J39 39 in class Email must be received by 7 am on the day ofthe class 1 Consider the famous stylized map of the London Underground which was shown in the lecture on 102 Which preattentive and Gestalt principles does it demonstrate 2 Which of the visual principles discussed in the reading are most significant in the image you chose for your Vis Critique nfo424 UW iSchool 10092007 Today s lecture pnnosopn V Tables vs Grapns Ta l Info 424 Gra DlSCuSSlO ws cnnaues Tables and Grapns FEW Exercises Show Me me Numbers en 3 a 5 Sche ule Save the Pies fur D2552 Communicate Complex yet concise What I 39 Sales relative a Ether prdduds TD Wnarn The manager w enarde Type ngraph Devratan Train Schedule Show the data Datarlnk Ratio 1 e wk used a sndw dat Datannk rand datannktdtai wk used Process Maximize the Datannk Erase ndndata wk ase redundant data wk Rewse and edn Wu Maureen Stone StoneSoup Consulting nfo424 UW iSchooI 10092007 httg VWWV gercegtualedge comfilesGragliDesigle litml Tables vs Graphs Tables 0 Rows columns text 0 Data encoded as text 0 Best for looking up precise values Graph 0 Area bounded by axes 0 Visual objects lines bars points shapes 0 Best for showing relat onships Review Data Quantitative allows arithmetic operations Categorical group identify amp organize no arthmet c Types of Tables Unidirectional o Quant ties by category n 0 Sum in one direct o Nominal Ordinal Interval Hierarchical l 5thli 6thl Biuwn Blue I Types of Tables 3ng 33quot Communicate Black Black Black Black mi Bidirectional Brown an 5 Two sets of categories row and column a Period estimates of relative 0 Values at intersection Biuwn Biuwn survival rates by cancer sitequot Black Black 0 Crosstab cross correlation am am 0 Pivot table summary measure EVUWquot Blue Blunde Blue B Biuwn Biuwn Blue Hazel Black Biuwn Gieen Blue Blue Biuwn r i M mquot wimivvmmi m new Maureen Stone StoneSoup Consulting nfo424 UW iSChool 10092007 Better Dynamic Tables in mm mm Mm Spreadsheets Excel Lotus Notes Visicalc InXight TableLens Reorder by 5 year survival rate Simplify typography 1 1 m L m munmm V varmmui worm m 1 mm mm hllg WWW Edwavdlu e cumbbuavdgrandr arlelchrmsymsg m EIEIEIEIJVSAUQlE m 1 Graphs Graphs encode relationships Types Axes plus A 0 Nominal comparison 0 Points 1 I r 39 0 Lines r 39 a o Timeseries o Ranking 0 Bars o Parttowhole 0 Area 0 Deviaton 0 Distribution WW emuWm WWluw o Correlat on Manna on n mm Dunhulds mmmnm hHumAmWavyquotfl I1 W314i nilquot n V MMIM MMMWU39 quotwill i il39tV39tluWva mll ulwllvll 4 L Sl vwaMull39m nlm Maureen Stone StoneSoup Consulting nfo424 UW iSchool 10092007 Useful variations of data encoding objects Paints Lina Palms and Linus If K I i y Vonical Bars Horizontal Bars Points and Bars l hm l Jill Hi Elsi El Which visual encoding objects display each relationship best sziirl m P w u my in Popular Area Graphs Pie charts Stacked bars Bubble graphs Stacked graphs Save the pies for dessert n H w 5 8 mmzmwmmmum What about stacked bars mm mm W W m m m E riiHH i w 3 m W M t mm mammal W W m w m a wusi Lu mui slum A w m m u Bubble Graph l T 39 L r qmn39mL r ill arm 65m xecu i i Maureen Stone StoneSoup Consulting nfo424 UW iSchool 10092007 Visualization Critique Fwd eh exempie of a good VisueiizetiOh Anaivze it 1 whe is the intended audience7 whetihtdnheteh dees this Visueiizetieh represehn aw many data dimehsiehs dees t enmde7 List severei tasks eem pariSDnS Dr eveiuetiehs it ehehies Wheat prihupies DfexeeHenee best describe Why it is gen 7 m saw I can yuu suggest an yimpr vements7 7 Why de yeu hke this Visueiizetiem For Today Look at the images discuss whettype ngraph is t7 Haw many dimehs ehs7 Deterink ratin Haw eeuid be impmved ReietiOhship to grade Ddhitwhy Grade re ects e urt Cuntext Dfiast Week Vscmgue WWW Maureen Stone StoneSoup Consulting INFO 424 Lecture 4 October 9 2007 Lecture 4 Tables and Graphs In this lecture we will learn about tables and graphs which are the two primary ways to visualize quantitative data Effective graphs and tables are an accurate re ection of the underlying data formatted to convey a speci c type of message using visual encodings that clearly present the desired relationships Objectives By the end ofthe class you will be able to 0 Decide whether a table or a graph is a more effective visualization for a given combination of data message and user Enumerate and describe the strengths and weaknesses of the different visual attributes that can be used to encode quantitative value Enumerate and describe the 7 basic types of relationships that can be encoded in graphs and the design solutions that best visualize them Appreciate and articulate the weaknesses of pie charts and other popular area visualizations During practicum we will View and discuss some of the visualizations handed in for the Assignment 2 Vis Critique Reading Assignment Few Show Me the Numbers Chapter 3 amp 5 Fundamental Concepts of Tables and Graphs Fundamental Variations of Graphs Few quotSave the Pies for Dessertquot htth39 0111 P W2 hinotnn erh infn4 39 quotWWWquot 70Dies20for nme err nrl Questions to consider as you read 1 What are the key attributes of the data and the message that distinguishes whether to use a table or a graph 2 What are the key attributes of the data and the message that distinguish which type of graph to use 3 Few provides a set of practice scenarios starting on page 88 Try them out Reflection questions Optional We encourage you to answer these questions and email your answers to info424gmailcom by 7 am on the day of the class to aid in discussion in class 1 If you chose a graph for your image in your Vis Critique can you suggest improvements for it based on the information in this chapter 2 Create a scenario in the style of Few data message relevant to your own interests and describe or sketch or create an appropriate visualization lnfo425 UW iSChool 1122007 Phase II Phase II Now that you have tasks and data design and P4 Project Design Presentation storyboard an interactive visualizat n Goal Explore yourdesign space Brainstorm des39 GoalApply a userrcentered design process to cream an Select two dis nctly diffe effective interactive visualizaton With a clear purpose Post on webs PF Individual Feedback clarity of presentaton Help projects refine their choices cenar as rent ones to refine Now you39re ready to implement P4 Presentation P4 Designs In lab formal presentation Design 1 Build from Tableau view of data 0 minutesgroup including discusson dynamic filtering brushing other interacton PPT or similar 39 Post the PPT or similar Add more visuals su Snapshots plus Presentation includes s images other vis links compos ng possibly with sketches Design 2 Something completely different eject and 90a 5 Dy m c s st such as Gapminder Name Voyager Two scenaros two designs 4 Ezchooser TableLens Your analysis of the effectiveness of the designs Snapshots of tools with other data Scenarios 39 Skemhes Userand bask Uplfl ad y ourow data steps taken to achieve task T es We 5 e e reemaps Overview and demllsronrdemand plus compare filter 7 Ezchoose Grading Clarity of presentation Evidence of detailed thought for both scenario and design Creativity Maureen Stone StoneSoup Consulting INFO 424 Lecture 14 November 13 2007 Lecture 14 Layering and Separation In this lecture we continue our exploration of Tufte s design principles Our overarching goal is to explore the different ways of visualizing complex multivariate data This lecture on layering will combine design principles with the visual and perceptual functions that de ne the use of color In his Color chapter Tufte specifies four fundamental uses for color which guide its application He emphasizes using color carefully above all do no harm Excessive unguided use of color is one of the most common failings in computergenerated visualization This lecture will focus on To Label and To Measure which are the principles most used in data visualization My essay Expert Color Choices provides practical advice on creating color schemes for visualization Light falling on the retina stimulates the cones which transmit signals along the optic nerve to the brain How these signals are encoded and interpreted are the fundamental principles of color vision Not everyone has full color vision though few people see the world only in shades of gray I will discuss the more common forms of color vision deficiencies and how they in uence design practice Goals for the lecture By the end of the class you will be able to Describe Tufte s fundamental uses and how they are applied to visualization Give an overview of how the visual system perceives color and describe the following quantitative models cone response CIE tristimulus values CIE chromaticity diagram and CIELAB Ideally be able to apply an effective color design process to your project Reading Assignment Tufte Envisioning Information chapter 5 Things to consider as you read 1 How can these principles be applied to your project Reflection questions The questions below are to help you think more broadly about what you ve read and its relationship to the class It is optional but strongly encouraged that you answer them and email your answers to info42 A quot com to aid in J39 39 in class Email must be received by 7 am on the day ofthe class 1 Find an image or a link that illustrates effective color design Explain why INFO 424 UW iSChool 1112007 Trees and Networks Thursday 1 Nov 2007 Polle Zellweger Today s Lecture Goals of tree amp network visualization 0 View structure amp connec ivity node properties Challenges of trees amp networks 0 size structure navigat on animat on Trees hierarchies Nodelink 2D amp 3D 0 Spacefilling rectangular amp radial 0 Animated exploration ChaHenges Especially for large trees amp graphs Performance considerations Hard to see contents 0 nodes amp edges may occlude Hard to select amp interact Hard to see amp understand structure Guidelines for good layouts For trees amp networks Minimize edgecrossings Distribute nodes amp edges evenly Make edges have similar lengths Edges should be straight lines minimize bends Display similar substructures in similar ways Use space effciently Specifically for trees des wth same depth in a line or at a visual level 0 usually Keep a fixed distance between sibling nodes When changing layout dynamically o inimize movement of nodes amp clusters to preserve user39s mental map of the space 2D Tree SpaceTree Nodelink tree browser Grosjean et al U Maryland 2002 Video 1 biology 011 Video 2 org charts 0 18 mm VWWV cs umd eduhcilspacetree Comparing trees TreeJuxta poser Munzner et al UBC et al 2003 Video 459 mm Hulduvai suurcefurge helmindex shtml Polle Zellweger MacZell Consulting INFO 424 UW iSChool 1112007 Cone Tree Mackinlay et al Xerox PARC 1991 Video 106 Cam Tree Hemmje 1994 2D hyperbolic tree StarTree Lamping et al v Xerox PARC Inxight 1995 emuII Demo E cf mtg waw inxight cumgrnductssdkssl r 3D hyperbolic tree Walrus Hyun Munzner 2001 Demo imp NWWW caida nrgmnisvrsuairzannnWaims Case Study The Journey of the TreeMap Johnson amp Shneiderman 91 Shae mapr m Mam Heara Case Study Treemap TreeMap idea Show a hierarchy as a 2D layout Fill up the space with rectangles reprsenting objecls Nested rectangles indicated levels of hierarchy Size on screen indicats relative size of underlying bjecls Sims sdsmau m Mam Hare Polle Zellweger MacZell Consulting Early Treemap Applied to File System INFO 424 UW iSChool 1112007 Treemap Problems Too arsorderw What dues adjaue Cushion Treemaps mm Show structure with shading scale parameter controls global vs local ean7 Aspect ratms uncnntrn112d1eadstn1nts Dfskmny bums that duller Hard to understa Must mentaHy n cumart nestmg a mararchy descent Co1or not used approprratew m ram 15 eamng ess Here Wrong apphcatro Dnn t need 511 n m must see the largest les m the 05 sra mum amaan Squarified Framed Cushion Treemaps arms Hmzmg van g Wuk Emdhoven U 1999 L Successful Application of Treemaps Treemap Map of the Market Thmk more about the use Break 1n Eamngml gmups Make appearance more 1 F1 x these mm a usam DD n use H St Smart Mone usab e 1aspel ratn Demo 9 recurswely Use vrsua1 proper 1 s properw U52 calm a arsungursh meamngmlly 7 Use anw twu Dlnrs c r n msunumsh nnethmgfrnm andther a When Exact numbers aren39t verv munrtawt Provrde exce11ent1nteract1v1tv Access a the raa1 data Makes n mm a useful tum sud munm amau Polle Zellweger MacZell Consulting IN F0 424 UW iSChool 1112007 Google News content Treemap Marumushi newsmap 2D radial spacef ing SunBurst Stasko Georgia Tech 2000 angle shows filedirectory s Demo color shows file type Video 353 i I mm WWW mammusm cumappsnewsmapnewsmap clm mm wwwsmm cc galech edugvuHsunbuvsl Network vis social structures Animated radial graphs Yee Hearst et al UC Berkeley 2001 Playquot Marxx rum 2 II WM 2002 Video 350 mm WWW mpugkuem mpg dewnelwsxnuuumaucmbsepg hllg balandu suns bevkeley edumluws him vizster Summary Heer Boyd Challenges size structure navigation animation UC Berkeley Trees hierar 39 39 21265 Video 334 2o 7 TreeJuxtaposer 2o support companson treescam trees 3D em dangular 7 Cash on squan ed framed o39eemaps 7 SunB radxal Networks graphs I 2D animamd radial I Vizsmr 2D forcerdirecmd hllp W122 mgmmey Polle Zellweger MacZeII Consulting INFO 424 UW iSChool 1112007 Lab Tomorrow Exercise with trees Comparing Treemaps Tableau P3 Data amp Task Visualization Feedback to groups Prep for P4 Project Design Presentation Details amp discussion Links SpaCeTree http WWW cs Limd eduhcilsnacetree reeluxbaposer httD Zolduvai sourceforae nett index shtml SharTree htt W ll iXl t com tools Hsualizat on Walrus et smartmone corn marketma Marumushi newsmap i SunBurSt htt WWW cc atecl i edu vu ll sunburst Animamd radial graphs httg bailando sims berkele eduZinfoxis html viZSter mm 1 beg 5291 153311 Polle Zellweger MacZeII Consulting INFO 424 Lecture 11 November 1 2007 Lecture 11 Trees and Networks In this lecture we will examine ways to visualize trees and networks graphs Goals for the lecture By the end of the class you will be able to 0 Explain why visualizing large graphs and trees is a challenge and describe several approaches that address this problem 0 Describe heuristics for creating effective graph amp tree layouts 0 Evaluate graph and tree visualization techniques Reading Assignment Graph Visualization in Information Visualization a Survey Ivan Herman Guy Melancon M Scott Marshall IEEE Transactions on Visualization and Computer Graphics 61 pp24 44 2000 Okay to skim sections that aren t part of the questions below httpciteseeristpsueduherman00graphhtml Click on the cached PDF link in the upper right comer Things to consider as you read Real world graph and tree datasets may be very large Why does this make their visualization a challenge 2 What are some guidelines for creating a good graph or tree layout What approaches can be used to improve visualization of large graphs and trees Compare Treemaps to NodeLink diagrams 5 Reflection questions These questions are to help you think more broadly about what you ve read and its relationship to the class It is optional but strongly encouraged that you answer them and email your answers to info42 39 quot com to aid in J39 39 in class Email must be received by 11 am on the day ofthe class 1 In static information visualization designs like 3D bar charts are criticized heavily for occlusion Do you think that these same criticisms apply to 3D tree layouts like cone trees Why or why not Discuss advantages and disadvantages of cone trees N If your project has hierarchical or networkoriented data how might you visualize it


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Anthony Lee UC Santa Barbara

"I bought an awesome study guide, which helped me get an A in my Math 34B class this quarter!"

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.