creative technology
[] readme new(s) masterclass workshop(s) CA1 CA2 CA3 CA4 CA5 project(s) NM1 NM2 NM3 NM4 NM5 resource(s) _ / .

talk show tell print

PDF

NM2: interactive visualization

 

  date: 25/2/08;  author: A. Eliëns;  version: 1.0 (discussion)

information

 project-based course, semsster 2, 6 ects

contents -- (NM2) interactive visualization
The course will cover a variety of issues related to rich media presentations using current web technology, with a special focus on interactive visualization(s) of dynamic complex systems.

course outline(s) -- nm2: interactive visualization

outline(s) / schedule(s)


content(s)

In this part a more detailed discussion will be provided of topics, learning goals, materials used, and the actual structure of the course, as well as a sketch of the assignments given. Also references to releveant literature is provided, including online resources. At the end, advice for students following the course will be given, as well as hints for the instructor(s).
NM2

course topic(s)
Since the web must be considered to be the most prominent platform for the dissemination of information and services, the interactive visualization course will primarily focus on web-based rich media technologies. Topics treated in the course include:

topic(s)


However, instead of using advanced high-level tools, our approach will start from first principles, that is using computational means to get access to, manipulate, and present data, in visually appealing ways.
NM2

learning target(s)

 With regard to the programming skills, the actual topics treated in interactive visualization will to a large extent on what has been covered in the earlier programming course(s) However, taking a technology-agnostic view our learning goals can be summarized as:

NM2 target(s)


In particular, students must gain an intuition on how to create visualizations using computational means, and how to approach visualization issues by iteratively, as outline in Ben Fry's book on visualizing data, going through the following steps: acquire, parse, filter, mine, represent, refine and interact. No need to emphasize that an exploratory attitude is essential, as well as a (to be developed) sense of (computational) aesthetics
NM2

lesson material(s)
Apart from the highly recommended book Visualizing Data by Ben Fry, all material(s) will be online, including a (large) number of examples, as well as reference material, and challenging targets, that examples that may serve as a target for students' accomplishments.

interactive visualization -- authoring


During the course this list will be extended, and dependent on circumstances, particular aspects of interactive visualization will be emphasized, in particular visualization techniques that use physics-based animations as a means of conveying relationships between data, examples of which are given in the onlune resources below.
NM2

course structure


The course does require active participation of the student(s), not only in exploring the technolgy by making the assignments, but also by presenting solutions and problems in class.

session(s)


  1. introduction of (rich) media platform(s)
  2. basic assignment(s) -- animation (1)
  3. essentials of animation and visualisation
  4. basic assignment(s) -- visualization (2)
  5. principles of interactive information presentation
  6. basic assignment(s) -- interaction (3)
  7. elements of data-driven information systems
  8. presentation of final assignment(s)
At this stage it is not clear whether to enforce the use of one particular technology, flex/as3 or processing, to use multiple technologies, or to allow students a choice of technologies, which would then also include javascript, Ch and C++.
NM2

assignment(s)


There will a small number of assignemts, to be made by the students individually. The goal of these assignments is to provide a structure that assists the students in exploring the technology. Basic assignemnts (may) include:

basic(s) -- interactive visualization


  1. particle systems -- with collisions and effects
  2. map-based visualization -- e.g. using www.umapper.com with flex/as3
  3. information overlays -- e.g. in combination with interactive video
For the final assignment(s) of the course, students are allowed to work indidually, or in groups of two or three (maximally) students. Work done in groups must be proportionally more challenging and complex. Students can make a choice out of (among possibly others):

final(s) -- interactive visualization


In effect, students will be encouraged to follow their own ideas, in for example implementing a game using visualization technology, giving information and (game-play) feedback in visually compelling ways.
NM2

reference(s)
As said before, a highly recommended reference for interactive data visualization is Visualizing Data by Ben Fry, not in the least because the approach described is tightly connected with processing and its underlying philosophy of creative intuitive understanding by computational means. However, also the flex/as3 related references are worthwhile because they give access to the display environment of flash, which is the dominant media technolgy for (business-related) web-applications.
  1. Visualizing Data: Exploring and Explaining Data with the Processing Environment, by Ben Fry -- (amazon)
  2. Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters -- (amazon)
  3. Professional Adobe Flex 2 (Programmer to Programmer) by Rich Tretola, Simon Barber, and Renaun Erickson -- (amazon)
  4. Foundation Flash 8 Video (Foundation) by Jordan L Chilcott and Tom Green -- (amazon)
  5. Visualizing the Semantic Web: XML-based Internet and Information Visualization by Vladimir Geroimenko -- (amazon)
  6. Eliëns A., Wang Y. van Riel C. and Scholte T. (2007), 3D Digital Dossiers -- a new way of presenting cultural heritage on the Web, In Proc. Web3D 2007, ACM SIGGRAPH, pp. 157-160
  7. A. Eliëns, topical media & game development -- media.eliens.net
A wealth of material and references can be found at my topical media & game development site, including tutorials and examples.

online resource(s)
Of the many online resources, in particular the flow(s) from diggs.com deserve special mention, because they apply physical principles in an experimental way to gain understanding of patterns of information flow on the internet, as an example of what as been called cultural analytics by Lev Manovich.

resource(s) / NM2 / assignment(s)


After mastering the first principles of visualization, it may be interesting to use actual (game) physics engines for the presentation of (dynamic) data. The delivery platform of choice is the flash plugin, which is currently the only widely available rich media technology for the web. This platform allows for high-performance animation, efficient data (re)presentation, as well as interactive video, using XML configuration files.

prerequisites
CA1, CS1, NM1, MA1

goals and attainment targets
During the course students are expected to learn the skills to create complex media applications, involving animation, visualization, and information presentation.
NM2

learning target(s)

 With regard to the programming skills, the actual topics treated in interactive visualization will to a large extent on what has been covered in the earlier programming course(s) However, taking a technology-agnostic view our learning goals can be summarized as:

NM2 target(s)


In particular, students must gain an intuition on how to create visualizations using computational means, and how to approach visualization issues by iteratively, as outline in Ben Fry's book on visualizing data, going through the following steps: acquire, parse, filter, mine, represent, refine and interact. No need to emphasize that an exploratory attitude is essential, as well as a (to be developed) sense of (computational) aesthetics In addition to the technical and practical aspects of the realization of rich media applications, attention will be given to the principle(s) underlying animation and visualization as well as issues of information presentation and user interaction.

place in curriculum
NM2 is meant to be an intermediate course, required for both ST and NM students. The course will enable students to apply their knowledge of dynamic systems and mathematics in a (media-rich) context, as a preparation for more advanced projects in interactive narratives and game development.

application area, motivating examples
The course will be built around a collection of (online) examples and reference materials, partly drawn from the references listed below.
NM2

lesson material(s)
Apart from the highly recommended book Visualizing Data by Ben Fry, all material(s) will be online, including a (large) number of examples, as well as reference material, and challenging targets, that examples that may serve as a target for students' accomplishments.

interactive visualization -- authoring


During the course this list will be extended, and dependent on circumstances, particular aspects of interactive visualization will be emphasized, in particular visualization techniques that use physics-based animations as a means of conveying relationships between data, examples of which are given in the onlune resources below. In addition, representative examples from the area of art and design will be discussed to serve as inspiration for student projects.

teaching methods
The course will be organized around lectures in which both technical and conceptual issues, related to animation and visualization, are dealt with.
NM2

course structure


The course does require active participation of the student(s), not only in exploring the technolgy by making the assignments, but also by presenting solutions and problems in class.

session(s)


  1. introduction of (rich) media platform(s)
  2. basic assignment(s) -- animation (1)
  3. essentials of animation and visualisation
  4. basic assignment(s) -- visualization (2)
  5. principles of interactive information presentation
  6. basic assignment(s) -- interaction (3)
  7. elements of data-driven information systems
  8. presentation of final assignment(s)
At this stage it is not clear whether to enforce the use of one particular technology, flex/as3 or processing, to use multiple technologies, or to allow students a choice of technologies, which would then also include javascript, Ch and C++. The lectures will include student presentations, in which explorations and solutions of students are discussed, on technical as well as aesthetic merits.

nr of participants
20

special facilities
computer lab & presentation facilities, installation of flex 3 SDK.
NM2

reference(s)
As said before, a highly recommended reference for interactive data visualization is Visualizing Data by Ben Fry, not in the least because the approach described is tightly connected with processing and its underlying philosophy of creative intuitive understanding by computational means. However, also the flex/as3 related references are worthwhile because they give access to the display environment of flash, which is the dominant media technolgy for (business-related) web-applications.
  1. Visualizing Data: Exploring and Explaining Data with the Processing Environment, by Ben Fry -- (amazon)
  2. Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters -- (amazon)
  3. Professional Adobe Flex 2 (Programmer to Programmer) by Rich Tretola, Simon Barber, and Renaun Erickson -- (amazon)
  4. Foundation Flash 8 Video (Foundation) by Jordan L Chilcott and Tom Green -- (amazon)
  5. Visualizing the Semantic Web: XML-based Internet and Information Visualization by Vladimir Geroimenko -- (amazon)
  6. Eliëns A., Wang Y. van Riel C. and Scholte T. (2007), 3D Digital Dossiers -- a new way of presenting cultural heritage on the Web, In Proc. Web3D 2007, ACM SIGGRAPH, pp. 157-160
  7. A. Eliëns, topical media & game development -- media.eliens.net
A wealth of material and references can be found at my topical media & game development site, including tutorials and examples.
[] readme new(s) masterclass workshop(s) CA1 CA2 CA3 CA4 CA5 project(s) NM1 NM2 NM3 NM4 NM5 resource(s) _ / .

(C) Æliens 09/09/09
creativetechnology.eu