Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt ›...

Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)

Visualisation in the Web

Web Technologies (706.704)

ISDS, TU Graz

Vedran Sabol

Know-Center GmbH

9th December 2019


Overview

• Motivation and Definition

• Introduction to Visualization

• Visualization examples and demos

Document content

Multidimensional data

Structures

Temporal and geospatial data

Multiple-visualisation interfaces

• Web Visualisation Technologies and Frameworks

2


Visualisation - Motivation

• We are confronted with:

Massive amounts of information

Complex heterogeneous information

Dynamically changing data

Uncertain, incomplete and conflicting information

…

• Big Data

• The four V’s: Volume, Variety, Velocity, Veracity

• Difficult to process using traditional applications and methods

How can computers help us to understand data?

Interactive exploration and analysis of data

Unveiling facts and knowledge hidden within the data

3



• Machines are very powerful

Automatic processing methods for huge data sets

Exponential growth of computer-performance since 60 years

• Moor‘s Law: continues until 2020, 2030… ?

Distributed computing: Cloud, Grid, …

• Nevertheless, machines still behind humans in

Identification of complex patterns and relationships

Wide knowledge, experience, intuition

Abstract thinking

…

4



• Human visual apparatus is an extremely efficient „processing machine“

• Enormous amounts of information are transferred by the visual nerve into the brain cortex

Extremely high bandwidth

• Visual cortex remains unbeatable in recognition of objects and complex patterns (e.g. rotational invariance)

• Pre-attentive processing

5


Pre-attentive Processing

• Capability to process certain visual information without focusing our attention

• Criterion 1: Processing time < 200 - 250ms

Eye movements in about 200ms single glimpse

Highly parallel processing

• Criterion 2: Processing time does not correlate with the amount of noise in the data

• Limited number of pre-attentive features

Size (length/width), number, colour, intensity, curvature, orientation, flicker, motion direction, 3D depth-cues…

6



It is immediately possible to determine which data set contains a red spot Pre-attentive processing possible

7



It is still possible to quickly determine where the red spot is Borderline case

8



Scanning is necessary to determine where the red spot is Pre-attentive processing not possible

9


Visualization – Approach and Challenges

• Approach

Machines transform the data into a suitable graphical representation

Employ the human visual system for pattern recognition

• Challenges

How should the graphical representations look like (design)?

How to compute the geometry of the graphical representation (algorithms)?

Which operations shall be supported on the graphical representation (interactivity)?

10


Visualization - Definitions

Use of human visual system, supported by computer graphics, to analyze and interpret large amounts of data

Graphical representation of data, information and knowledge

11

• Data/Scientific Visualization

• Information Visualization

• Knowledge Visualization

Data KnowledgeInformation

Representation complexity, applicability by humans

Machine processing capability


VisualizationData – Information - Knowledge

• Data

Formal representation of raw, basic facts

Have a fixed format: numbers, dates, strings,…

Have a fixed, predefined meaning (i.e. no interpretation required)

„3162“ – Hotel room number (not a telephone number)

• Information

Result of processing, manipulation and interpretation of data

May not have a fixed format (unstructured or semi-structured)

Meaning is determined by interpretation within some context

“A small mouse” – a computer or a field mouse? (determined by context)

12


VisualizationData – Information - Knowledge

• Knowledge

Identified, organized and as valid recognized information

Representations of reality through abstract, domain-dependent models

Represented by formalized conceptual systems: Taxonomies, Thesauri, Ontologies (formally defined knowledge representations consisting of concepts, relations and rules)…

13

Animal

Mouse is aLegs

has

Jerry is a

Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)

VisualizationSubdivision

• Data/Scientific Visualization

• Measurement/simulation data

• 3D spaces

• Knowledge Visualization

• Knowledge models

• Knowledge transfer

• Information Visualization

• Abstract information that has no (or limited) “natural” visual representation

• Document content (text and multi-media)

• Structures: hierarchies and networks (graphs)

• Temporal information

• Geo-spatial information

• Multidimensional data sets…

14


Visualization DesignRepresentation Forms

• Fundamental categories of visual representation:

Formalisms

Metaphors

Models

• Formalisms: abstract schematic representations

Defined by a designer

Users must learn how to read and interpret

Example: Percentage is represented by an arc

15


Visualization DesignRepresentation Forms

• Metaphors: representations based on a real-world equivalent

Intuitive

User can understand the meaning through building analogies

Example: using the geographic map metaphor to represent similarity in non-spatial data

• Models: based on mental representations of the physical world

Data typically has a natural representation in the real world

Examples: visualization of sensory data in 3D, virtual 3D worlds

16


Data/Scientific Visualization

• Visualization of simulation or sensory data

have a natural representation in the real, physical world

• Applications in physics, medicine, astronomy, automotive…

17

Pressure coefficients [NASA] Coil magnetic field


Knowledge Visualization

• Knowledge Visualization is about using visual representations to present and transfer existing (explicit) knowledge between people [Eppler]

• The focus is on structured knowledge spaces

Concepts, relations, facts, attributes

Navigation along structures present in the knowledge model

• Use of metaphors and formalisms

18


Knowledge VisualizationExamples

19

Stairs of Visualisation [Eppler](Let‘s Focus: http://en.lets-focus.com/ )

Cultural Heritage Visualization Ancient Theatres [Blaise]

http://en.lets-focus.com/


Information Visualization

• Interactive visualization of abstract information spaces

Abstract information has no „natural“, real-world representation

Rely on metaphors and formalisms

• Goal: identifying patterns and relationships

Explorative analysis and navigation

Unveiling of implicit knowledge

• InfoVis Mantra [B. Shneiderman]

„overview first - zoom and filter - details on demand”

20


Visualization Examples Document Content Summary

MovieDNA [Ponceleon]TileBars [Hearst]TagClouds, Know-Center [Seifert]

21


• Tag Cloud

• Keyword visualisation

• Size corresponds to importance of the keyword

• TileBars

• Shows where keywords/concepts occur in the document

• Darker color – more occurrences at a given position

• Easy to find interesting parts in large documents

• MovieDNA

• Analogous concepts for videos

22

Visualization Examples Document Content Summary


Visualization Examples Multidimensional Data

Scatterplot [Nowell] Parallel Coordinates [Inselberg]

23


• Multidimensional data

• Each data item described by a large number of features

• Scatteplot

• Data elements represented by dots/icons

• Up to five dimensions

• Using 2 axes (x and y) and icon shape, color and size

• Parallel Coordinates

• Data elements represented by lines

• Each dimension is a separate y axis (many are possible)

• Line color an additional dimension

• Filtering along different dimensions

24

Visualization Examples Multidimensional Data


Visualization Examples Multidimensional Data Similarity - Text

Know-Center [Sabol et al.]

Galaxies (SPIRE), PNNL [Wise]

25


• Example: unstructured data - text

• Text analysis to transform text to multidimensional data

• Dimension are words/concepts in the text

• Makes documents topically comparable

• Information landscape (metaphor)

• Provides a topical overview of a (large) document repository

• Encodes topical similarity through spatial proximity

• Spatial clusters (hills) represent group of documents with similar topics

• Visualises cluster distribution, outliers

• Automatically extracted labels specify topical regions of the info-

landscape

26

Visualization Examples Multidimensional Data Similarity


Visualization Examples Hierarchies

TreeMaps [Shneiderman]

Hyperbolic Tree (InXight) [Lamping]

27


• Hyperbolic Tree

• Large hierarchies shown in hyperbolic space

• Information at the edges geometrically “compressed”

• Tree branches not in the focus are small but remain visible

• TreeMap

• Hierarchy represented by nested rectangles

• Size and color of a rectangle encode properties

28

Visualization Examples Hierarchies


Visualization Examples Graphs

29

Gephy, https://gephi.org/

Narcissus (3D) [Hendley]


• Node-link diagrams

• Nodes represent entities

• Links represent relationships between them

• Properties encoded by colour, icon, size/thickness

• Problem: link clutter for large number of relationships

• Graph layout methods

• Large, complex area of research

• Popular: force-directed placement

– Connected nodes exert attractive forces (spring model)

– Good for small graphs (not scalable)

– Does not solve the link clutter problem

30

Visualization Examples Graphs


Visualization Examples Temporal Data

LifeLines [Plaisant]

Themeriver, PNNL [Havre]


• Timeline / LifeLines

• Displays event or time intervals in chronological order

• Time flow along an axis

• LifeLines: application for patient histories

• ThemeRiver (StreamGraph)

• Thematic variations (trends) across several categories

• With of a “stream” represents the strength of the topical category at a

given time point

32

Visualization Examples Temporal Data


Visualization Examples Spatial Data

33

LucentVision [Pingali 2001]

Google Maps



34

• AJAX lays the foundations – asynchronous requests

• Rich, responsive user interfaces

• HTML5 provides the basis for visualization in the Web

• New APIs

• Drag-and-drop

• WebWorkers – background processing

• Storage (FileSystem API, IndexedDB…)

• Cacheing (enables Web Apps)



35

• Rendering

• Canvas

• SVG

• WebGL

• Logic and Interactivity

• JavaScript: high-performance engines (compile to native)

• Server-Client Web architectures fit the needs of Visual Analytics

• Model View Controller (MVC) architecture

• Data storage/crunching on the server

• WebSockets – bidirectional server-client communication


Web Visualization Performance and Scalability

• Scalability limited by computing power of the client

SVG: hundreds of items, easy to program

Canvas: several orders of magnitude more scalable, harder to program

WebGL: up to hundreds of millions of items

• How to scale to even larger data sets

Billions of data elements

Utilise the power of the server

• Data aggregation/sampling, geometry pre-computation etc.

36


Web Visualization Toolkits and Rendering Libraries

• General visualisation

D3.js: "Data-Driven Documents" JavaScript visualization library libraryusing SVG (huge number of charts and visualizations)

Apache ECharts (many different charts available)

Chart.js (fancy-looking, but only a few charts available)

JavaScript InfoVis Toolkit: for creating Interactive Data Visualizations

Commercial, high quality chart libraries: HighCharts.js, AnyChart.js

• Drawing and rendering

Raphaël: JavaScript library for vector graphics

Paper.js: open source vector graphics scripting framework that runs on top of the HTML5 Canvas

EASELJS: makes working with HTML5 canvas easy (Flash-like API)

37



• Charting and plotting

NVD3: Re-usable charts for d3.js

gRaphaël: JavaScript library for creating charts

jqPlot: a plotting and charting plugin for the jQuery Javascriptframework

Flot: JavaScript plotting library for jQuery

Flotr2: JavaScript library for drawing HTML5 charts and graphs

Peity: jQuery plugin for converting element's content into a mini-chart

Google Chart Tools (free usage, but NOT OPEN SOURCE)

RGraph: free (for NON-COMMERCIAL use only) HTML5 charts

Highcharts JS: free (for NON-COMMERCIAL use only) javaScript chartslibrary

38



• Graphs and trees

arbor.js: a graph visualization library using web workers and jQuery

sigma.js: lightweight JavaScript library to draw graphs using HTML canvas

jsPhyloSVG open-source javascript library for rendering phylogenetic trees

GraphGL: a network visualization library for massive graphs based on WebGL and WebWorkers

• Maps and geovisualisation

Leaflet: Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Kartograph: lightweight framework for building interactive mapapplications

Polymaps: JavaScript library for image- and vector-tiled maps usingSVG

39



• Time series and temporal data

Rickshaw: D3-based JavaScript toolkit for creating interactive time series graphs

SIMILE Widgets: Open-Source Data Visualization Web Widgets

Cubism.js: D3 plugin for visualizing time series

dygraphs: open source JavaScript library for time series charts

Envision.js: library for creating interactive HTML5 visualizations

Timeline JS: beautiful, easy to use timelines

Grafana: dashboards for time series

40



• 3D

three.js: WebGL rendering back end with optional fallback on canvasor SVG

LibGdx: Java game development framework, compiles to all desktopand mobile platforms, including to JavaScript/Browser

Don’t forget:• Rules concerning the use of libraries in your WebApp still apply !!!

• i.e. you may use a vis-library, such as LeafLet for geo-vis

• as long as you directly program canvas or SVG for something else

41

Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt ›...

Documents

Transcript of Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt ›...