Blooming Numbers: Interactive Visualization in Cultural Contexts Based on Numbers

Rochester Institute of Technology

RIT Scholar Works

Theses

Thesis/Dissertation Collections

2006

Blooming Numbers: Interactive Visualization in

Cultural Contexts Based on Numbers

Yuri Lee

Follow this and additional works at:

http://scholarworks.rit.edu/theses

This Thesis is brought to you for free and open access by the Thesis/Dissertation Collections at RIT Scholar Works. It has been accepted for inclusion in Theses by an authorized administrator of RIT Scholar Works. For more information, please [email protected].

Recommended Citation

Rochester Institute

of

Technology

AThesissubmittedto the

Faculty

ofthe Collegeof

Imaging

_Artsand

Sciences

in

candidacy

forthe

degree

of

MasterofFineArts

Blooming

Numbers:

InteractiveVisualization

in Cultural Contexts Based

on

Numbers

by

Yuri Lee

Approvals

Chief Advisor: Chris Jackson, Assistant Professor, Computer Graphics Design

Chris Jackson

Signature of Chief Advisor Date

Associate Advisor: Jason Arena, Assistant Professor, New Media Design

Jason Arena

Signature of Associate Advisor Date

Associate Advisor: Nancy Doubleday, Assistant Professor, Information Technology

Nancy Doubleday

Signature of Associate AdV'isor Date

School of Design Chairperson:

Patti Lachance, Associate Professor, School of Design

Patti Lachance

Signature of Administrative Chairperson Date

Reproduction Granted:

I, _..!.Y-"u,-,r..!.i-"L",e,,",e~

___________

~, hereby grant permission to Rochester Institute of Technology to reproduce my thesis documentation in whole or part Any reproduction will not be for commercial use or profit.

Yuri Lee

Signature of Author Date

Inclusion in the RIT Digital Media Library Electronic Thesis and Dissertation (HD) Archive: I,

Yu ri Lee

,

additionally grant to Rochester Institute of Technology Digital Media Library the non-exclusive license to archive and provide electronic access to my thesis in whole or in part in all forms of media in perpetuity. I understand that my work, in addition to its bibliographic record and abstract, will be available to the worldwide community of scholars and researchers through the RIT DML I retain all other ownership rights to the copyright of the thesis. I also retain the right to use in future works (such as articles and books) all or part of this thesis. I am aware that Rochester Institute of Technology does not require registration of copyright for ETDs. I hereby certify that, if appropriate, I have obtained and attached written permission statements from owners of each third party copyrighted matter to be included in roy thesis. I certify that the version I submit is the same as that approved by my committee.

Yuri Lee

Blooming

Numbers

Interactive

Visualization in Cultural Contexts Based

on

Numbers

Abstract

The

Blooming

Numbers is

an application

based

on theweb

for

the

purpose of

visualizing

the relationships

between

cultural contextsand

thepreference of numbers in interactiveand

dynamic

ways.People

from

different

cultural

background have varying

opinions about numbers.

My

basic idea

wastoexplore effective visualization

based

onthis

interesting

observation.

My

thesisproject provides aninteractiveapplicationto

convey

a

huge

amount ofinformationaboutnumbers,aswellas a

fun

experience

with an art work generated with

diverse data

provided

by

theusers.

Thesis Website

Thesis

Project

http://www.urielee.com

Thesis Documentation

http://www.urielee.com/paper/

Table

of

Contents

1.

Introduction

1.1.

Motivation

1.2.

Defining

the

Problem

2.

Research

2.1.

Case Study:

Visual

Structures

of

Information Visualization

2.2.

Aesthetics

Inspiration

for

Visualization

Design

3.

Process

3.1.

Prototype

01

3.2.

Prototype

02

3.3.

Prototype 03

4.

Final Application

5.

Summary

6.

Conclusion

7.

Appendix

7.1.

Idea Sketches

7.2.

Coding

Examples

8.

Bibliography

1.

Introduction

1

.1.

Motivation

1.1.1.InformationVisualization

When Iwentto theFITC in

2004,

1was

deeply

impressedwith a presentation

by

Japanesedesigners. Itwas a short presentation betweenmain_{presentations,}but

itgave mefreshincentivetorethink_{my ideas}oninteractiondesign.Thework

was a visualization_using real-timedataobtainedfromtheelevators oftheDentsu

headquarters

placed in Tokyo. Dentsu isa_{Japanese advertising agency}and its

headquarters

has 35elevators.Thedesignersusedtheelevatorsas adesign

concepttorepresentthe_{advertisingagency itself. The information}collectedfrom

elevators containsthedataof_ascents,

descents,

_stop,and whichfloors

they

are on.Thisdataof all elevatorsinthe

building

was visualizedinvarious and enter

taining

waysinreal-time;forexample,people'sfacessmile whentheelevatoris

going upandfrownwhentheelevator_{is going}down.Iwasfascinated

by

the factthatsimple numbersbecamea meaningfuldesignworkthroughvisualiza

tion.Weare overwhelmed with

information,

butour_abilitytogetinformation is limitedandmost rawinformationthatcannotbecomemeaningful knowledgeis

easily ignored. Alsothecomplexityofinformation is

increasing

and information keeps_changingwiththe_changingworld.

Thus,

static visualizationdesignssuch as diagramsor mapsare not enoughto_conveydynamicinformation. Anewkindof

interactivevisualizationisneededto transformahugeamount of complexinfor

mation intomeaningfulknowledge. Asaninteraction

designer,

thisareamerits study inorderto

keep

pace withthedigitalera.

1.1.2.Numbers

After

deciding

toexplorethefieldofinformationvisualization,Ilooked forsuitable

information thathas largequantityof_{continuouslychanging data.In addition,}

theinformationshouldbe

interesting

and useful.Itspent alotoftime

finding

a subjectItooknote of allinformationIencounteredin_my

daily

_{life. While reading} the

book,

Information

Visualization,

Ilearnedthat therearetwo typesof

tion:_sensoryrepresentationand_arbitraryrepresentation.

Sensory

information

isunderstood without

training

andacrosscultural

boundaries,

and resistantto

instructional

bias.

Incontrast,arbitraryinformation ishardto

learn,

_easyto

forget,

embeddedinculture andapplications,

formally

powerful and capable of rapid

change.An Arabicnumeral isanexampleof_arbitraryinformation. Numeralsdo

not existinthereal_world,and

they

wereinventedas a symbol system centuries

ago.

Thus,

we

learned

numbers when we were_youngand now we use numbers

without_any

hesitation.

Living

without numbersis inconceivable. Atthis point,I

came_upwith

interesting

thoughts.Eventhoughnumbers areuniversalsymbols,

people's opinions about numbersarebasedontheircultural context.Icanfind

good illustrations becauseIam_studyingwithinternationalstudentsinaforeign

country.In_mynativeKoreathe number7 istheluckiestandthenumber4isthe

unluckiest.

However,

in Westernculture, thenumber7is

lucky,

butthenumber13

isnot.Butthesedifferencesare not_{limited only}tonations.Each personhashisor

herown

lucky

and _unluckynumbers.When I imaginedthedataofboth people's

preferences about numbers andtheconnections withtheirpersonal

backgrounds,

theamount ofinformation isenormous andthe_complexityoftheconnections

isalsohuge.

Thus,

Ideterminedtochallengethevisualization of people's cultural

contextsbasedontheirpreferences about numbers.

1

.2.

Defining

theproblem

Where isthe

boundary

ofthe

data?

Thisdataofpreferences about numberswas not an_existingdata.Thafs_{why I}

could not predictthe resultof_{the visualization,}andhadtoconsider all possibili tiesofdesign. In_{addition, the}range of numbers andthe_varietyof cultural con textsare

infinite,

soI hadtonarrowthepossibilities.

HowcanI_conveythe

feeling

ofnumbersinvisualform?

A numberisa universal symbol not a visibleobject,soIwasconcerned about us

ing

thedesignaspecttoexpresstheconcept of numbers.Anotherconcern was howtoshow

users'

preferences andtheirculturalbackgrounds.Ifa user chooses a

favorite

and leastfavoritenumber, thesenumbers shouldbechangedtorepre senttheuser's preferences.

Thus,

users should_easilyrecognize which numbers are popularina particularbackgroundor which numbers are unpopular.

HowcanIbuildthe technicalpart?

Thiskindofinformationvisualization needs alotof_{programming knowledge.} Because mappingdata_{is originally}part ofthescience of_statistics;

furthermore,

thisvisualization ofdata hastointeractwith users._{When researchingthis area,}I discoveredthatmost people whodesignedthedynamicinformationvisualization had degreesincomputer science orinformationtechnology.Butvisualizationis morethanprogramming.

Thus,

an aesthetic_abilityisrequiredtoarrange and com municatethecomplex and abundance ofinformation more effectively.

However,

not_manypeoplehave both_programmingskills and visualdesignabilities.In _my case,Ihavestudieddesignareaformorethansix_years,soIam confidentin_my abilitytocommunicate visually.EventhoughIwasinterested in

learning

program mingskills andfocusedonhardcoding, the technicalabilitycannotbe distin guishedfrom _programmingability.

Accordingly,

Itried to

develop

anideaofboth

transmitting

informationwithease and_creatingafinevisualappearance while

building

thesystemtoconnectadataserver andFlash in realtime.

Whatdoestheuserdesiretolearn fromthisvisualization?

Thepurpose ofthevisualizationistocommunicateinformation tousersineffec tiveways.When

designing

theinformationvisualization,Ihadtoconsider users who needtheinformationand who will usetheapplication.Thetargetusers of thisproject are people who areinterested in numbers and cultural

differences,

as wellas who_enjoyplayingwithflash_{actionscript,} programmatic artworks,and

dy

namicinformationvisualization. Ineedtoresearchthese people andknowtheir specific needs_pertainingtovisualization.

2. Research

2.1.

Case Study: Visual

Structures

in Information

visualization

I researchedexamplesofinformation_{visualization,}and

found

some patterns of vi

sual structures.

Thus,

Iclassifiedvisualstructure_accordingtofourstandardtypes:

hyperbolic,

tree,organicand random.Thereare other works notincludedinthese

categories,and otherworks

have

two typesorthree typesof visual_structure;how

ever, thepatternsIchooseare usedin_{manyexamples,}and

knowing

these types

ofstructuresisusefulin

designing

informationvisualization._{After grouping}ex

amplesintofour_{structures, I}foundthateach structurehasitsown characteristics andit is matched with adifferenttypeofinformation. Inthis section,Iwill explain

thecharacteristicsof visualstructuresand provide examples.

2.1.1 . Hyperbolic Structure

Hyperbolic

Geometry

_{is geometry}ofEinstein's General

Theory

of

Relativity

and Curved Hyperspace. Thepaper,"A Focus+Context TechniqueBasedon Hyperbolic

Geometry

for

Visualizing

LargeHierarchies"

intheCHI 95Proceedings_papers,

introducedthehyperbolicstructure.Theauthors,John

Lamping,

Ramana

Rao,

and Peter

Pirolli,

stated"Ourtechniqueassigns more

display

spacetoa portion ofthe

hierarchy

while still _{embedding it in}thecontext oftheentirehierarchy.Thees

sence ofthisschemeisto

lay

outthe

hierarchy

ina uniform_wayon a

hyperbolic

planeand_mapthisplane onto a circular

display

region.Thissupportsasmooth

blending

between

focus

andcontext,as well as continuousredirectionofthe

fo-cus."Theadvantageisthat thisstructure canhandlealargeamount ofinformation inasmallspace

because

ofthefisheyedistortionand showthe

hierarchy

while

navigatinginformation. It isessentialpart ofvisualizationto

keep

theuser explor

ing

the

hierarchy

without

getting lost.

_The

first

_goalofinformationvisualizationis

to

help

users

find

what

they

need withintangled

large

information.Also it isgood

for changing

focus.

2.1. 1.1.Radial formof Organization Chart byAlexander Hamil tonInstitute

rCA>-l>f";.

2.1.12._Changingthe

focusinhyperbolic geometry

VisualThesaurus

This Visual Thesauruswasasoftwareprogramdeveloped

by

Thinkmap.inc in

1 998. It isaninteractive

dictionary

andthesaurus thatsupportexplorationand

learning

vocabulary.Whena usersearchesaword,other wordsand related mean

ingsarevisualized,_usingthehyperbolicstructure.Therelationshipsbetweena

selectedword and other words and meanings are_clearlyshownto users,so users

can understandthewordand more

intuitively

explore othervocabularies.When

theother word isselected, theword isenlarged and moved_{to the center,}other

wordsare shrunk andtheconnectionisregenerated andfocusedontheword.

Thistransitionshowshowthefocusmoves without_anyconfusion.The hyperbolic

structure_{is especially}usefulforthis_vocabularyvisualizationbecauseit isimpor

tant toknowthesemantichierarchiesof wordsinordertoimprovethe_efficiency

of

learning

vocabulary.

2.1.13.VisualTrea-sure_byThinkmap.inc

in 11 mmnm

____

f <__{of material}

~

Pcrci'>c

..-- ..:

CivIii

i !,. iV CiviliS*

c :..:..V.r

r.-M O

prepare

.,...

., - _$red

Mil ' ' :*3tfain

gearing

^v powW i'

.

rji'ro.i:Vj

-con-sequP-r.ee

train

G

Aaoonlran alc-tr-i"' ; IM..1T1 o o o '.' ; g'oom '!.! discipline CCKllVOn "^'"curbhold tin SMtr

2.1.2.TreeStructure

Thetreestructure was presented

by

Ernst

Kleiberg,

Huubvande

Wetering,

Jarke J.

vanWijk inthepaper"Botanical VisualizationofHugeHierarchies"in 2001.Thetree structureisbasedonthesimple_{botanical tree, consisting}of

branches, leaves,

fruit

and branches. Themethodtheauthorsdescribedinthepaperisthatbranchesare

emphasized,

long

branchesarecontracted,and sets ofleavesare shown asfruits.

Thismethod isexcellentfor_visualizing huge

hierarchy

structures.Whenwe show

the

directory

structure,we_usuallydrawthenode andlink diagram.

However,

asit isrepresented_{usingtree structure, the}

hierarchy

isclearerbecauseatreeis

afamiliarmetaphor.People easilyknow fromwhich branchesaleafhascome.

Thereby,

directoriesand

files,

as well astheirrelations canbe_readilyextracted.The

botanicalvisualizationisused _{mostly in}casesofthe information-richcontent and

largedirectories.

2.12.1. Nodeand

linkdiagramand

correspondingstrands

model

A16

B3 C3 O10

A

/N

E1 F2 G2 H4 14

J1 K1 L1 M1 N101

2.122. FinalModel

intheBotanical Visualization.

Ecotonoha

Ecotonoha isa projectdesigned

by

Yugo Nakamuratonurture a virtualtreecol

laboratively,

and atthesametimecontributeto theactual environmenttocope

with global warming.Whenpeopleleavea_message,a newleaf budsontheend of

branches,

andthevirtualtreegrows.AndasEcotonohagrows,realtreeswillbe planted

by

acompany,NEC.Thistreestructure showsboth bunchesofpeople's

messagesandthe timesequencesof_making messagesinan_{aesthetically}impres sive and perceptive way.Wecan_easilytellwhich messageshave_alreadybeen left.

However,

asthe tree grows,smaller_overlappingoffshoots appear on a

branch.

To solvethis problem,onthisvirtualtreeeachbranchhasa

function,

andthecolor of selected messageischanged.

HELLO"

HELLO", .,Uy0y .HELLO MAM

2.1 23.Ecotonoha_by tonoha

Yugo Nakamura

HELLOio OTONOHA \

IMISS U=(

NOWHEREMAN.

oHELLO!

E"~OTONOH.\ oTODAY-FIC

E^y^SBEAR-^^

/oHELLO! / ECPiQffifgbiaiEJ1 KECOTONQHAA5sXOV5C,5UaaniJ

-METRSPER ra/Kwr*iERi

"JVAPr-. i&t.armNO1

2.1.3.0rganicstructure

r&Qsr

Theorganic structurehassimulated organic properties.Inthe past,itwas often

tested that theartificial objects simulate organic creaturesincomputer space.The

mostfamousexampleistheEvolved Virtual

Creatures,

which wasdesigned

by

Karl Sims in 1 994. Thevideo shows resultsfroma research project

involving

simulated

Darwinianevolutions of virtual blockcreatures.Apopulation of severalhundred

creatures iscreated within a supercomputer,and each creatureistestedforits abilitytoperforma given_task,such asthe_abilitytoswim ina simulated water environment.Thecreatures shown are resultsfrom_{many independent}simula

tionsinwhich

they

were selectedforswimming,walking,

jumping,

following,

and

competingforcontrolof a green cube.Theorganic structurehastheadvantage of

showingtheprogress ofinformationwhose structure and contentare_continually changing.

2. 13. 1.Competeing,

hopping,and swim mingcreatures

Anemone

Anemoneisa projectthatusestheprocessof"organicinformationdesign,"the

subject of aMasterofScienceinMedia Artsand Sciences

by

Ben

Fry

intheMas

sachusettsInstituteofTechnology. Theproject visualizesthe_changing structure

of a web_site,juxtaposedwith usage_{information employing}simulated organic

propertiesinan

interactive,

_{visuallyrefined environment.}Inthe paper,"Organic

Informatin

Design",

_{the author,}Ben

Fry,

stated:

Rulesforgrowth can governthecreation ofnewbranchesof structure

withinthesite.

Atrophy

rules

decay

unusedareas,_eventuallyremovingthem.

Individualwebpagescan call attentionto themselvesas

they

are visited more

rapidlythanothers.Individual

branches

growbasedoninputfromthedata.

AsthePreprocessor Enginereadstheusage

log,

a reproduction rule causes

branchestogrow whenever parts ofthesite are visitedforthefirsttime.This

avoidstheproblem of

having

to

keep

trackof what pages are addedtoor re

movedfromthesite.

Using

theusagedatatocreate animplicitmodel of

structureisa commonthemein Organic Information Design. Tobalance

growthisthenotion of'atrophy".Branchesassociated with areas ofthesite

thathavenotbeenvisited will_slowlywhither_away,causingthem to_visually

thinout.

Eventually

thebranches

die,

and are removedfromthesystem.

2.132Anemoneby Ben_Fry

2.1.4.1 A mapof net workanalysis_bythe FASresearch

2.2.4.Randomstructure

Idefinedother visual_structures,not

having

special characteristicsliketheprevi

ouslymentioned_structures,as randomstructures.Randomstructures are

largely

used invisualization.The

data,

which

doesn't have

specific

hierarchy,

canbevisu

alized_usingtherandomstructure.Becausethedataispositionedrandomly,users

can experience an unexpected visual result andtheresult can bea refined visual

work.Thisstructureiseffectivefor showingtherelationshipsoflargeamounts of

information.

Public

Understanding

ofScience

The FAS.research isa research institutionlocated in

Vienna, Austria,

whichhas

been producinggreat workinnetwork analysisforscience andbusiness.This

visualizationillustratesone oftheirseveral network analyses.Various institutions

(circles)

are engagedin jointactivities,whichpromotethepublic_{understanding}

of science andtechnology._{The participating institutions}are members of vari

ous color codedfields:Enterprises

(purple),

schools(lightgreen),lobbies

(blue),

universities

(orange),

political organizations

(yellow),

museums

(teal),

media

(turquoise),

non-universityresearch

(red),

non-governmental organizations(dark

plum).

FAS.research _".

f > M

*

2.2.

Aesthetics

Inspiration

for Visualization Design

Intheprocess of

ideation,

several areasinspiredmetodesignthe information

visualizationinan aesthetic view.Theinformationvisualization hasessential

meaningsof not_only

communicating

data_{to users,}butalso_givingtheaesthetic

satisfactionof visual graphics.

Thus,

users_enjoytherefined visual graphics made

by

complexdatathroughhigh

technology

invisualization.

2.2.1.Fine Arts

In informationvisualization,objects are usedtoshowlargeamountsofinforma

tionmore effectively.

Thus,

Idrewuponthefineartstofindideasaboutthecom

position ofobjects.Thepaintings offamousmodern_artists,Kandinskiand

Miro,

were_{especially helpful.}

22.1. 1.PaintingsofKandinski

22.12PaintingsofMiro

2.2.2.ProgrammaticArts

Nowadays,

artworksgenerated with

programming

are

famous

incomputer space.

Artists inthisarea use

programming

platformssuch asMacromedia Flash

Action-script,

Processing

andJava.

Many

programmersanddesignersexperiment with

creative modes of visual interaction. Theinformationvisualizationisdoseto this

areabecause datais

dynamically

visualized inthesameway,with advanced pro

gramming.

Therefore,

theseprogrammaticarts are usefulfor

inspiring

visualiza

tiondesign.

222. l.Vattenfallmedia facade byART+COM(left). Onceuponaforest_by

JoshuaDavis(right)

2222.Ttssueprint_by

CaseyReasfleft),Neon

Organic_byMarius Watz

(right)

22.23.ElectroPlastique

ElectroPlastique_byMarius Watz(left), Clocksphereby

YugoNakamura(right)

3.1.1..Prototype01

Screenshot

3. Process

3.1.

Prototype

01

First ideawasthevisualizationofthepreferencesoften numbers andtheircul

turalcontexts.Theuser makes a sequenceoften numbersfrom0to

9,

and inputs

personalinformationsuch as_nationality,gender and age.Afterthe

input,

thedata

isvisualized.Itried tovisualizethedata fromtheperspectiveoftheuserbecause

theuserhasa_{strong interest}intheinformation.

3.1.1 . InteractionDesign

Theconcept ofinteraction isto presenttheinformationa_stepat atime.

First,

ten

circles_{corresponding}towithtennumbers are shown onthescreen.Thesize and

thealpha value ofthecircleare generated_accordingto theorder ofpreference

sothatuserscan recognizeitvisually.Whentheuser clicks onecircle, thesecond

piece ofinformationisvisualized.Aroundthecircle arethenames ofpeoplewho

havechosenthesame number.Foursmallcircles growfromthecenter ofselected

circle.Thesesmall circles representfoursections oftheuser's subinformation.

Eachsmallcircleisdifferentcolorfor

labeling

categories.Whentheuserclicks

one smallcircle,other circles radiatefromitscenter.Othercirclesrepresentthe

informationofbackgroundofpeople shown aroundthecircle.Thesecircles also

have

differentsizesandalphavaluesinproportionto thenumber of people who

areincluded inthesubcategory.For

instance,

inthecontinentcategory,thereare

sixcircles,_representingthesixcontinents.Ifthenumber of peoplefromAsiais

thelargest_amongpeoplewhochoosethesame_{number, the}circle ofAsiaisthe

biggestandthemost alphasincircles connectedwiththecontinent circle.Inthis

way,a user canunderstandthe

tendency

of peopletohavesimilarpreferences

aboutnumbers.Tomovetheotherpeople's

data,

a user can click a name placed

aroundthecircle.Ifonenameisselected, theinformationof selected personis

re-visualized

from

thefirststep.

3. 12..Theprogressof

interaction

3.1.2. Visual Design

Themain visual componentisa circlethatisdrawn

freehand,

not perfectly.I

came_upwiththisshapethroughtheobservationofcell.Thereason isthatcircles

containa person'sinformationjustashisorhergenesdo.

Moreover,

thisshapeis

goodfor_expressingtheacquisition orlossofinformation.Theadvantageofthis

visualizationisthata user can obtain moredetailed informationonly from interac

tionwfththeuser.Inthis point,Iimaginedsome mysteriousorganic objectthatis

growingor

decaying

accordingto theuser'sclicks.

I used_onlycircles and linesto

keep

thedesignsimple.Thecolor_{is simply}white

color with some pointcolors. Becauseitcontains a

lot

of

information,

other ad

ditionaldesigncomponentscaninterferewiththe transmissionofinformation.

Somepoint colors wereselectedto_classifycategories.

3.1.3.Problems

Numbersshouldbemorefocused.

Inthis visualization,onlysmall numbers are placed ontheleft.This isthevisual

izationof_numbers,so

design,

which can emphasizetheconcept of_numbers,is

needed.

Thespaceinwhich

people'

names areplacedislimited.

Ifthenumberof people

increased,

thespace willbecrowded with alotof names

andthe_readabilitywillbecompromised.Ihavetofinda solutiontoaccommodate

alargenumberof people.

Hardtocomparetennumbers.

Inthis visualization,a user cannot comparethepeopleand people'sinformation

included intennumbers.

Color-coding

indifferentcategoriesisweak.

Theareaof_{color-coding is}toosmalltorecognize.Thereshouldbemore colorin

otherpartsto_classifydifferentsections.

3.2. Prototype 02

Thesecond prototypewas

based

on howtoemphasizetheconceptof numbers.

Therefore,

Iplacednumbersinthecenterof_screen,andincreasedthesize of

numberstoattracttheuser'sgaze.Inthis_{visualization,}themetaphor wastreeson

a smallplanetlikethatAntoinede

Saint-Exupery's

novel,The Little

Prince." Inside

the planet,user's_{data isshown,}and otherpeople's

data

isvisualized outsidethe

planetItprovidestheuser-centered_{visualization,}so each user can haveadiffer

entresultofdata mapping.

3.2.1.Interaction Design

Themain interaction

key

istherotation of a wheel of mouse.There isa circle of

tennumbersinthecenter.Thenumbers are placed clockwise andhave different

alpha values_accordingto theuser'spreference.This ringof numbersisrotated

by

thewheelofthemouse._{While rotating}the ring, thenumbers areblurredinorder

tomake userfeeltherotation.Atthesametime,thedatawhichisvisualized inthe

stageischangedtofollowthecolor sections placed outsidethe_ringof numbers.

Thecolor sections are made offourvisual categories:continent, age, gender,and

color,whichistheusers'

backgroundinformation.Theusercan changethecriteria

of visualization and experiencedifferentvisual results_accordingtodifferentcon

texts.Thesectionsare classified _usingthecolor-coding.Theauthor ofInformation

Visualizationsaidthatcolorisusefulfor

labeling

information.Unique

hues,

includ

ing

red, green, yellow,

blue,

white,and

black,

are natural choices when a small set

of color codesisrequired.

Thus,

therearetensectionsdividedinone circle and

thosesectionshave fourcolors:red, yellow,green andblue.Thearea of visualiza

tionalsohasthesame color codes withthe section,so_{it is readily}distinguished

fromother sections.

3.2.2. Function Features

NumberDial

Numbersare placed clock-wisedirection accordingto theuser'spreference.The

alpha values of each number also_{vary according}topreference property.Theuser

canrotatethisnumberdialwithamouse-wheel.Whenrotating, thenumberswill

blur.

Properties

Ring

Therearefourproperties:_{nationality,age, gender,}and color.Thepositionofthis

property ring isfixedinthecenter.

Thus,

whenthenumberdialisrotated,user can

seedifferentproperties of each number_accordingto theangle of rotation.When

thedialisrotating, theangleissnappedintensections.

People

Thisdotrepresentspeople.

Thus,

a user can seehow_manypeople areineachsec

tion.Thepositionsofdotsare generated _{randomly in}thecircle.Thesecircleshave

thesame color_accordingto

properties'

color coding.Thesize ofthecircleisgener

ated

by

thepercentage of people. Alsoa user can

drag

and

drop

thesecircles.

SelectedDot

Selected Dotischangedtored color and enlarged.The informationof a selected

personisshown nextto thedot.Thesimpleinformationcontains an email address

and numericaldata. Morespecificinformationoftheselected person can appear

inan additional small window. Otherdots forthesame person are connected

withcurvedlines.

Visual Controller

The Usercanchange visual graphics_usingthiscontroller.Therearefiveoptions:

people,text,circle,

line,

and percentage.The user canturn theseoptions on/offto

see whatheorshe wantstoknow.Thiscontrollerallowstheusertousethe

user-centered interface.

77me//ne

Thistimelineshowsthe totalamount ofdata.

According

to the timewhen user

inputthe

data,

dataisplaced inthetimeline.Constantnumbers ofdataare shown

invisualizationat once.A user can

drag

this timeline tochangetheperiodofdata

showninthestage.

3.2.3. Visual Design

Themain visual conceptisan exact circle andfourcolor codes.

According

to the

metaphor, treeson aplanet, ten

big

numbersare putinacircleinsidetencolor

sections.And manycircles_containingalotof

dots

arelinkedwiththe tenoutside

sections_usingalineasifvarioustreesandtheir

fruits

have beenplanted onthe

ground of a planet.Thecolor ofcircles_containing

dots,

_texts,andlinesisthesame

colorastheconnectedsection.Thesize ofcirclesisgenerated relativeto thenum

berof

dots,

whichmeansthatother peopleareincluded inone sub-section.There

are visual options related withpeople,text,circle,lineand percentagetochange

whattheuserwantstosee.

32.1.Imageof Prototype 02

3.2.4. Problems

Thevisualizationistoocomplicatedtounderstand.

Theinteraction usingthemouse wheel is difficultand limitedto themouse con

taining

a wheel.

There isnot enough spacetoshowthedataof other people.

Thetransitionto theother person'sinformationisnot natural.

3.3. Prototype 02

One

day

a new approachto thevisualization suggesteditselftome.I had strug

gled withtheproblem of_visualizingtherelationshipsbetweenthepreference

order often numbers and otherpeople'sdatawiththeirbackground information.

Eachpersonhas bothten

different

numbersinan order and other sub-informa

tionabouttheirculturalcontexts

including

_{continent, age,}and_gender;thus,allof

thisinformation_{from many}people was soentangledthatitwasdifficulttoshow

theirconnectionsofthedata.

However,

if Ithinkmore_simplyaboutthepreference

of_numbers, Icouldfindthesolutionto thevisualization problem.Ididnot need

togetthepreferenceorder often numbersfromusers.Toshowthepreference of

numbers more_{clearly,onlytwo numbers, the}favoriteandleast favoritenumbers,

areneeded.Fromthisnew

idea,

the_wayof visualization was

totally

changed ina

different

direction.If Icollectthedataaboutthefavoriteandleastfavoritenum

ber,

therange of numbers couldbeextended.

Hence,

I increasedthe

boundary

of numbersfromten toonehundred.Userscan choosetwofavoriteand least

favoritenumbersbetween0to99andthedataof all_numbers,which users_select,

ismapped

interactively

atthesametime.Inaddition, Irealizedthat theinforma

tionabout cultural contexts of users couldn'tbevisualized withthepreferences

of numbersinthesame position of concentration.Itcan bedividedintoseveral

sections,which have differentstrengths.Asaresult,Idesigned fourvisualization

modes

including

numbers, continent,age andgender,andineach modethedata

isvisualizedbasedonthemode.

3.3.1.

Step

1

Thereare 1 00numbers

floating

on_{the screen,}and each numberissurrounded

by

a_varying numbers of small circles.Thesmall circle represents one person who

choosesthenumberenclosed

by

itasfavoritenumber orleast favoritenumber.

Thesmallcircles are placedina circle aroundthe numbers,and thedistance from

a numbertoa small circleisdetermined

by

theperson.Smallcircles putinoutside

circlelinearounda number are people whothinkofthenumber as a

favorite;

in

contrast,smallcircles placed insideacirclelinemean people who selectthenum

berastheirleast favorite.Thesize of small circlesis

fixed,

sothediameterof

big

circles which small circles_{p is}generated_accordingtothenumber of smallcircles.

\

38 .

#32)

33.1.Prototype03

Screenshot

.fa.-jt

*

j

_* *

:

81

/:

fi?6)

V

&

j

ft;:-'r

3g

}

sma circle:a person

>A'K:(hOOSetheMirnl:*-'

"10"

a5favoritenumber qileast favoritenumbei

an umfce

from 0to99

10

3Utsidbic : :le:a person who sele< t rlie

number

" 0

ssf.sv-rte number, s placed.

ins :

bigcre e:a perse

who seietI The number

'10"

a5 eastfavorite

number, s placed.

332.Diagramofa

number

f. teror nsdeandcutsde: g

I r:les generatedinpropOtlonto the totalnumberof small rtrrles

i"~i~l

IJ

r

65

4^i

-91

b;

*1

J

i1

65

1

R"1

-A

hi

3.33.lmageof !~i|S j .

|

Til

numbers placedin 3Dspace

This isa picture of numbers placedin 3Dspace.Eachnumberhas different depth

fromtheviewinproportionto thenumber of small_circles,and users can explore numbers as_movingto

X, Y,

Zpositions.Asthedepthof a numberis

farther,

the

size andthealpha value of a number are smaller.Userscanfocusontheclosest number_easilyand recognize which numberisfamousor nottousersthanks to thethreedimensions.

Problems

Incase ofthenumbersmall number of peopleselect, thesize of

big

circlesistoo

smalltoshow small circles.

Itisnot_easytorecognizehow manypeople choosethenumber asfavoriteor

least favorite.

Theconnection betweennumbersishardtovisualizebecausenumbers are placedin 3Dspace.

Many

numbersof

big

circles areoverlapped,soitishardto

find

thenumberthe

user wanttoknow.

3.3.2.

Step

2

Theshape of small circlesischanged a

little

bitand

favorite

andleast favorite

numberisclassified_accordingto thecolor notthediameterof

big

circles.Small

circlesare placedinone

big

circle arounda number andthesize of

big

circles is

generated_accordingto thenumber of small circles.Therearetwocolors of small

circles: orange meansa personthinksofthenumber as afavoriteandblackmeans

a person selectsthenumber as aleast favorite.Alsothecolor ofthe

big

circleis

changedinproportionto thenumber of small orange andblackcircles;users can

thereforerecognizethepreference of numbers at a glance.

33.4.lmageofthe

prototype.Step2

Problems

Smallcircles aretoosmalltorecognizeandtoclick_usinga mouse.

But ifthesmall circles areenlarged,it becomesmore complicated becauseone

hundrednumbers are neededtoshowinone screen.

Many

numbersof

big

circles areoverlapped,soit ishardtofindthenumberthe

userwanttoknow.

333.

Step

3

Thesmall circles areenlarged andall smallcirclesarehiddenasadefault Upon

clickinganumber,smallcircles appear alonethe

big

circle.This interactionallows

userstoselectinformationsuitablefortheir

interests,

so_unnecessarydata does

not prohibit users

from

_{understanding}complicatedinformation. Iadded new

functionsof visualization such asSearchnumber andColortheme.Thesearch

menu hasafunctiontofindthenumber_easilyand_quicklyandthecolorthemeis

madefortoentertain usersinan aesthetic view.

i

i

i

r

33S.lmageofthe prototype.Step3

33.5.lmagesapplied bydifferentcolor themes

4. Final Application

Thefinalapplication

follows

the sameideaoftheprototype03.While

designing

thelast_prototype,Irealizedthatasthemorepeoplechoose a number as afavor

iteone, thenumberitself

becomes

biggerand brighter.These

features

made me

imagine

blooming

flowers

underthesun.In_{contrast, the}number of people with a

bad impression ischangedtodarkcolorasifaflowerintheshadefades.The inter

action

between

numbersonthescreen and users whoinputtheirdata_{is exactly}

thatbetween

flowers

andtheirsurroundings.

Thus,

Idecidedtousethe

"blooming

flower"

as a metaphor of_{the visualization,}and I

finally

finished

designing

the_ap

plicationfortheinteractivevisualization incultural contextsbasedonthenumber

preferences.

4.1.

Contents

Hierarchy

inn

SELECT INPUT NUMBERS INFORMATION

J L

FAVOWTE

LEAST

FAVORfTE CONTINENT _{VISUALIZATION}

GENDER

NUMBER

CONTNENT

AGE

GENDER

Theapplication isdividedintotwoparts.One istheinputparttocollecttheuser's

dataandtheotheroneistheexplorationtovisualizethedata.Intheinputcat

egory,users selecttheir

favorite

andleastfavoritenumbers andtheninputtheir

name,continent,ageand gender.Intheexplorepart, thedataisvisualized

based

onthesamefourelements.

4.2. Technical Process

FLASH MySQL Database /PHP *-MySQL Database /PHP /XML FLASH

Choosetheir Sendthedata Loadalldata Visualizethe

favorite toMySQL fromMySQL data in FLASH

number and Database Database using

least favorite XML.

number and

iptuttheir

background information.

Theapplication providesthevisualization_accordingto theuser'sinput in real

time.ToconnecttheMySQL DatabasewithMacromedia

Flash,

thePHPplatform

isused.Astheuserinputhisorher dataaboutthepreference of numbers and

background

information,

thedata issenttoMySQLDatabase

directly

fromthe

Macromedia

Flash,

andthenalldatastored intheserverisloaded_usingtheXML

to theMacromedia Flash. Inthisprocessthevisualization caninteractwith

users'

input in real_time,so users canhaveafunexperience_{participating in}thevisualiza

tion_usingtheirdata.

Moreover,

thevisualization keeps changing accordingto the

user's

input,

andthenew resultisproduced_continuouslyastimegoesby.

4.3. Interaction Design

Thenumber mode

One hundred numbers offlowersfrom0to99are placed onthescreen.Each

flower hasadifferentnumberof_petals,size and color.In_{the center,}a numberis

shownandthenumber's size also variesinproportionto thesize offlower. One

petal means one personhaschosenthenumberinsidetheflower. Therearetwo

typesof petals:thebright-colorpetalindicatestheperson who selectsthein

side number as a

favorite;

incontrast, thedark-colorpetal showstheperson who

selectstheinsidenumber as aleast favorite. Thecolor ofthe

body

ofthe

flower

is

mixed with orange and

black,

following

theratioofthenumber of orangetoblack

petals.That

is,

thesize oftheflowerrepresentsthenumberof people who choose

onenumber,as well asthecolor oftheflowershowsthepreferenceforthatnum

ber.Astheuser's mouserollsover a_{petal, the}sizeof petalis increasesandthe

name ofthepersonappearsintheupperpartofthepetal.

orange patal :aperson who choosethenumber

"10"

asfavoritenumber.

anumber

from0to99

bigcircle:thesizeisgeneratedin proportionto thenumberofpetals 4.3. 1.Diagramofthe andthecolorismixedwiththe

flowerinthenumber numberoforange petals andthe mode numberofblackpetals.

L

blackpatal :a person whochoosethenumber

"10"

asleastfavorite

number.

mouse roll-over :the size of petalischangedto biggerandthename of personisshowed up.

Thetotalnumber ofpeope who selectthenumber2:15 Thenumber of people who selectthenumber2as afavorite: 1 4

Thenumber of people who selectthenumber2as aleastfavorite:

4.32.Examplesof

flowers

Thetotalnumber ofpeope who selectthenumber44: 18 Thenumber of people who selectthenumber44as afavorite:0 Thenumber of people who selectthenumber44as aleastfavorite:11

When clickinga_{petal, the}usercan seetheperson'sname, continent, gender,and

age.Atthesame_time,twopetals oftheperson are connected with one curveline

becauseone person choosestwonumbers as

favorite

and least

favorite.

Thesmall

window,which showsthe

information,

canbe deleted

by

thesecondclicking. Whenthecenterof aflowerisclicked,all petals placed intheflowerare connected

with other petals at once.Alsotheselectedonemovesto thecenter ofstage and

thescreeniszoomed out_{automatically}tomake usersfocusontheselected one.

*

4.33.1mage ofthe

petals connected

withone curveline

o

Thecontinent, gender,and age mode

Intheothersections,the main concept of visualizationisthesame as withthe

number mode.

However,

some parts ofthevisualization should bechanged be

cause one person selectstwonumbers.That is whyone petal isdivided intotwo

parts.Theupperpart of a petal representsthefavoritenumber andthelowerpart

representstheleastfavoritenumber.Thecolor of a petalisgenerated _according

to the number.Inan_ascending order of_{numbers, the}colorischangedfromthe

brightcolortothedarkcolor.When a mouse rolls over a petal, two numbers, the

favoritenumberwiththebrightcolor and atleastfavoritenumber withthedark

color,appeararoundthepetal.

43.4.Diagramof

thepetalinthecon

tinent,gender,and age mode

u

upperpartofapatal:

thefavoritenumber onepersonselect.

lowerpart of a patal :

theleast favorite

number one person

select

43S.Colorchan

accordingto the

numbers

#FF9900

COLOR

NUMBER _{0, 1, 2,}

#000000

97, 98,99

43.6.Diagramof

theflowerinthe continent,gender,

and age mode

a patal :a person who

livesintheNorth America.

name of aflower:

thesub_categoryin

theselected mode

| __

^0

nerical

mouse roll-over:thesize of petalischangedto

biggerandthenumbers of personisshowed up.

bigcircle :thesizeisgener atedinproportionto the

number of petals.

Asa petal isclicked, thepetal isconnected with otherpetals,whichhavethesame

number asthefavoriteorleast favorite_number,usingcurved lines. Thecolor of

thelines isgenerated

following

thepreferencetypes.That

is,

petals connected

withcurved orangelinesmean people who choosethesamefavoritenumber

withtheselectedpetal,and otherslinkedwith curvedback lines representpeople

who selectthesameleast favoritenumber.

43.6.lmageofthe

flowerasa petalis

clicked

' _*

fr% ' _v^

4.4. Visual Graphics

Themain concept of visualdesignis clean,_simple,and

blooming

flowers.This

applicationhandlesa hugeamountof

information,

soItried toeliminate unnec

essary designelements

because

additional parts can interferewith

transmitting

informationtousers. Fundamentalobjects are

largely

used,and_onlyorange and

graycolors are usedintheentire application.Thereason_whyorangeisselected

as a main coloristhatitconnotes_energyand

brightness,

andthesignificance of

orange colorismatched withthemetaphor of

blooming

flowers.When

designing

other_sections,Ikeptthe_consistencyofthe mood relatedto

blooming

flowers.

NUMBERS

NUMBERS

NUMBERS NUMBERS

COHTJlS.-T SEMMB

%

c

%

A

9

O

e

o gP

4.4. 1.Indexpagefrighttop)4.42'.Thepageof_selecting

numbersdeft_top)4.43.Thepage of_inputtinginformation(right bottom)4.4.4Jhevisualization pagefleftbottom)

9

#

__m

4

Eat-- ->=rs ea* -_~r

~~**<?t-_* 5

-occur* qatl-fct-i cc;*--c ct-*-i- -

-t-r 2-,-~c-#tr^rs

Esc-oca-Ta*-3 or-at:;*The*

-*i>. cakv W BCS- -:-5 ^etii*=-G~

xc-raw *t 0 4.4S.Hint windowfleft) 4.4.6About window(right)

*

*

/

%

---A

O

U

C

Q

3

4.4.6Jmageof_loadingdatainthenumbermodeftop)4.4.7Smage

of_loadingdatainthecontinentmodefbottom)

V

1( *

J

o o*^%t

O

1

* t -?

Europe

L,

I

NorthAmeric

4.5. Function Features

Themenu ofthevisualizationhasseveral

functions.

Inthis section,Iwill explain

thefunctionstooptimizethevisualization_accordingto theuser'sdesire.

VisualMode

Thevisual modeprovides opportunitiestochangethevisualizationbasedondif

ferentelements.Becausethesemodesaregenerated _usingtheinformationthat

users enterintheinputsection, therearefourtypesof visual modes: number,con

tinent,gender,and age.Thenumber mode showsthedata basedon 100numbers. Inthecontinentmode; thedataabout preference of numbersisvisualized accord

ing

to the_nationalityof_users,whichisdividedintosix continents:North

America,

South

America, Asia, Europe,

AustraliaandAfrica.Thegender andtheagemodes

alsodrawthevisualizationinthesameway,andthegender sectionhastwocat egories: male andfemale.Theage section iscomposed of sixlevels:theteens,the

twenties,thethirties,the

forties,

the

fifties,

andthesixties.

4.5.1Jhenumber mode

4.53.Thegender mode

45.4.Theage mode

Customized Layout

Thecustomizedlayoutisthe_changingthe

layout

offlowers.Therearethree_op

tionsforthelayout:random,circular,and linear.Thedefaultisthecircular

layout,

inwhichflowersareplaced withthecenter ofthestage.Thedistance fromthe

center pointisproportionalto thesizeof

flower,

so

big

flowersmoveto theout

side and smallflowersare closerto thecenter.Thesecond option istherandom

layout,

whichmakesflowersmovetoa random positioninthestage.Andthe

other_{one, the}linear

layout,

arrangesflowers

horizontally

_{in ascending}order.

Theselayoutoptions are_especiallyusefulfor

finding

thespecific number as_many

flowersoverlap. O _, o c

*

(

> <

e

o C e

i

0

Q

c 6

4|

-o

|

O GP

O O c OQ-o

-o c O

a. ^_\ c O & - _Q

<

O ' o

c o & <

O

CO

45.5.Random/circular/linearlayoutinme numbermode

-V

-

">

/~\

trv.

^f *A

4S.6.Random /circular /linear layout inthe

continent mode

Visual Option

Thevisual option containsthecolorofvisualizationandthe textoption.Userscan changethecolor of visualization_{to red,orange,}

black,

and pink. Eachcolor means

thepoint color ofthevisualization and each color mode combines pointcolor,

theotherside'scolor,andthe

background

color.Theothercolors,notthepoint

color,were picked

by

the

harmony

withthepoint color.

By

_usingthe text option,

users can_easilyturn the textsonflowerson and off.Whentextsarehiddenonthe

screen, thescene of

flowers

connected with curvelinescan bean artwork gener

ated

by

programming.

4.S.7.Orange/red/ pink/blackmodeinthenumber

mode(fromleft_toptorightbottom)

Zoom in/out

Using

thezoom

function,

users cannavigatein/outthescreen.Therearefive steps: x1

12,

x1,xi.5,x2,x2.5.Whena petalisclicked, thescreenis automatically zoomedintwo timesand when aflowerisclicked, thescreenisalso zoomedin

one-and-one-halftimes.

Thus,

togobackto theoriginalsize,users needtousethe

zoomfunction.

r*S

\

?

O

o

O

4.5.8.lmageszoomedinxl/2, xi, x1.5, x2,x2.5in thenumbermode

5.

Summary

While

developing

_mythesis_{application, I}haveincorporatedfeedback_{from my} Thesis Committeeas well asfromstudentsincomputer graphicsdesign.Based

onthe

feedback,

Ihavechangedtheideaof visualizationfromthefirstprototype

tothefinalapplication.After

finishing

_mythesisfinalapplication,Ihavetested

thewebsite with 1 5 people andreceivedgoodfeedbackinregardto theinterac

tionof

flowers,

thevariousoptionsof visualization andthemetaphor ofbloom

ing

flowers.

Mostofthemenjoyed_experiencingthe visualization,especiallyafter

they

inputtheirdata.When

they

foundthepetals_showingtheirdatainabunch of

flowers,

they

wereimpressedwiththevisualization.

However,

somepeoplehad

difficulty

in

finding

theinputmode.

Also,

some userscomplained aboutthespeed

of

loading

data.BecausetheFlashfilecontains alotof movie clipsinthis project,it

takessometime toloadallinformationand changetheproperties ofmovie clips atthesametime.Inthe

future,

Iwillfixthepart ofthelinkwiththeinputmodeto

catchtheuser'seye more

definitely

andfinda solutiontodecreasethespeed of

loading

data.

6.

Conclusion

Thepurpose of_mythesisistovisualizetherelationshipsbetweencultural con

textsandthepreference ofnumbersin interactiveanddynamicways.Idesigned

aninteractiveapplication presentedon a websiteinordertoexperiment with

thepreference ofnumbers and personal

background

information. While design

ing

thefinal _application,Imadeseveral guidelinestovisualizealarge_quantityof

informationwhosestructuresandcontentsare_continuouslychanged.

Make_{levels for obtaining}information

Notallinformationneedstobeshown at once. Makethe_priorityorder ofinforma

tion,and make users getdata fromthemostto theleastimportant information. User-centeredvisualization

Provideusersthepossibilities of_changingthe_settingofthevisualization.Users

can experiencethevisualizationoptimizedtothem,andhave funwith_changing

thevisualization.

Eliminate unnecessaryparts

Thinkoftheinformationfirst.

Keep

thevisual designcleanbecausesomedeco rative parts can_{interrupt understanding information. Provide}convenience and

enjoyment with_usingan

interesting

interactiondesign.

After

finishing

the application,Isubmittedtheprojectto theAdobe Achievement Design Awards 2006.

My

project earnedHonorable Mention intheinteractivecat egory.Eventhoughtheapplication stillhas roomfor

improvement,

Iam

truly

sat

isfiedwiththeresult of_myMFAthesisprojectBasedon_{this project,}Iwouldliketo

continue_exploringthefieldofdynamic informationdesign.Thearea of_visualizing

informationinotherdevicessuch as mobiles or exterior

installations,

notlimited

to computers,isa potential area inwhichthe_studyofdynamicinformationvisual

izationcanbeapplied.

7.

Appendix

7.1. Idea

Sketches

t

./

N

tin

.

(

CQ

0

Q

^

..t

0>.

;*-3>?

f

*&

#%

C^

A

nC

b

c

0

i

^-i?...

'

i

(aaLZs)

-..

V

rg)

0

m

O

yG

i^

COG

j?

-

- '-'

>r inI

44

7.2.

Coding

Examples

7.2.1.Send/Loaddata inMacromedia Flash

//changegamelDtoyourtableassignedint he Highscore Database

gamelD ="numtable";

//returnNum. adjusttochangetheamount scores returnedtoFlash.

retumNum=_1000;

// BaseURL:

data/highScoreGet.php

islocatedinstudents/data.

//changethebase URLtoa relative pathinrelationtoyourgame.swf

// Example:thisSWFis instudents/jason/highscore

baseUrl="http://www.urielee.com/"

//sends and reieves new scores

makeObj=

functionOi

sendScore=_new

LoadVarsO;

sendScore.name=_myName; sendScore.nation= myNation; sendScore.age=_myAge; sendScore.gender=_myGender; sendScore.bnum= myBestNumber; sendScore.wnum= myWorstNumber; sendScore.gamelD= gamelD;

sendScore.sendAndLoad(baseUrl +"data/highScoreSend.php" _{sendScore,"POST");} sendScore.onLoad =loadScoresO;

//trace("makeObj

Done"); }

function

loadScoresOi

scoreXML=new_XMLO;

scoreXML.Ioad(baseUrl+"data/highScoreGet.php?gamelD="+gamelD+"&return

Num="+retumNum+"&userid="+userid+"&name="+name+"&nation="+nation+"

&age="+age+"&gender="+gender+"&bnu m="+bn u m+"&wn u m="+wn_urn); scoreXML.onLoad=_showresults;

//trace("loadScoresDone");

}

//

functionshowresultsfji

hslnfo=D;

hslnfo=scoreXMLfirstChild.childNodes;

//trace(hslnfo);

}

7.2.2.ConnecttoMySQLDatabasein PHP

<?php

//connecttoserver

if(!($dbLink=

mysqLconnect("localhost",

"jason", "jason")))

{

print("Failedtoconnect<br>

\n");

print("ABort<br>\n");

ex'rtO;

}

//selectDB

if(!($dbResult=_{mysql_query("USE}

numtable",

$dbLink)))

{

printfCantusethe testdb<br>\n"); print("Abort<br>\n");

exitO;

}

?>

7.2.3.SenddatatoMySQL Database in PHP

<?php

include'config.php';

$un=$_POST["name"];

$nO=$_POST["bnum"];

$n1=$_POST["wnum"];

$na=$_POST["country"];

$ag=$_POST["age"];

$ge=$_POST["gender"];

$gamelD=$_POST["gamelD1;

$Query="INSERTINTO$gamelD(name, bnum,wnum, country,age, gender) values('$un',

'SnO'/Snl'/Sna'/Sag'/SgeT;

114: Send

Query

toMySQL,Addsnew_entrytodatabase

mysql_query($Query);

echo"$SuccessMsg";

?>

7.2.4.Loaddata fromMySQLDatabase in PHP

<?php

include'config.php';

$gamelDe=$_GET["gamelD"];

$returnNum=$_GETT"retumNum"];

//connecttoserver

$Query

=_"SELECTid,

name,

bnum,

wnum, country, age,

gender"

."FROM "

. SgamelDe

ORDERBYidDESC";

if(!($dbResult=_{mysql_query($Query,$dbLink)))}

{

print("Couldnotexacutequery<br>\n");

exrtfj;

}

echo'<?xmlversion="1.0"?>';

echo'<scores>';

while($dbRow=_{mysql_fetch_assoc($dbResult))}

{

if($i<=$retumNum){

echo'<scoreid^ name="'.

$dbRow[name].mbnum="\$dbRow[bnum]."'wnum="\$dbRow[wnum].'"country="'

age=":$dbRow[age].'"gender".

$dbRow[gender]."V>';

$i++;

} }

echo'</scores>';

?>

8.

Bibliography

BooksandPapers

Buurman,

GerhardM.(2005).Total interaction:

theory

andpracticeof a new para

digm forthedesign

disciplines

,Basel;[Great

Britian]

:Birkh?ser.

Cho,

Peter.(1

999,

May)._{Computational Models for Expressive Dimensional}

Typog

raphy.Retrieved October

1, 2005,

from

http://acg.media.mit.edu/.

Fawcett-Tang, Robers,

&

Owen,

William.

(2002,

October).

Mapping

:anillustrated

guidetographic navigational_systems,

Mies,

Switzerland;Hove:RotoVision.

Fry,

Benjamin.

(2002,

May).OrganicInformationDesign.MasterofScience in Me

diaArtsand

Sciences,

MassachusettsInstituteofTechnology.

Fry,

Benjamin.

(2004,

April). Computational Information Design. DoctorofPhiloso

phy,Massachusetts InstituteofTechnology.

Herausgeber.(2005).Informationdesignsource

book,

Basel,

Switzerland;Boston:

Birkh?ser-Publishers forArchitecture.

JOC/EFR.

(2004,

January).

History

Topics: NumbersandNumber

Theory

Index. Retrieved September 1

8,

2005fromtheWorld Wide Web:http://www-groups.dcs.

stand.ac.uk/~history/lndexes/Number_Theory.html.

John

Lamping,

Ramana

Rao,

andPeter Pirolli.(1995).A Focus+Context Technique

BasedonHyperbolic

Geometry

for

Visualizing

Large Hierarchies.Retrieved Octo ber

10, 2005,

from httpy/www.acm.org/sigchi/chi95/Electronic/documnts/papers/

jl_bdy.htm.

Judelman,

Brian.

(2004,

June). Knowledge Visualization: ProblemsandPrinciples

forMapping

theKnowledgeSpace. MasterofScience in Digital

Media,

Internation

alSchoolofNew

MediaUniversity

of

Liibeck,

Germany.

Kleiberg,

Ernst,

Huubvande

Wetering.,

& JarkeJ.vanWijk.

(2004,

June). Botanical

visualizationofHugeHierarchies.

Department

ofMathematicsandComputerSci

ence,Eindhoven

University

of

Technology

Maeda,

John. (2001,September).

Maeda@

Media,

Universe.

Maeda,

John.(1999).Design

By

Numbers, Cambridge,

Massachusetts: MIT Press.

Resnick,

Mitchel.

(1994)

Turtles,

Termites,

andTraffic Jams: Explorations in Mas

sivelyParallel Microworlds.

Cambridge,

Massachusetts: MIT Press.

Norman,

Donald A.(1999).The invisiblecomputer :_whygood products can

fail,

thepersonal computerissocomplex,andinformationappliances arethe solution,

Cambridge,

Mass.:MIT Press.

Sims,

Karl.(1994).Evolved Virtual Creatures. Retrieved October 1

0, 2005,

from

httpy/www.genarts.com/karl/evolved-virtual-creatures.html.

Sims,

Karl.

Evolving

3D

Morphology

and Behavior

by

Competition.

Thinking

Ma chinesCorporation.

Tufte,

Edward R.

(2001,

May).The Visual

Display

ofQuantitativeInformation.

Cheshire,

Conn.: Graphics Press.

Tufte,

Edward R.

(1990,

May).

Envisioning

Information.

Cheshire,

Conn.: Graphics Press.

Tufte,

Edward R.

(1997,

February). VisualExplanations:Imagesand

Quantities,

Evi

denceandNarrative.

Cheshire,

Conn: Graphics Press.

Ware,

Colin. (2004).Information Visualization:PerceptionforDesign. San

Francisco,

CA:Morgan Kaufman.

Wien,

Kunstlerhaus. (2003).AbstractionNow. Retrieved October

2,

2005fromthe

WorldWide Web:http://www.abstractionnow.at/.

Wilson,

Stephen.(1994).Informationarts :intersectionsofart,science,andtech

nology.

Cambridge,

Mass.:MIT Press.

Websites

Abstraction Now

httpMwww.abstraction-now.at/

ART+COM

httpMwww.artcom.de/

Artfromcode-Generator.x

httpMwww.generatorx.no/

Ben

Fry

http-Mwww.benfry.com/

Dentsu Online

http://www.dentsu.com/

GroupC/Casey

REAS

hWpMwww.groupc.net/

JoshuaDavis

http://www.joshuadavis.com/

Levitated/the ExplorationofComputation

http://www.levitated.net/

Liquid

Journey

httpMwww.liquidjourney.com/

Marius Watz/Unlekker.net

http://www.unlekker.net/index.php

Moock.org

http://www.moock.org/

Processing

httpMprocessing.org/

Sodaplay

http://www.sodaplay.com/

They

Rule

http://www.theyrule.net/

Yugop.com

http://www.yugop.com/

VisualComplexity.comhttpMwww.visualcomplexity.com/

w

/