Visualization of [Big] Data in Web Apps Andrii Gordiichuk
Nov 29, 2014
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 &