Visualization of [Big] Data in Web Apps

Andrii Gordiichuk

Data in our life

Data in our life

Statistics and Reports

Background information

Interactive services

Illustrations

Fields of use:

Why visualization

is important?

Perception of information

From complex to simple

Explore the data

Quick answers

Why visualization is important?

Edward R. Tufte

The basic principles of information visualization

The basic principles of information visualization

Image concept

Paradigm of visualization

Image concept

Overall Intermediate

Elementary

Value Process Overall result

Image — the meaningful visual form, perceptible in the minimum

instant of vision; (Jacques Bertin)

Levels of reading

Paradigm of visualization

“Overview first, zoom and filter, then details-on-demand.”

(Ben Shneiderman)

Connect Encode

Information visualization

Reconfigure

y

x

Select and Filter

Zoom + Details

Lorem ipsum

1 2 3 4 5 6 7 8 9 3 2 1 4 5 6 4 3 2 6 7 8 9 5 4 3 6 5 4 3 2 5

8 9 5 4 3 2 4 5 6 8 7 5 4 6 2 1 3 4 5 8 6 5 4 4 5 6 3 8 9 0 4

3 1 6 5 8 9 0 5 4 3 2 5 6 7 4 3 2 5 8 9 4 3 2 1 5 6 3 4 4 6 8

4 3 2 4 5 6 8 1 2 3 4 5 6 7 8 9 3 2 1 4 5 6 4 3 2 6 7 8 9 5 4

3 6 5 4 3 2 5 8 9 5 4 3 2 4 5 6 8 7 5 4 6 2 1 3 4 5 8 6 5 4 4

5 6 1 8 9 0 4 3 1 6 7 8 9 0 5 4 3 2 5 6 7 4 3 2 5 8 9 4 3 2 1

5 6 3 4 4 6 8 4 3 2 4 5 6 8 1 3 4 5 6 5 3 2 0 9 2 3 4 6 8 9 0

7

7 7

7

7

7

77

7

The basic principles example

Patterns for data visualization

Patterns for data visualization

Maps

Timeline

Many Variables

Networks

Technologies for data visualization

Technologies for Web data

visualization

SVG

HTML5 Canvas

Canvas

Format Bitmap

Scaling Zoom

Access Access to individual pixels (RGBA)

Accessibility Visible only to the final raster (you can not

select shapes, text, etc.) - bad for

Accessibility

Stylization Visual styles are set when rendering via API

Programming JS API for working with primitives

Update Drawing on top or a full repaint

Events Objects under the cursor should be defined

manually.

Canvas - area for raster 2D graphics + JS API for interaction with the

element (Canvas 2D Context).

<canvas id="canvas"></canvas>

Canvas example

<canvas style="position:absolute; float:left" id="gameCanvas" width="750" height="500">

</canvas>

SVG

Format Vector

Scaling Scale

Access Access to (DOM) elements

Accessibility Can get structure

Stylization Visual styles defined attributes (CSS)

Programming DOM for work with elements

Update Change individual elements

Events It is easy to hang events through DOM, are

handled automatically.

SVG – Scalable Vector Graphics. XML based + DOM + JS for manipulations.

<img src="green-circle.svg" height="64" alt="Nice green circle"/>

<object type="image/svg+xml" data="green-circle.svg" width="64" height="64" border="1"></object>

SVG example

...<filter inkscape:collect="always" id="filter5340"><g id="g5323" style="filter:url(#filter5340)" transform="translate(-78.38489,-99.39986)"><path /><path /><path />

</g><g></g>...

$('#svg').on('click', 'path', function() {$(this).css({'fill': 'green'})

});

SVG and Canvas. Usage scenarios.

Static ImagesScreen Capture

Documents with high

accuracy for printing

Canvas SVG

Video manipulation

Complex scenes

with multiple objects

Web Advertising

Interactive charts

and graphs

2D Games

Performance comparison

SVGCanvas

http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

What to use?

Canvas SVG

Step 1Understand the technology.

Step 2Understand task - Pixels or Interactivity. Scalable. Requirements.

Raster graphics generating / editing

Overlay effects on the graphics / video

Image analysis

Game graphics

Scalable interfaces

Interactive interfaces

Charts and graphs

Vector image editing

Libraries and Frameworks

Libraries and Frameworks for data

visualization

D3js

Highcharts

Processingjs

Raphaeljs

Polymaps

Flotcharts

AmCharts

SO, HOW TO CHOOSE?

Selection criteria of the framework

Data size

Functionality of the framework (API)

Customization

Documentation

Browser compatibility

Maintenance

Tests

D3.js (Data-Driven Documents)

Core - selections, transitions, data, localization, colors, etc.

Scales - convert between data and visual encodings

SVG - utilities for creating Scalable Vector Graphics

Time - parse or format times, compute calendar intervals, etc.

Layouts - derive secondary data for positioning elements

Geography - project spherical coordinates, latitude & longitude math

Geometry - utilities for 2D geometry.

D3.js

//Width and heightvar w = 500;var h = 50;

var colors = ['#9fc43c', '#e33d29', '#34a2b3', '#f9cc13', '#528f28']

//Datavar dataset = [5, 10, 15, 20, 25];

circles.attr("r", function (d) {return d;

}).attr("cy", h / 2).attr("cx", function (d, i) {

return (i * d) + d;}).attr("fill", function (d, i) {

return colors[i];});

w = 500

h = 50

//Create SVG elementvar svg = d3.select("body")

.append("svg")

.attr("width", 500)

.attr("height", 50);

var circles = svg.selectAll("circle").data(dataset).enter().append("circle");

<svg width="500" height="50"><circle></circle><circle></circle><circle></circle><circle></circle><circle></circle>

</svg>

D3.jsvar diameter = 960,

format = d3.format(",d"),color = d3.scale.category20c();

var bubble = d3.layout.pack().sort(null).size([diameter, diameter]).padding(1.5);

d3.json("flare.json", function(error, root) {var node = svg.selectAll(".node")

.data(bubble.nodes(classes(root)).filter(function(d) { return !d.children; }))

.enter().append("g")

.attr("class", "node")

.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title").text(function(d) { return d.className + ": " +

format(d.value); });

node.append("circle").attr("r", function(d) { return d.r; }).style("fill", function(d) { return

color(d.packageName); });

node.append("text").attr("dy", ".3em").style("text-anchor", "middle").text(function(d) { return

d.className.substring(0, d.r / 3); });});

// Returns a flattened hierarchy containing all leaf nodes under the root.function classes(root) {}

d3.select(self.frameElement).style("height", diameter + "px");

D3.js

HighchartsJS

Numerous chart types

Simple configuration syntax

Dynamic

Export and print

chart: {type: 'line',renderTo: null,width: null,height: null,zoomType: 'xy'

}

xAxis: { },yAxis: { },colors: [ ],navigator: { },tooltip: { },legend: { }

plotOptions: { },series: [

{name: '',data: []}

],scrollbar: {}

HighchartsJS

Comparison D3 and Highcharts

Fast implementation

10+ types

Low flexibility

Commercial

Slow implementation

Unlimited types

High flexibility

Community

D3js Highcharts

Performance criteria

Example structure

WebSockets

Data parsing and reconfiguration (unification)

Creating a query to the server

getData();

query

response

Tree data structures

Adapters

Big Data. Performance criteria.

Divided data (chunks), modularity, data accuracy

Light code structure, data structures

Optimization, testing (forecasting)

Convenient API (command work)

+ + +

Resources

Edward R. Tufte (“Visual Explanations: Images and

Quantities, Evidence and Narrative”)

Jacques Bertin (“Semiology of Graphics: Diagrams,

Networks, Maps”)

Ben Shneiderman (“Readings in Information

Visualization: Using Vision to Think (Interactive

Technologies)”)

http://d3js.org/

http://www.highcharts.com/

http://www.w3.org/TR/2dcontext/

http://www.w3.org/TR/SVG/

http://msdn.microsoft.com/en-

us/library/ie/gg193983(v=vs.85).aspx

http://bigdataweek.com/

http://www.wikipedia.org/

AQ &