proteicjs: the next-generation visualization library
TRANSCRIPT
ProteicJS: A novel real-time and open-source visualization library focused on incremental processingNACHO GARCÍA FERNÁNDEZ / [email protected]
TREELOGICThis project is fundedby the European Union. Horizon 2020
2
About meu Academics
u Bsc in Computer Science
u MSc in Computer Science
u PhD student
u Professionalu R&D Engineer at Treelogic S.L.
u Lecturer at Master of Big Data (Kschool)
u Othersu Computer security enthusiast
3
About Treelogicu R&D intensive company with the mission of adapting technological knowledge to
improve quality standards in our daily life
u 8 ongoing H2020 projects (coordinating 3 of them)
u 8 ongoing FP7 projects (coordinating 5 of them)
u Focused on providing Big Data Analytics in all the world
u Internal organisation
Research lines
u Big Data
u Computer vision
u Data science
u Social Media Analysis
u Security
ICT solutions
u Security & Safety
u Justice
u Health
u Transport
u Financial Services
u ICT tailored solutions
4
5
ProteicJS
https://github.com/proteus-h2020/proteic/tree/development Please
6
ProteicJS: Motivation
u Most of visualization libraries out there, are…u developed with spaguetti code techniquesu very heavyu not modularu Using old Javascript specifications (ES5).u Developed on top of D3.js v3.y.zu No responsive designu Not compatible with Big Data environmentsu Not interactive enough
u There are some libraries that cover some of these gaps, but…u They are not open-sourceu They are not free
7
ProteicJS: Features
u Easy API, clean code and high performanceu Based on D3.js v4, ES6, HTML5 and CSS3
u Isomorphic: It allows you to render charts both in back-end and front-end
u Modular: Component-oriented architecture, thanks to import /export ES6 features.
u Lightweight: Custom bundles.
u Open-source: active community.
u Linecharts, barcharts, network graphs, pie charts, etc
8
Traditional visualizations
u Swimlanes, streamgraphs, gauge charts, etc.
9
Stream Visualizations
u The component-oriented architecture allows you to re-use existing components, create new ones and customize your visualizations.
10
Custom visualizations
u Currently researching on new ways of data visualization
11
R&D
12
ProteicJS: Datasourceu ProteicJS provides some data connectors that allow you to access data
anywhere:u Websocket Datasource
u HTTP Datasource
u LocalDatasource
u Custom Datasource
u Datasources can start, pause, resume and stop the stream of data.
13
ProteicJS: Syntaxu ProteicJS u NVD3 u Highcharts
NVD3
14
ProteicJS: Sizeu ProteicJS
u Standard: 96,5kb
u Minified: 50kb
u NVD3
u Standard: 622kb
u Minified: 245kb
u Highcharts
u Standard: 836kb
u Minified: 186kb
NVD3
15
ProteicJS: Benchmarksu ProteicJS
u ???
u NVD3
u ???
u Highcharts
u ???
NVD3
jsPerf.com is down! L, but we are better
than others J
16
ProteicJS: DevToolkit
u RollupJS is a Javascript module bundleru It allows you to customize your bundle
u Rollup eliminates unused code with tree-shaking
u After creating the bundle, Rollup uses a Uglifyplugin to minify the resulting code
u The result is a lighweight and custom-made library
17
Build
npm run build
index.js
u What about browsers that do not fully support ES6?u RollupJS provides Bublé: a transpiler that compiles ES6 code to ES5.
u Bublé is faster than other alternatives such as BabelJS or Traceur.
18
Build
npm run build
19
ProteicJS: Dependencies
20
Collaborate with us
u Become a committer: You will be member of an active open-source community
u Use ProteicJS everywhere: at the University, in your personal projects, etc.
u Use the Github issue tracker for issues, improvements, deteceted bugs, etc.
ProteicJS: A novel real-time and open-source visualization library focused on incremental processingNACHO GARCÍA FERNÁNDEZ / [email protected]
TREELOGICThis project is fundedby the European Union. Horizon 2020