SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
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 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
Patterns for data visualization
Patterns for data visualization 
Maps 
Timeline 
Many Variables 
Networks
Technologiesfor 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 
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>
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 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
Performance comparison 
SVG 
Canvas 
http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
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
Libraries and Frameworks
Libraries and Frameworks for data visualization 
D3js 
Highcharts 
Processingjs 
Raphaeljs 
Polymaps 
Flotcharts 
AmCharts
SO, HOWTOCHOOSE?
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.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");
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/
A 
Q 
&

Mais conteúdo relacionado

Mais procurados

STC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first helpSTC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first helpDave Gardiner
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvasGary Yeh
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 CanvasMindy McAdams
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersOswald Campesato
 
Askayworkshop
AskayworkshopAskayworkshop
Askayworkshopsconnin
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector DrawablePhearum THANN
 
Chapter 02 sprite and texture
Chapter 02 sprite and textureChapter 02 sprite and texture
Chapter 02 sprite and textureboybuon205
 

Mais procurados (14)

STC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first helpSTC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first help
 
HTML 5 Canvas & SVG
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVG
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvas
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
HTML CANVAS
HTML CANVASHTML CANVAS
HTML CANVAS
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
Askayworkshop
AskayworkshopAskayworkshop
Askayworkshop
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
 
Chapter 02 sprite and texture
Chapter 02 sprite and textureChapter 02 sprite and texture
Chapter 02 sprite and texture
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
HTML 5_Canvas
HTML 5_CanvasHTML 5_Canvas
HTML 5_Canvas
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
 

Destaque

UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012Adaptive Path
 
Measuring Influence: The Value of 3D Data Visualization
Measuring Influence: The Value of 3D Data VisualizationMeasuring Influence: The Value of 3D Data Visualization
Measuring Influence: The Value of 3D Data VisualizationSpiral16
 
Top 10 Data Visualization Tools
Top 10 Data Visualization ToolsTop 10 Data Visualization Tools
Top 10 Data Visualization ToolsDeZyre
 
Real-Time 3D Data Visualization and Analysis of Unlimited Detail
Real-Time 3D Data Visualization and Analysis of Unlimited DetailReal-Time 3D Data Visualization and Analysis of Unlimited Detail
Real-Time 3D Data Visualization and Analysis of Unlimited DetailMerrick & Company
 
Scientific Computing with Python Webinar March 19: 3D Visualization with Mayavi
Scientific Computing with Python Webinar March 19: 3D Visualization with MayaviScientific Computing with Python Webinar March 19: 3D Visualization with Mayavi
Scientific Computing with Python Webinar March 19: 3D Visualization with MayaviEnthought, Inc.
 
Interactive Latency in Big Data Visualization
Interactive Latency in Big Data VisualizationInteractive Latency in Big Data Visualization
Interactive Latency in Big Data Visualizationbigdataviz_bay
 
Interaction Design Project - Delhi Metro
Interaction Design Project - Delhi MetroInteraction Design Project - Delhi Metro
Interaction Design Project - Delhi MetroKaran Dudeja
 
Application UI Design with Large Data Sets (Cathy Lu)
Application UI Design with Large Data Sets (Cathy Lu)Application UI Design with Large Data Sets (Cathy Lu)
Application UI Design with Large Data Sets (Cathy Lu)uxpa-dc
 
Microservices, The Basic Math
Microservices, The Basic MathMicroservices, The Basic Math
Microservices, The Basic MathTom Mueck
 
Big data visualization framework
Big data visualization frameworkBig data visualization framework
Big data visualization frameworkAbhinav Krishna
 
Electrical energy auditing
Electrical energy auditingElectrical energy auditing
Electrical energy auditingPradeep DC
 
Workshop: Big Data Visualization for Security
Workshop: Big Data Visualization for SecurityWorkshop: Big Data Visualization for Security
Workshop: Big Data Visualization for SecurityRaffael Marty
 
Data Visualisation, Business Intelligence et Big Data
Data Visualisation, Business Intelligence et Big DataData Visualisation, Business Intelligence et Big Data
Data Visualisation, Business Intelligence et Big DataVincent Lagorce
 
Les outils de data visualisation
Les outils de data visualisationLes outils de data visualisation
Les outils de data visualisationUNITEC
 
Big Data Startups - Top Visualization and Data Analytics Startups
Big Data Startups - Top Visualization and Data Analytics StartupsBig Data Startups - Top Visualization and Data Analytics Startups
Big Data Startups - Top Visualization and Data Analytics Startupswallesplace
 
Sparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with SparkSparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with Sparkfelixcss
 
Big Data Visualization
Big Data VisualizationBig Data Visualization
Big Data VisualizationRaffael Marty
 
Microservices Architectures: Become a Unicorn like Netflix, Twitter and Hailo
Microservices Architectures: Become a Unicorn like Netflix, Twitter and HailoMicroservices Architectures: Become a Unicorn like Netflix, Twitter and Hailo
Microservices Architectures: Become a Unicorn like Netflix, Twitter and Hailogjuljo
 
Outils data visualisation
Outils data visualisationOutils data visualisation
Outils data visualisationEttore Rizza
 

Destaque (20)

UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012UI for Big Data Visualization | Jonathan Stray | UX Week 2012
UI for Big Data Visualization | Jonathan Stray | UX Week 2012
 
Measuring Influence: The Value of 3D Data Visualization
Measuring Influence: The Value of 3D Data VisualizationMeasuring Influence: The Value of 3D Data Visualization
Measuring Influence: The Value of 3D Data Visualization
 
Top 10 Data Visualization Tools
Top 10 Data Visualization ToolsTop 10 Data Visualization Tools
Top 10 Data Visualization Tools
 
Real-Time 3D Data Visualization and Analysis of Unlimited Detail
Real-Time 3D Data Visualization and Analysis of Unlimited DetailReal-Time 3D Data Visualization and Analysis of Unlimited Detail
Real-Time 3D Data Visualization and Analysis of Unlimited Detail
 
Scientific Computing with Python Webinar March 19: 3D Visualization with Mayavi
Scientific Computing with Python Webinar March 19: 3D Visualization with MayaviScientific Computing with Python Webinar March 19: 3D Visualization with Mayavi
Scientific Computing with Python Webinar March 19: 3D Visualization with Mayavi
 
Interactive Latency in Big Data Visualization
Interactive Latency in Big Data VisualizationInteractive Latency in Big Data Visualization
Interactive Latency in Big Data Visualization
 
Interaction Design Project - Delhi Metro
Interaction Design Project - Delhi MetroInteraction Design Project - Delhi Metro
Interaction Design Project - Delhi Metro
 
Application UI Design with Large Data Sets (Cathy Lu)
Application UI Design with Large Data Sets (Cathy Lu)Application UI Design with Large Data Sets (Cathy Lu)
Application UI Design with Large Data Sets (Cathy Lu)
 
Microservices, The Basic Math
Microservices, The Basic MathMicroservices, The Basic Math
Microservices, The Basic Math
 
Big data visualization framework
Big data visualization frameworkBig data visualization framework
Big data visualization framework
 
Electrical energy auditing
Electrical energy auditingElectrical energy auditing
Electrical energy auditing
 
Workshop: Big Data Visualization for Security
Workshop: Big Data Visualization for SecurityWorkshop: Big Data Visualization for Security
Workshop: Big Data Visualization for Security
 
Data Visualisation, Business Intelligence et Big Data
Data Visualisation, Business Intelligence et Big DataData Visualisation, Business Intelligence et Big Data
Data Visualisation, Business Intelligence et Big Data
 
Qlik vs. Tableau: High-Level Comparison
Qlik vs. Tableau: High-Level ComparisonQlik vs. Tableau: High-Level Comparison
Qlik vs. Tableau: High-Level Comparison
 
Les outils de data visualisation
Les outils de data visualisationLes outils de data visualisation
Les outils de data visualisation
 
Big Data Startups - Top Visualization and Data Analytics Startups
Big Data Startups - Top Visualization and Data Analytics StartupsBig Data Startups - Top Visualization and Data Analytics Startups
Big Data Startups - Top Visualization and Data Analytics Startups
 
Sparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with SparkSparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with Spark
 
Big Data Visualization
Big Data VisualizationBig Data Visualization
Big Data Visualization
 
Microservices Architectures: Become a Unicorn like Netflix, Twitter and Hailo
Microservices Architectures: Become a Unicorn like Netflix, Twitter and HailoMicroservices Architectures: Become a Unicorn like Netflix, Twitter and Hailo
Microservices Architectures: Become a Unicorn like Netflix, Twitter and Hailo
 
Outils data visualisation
Outils data visualisationOutils data visualisation
Outils data visualisation
 

Semelhante a Visualization of Big Data in Web Apps

Dynamic Data Visualization With Chartkick
Dynamic Data Visualization With ChartkickDynamic Data Visualization With Chartkick
Dynamic Data Visualization With ChartkickDax Murray
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)zahid-mian
 
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceState of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceOSCON Byrum
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutesJos Dirksen
 
Forge - DevCon 2016: Visual Reporting with Connected Design Data
Forge - DevCon 2016: Visual Reporting with Connected Design DataForge - DevCon 2016: Visual Reporting with Connected Design Data
Forge - DevCon 2016: Visual Reporting with Connected Design DataAutodesk
 
Introduction to data visualisation with D3
Introduction to data visualisation with D3Introduction to data visualisation with D3
Introduction to data visualisation with D3Aleksander Fabijan
 
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with NodeHow to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Nodepdeschen
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...Sencha
 
Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tddMarcos Iglesias
 
D3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand wordsD3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand wordsApptension
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationAnthony Starks
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsShweta Sadawarte
 
D3 Mapping Visualization
D3 Mapping VisualizationD3 Mapping Visualization
D3 Mapping VisualizationSudhir Chowbina
 
Techwave 2006 Advanced Datawindow Functionality
Techwave 2006 Advanced Datawindow FunctionalityTechwave 2006 Advanced Datawindow Functionality
Techwave 2006 Advanced Datawindow FunctionalityBuck Woolley
 
Techwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow TechniquesTechwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow TechniquesBuck Woolley
 

Semelhante a Visualization of Big Data in Web Apps (20)

Dynamic Data Visualization With Chartkick
Dynamic Data Visualization With ChartkickDynamic Data Visualization With Chartkick
Dynamic Data Visualization With Chartkick
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)
 
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceState of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
 
D3
D3D3
D3
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutes
 
Forge - DevCon 2016: Visual Reporting with Connected Design Data
Forge - DevCon 2016: Visual Reporting with Connected Design DataForge - DevCon 2016: Visual Reporting with Connected Design Data
Forge - DevCon 2016: Visual Reporting with Connected Design Data
 
Introduction to data visualisation with D3
Introduction to data visualisation with D3Introduction to data visualisation with D3
Introduction to data visualisation with D3
 
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with NodeHow to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node
How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tdd
 
D3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand wordsD3.js - A picture is worth a thousand words
D3.js - A picture is worth a thousand words
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
 
The D3 Toolbox
The D3 ToolboxThe D3 Toolbox
The D3 Toolbox
 
D3 Mapping Visualization
D3 Mapping VisualizationD3 Mapping Visualization
D3 Mapping Visualization
 
Techwave 2006 Advanced Datawindow Functionality
Techwave 2006 Advanced Datawindow FunctionalityTechwave 2006 Advanced Datawindow Functionality
Techwave 2006 Advanced Datawindow Functionality
 
Techwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow TechniquesTechwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow Techniques
 

Mais de EPAM

JavaScript. Code Quality.
JavaScript. Code Quality.JavaScript. Code Quality.
JavaScript. Code Quality.EPAM
 
Continuous integration for JavaScript projects
Continuous integration for JavaScript projectsContinuous integration for JavaScript projects
Continuous integration for JavaScript projectsEPAM
 
Object Oriented Concepts in Real Projects
Object Oriented Concepts in Real ProjectsObject Oriented Concepts in Real Projects
Object Oriented Concepts in Real ProjectsEPAM
 
Modern web applications infrastructure
Modern web applications infrastructureModern web applications infrastructure
Modern web applications infrastructureEPAM
 
Reactive Extensions: classic Observer in .NET
Reactive Extensions: classic Observer in .NETReactive Extensions: classic Observer in .NET
Reactive Extensions: classic Observer in .NETEPAM
 
SOLID Principles in the real world
SOLID Principles in the real worldSOLID Principles in the real world
SOLID Principles in the real worldEPAM
 
Future of the Future of E-Commerce
Future of the Future of E-CommerceFuture of the Future of E-Commerce
Future of the Future of E-CommerceEPAM
 
Bootify Yyour App from Zero to Hero
Bootify Yyour App from Zero to HeroBootify Yyour App from Zero to Hero
Bootify Yyour App from Zero to HeroEPAM
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in BriefEPAM
 

Mais de EPAM (9)

JavaScript. Code Quality.
JavaScript. Code Quality.JavaScript. Code Quality.
JavaScript. Code Quality.
 
Continuous integration for JavaScript projects
Continuous integration for JavaScript projectsContinuous integration for JavaScript projects
Continuous integration for JavaScript projects
 
Object Oriented Concepts in Real Projects
Object Oriented Concepts in Real ProjectsObject Oriented Concepts in Real Projects
Object Oriented Concepts in Real Projects
 
Modern web applications infrastructure
Modern web applications infrastructureModern web applications infrastructure
Modern web applications infrastructure
 
Reactive Extensions: classic Observer in .NET
Reactive Extensions: classic Observer in .NETReactive Extensions: classic Observer in .NET
Reactive Extensions: classic Observer in .NET
 
SOLID Principles in the real world
SOLID Principles in the real worldSOLID Principles in the real world
SOLID Principles in the real world
 
Future of the Future of E-Commerce
Future of the Future of E-CommerceFuture of the Future of E-Commerce
Future of the Future of E-Commerce
 
Bootify Yyour App from Zero to Hero
Bootify Yyour App from Zero to HeroBootify Yyour App from Zero to Hero
Bootify Yyour App from Zero to Hero
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 

Último

OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingOpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingShane Coughlan
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfmaor17
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jNeo4j
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...OnePlan Solutions
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
Copilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform CopilotCopilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform CopilotEdgard Alejos
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorTier1 app
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesVictoriaMetrics
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecturerahul_net
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 

Último (20)

OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full RecordingOpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
OpenChain Education Work Group Monthly Meeting - 2024-04-10 - Full Recording
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdf
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
Copilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform CopilotCopilot para Microsoft 365 y Power Platform Copilot
Copilot para Microsoft 365 y Power Platform Copilot
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryError
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 Updates
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecture
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 

Visualization of Big Data in Web Apps

  • 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
  • 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
  • 23. Libraries and Frameworks for data visualization D3js Highcharts Processingjs Raphaeljs Polymaps Flotcharts AmCharts
  • 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
  • 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 &