From EduTech Wiki
Jump to: navigation, search

This article or section is a stub. A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.


1 Definition

The idea is to use a graphical representation to represent an information space, e.g. a complex concept, a WebSite or parts of the Web as a whole, user activities ....

DSchneider doesn't know if we should split this up like for example the Wikipedia:Visualization article (and add multimedia animations which are not necessarily the same as what they call Wikipedia: Knowledge visualization).

See also:

2 Types of visualizations

Lloyd Rieber (2002) categorizes visualizations according to their physical characteristics.

  • representational - resemble the object represented ranging from realistic (photographs) to simplified lines and shapes.
  • analogical - using a representation of an object with similar qualities to those of the object under study to highlight particular characteristics and phenomena (e.g. billard balls to introduce the concepts of momentum and kinetics of atomic particles).
  • arbitrary - graphics that do resemble the concepts in question but reveal information through their spatial characteristics and the relationships between different elements of the graphics (e.g. charts, graphs, concept maps, outlines).

3 Visualization in education

Here is some (quick) brainstorming regarding different areas:

3.1 Organization of information spaces

Navigation of complex information spaces could be facilitated with visual navigation tools.

  • An example for wiki visualization is (now disabled) Java Special:WikiViz visualization of this wiki or the light-weight SVG visualization you can see in the left menu. See our special pages. From time to time I test other applications - Daniel K. Schneider. An interesting Wikipedia visualization tool is wikimindmap (now open source, needs php 5.2 with curl).
  • An other exemple are tools like Nestor or Kartoo] that map out search results.
  • Glossary visualizations, like the ones made in the MACE project.

3.2 Concept organization

Concepts and relations can be visualized with some kind of graphical map, e.g. Mind maps, Concept maps or specialized langauges like UML.

Maps can be combined with other information (most concept map tools will allow this). There exist also web sites like Thinkbase, a visual semantic wiki that is based on the th!nkmap software.

In education, there exist several specialized concept map editors made with education in mind, e.g. the Visual Understanding Environment or learning design tools like Compendium LD.

3.3 Organization of facts and concepts

Similar to the above. Something like MIT's image-driven scholarship and learning project. A website that organizes visual narratives and associated Essays. Another example would be

3.4 Social maps

(To display social webs and show what people do)

3.5 Data visualization

To display complex (subject) data, i.e. students use a real tool to analyze various sorts of data.

E.g. to study the history of Wikipedia pages (which people contribute and how), once could use editing history of Wikipedia pages (Viégas et al., 2004).

3.6 Discussion organization

  • To organize & moderate group or class discussion (e.g. [1] [2] [3] [4] [5]) writable tables or other devices

Learners, can either use or build visualizations (or both of course). We shall put some emphasis on building of course ...

4 Technology

(to complete some day)

4.1 Software for drawing graphics

4.2 Representation languages

See also formalisms used to represent semantic networks, ontologies, etc.

4.3 Viewers for formal languages

The principle is that such software can render graphs using some kind of formal representation language.

GraphViz Viewers:

There are others ...

4.4 Tools

(really not complete, includes both )

  • Graphviz (a very popular and free visualization program for which many add-ons exist, e.g. viewers)
  • Tulip, created by David AUBER, is a contribution of the area of information visualization, “InfoViz”. Even if the Tulip framework allows the visualization, the drawing and the edition of small graphs, all the parts of the framework have been built in order to be able to visualize graphs having more than 1.000.000 elements

4.5 Programming languages

  • Processing is a popular open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool.

In addition to special purpose languages like "processing", any programming language with sufficient graphics can do, e.g.

  • JavaScript, in combination with various formats like SVG, X3D.

4.6 Libraries for programmers

  • D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
  • Flare is an ActionScript 3 library (really good). “Flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Even better, flare features a modular design that lets developers create customized visualization techniques without having to reinvent the wheel.”, retrieved 16:57, 19 March 2009 (UTC)
  • JavaScript InfoVis Toolkit (aka the "theJIT"). Create Web Standards based interactive data visualizations. Made by Nicolas Garcia Belmonte, opensource code owned by SenchaLabs. The toolkit implements advanced features of information visualization like TreeMaps, an adapted visualization of trees based on the SpaceTree, a focus+context technique to plot Hyperbolic Trees, a radial layout of trees with advanced animations -called RGraph and other visualizations. Also,
  • PhiloGL is a WebGL Framework for advanced data visualization, creative coding and game development. Made by Nicolas Garcia Belmonte, opensource code owned by SenchaLabs. “PhiloGL uses cutting edge technology and JavaScript idioms and good practices to deliver elegantly coded WebGL applications that are focused on performance. PhiloGL also provides a rich module system covering Program and Shader management, IO, XHR, JSONP, Web Worker management, Effects and Tweening, and much more.” (retrieved, April 2013).
  • Raphaël, A JavaScript library for cross-browser vector graphics on the web. “uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM objec.”. Seems to be an older library, but still working fine. Includes download and examples
  • GoJS is is a pure feature-rich JavaScript library for implementing interactive diagrams across modern browsers and platforms. GoJS makes constructing diagrams of complex Nodes, Links, and Groups easy with customizable templates and layouts. No dependencies. Free evaluation, commercial if you want to use it.
  • jQT, a Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
  • flare is “an ActionScript library for creating visualizations that run in the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Even better, flare features a modular design that lets developers create customized visualization techniques without having to reinvent the wheel.”
  • KineticJS an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

For JavaScript, see also Graph visualization code in javascript? (Stackoverflow Q/A)

4.7 Physical

5 Links

Keep in touch
  • Read Max Kiesler's VizList (also click on other tabs of this excellent web site ...). A lot of tools examples and tools mentionned here were found in this place - Daniel K. Schneider 16:57, 19 March 2009 (UTC)
Online courses
On line examples

6 Bibliography

(by no means complete)

  • Heer Jeffrey; Fernanda B. Viégas, Martin Wattenberg, (2007). Voyagers and Voyeurs: Supporting Asynchronous Collaborative Information Visualization, ACM Human Factors in Computing Systems (CHI), Abstract/PDF/Video.
  • Lima, Manuel. (2011). Visual Complexity: Mapping Patterns of Information, Princeton Architectural Press, ISBN 1568989369. (A taster is available from Maria Popova).
  • Rieber, L. (2002) Supporting discovery-based learning with simulations. International Workshop on Dynamic Visualizations and Learning. Online-Proceedings, Knowledge Media Research Center (KMRC), Tübingen, Germany. pdf
  • Ralph Lengler & Martin J. Eppler, Towards A Periodic Table of Visualization Methods for Management, Institute of Corporate Communication, University of Lugano, Switzerland, PDF

6.1 Books for programmers

  • Scott Murray (2013). Interactive Data Visualization for the Web. An Introduction to Designing with D3. O'Reilly Media, Product page at O'Reilly. This seems to be the best D3.js book ....