69
Moritz Stefaner Kognitionswissenschaftler UI designer + Informationsvisualisierer Info geek Salon | Ludwig Boltzmann Institut Linz | 10.04.2008 VISUAL TOOLS FOR THE SOCIO SEMANTIC WEB

VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

Moritz Stefaner

Kognitionswissenschaftler

UI designer + Informationsvisualisierer

Info geek

Salon | Ludwig Boltzmann Institut Linz | 10.04.2008

VISUALTOOLSFOR THE

SOCIOSEMANTIC

WEB

Page 2: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

THEMEN Visualisierung und Informationsaesthetik

Das Web und die Ordnung der Dinge

Thesis: „Visual tools for the socio–semantic web”

EU Projekt MACE

Page 3: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

INFOGRAFIK

Daten Bild

Gestalter

Page 4: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

CHARLES MINARD: NAPOLEON’S MARCH TO MOSCOW

Page 5: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

INTERAKTIVE VISUALISIERUNG

DatenInformation

BildAnwendungErlebnisDing

User

Abbildungs-prozess

Designer

Page 6: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

VISUALISIERUNG VON DATENSTRUKTUREN

the files and directories is used, where the levels in the hierarchy are shown by means

of indentation. The number of files and directories that can be shown simultaneously is

limited, which is no problem if one knows what to search for. However, if we want to

get an overview, or want to answer a more global question, such as: ”Why is my disk

full?”, scrolling, and opening and closing of subdirectories have to be used intensively.

During this process it is hard to form a mental image of the overall structure [3].

Many techniques have been proposed to visualize such structures more effectively.

An important category are node and link diagrams (fig. 1(a)). Elements are shown as

nodes, relations are shown as links from parent to child nodes. Sophisticated techniques

have been presented to improve the efficiency and aesthetic qualities of such diagrams,

both in 2D and in 3D [7, 5, 1, 2, 8]. Such diagrams are very effective for small trees, but

usually fall short when more than a couple of hundred elements have to be visualized si-

multaneously. The main reason for this limitation is simply that node and link diagrams

use the display space inefficiently: Most of the pixels are used as background. Treemaps

a16

e1 f2 g2 h4 i4

b3 c3 d10

j1 k1 l1 m1 n1 o1

(a) Tree diagram

e1

f2

c3

h4

j1 k1

l1 m1 n1 o1

(b) Treemap

Fig. 1. Tree diagram

[9, 6] were developed to remedy this problem. The full display space is used to visualize

the contents of the tree. Here we present an overview of the concept, an in depth treat-

ment is given in the original references. Figure 1(b) shows an example. Each node (as

shown in the tree diagram) has a name (a letter) and an associated size (a number). The

size of leaves may represent for instance the size of individual files, the size of non-leaf

nodes is the sum of the sizes of its children. The treemap is constructed via recursive

subdivision of the initial rectangle. The size of each sub-rectangle corresponds to the

size of the node. The direction of subdivision alternates per level: first horizontally, next

vertically, etcetera. As a result, the initial rectangle is partitioned into smaller rectangles,

such that the size of each rectangle reflects the size of the leaf. The structure of the tree

is also reflected in the treemap, as a result of its construction. Color and annotation can

be used to give extra information about the leaves.

Treemaps are very effective when size is the most important feature to be displayed.

Figure 2(a) shows an overview of a file system: 1400 files are shown and one can effort-

lessly determine which are the largest ones.

However, treemaps have limitations [4]. One problem is that treemaps often fall short

to visualize the structure of the tree. The worst case is a balanced tree, where each parent

Bruls, M., Huizing, K., & van Wijk, J. J. (2000). Squarified Treemaps. In Proc. of Joint Eurographics and IEEE TCVG Symp. on Visualization (TCVG 2000) IEEE Press, pp. 33-42. www.win.tue.nl/~vanwijk/stm.pdf

Page 7: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

TREEMAP: ABBILDUNGSVORSCHRIFTEN

6

6

6

6

6

6

6

6

6

6

6

6

8/3

9/4

25/18

25/18

144/50

49/27

3/2 4/1

9/2

step 2

step 4 step 5

step 1

step 7

step 9

step 8

step 3

step 6

6

6

25/9step 10

44 3

4 3 2

6

6

6

4 3

2

4 3

2

2

4 3

2 2

4 3

2 2 1

6

6

4

Fig. 4. Subdivision algorithm

These steps are repeated until all rectangles have been processed. Again, an optimal

result can not be guaranteed, and counterexamples can be set up. The order in which the

rectangles are processed is important. We found that a decreasing order usually gives the

best results. The initially large rectangle is then filled in first with the larger subrectan-

gles.

3.2 Algorithm

Following the example, we present our algorithm for the layout of the children in one

rectangle as a recursive procedure squarify. This procedure lays out the rectangles in

horizontal and vertical rows. When a rectangle is processed, a decision is made between

two alternatives. Either the rectangle is added to the current row, or the current row is

fixed and a new row is started in the remaining subrectangle. This decision depends only

on whether adding a rectangle to the row will improve the layout of the current row or

not.

We assume a datatype Rectangle that contains the layout during the computation and

is global to the procedure squarify. It supports a function width() that gives the length of

the shortest side of the remaining subrectangle in which the current row is placed and a

function layoutrow() that adds a new row of children to the rectangle. To keep the de-

scription simple, we use some list notation: ++ is concatenation of lists, is the list

containing element , and is the empty list. The input of squarify() is basically a list

of real numbers, representing the areas of the children to be laid out. The list row con-

Bruls, M., Huizing, K., & van Wijk, J. J. (2000). Squarified Treemaps. In Proc. of Joint Eurographics and IEEE TCVG Symp. on Visualization (TCVG 2000) IEEE Press, pp. 33-42. www.win.tue.nl/~vanwijk/stm.pdf

Page 8: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

(a) File system (b) Organization

Fig. 5. Squarified treemaps

(a) File system (b) Organization

Fig. 6. Squarified cushion treemaps

figure 7(a). This method has some disadvantages. Extra screen-space is used, and fur-

thermore, it gives rise to maze-like images, which can be puzzling for the viewer.

However, the second disadvantage can be remedied in a similar way as for the visual-

ization of the nodes. We fill in the borders with grey-shades, based on a simple geometric

model (figure 8). The width in pixels of a border of level , with is given

by:

where is the width of the root level border, and a factor that can be used to decrease

the width for lower level borders. For the profile of the border we use a parabola:

with

TREEMAP: ERGEBNIS

Bruls, M., Huizing, K., & van Wijk, J. J. (2000). Squarified Treemaps. In Proc. of Joint Eurographics and IEEE TCVG Symp. on Visualization (TCVG 2000) IEEE Press, pp. 33-42. www.win.tue.nl/~vanwijk/stm.pdf

Page 13: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

CLEMENS LANGO: VISUOS

Page 15: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

STEFANIE POSAVEC: LITERARY ORGANISM

Page 20: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

Jacques Bertin (1967): Sémiologie graphique Engelhardt (2002): The language of graphics

Page 22: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

JONAS LOH: YOU’RE

Page 23: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

JONAS LOH: YOU’RE

Page 24: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

VISUALISIERUNG UND INFORMATIONS-AESTHETIK

!"#$!%&'()!

!"#$!%&*()!

!"#$!%&+()!

!"#$!%&&()!

!"#$%&$%,-$./!012/34/!5$67$.8419:!"#$!;$<29$)!=64.>21?@$9A:!3/!B2)46!C212-46!

!

!

!

!

!

"#!,-$./!012/34/!5$67$.8419:!"#$!;$<29$)!$%&'(!)*+!,-.!/0102.3!&45'.6!/0#7&24!,-.!

7024815&/!/04906&,&0#6!07! ,-.!5381,! &#386,2:!5#3!,-.!/-5#'.!&#! ,56,.!0;.2! ,-.!:.526(!

<=&#!,0#.6!5#3!-5&2!/0102!'.,!1&'-,.2!56!,&4.!'0.6!>:(!!

?0! >.! /.2,5&#+! ,-.! ,./-#&@8.! 07! 5;.25'&#'! ,-.! /0102! 07! 9&A.16! &#! 5! /011./,&0#! 07!

&45'.6!&6!#0,!#.B(!"#!75/,+!/0498,.2!6/&.#,&6,6!-5;.!8,&1&C.3!,-.!654.!4./-5#&64!&#!5!

;52&.,:! 07! 5991&/5,&0#6! &#! ,-.! 7&.13! 07! &45'.! 920/.66&#'! DEFG(!H-.2.56! ,-.! &#,.#,! &#!

406,!07! ,-.6.!5991&/5,&0#6! &6! ,0!86.!9&A.1!45#&9815,&0#6!56! &#98,! ,0! 75/.! 2./0'#&,&0#!

51'02&,-46+!<515;0#I6!68>;.2,6!,-&6!02&'&#51!'051(!?-.!52,&6,!.A906.6!,-.!,./-#&@8.!56!

,-.!08,98,!07!-&6!9&./.!>:! 1.,,&#'! ,-.!/011./,&0#!07! &#3&;&3851! &45'.6!3&6601;.! &#,0!5!

7&.13!07!/0102!,-5,!/522&.6!4.5#&#'!&#!&,6.17(!!

JA95#3&#'!0#! ,-.! ,-.4.!07!982.!/0102+!<515;0#!-56!5160!.A9102.3! ,-.!/0#/.9,!07!

#5225,&;.! ,-208'-! ,-.! 5225#'.4.#,! 07! /0102.3! 9&A.16! &#! 5#! &45'.(! %02! "#$! "4D!

E.4))?6F!G?1>!48!H11!"?>$:!%!I!%!$%&'(!K*+!,-.!52,&6,!3&'&,&C.3!,-.!40;&.!"?726?<!&#!&,6!

.#,&2.,:!5#3!.A,25/,.3!&#3&;&3851! 7254.6(!J5/-! 7254.!B56!5;.25'.3!,0!5!6&#'1.!/0102!

>.6,! 2.92.6.#,5,&;.! 07! ,-5,! &45'.(!L.53&#'! 7204! 1.7,M,0M2&'-,! 5#3! ,09M,0M>0,,04+! ,-.!

#5225,&;.!&6!15&3!08,!&#!/0102(!N#.!/5#!6..!,-.!2&/-!'013.#!,0#.6!3.9&/,&#'!,-.!18A82&086!

&#,.2&02!07! ,-.! 6-&9!-517MB5:! ,-208'-! ,-.!40;&.(!?0B5236! ,-.!.#3+! ,-.2.! &6! 5!-&'-1:!

O9&A&15,.3P!>5#3!07! /0102! ,-5,! 2.71./,6! ,-.!/1&45,&/!90&#,! &#! ,-.!6,02:!B-.2.! ,-.! 6-&9!

6&#=6!5#3!,-.!/54.25!40;.6!725#,&/511:!>.,B..#!6/.#.6(!%&#511:+!51406,!5,!,-.!>0,,04!

07!,-.!&45'.+!3..9!,0#.6!07!>18.!304&#5,.+!2.4&#3&#'!86!07!,-.!/-&11&#'!6/.#.6!B-.2.!

9566.#'.26!7105,!6/5,,.2.3!&#!,-.!0/.5#(!

!

!

Viegas & Wattenberg (2006): Artistic Data Visualization: Beyond Visual Analytics

Page 28: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

VISUAL TOOLS FOR THE SOCIO–SEMANTIC WEB

+ MUCH MORE...

28

http://infosthetics.com

http://flowingdata.com

Page 29: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

a) b) c)

Figure 1. The gamut of data-based visualization. a) Parallel Sets [12] show data about the peopleon the Titanic, and are readable and recognizable as a visualization; b) Ambient visualization [18]visualizing a bus schedule are readable but require more effort and are not readily recognizable as avisualization; c) Music visualization like MilkDrop [23] is also based on data, but not readable.

4.1 The Sublime

One aesthetic criterion of particular interest is the sub-lime. The sublime can be understood as that which inspiresawe, grandeur, and evokes a deep emotional and/or intel-lectual response. Works of art generally possess a sublimequality, making them enigmatic and captivating at the sametime. Sack [16] equates its opposite, the anti-sublime, withuser friendliness, which is a central concept in computerscience. In fact, visualization is generally understood to bea part of human-centered computing [11], and techniquesthat are published at the main conferences and in journalsusually need to be evaluated in user studies [13]. They arethus designed to remove any sublimity, and instead fosterimmediate understanding.

While the sublime is just one criterion in aesthetics, itis an incredibly useful one for this discussion. The data-based visualization examples discussed above and shown inFigure 1 can be easily classified using a measure of theirsublimity: while the classical technical information visu-alization is entirely anti-sublime, artistic visualizations areprimarily sublime.

The sublime subsumes the two criteria of readability andrecognizability, since for a work of art to be sublime, it can-not be easily readable (or user friendly). It must presentenough of an enigma to keep an audience interested with-out being easy to solve. The opposite is obviously true fora tool that is designed to aid in data analysis.

4.2 Pragmatic Visualization

Pragmatic visualization is what we term the technicalapplication of visualization techniques to analyze data. Thegoal of pragmatic visualization is to explore, analyze, orpresent information in a way that allows the user to thor-oughly understand the data. Card et al. describe this processas knowledge crystallization [3], and the recent initiatives invisual analytics [19] have used the slogan Detecting the Ex-pected, Discovering the UnexpectedTM.

Visual efficiency is of course a key criterion for work invisualization. The goal is to produce images that convey thedata as quickly and effortlessly as possible. User studies areconducted to measure the speed and accuracy of users, andto compare different methods and tasks [13].

VISUALISIERUNG UND INFORMATIONS-AESTHETIK

Kosara (2006): Visualization Criticism – The Missing Link Between Information Visualization and Art

Page 30: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

! "

!"!#$%&'($)(*+)$,-./0$+(1&2/3&/042(

!"5"!6$-.0+(#$%&'(

#$%! &'()&%! *$+,+*-%,(.-(*.! /0! ('0/,1+-(/'! +%.-$%-(*.!

+'2! (-.! ,%3+-(/'.$(4.! 5(-$! ,%3+-%2! 0(%32.! +,%! 1+44%2! ('!6(7&,%!89!:+*$!0(%32!(.!2%0('%2!+**/,2('7!-/!-$,%%!0+*-/,.;!

!"#"<! "$%#&$#'(%<! +'2! ')#$*"(#'+)9! ='0/,1+-(/'!

>(.&+3(?+-(/'<! 0/,! ('.-+'*%<! (.! 3/*+-%2!/'!-$%!@/--/1!%27%<!

+.! (-! 0/*&.%.! /'! ,%4,%.%'-('7! 2+-+! &.('7! ('-%,+*-(>%!

1%-$/2.!5(-$!3(--3%!*/'*%,'!0/,!+%.-$%-(*.9!

!

Figure 2. Domain model for information aesthetics.

#$%!1/2%3!.$/5.!('0/,1+-(/'!+%.-$%-(*.A!0/*&.!/'!-$%!

-$,%%! (..&%.! /0;! ,%4,%.%'-('7! [email protected],+*-! 2+-+<! 4,/>(2('7! +'!

('-%,+*-(>%!('-%,0+*%<!+'2!&.('7!>(.&+3!+44%+3!-/!%'7+7%!-$%!

&.%,9!:B-%'2('7! -$%! -5/!>(.&+3(?+-(/'C,%3+-%2! .(2%.! /0! -$%!

1/2%3<! ('0/,1+-(/'! +%.-$%-(*.! +2/4-.! 1/,%! ('-%,+*-(>%!1%-$/2.! -$+'! >(.&+3(?+-(/'! +,-! +'2! 43+*%.!1/,%! %14$+.(.!

/'! >(.&+3! .-D3%! +'2! %B4%,(%'*%! -$+'! ('0/,1+-(/'!

>(.&+3(?+-(/'9! ='! -$(.!5+D<! (-! (.!4,/4/.%2! -$+-! ('0/,1+-(/'!

+%.-$%-(*! >(.&+3(?+-(/'! %143/D.! -%*$'()&%.! 0,/1<! +'2! (.!

2(,%*-3D! ,%3+-%2! -/<! @/-$! ('0/,1+-(/'! >(.&+3(?+-(/'! +'2!

>(.&+3(?+-(/'!+,-9!='!(-.!+(1!-/!,%+3(.%!-$%!*/33%*-(>%!4&,4/.%!

/0! -$%.%! -5/! 0(%32.<! +'! %B4+'2%2! 1/2%3! (.! ,%)&(,%2! -/!

2%.*,(@%!(-.!('03&%'*('7!0+*-/,.9!!

!"7"!*+)$,-./0$+(1&2/3&/042(#$%&'(

#$%! 4,/4/.%2! 1/2%3! /0! ('0/,1+-(/'! +%.-$%-(*.! (.!

2%0('%2! @D! -5/! *$+,+*-%,(.-(*.! 5$(*$! $(7$3(7$-! -$%!

,%3+-(/'.$(4! @%-5%%'! 5$+-! +! >(.&+3(?+-(/'! 0+*(3(-+-%.! +'2!

-$%! 1%+'.! @D! 5$(*$! (-! +*$(%>%.! -$(.9! ='! /-$%,! 5/,2.<!('0/,1+-(/'! +%.-$%-(*.! (.! +'+3D.%2! 0,/1! +'! ('0/,1+-(/'!

>(.&+3(?+-(/'! 4%,.4%*-(>%<! ('! -%,1.! /0! 0&'*-(/'+3(-D! +'2!

%00%*-(>%'%..<! +'2! 0,/1! >(.&+3(?+-(/'! +,-<! ('! -%,1.! /0!

+,-(.-(*! ('03&%'*%!+'2!1%+'('70&3'%..9!#5/! 0+*-/,.!2%0('%!

-$%!1/2%3;!!"#", -+(.%,+'2!/"00')1, #$(&)'2.$,E6(7&,%!"F9!

G+44('7! -%*$'()&%! (.! 2%-%,1('%2! -$,/&7$! /@.%,>+-(/'.!

1+2%! ('! -%,1.! /0! 5$+-! 1%-$/2.! /0! ,%4,%.%'-+-(/'! $+>%!

@%%'!&.%2!-/!1+4!-$%!2+-+!('-/!>(.&+3!0/,19!H+-+!0/*&.!(.!

2%-%,1('%2! @D! /@.%,>('7!$/5! -$%! >(.&+3(.+-(/'! 0+*(3(-+-%.!

I'/53%27%! +*)&(.(-(/'9!#$(.!1/2%3! (.! @+.%2! /'! /@J%*-(>%!

/@.%,>+-(/'.! ,+-$%,! -$+'! +'! %B+1('+-(/'! /0! *,%+-/,.A!

('-%'-(/'.<!+.!5%!$+>%!0/&'2!-$+-!-%B-&+3!2%.*,(4-(/'.!/0!+!

>(.&+3(?+-(/'A.! ('-%'-(/'.! 2/! '/-! +35+D.! 1+-*$! -$%! 0('+3!

/&-*/1%.<!+.!(-.!4&,4/.%!(.!'/-!+35+D.!0&33D!,%+3(.%29!

Figure 3. Mapping technique and data focus.

6/,-DC.%>%'! %B(.-('7! +443(*+-(/'.! 5$(*$! >(.&+33D!

,%4,%.%'-! [email protected],+*-! 2+-+! $+>%! @%%'! +'+3D.%2! +'2! 5%,%!

43+*%2!/'!+!1/2%3!E.%%!6(7&,%!KF<!+0-%,!5$(*$!-$%!,%.&3-('7!

*/'0(7&,+-(/'! 5+.! */'.(2%,%29! L'%! .$/&32! '/-%! -$+-! -$%!

,%.4%*-(>%! 2+-+! 0/*&.! +'2! 1+44('7! -%*$'()&%! /0! -$%.%!

-%*$'()&%.! +,%!1+44%2! -/! -$%!1/2%3! 4,/4/,-(/'+33D9!#$+-!

(.<! -$%!%B-,%1%.!,%4,%.%'-!+!*/143%-%! 0/*&.!/'! -$%! 0+*-/,<!

5$(3.-! -%*$'()&%.! 4/..%..('7! *$+,+*-%,(.-(*.! /0! @/-$! %'2.!

/0!-$%!%B-,%1%!+,%!3/*+-%2!('!-$%!*%'-,%9!

!

Figure 4. Model of information aesthetics.

!"7"5"( #.880+9( :&43+0;<&=( 60,&4/( >2( *+/&,8,&/0>&"(

G+44('7! -%*$'()&%! (.! +! */'*%4-! 5$(*$! 2%.*,(@%.! -$%!

1%-$/2.!%143/D%2! @D!+!>(.&+3(?+-(/'!*,%+-/,! -/! ,%4,%.%'-!

+'! [email protected],+*-! 2+-+.%-9! =-! (.! -$%! 4,/*%..! /0! -,+'.3+-('7! 2+-+!

>+3&%.! -/! +! >(.&+3! ,%4,%.%'-+-(/'9! #$%! 0/*&.! /'! !'*$(#,1+44('7! (.! 7%'%,+33D! 2,(>%'! @D! .-+'2+,2.! 3%+,'-! 0,/1!

>(.&+3! */7'(-(/'! ,%.%+,*$<! ('*3&2('7! M%.-+3-! ,&3%.! +'2!

4%,*%4-(/'! 4.D*$/3/7D! N8O<! +'2! 7&(2%3('%.! 5$(*$!

2%-%,1('%!5$(*$!,%4,%.%'-+-(/'.!+,%!1/.-!(2%+3!2%4%'2('7!

/'! 2+-+! -D4%! NKO9! #$%! &.%! /0! 1/,%! .D.-%1+-(*! 1+44('7!

-%*$'()&%.! (.! 4,%>+3%'-! ('! >(.&+3(?+-(/'!5$(*$! 0/*&.%.! /'!

2(,%*-! ,%4,%.%'-+-(/'.9! P/5%>%,<! -$(.! 1/2%3! 2/%.! '/-!

2%0('%!2(,%*-!1+44('7!+.!+!/'%C-/C/'%!*/,,%3+-(/'!@%-5%%'!

2+-+! +'2! ,%4,%.%'-+-(/'! +.! *,%+-%2! @D! +! */14&-+-(/'+3!

+37/,(-$19!Q+-$%,<!>(.&+3(?+-(/'! -%*$'()&%.!5$(*$!%143/D!

2(,%*-! 1+44('7! +,%! ('>%,.(@3%9! #$+-! (.<! +! &.%,! (.! +@3%! -/!

('0%,!&'2%,3D('7!2+-+!>+3&%.!0,/1!-$%!>(.&+3!,%4,%.%'-+-(/'9!

VISUALISIERUNG UND INFORMATIONS-AESTHETIK

Lau & Vande Moere (2006): Towards a Model of Information Aesthetics in Information Visualization

Page 31: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

DAS NEUE WEB UND

DIE ORDNUNG DER DINGE

Page 32: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

ORDNUNG DURCH ÖRTLICHKEIT

Page 33: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

ÖRTLICHKEIT + METADATEN

by Flickr user: similarity http://www.flickr.com/photos/reflection/314405398/by Flickr user: leigaaman http://www.flickr.com/photos/kmcarmen1225/133103641/by Flickr user Orin Optiglot http://www.flickr.com/photos/orinrobertjohn/409812627/

Page 34: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

DESKTOP METAPHER

Page 35: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

SEMANTIC WEB

Page 36: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

WEB 2.0

Page 37: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

WEB 2.0 Services statt Web–„Seiten”

Fortbewegung → Konversation & Manipulation*

Offene, kollaborative Strukturen

Nutzergenerierte Inhalte

Wisdom of the crowds, Crowdsourcing, Prosumers

*Terry Winograd in B. Moggridge. Designing interactions. The MIT Press, 2006.

Page 38: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

WEB 2.0 SERVICES

Page 40: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

THE LONG TAIL

The long tail of web economics (reproduced from [Anderson:2006])

Head

Long!tail

Products

Popularity

Page 41: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

VISUAL TOOLS FOR THE SOCIO–SEMANTIC WEB

THE SOCIO–

SEMANTIC

WEB

41

„[A] rich tapestry of words and code that builds on the strange connections between people and content and metadata”

Peter Morville. Ambient findability. O'Reilly, Sebastopol, CA, 2005.

Page 42: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

SAY YES

TO THE MESS

Aufräumen können wir ja später.

Page 43: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

TAGGINGt-shirt

red

bathroom

mirror

toBuy

scottKim

inversion

symmetry

via:NotCot

love

hate

awesome

Page 44: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

TAGGING t-shirt bathroom red mirror hate toBuy symmetry shirt scottKim

love inversion via:NotCot

Page 45: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und
Page 47: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

KOGNITIVE

PERSPEKTIVE

Kategorien

unscharf, subjektiv, Familienähnlichkeit

Klassifikation

Taxonomisch (hierarchisch–enumerativ)

Facettiert (analytico–synthetisch)

Hierarchy Facetted!Classification

* E. K. Jacob. Classification and categorization: a difference that makes a difference. Library Trends, 52(3):515-540, 2004.

Page 48: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

WARUM TAGGING

FUNKTIONIERT

* G. Bateson. Mind and nature: a necessary unity (advances in systems theory, complexity, and the human sciences). Hampton Press, Incorporated, 1979.

Kategorien und Eigenschaften anstatt exklusiver

Klassen

Multiple, parallele Dimensionen und Perspektiven

Subjektiv & assoziativ

Nur nach Bedarf

„Umgedrehte Suche”

Hackable

Relevante Information als

„Unterschied, der einen Unterschied macht.”*

Page 49: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

WARUM TAGGING

FUNKTIONIERT

Lose, zeitlich dynamische Struktur

Kollaborative Annotation › Intersubjektivität

Effektmultiplikation

Multiple, parallele Dimensionen und Perspektiven

Page 50: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und
Page 52: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

TOPIC DECAY

Qt(x)

ln(x)

Probability

Time

tagging!event

new!tag

p

tt-1t-2t-3…

1-p

Yule–Simon memory process, adapted from [Cattuto:2006]

Page 55: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

FOLKSONOMIES

Page 61: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

MACE PROJECT

OAI-PMHHARVESTEDMETADATA

LOM

WINDS

IRB

DYNAMO

ARIADNE

3RD PARTY CONTENT

CONCEPTS

LESSONS

PROJECTS

DESCRIPTIONS

IMAGES

REGULATIONS

3D MODELS

MAPS

CAM–RSS

ATTENTIONMETADATA

CAM

DOMAINMETADATA

COMPETENCEMETADATA

CONTEXT METADATA

WEB SERVICES

FEDERATEDSEARCH

USER MANAGE-MENT

IMPROVED ACCESS

KEYWORDS

architecture design art project inspiration knowledge

amorph Berlin ugly

RenzoPiano

sustainability transparent Venice

toRead cool Bern

architecture design art project inspiration knowledge

amorph Berlin organic

RenzoPiano

sustainability transparent Venice

toRead cool Bern

MAP USERS

Renzo Piano › !nd in MACE

E-LEARNING OBJECTS IMAGES WEB PAGES

› more › more › more

› Contemporary architecture› Renzo Piano Biography› The Paul Klee Museum› eLearning course: Organic shapes› Berlin's architecture in the 1990s

357 results group by type | date | other…

› City of Bern› Renzo Piano building workshop› Paul Klee Museum› Wikipedia: Renzo Piano

Welcome back, Fritz_Pritz› saved searches› your pro!le

MAP

INTEGRATEDWIDGETS

FACETEDSEARCH

EXPERT INDEXERS

ENRICHED METADATA

ARCHITECTURALCOMMUNITY

AUTOMATICMETHODS

MACE PORTAL

Page 67: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

PERSPEKTIVEN Weg von Karten und Graphen

Flach, gewichtet, multi-faceted

Minimale, punktuelle Integration

E.g. Sparklines, Ambient Visualization

Kollaborative Visualisierung

e.g. http://sense.us

Story–telling

Page 68: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

VISUAL TOOLS FOR THE SOCIO–SEMANTIC WEB

URLs

68

http://well-formed-data.net

http://well-formed-data.net/thesis

http://mace-project.eu

http://interface.mace-project.eu

Page 69: VISUAL Moritz Stefaner TOOLS - Well-formed datawell-formed-data.net/presentations/LINZ08/stefaner_sociosemantic_linz.pdfTHEMEN Visualisierung und Informationsaesthetik Das Web und

VISUAL TOOLS FOR THE SOCIO–SEMANTIC WEB

DANKE

FÜR’S

ZUHÖREN

69