Markus Schröppel

visual 2

Informaation visualisointi II

Envisioning Information II

Unterricht · lectures


Linklist according to our lecture: »Cluster & Dataclouds« 21. nov.

Case study: tag clouds

WP Cumulus Flash tag cloud by Markus Schroeppel and Roy Tanck requires Flash Player 9 or better.

»US Presidential Speeches Tag Cloud« from 1776-01-15: »Foundation of Government« by John Adams till 2007-01-23:
     »State of the Union Address« by George W. Bush
     Chirag Mehta      interactive

Structuring complex information:

»Life Countdown« your life expectancy
     John Maeda

Same idea: In the future people stop aging at 25 and must work to buy themselves more time.

Structuring more complex information:

»The Atlas of Electromagnetic Space« interactive visualization of the Radio Spectrum
     production of AV Festival 08, Newcastle, and NOW Encuentros en el Presente Continuo, of the Centro de Cultura Contemporania de Barcelona.

»NYTE« New York Talk Exchange illustrates the global exchange of information in real time by visualizing volumes of long distance telephone
     and IP (Internet Protocol) data flowing between New York and cities around the world.      MoMA The Museum of Modern Art

»Design and the Elastic Mind«
     examples of successful translation of disruptive innovation, examples based on ongoing research, as well as reflections on the future
     responsibilities of design.      Exhibition, MoMA The Museum of Modern Art

»Flickr Clock«
      videos are graphically displayed in a scrolling timeline.
     Flickr, the online photo-sharing service from Yahoo

Wurman, Richard Saul: ›Understanding USA‹, as I told allready is the webpage unfortunately not online, you can try it again
      comprehensive reference book: infographics about statistical data of the USA. ISBN-13: 978-0967453606
      webpage and download

»One week of The Guardian«; a series that takes the news from one week of the Guardian newspaper,
     and visually represents it as a series of static visualisations.      DesigningTheNews, DTN Lab,

Bräutigam, Stefan: »Overnewsed but uninformed«; Diplomawork at FH Mainz.

»Naming Names«; Names used by major US presidential candidates
     Jonathan Corum and Farhana Hossain/The New York Times

»Arc«; Digg Arc displays stories, topics, and containers wrapped around a sphere. Arcs trail people as they Digg stories across topics. Stories with more Diggs make thicker arcs.
     Digg Inc.

»Travel Time Tube Map«; interactive London Underground map showing the times of travel from the choosen station.
     Tom Carden, San Francisco

»Similar Diversity«; is an information graphic which opens up a new perspective at the topics religion.
     Philipp Steinweber and Andreas Koller

»Similar Diversity«; knowledge machine.
     vionto GmbH, Berlin, (GER)      deutsch

Case study: Vihreä Pilvi (Green Cloud)

»Nuage Vert - Vihreä Pilvi« (Green Cloud), Environmental Art
     the vapour emissions of he Salmisaari power plant in Helsinki will be illuminated to show the current levels of electricity consumption
     by local residents: 22.-29.2.2008      Nuage Vert is an artwork by HeHe (Helen Evans & Heiko Hansen)      suomeksi

»Nuage Vert - Vihreä Pilvi« (Green Cloud), Environmental Art
     Nuage Vert is an artwork by HeHe (Helen Evans & Heiko Hansen)      english

Case study: information aesthetics

»radial visual browser« to display complex concept network structures (here displaying the CIA world factbook information)
     Moritz Stefaner, FH Potsdam      interactive

»Phraggles« short for ›Phrased Beings‹ - are beings that are created when two people converse.
     Sibylle Manß, Kunsthochschule Kassel      interactive

Case study: »Impuls Bauhaus« - Exhibition N°1

The project »Impuls Bauhaus« is investigating the social network of the Bauhaus and its worldwide influence. In a research platform extensive biographical information will be collected. In the Exhibition N ° 1 in Weimar (Germany) first results are shown with the use of computer-generated graphics information and an interactive table.

ImpulsBauhaus-Ausstellung N°1 - Interactive Table - Weimar from mediaarchitecture on Vimeo.

Case study: Nobel Prize Information

»Source for Nobel Prize Information«
     © The Nobel Foundation, Stockholm, Sweden      interactive

»Noble prize winners« displayerd by the ›Flamenco Search Interface Project‹
     Flamenco Search Interface Project, Prof. Marti Hearst,      interactive

›elastic list‹ to display »Noble prize winners«
     Moritz Stefaner, FH Potsdam      interactive

The »Museum Finland · Museo Suomi« in Helsinki uses an interface that is identical to Flamenco's
     Moritz Stefaner, FH Potsdam      interactive

e.g.: color matcher

Name that Color:

Click & drag over the Color Wheel to make a color

Your Color

Your Color:

Outer box: Your selected color. Inner box: Actual color of closest match.

Thanks to Chirag Mehta and Steven Wittens for the »color matcher« and the java programming.

»List of colors«
     From Wikipedia, the free encyclopedia

»List of Crayola Crayon Colors«
     From Crayola LLC

»find a PANTONE color«
     From Pantone, Inc.

Future prospects: »Microsoft Surface«

»Microsoft Surface« by Microsoft

Futuristinen »Microsoft Surface«      suomeksi

Visualizing correlations:

»SIOC.ME« web based application which renders »« Semantically-Interlinked Online Community (SIOC & FOAF) data within a 3D space.
     Designed & Developed By Darren Geraghty      interactive

»Social Collider« visualization to reveal cross-connections between conversations on Twitter.
     Karsten Schmidt, Sascha Pohflepp      interactive

Self surveillance:

»« web based application using once web-cam to create patterns.
     Designed & Developed By Darren Geraghty      interactive

»Social Collider« visualization to reveal cross-connections between conversations on Twitter.
     Karsten Schmidt, Sascha Pohflepp      interactive

Tutorial: Discover Dataclouds

Task-1.jpg Task-2.jpg Task-3.jpg

Task-4.jpg Task-5.jpg Task-6.jpg


Golden Section Graphics GmbH, Berlin; Georg Scheibe, Düsseldorf KG; Hanno Weinert-Sprissler, Köln
infografikarchiv, by Hanno Weinert-Sprissler, Köln
Erich Schmidt Verlag GmbH & Co., Berlin
RIA Novosti, Moscow, Russia
»grafik4free« Somebody has paid this infographic for you; Hans Auer Verlagsgesellschaft m.b.H, Vienna.
»Cybu Richli«, Graphic Design, Luzern, Switzerland.
»Bertron Schwarz Frey«, visual communication, museum- and exhibition design.


Society for Environmental Graphic Design, Washington, DC, USA
The Sign Design Society, London, United Kingdom
International Institute for Information Design (IIID), Wien/Vienna, Austria
American Institute of Graphic Arts, USA
InformationArchitecture - Il primo sito italiano dedicato alla Information Architecture

conferences, conventions, blogs and other professional events:

»SIGGRAPH 2009«, field of information aesthetics: includes 2D and 3D prints, interactive and presentational screen-based works,
     multimodal installation environments, and physical objects that reveal information.
     International Conference and Exhibition on Computer Graphics and Interactive Techniques. New Orleans, Louisiana, USA

»see #3«, The conference on visualization of information
»see #3«, Recordings from the Caligari theatre: 14.00 Ben Fry
conference »Signs of the European City«, 17. and 18. october, Berlin, GER
»Inside Semantic Computing« Public blog of the Semantic Computing Research Group
     Informaatio- ja luonnontieteiden tiedekunta Teknillinen korkeakoulu ja Helsingin yliopisto      suomi

stories for reflexion:

»Is Google Making Us Stupid?« by Nicholas Carr
     July/August 2008 Atlantic Monthly.      online

           see also Nicholas Carr's most recent book »The Big Switch«: Rewiring the World, From Edison to Google,
           ISBN-13: 978-0393333947 coming soon at Norton & Company January 18. 2009     preview

»How Much Information?«
     study of the UC Berkeley School of Information, 2003     online


Adli Baghdadi, Moustafa: ›World-Views and the Design Decision Literature, 1950s-1980s.‹;
     Dissertations University of Pennsylvania, Philadelphia, PA (USA); 1984      download, PDF

Friendly, Michael; Denis, Daniel J.: ›Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization‹;
     Department of Mathematics and Statistics, York University, Toronto, Ontario (CAN)      interactive

Harris, Robert L.: ›Information Graphics: A Comprehensive Illustrated Reference‹; the book,
     ISBN-13: 978-0195135329      online

Lokuge, Ishantha, Gilbert, Stephen A. and Richards, Whitman: ›Structuring Information with Mental Models: A Tour of Boston.‹;
     Proceedings of the ACM CHI 96 Human Factors in Computing Systems Conference April 14-18, 1996, Vancouver, Canada.      online

Luhmann, Niklas: ›Art as a social system‹;
     ISBN: 0-8047-3907-2       Lapin yliopiston kirjaston/: Taidekirjasto, yleiskokoelma ·       TAID 7.0 Luhmann Niklas
Niiniluoto, Ilkka: ›Maailma, minä ja kulttuuri: emergentin materialismin näkökulma‹;
     ISBN: 951-1-11070-5       Lapin yliopiston kirjaston/Lapland University Library: Taidekirjasto, kurssikirjat ·       TAID K Niiniluoto Ilkka
Pettersson, Rune Ph.D.: ›It Depends: Information Design? Principles and Guidelines‹;
     ISBN: 91-85334-24-3      free download

Rojas, Francisca M. (Ed): ›new york talk exchange‹; the book,
     ISBN 978 0 09794774 1 6      MoMA Design and Book Store, (coming soon)
Schmitt, Garrick: »Data Visualization Is Reinventing Online Storytelling«
     Advertising Age, 2009     article

Tanner, W. P., Jr. and Swets, J. A.: »The evidence for a decision-making theory of visual detection«
     Psychological Review, 61, 401-409. Teller, D.Y. (1955)     download

Weinberg, Gerald M.: ›An Introduction to General Systems Thinking‹;
     New York: John Wiley & Sons. 2001, ISBN: 978-0932633491      english
Ylä-Kotola, Mauri (ed.): ›The Integrated Media Machine‹: A Theoretical Framework.
     Helsinki: Edita, 2000, ISBN: 978-9513731045      Lapin yliopisto, Taidekirjasto, kurssikirjat, TAID K Integrated media machine

Note: if you have an issue with the task or your stuck with your idea, do not hesitate to inform me early enough,
     we can make an appointment in order to discuss the matter in my office.
     You can contact me by e-mail.
     Or by phone: +358 50 9280444

• takaisin • back •

What else left:

Davis, Joshua: »Race to the Bottom«, CondeNet, Inc.; New York, NY 10036

Tsai, Michelle: »Organs for Sale: Where in the World Can I Buy a Heart? «, CondeNet, Inc.; New York, NY 10036

Robb, John: »When Bots Attack«, CondeNet, Inc.; New York, NY 10036

moooi (NL): »a schizophrenic design conversation«
     moooi : design

»America's Cup« (32º Copa América 2007); animated diagrams and linear explanations.
     Juan Sanchez, El Mundo

»Putting Pay for Performance to the Test« (Stockmarket); online inforgraphic storytelling.
     NY Times

Example: Crimespotting

»Oakland Crimespotting« is an interactive map of crimes in Oakland
     Stamen, design and technology studio, San Francisco (USA)      interactive

Example: Explanations for children

»Was ist Strom und wie wird er gemacht?« ›What is electricity and how it is made?&lsaquo
     by Die Maus, WDR (Westdeutscher Rundfunk) Köln, (D)      animated, german

• takaisin • back •