visualisation in the webkti.tugraz.at › staff › vsabol › courses › wt ›...
Post on 07-Jul-2020
1 Views
Preview:
TRANSCRIPT
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Visualisation - Motivation
• 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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Visualisation - Motivation
• 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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Pre-attentive Processing
It is immediately possible to determine which data set contains a red spot Pre-attentive processing possible
7
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Pre-attentive Processing
It is still possible to quickly determine where the red spot is Borderline case
8
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Pre-attentive Processing
Scanning is necessary to determine where the red spot is Pre-attentive processing not possible
9
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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 in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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 in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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 in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Knowledge VisualizationExamples
19
Stairs of Visualisation [Eppler](Let‘s Focus: http://en.lets-focus.com/ )
Cultural Heritage Visualization Ancient Theatres [Blaise]
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Document Content Summary
MovieDNA [Ponceleon]TileBars [Hearst]TagClouds, Know-Center [Seifert]
21
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
• 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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Multidimensional Data
Scatterplot [Nowell] Parallel Coordinates [Inselberg]
23
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
• 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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Multidimensional Data Similarity - Text
Know-Center [Sabol et al.]
Galaxies (SPIRE), PNNL [Wise]
25
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
• 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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Hierarchies
TreeMaps [Shneiderman]
Hyperbolic Tree (InXight) [Lamping]
27
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
• 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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Graphs
29
Gephy, https://gephi.org/
Narcissus (3D) [Hendley]
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
• 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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Temporal Data
LifeLines [Plaisant]
Themeriver, PNNL [Havre]
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
• 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
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Spatial Data
33
LucentVision [Pingali 2001]
Google Maps
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Visualisation in the Web
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)
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Visualisation in the Web
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Web Visualization Toolkits and Rendering Libraries
• 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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Web Visualization Toolkits and Rendering Libraries
• 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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Web Visualization Toolkits and Rendering Libraries
• 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
Visualization in the Web 9th Dec 2019Vedran Sabol (Know-Center)
Web Visualization Toolkits and Rendering Libraries
• 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
top related