![Page 1: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/1.jpg)
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
![Page 2: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/2.jpg)
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
![Page 3: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/3.jpg)
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
![Page 4: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/4.jpg)
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
![Page 5: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/5.jpg)
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
![Page 6: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/6.jpg)
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
![Page 7: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/7.jpg)
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
![Page 8: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/8.jpg)
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
![Page 9: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/9.jpg)
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
![Page 10: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/10.jpg)
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
![Page 11: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/11.jpg)
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
![Page 12: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/12.jpg)
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
![Page 13: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/13.jpg)
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
![Page 14: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/14.jpg)
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
![Page 15: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/15.jpg)
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
![Page 16: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/16.jpg)
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
![Page 17: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/17.jpg)
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
![Page 18: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/18.jpg)
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
![Page 19: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/19.jpg)
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]
![Page 20: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/20.jpg)
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
![Page 21: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/21.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Document Content Summary
MovieDNA [Ponceleon]TileBars [Hearst]TagClouds, Know-Center [Seifert]
21
![Page 22: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/22.jpg)
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
![Page 23: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/23.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Multidimensional Data
Scatterplot [Nowell] Parallel Coordinates [Inselberg]
23
![Page 24: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/24.jpg)
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
![Page 25: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/25.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Multidimensional Data Similarity - Text
Know-Center [Sabol et al.]
Galaxies (SPIRE), PNNL [Wise]
25
![Page 26: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/26.jpg)
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
![Page 27: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/27.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Hierarchies
TreeMaps [Shneiderman]
Hyperbolic Tree (InXight) [Lamping]
27
![Page 28: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/28.jpg)
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
![Page 29: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/29.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Graphs
29
Gephy, https://gephi.org/
Narcissus (3D) [Hendley]
![Page 30: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/30.jpg)
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
![Page 31: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/31.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Temporal Data
LifeLines [Plaisant]
Themeriver, PNNL [Havre]
![Page 32: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/32.jpg)
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
![Page 33: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/33.jpg)
Visual Analytics 9th Dec 2019Vedran Sabol (Know-Center)
Visualization Examples Spatial Data
33
LucentVision [Pingali 2001]
Google Maps
![Page 34: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/34.jpg)
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)
![Page 35: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/35.jpg)
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
![Page 36: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/36.jpg)
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
![Page 37: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/37.jpg)
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
![Page 38: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/38.jpg)
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
![Page 39: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/39.jpg)
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
![Page 40: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/40.jpg)
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
![Page 41: Visualisation in the Webkti.tugraz.at › staff › vsabol › courses › wt › wt_slides_webvis.pdf · Toolkits and Rendering Libraries • General visualisation D3.js: "Data-Driven](https://reader034.vdocuments.site/reader034/viewer/2022042410/5f2769a8d51b5454d579e4fc/html5/thumbnails/41.jpg)
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