Visualization of Big Data in Web Apps
-
Upload
epam-systems -
Category
Software
-
view
131 -
download
4
description
Transcript of Visualization of Big Data in Web Apps
![Page 1: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/1.jpg)
Visualization of [Big] Data in Web Apps
Andrii Gordiichuk
![Page 2: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/2.jpg)
Data in our life
![Page 3: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/3.jpg)
Data in our life
Statistics and Reports
Background information
Interactive services
Illustrations
Fields of use:
![Page 4: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/4.jpg)
Why visualization
is important?
Perception of information
From complex to simple
Explore the data
Quick answers
![Page 5: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/5.jpg)
Why visualization is important?
Edward R. Tufte
![Page 6: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/6.jpg)
The basic principles of information visualization
![Page 7: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/7.jpg)
The basic principles of information visualization
Image concept
Paradigm of visualization
![Page 8: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/8.jpg)
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
![Page 9: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/9.jpg)
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
![Page 10: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/10.jpg)
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
![Page 11: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/11.jpg)
Patterns for data visualization
![Page 12: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/12.jpg)
Patterns for data visualization
Maps
Timeline
Many Variables
Networks
![Page 13: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/13.jpg)
Technologies for data visualization
![Page 14: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/14.jpg)
Technologies for Web data
visualization
SVG
HTML5 Canvas
![Page 15: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/15.jpg)
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>
![Page 16: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/16.jpg)
Canvas example
<canvas style="position:absolute; float:left" id="gameCanvas" width="750" height="500">
</canvas>
![Page 17: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/17.jpg)
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>
![Page 18: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/18.jpg)
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'})
});
![Page 19: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/19.jpg)
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
![Page 20: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/20.jpg)
Performance comparison
SVGCanvas
http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
![Page 21: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/21.jpg)
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
![Page 22: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/22.jpg)
Libraries and Frameworks
![Page 23: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/23.jpg)
Libraries and Frameworks for data
visualization
D3js
Highcharts
Processingjs
Raphaeljs
Polymaps
Flotcharts
AmCharts
![Page 24: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/24.jpg)
SO, HOW TO CHOOSE?
![Page 25: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/25.jpg)
Selection criteria of the framework
Data size
Functionality of the framework (API)
Customization
Documentation
Browser compatibility
Maintenance
Tests
![Page 26: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/26.jpg)
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.
![Page 27: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/27.jpg)
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>
![Page 28: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/28.jpg)
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");
![Page 29: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/29.jpg)
D3.js
![Page 30: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/30.jpg)
HighchartsJS
Numerous chart types
Simple configuration syntax
Dynamic
Export and print
![Page 31: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/31.jpg)
chart: {type: 'line',renderTo: null,width: null,height: null,zoomType: 'xy'
}
xAxis: { },yAxis: { },colors: [ ],navigator: { },tooltip: { },legend: { }
plotOptions: { },series: [
{name: '',data: []}
],scrollbar: {}
HighchartsJS
![Page 32: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/32.jpg)
Comparison D3 and Highcharts
Fast implementation
10+ types
Low flexibility
Commercial
Slow implementation
Unlimited types
High flexibility
Community
D3js Highcharts
![Page 33: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/33.jpg)
Performance criteria
![Page 34: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/34.jpg)
Example structure
WebSockets
Data parsing and reconfiguration (unification)
Creating a query to the server
getData();
query
response
Tree data structures
Adapters
![Page 35: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/35.jpg)
Big Data. Performance criteria.
Divided data (chunks), modularity, data accuracy
Light code structure, data structures
Optimization, testing (forecasting)
Convenient API (command work)
![Page 36: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/36.jpg)
+ + +
![Page 37: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/37.jpg)
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/
![Page 38: Visualization of Big Data in Web Apps](https://reader033.fdocuments.us/reader033/viewer/2022051411/547e7df0b37959582b8b54ea/html5/thumbnails/38.jpg)
AQ &