Andrii Gordiichuk, Software Developer “Visualization of Big Data in Web Applications” - Data in our life - Patterns for data visualization - Technologies for data visualization - SVG and Canvas - Frameworks for data visualization. Selection criteria - D3.js and Highcharts.js

1. Visualization of [Big] Data in Web Apps
Andrii Gordiichuk

2. Data in our life

3. Data in our life
Statistics and Reports
Background information
Interactive services
Illustrations
Fields of use:

4. Why visualization is important?
Perception of information
From complex to simple
Explore the data
Quick answers

5. Why visualization is important?
Edward R. Tufte

6. The basic principles
of information visualization

7. The basic principles of information visualization
Image concept
Paradigm of visualization

8. 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

9. 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

10. 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 75 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
The basic principles example

11. Patterns for data visualization

12. Patterns for data visualization
Maps
Timeline
Many Variables
Networks

13. Technologiesfor data visualization

14. Technologies for Web data visualization
SVG
HTML5 Canvas

15. 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>

16. Canvas example
<canvas style="position:absolute; float:left" id="gameCanvas" width="750" height="500">
</canvas>

17. SVG
Format
Vector
Scaling
Scale
Access
Access to (DOM)elements
Accessibility
Canget structure
Stylization
Visual styles defined attributes (CSS)
Programming
DOMfor 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.
<imgsrc="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>

18. 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'}) });

19. SVG and Canvas. Usage scenarios.
Static Images
Screen Capture
Documents with high accuracy for printing
Canvas
SVG
Video manipulation
Complex scenes with multiple objects
Web Advertising
Interactive charts and graphs
2D Games

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

21. What to use?
Canvas
SVG
Step 1
Understand the technology.
Step 2
Understand 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

22. Libraries and Frameworks

23. Libraries and Frameworks for data visualization
D3js
Highcharts
Processingjs
Raphaeljs
Polymaps
Flotcharts
AmCharts

24. SO, HOWTOCHOOSE?

25. Selection criteria of the framework
Data size
Functionality of the framework (API)
Customization
Documentation
Browser compatibility
Maintenance
Tests

26. 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.

27. 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>

28. D3.js
vardiameter = 960, format = d3.format(",d"), color = d3.scale.category20c(); varbubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5);
d3.json("flare.json", function(error, root) { varnode = 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");

29. D3.js

30. HighchartsJS
Numerous chart types
Simple configuration syntax
Dynamic
Export and print

31. chart: { type: 'line', renderTo: null, width: null, height: null, zoomType: 'xy' }
xAxis: { }, yAxis: { }, colors: [ ], navigator: { }, tooltip: { }, legend: { }
plotOptions: { }, series: [ {name: '', data: []} ], scrollbar: {}
HighchartsJS

32. Comparison D3 and Highcharts
Fast implementation
10+ types
Low flexibility
Commercial
Slow implementation
Unlimited types
High flexibility
Community
D3js
Highcharts

33. Performance criteria

34. Example structure
WebSockets
Data parsing and reconfiguration (unification)
Creating a query to the server
getData();
query
response
Tree data structures
Adapters

35. Big Data. Performance criteria.
Divided data (chunks), modularity, data accuracy
Light code structure, data structures
Optimization, testing (forecasting)
Convenient API (command work)

36. +
+
+

37. 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/

38. A
Q
&