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
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
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>
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
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>
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)
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/