HTML5 and CSS3 charts. Ready for visualizing both batch and streaming data. See more at: https://github.com/proteus-h2020/proteic https://github.com/proteus-h2020/proteic

1. ProteicJS: A novel real-
time and open-source
visualization library
focused on incremental
processing
NACHO GARCÍA FERNÁNDEZ / IGNACIO.G.FERNANDEZ@TREELOGIC.COM
TREELOGIC
This project is funded
by the European Union.
Horizon 2020

2. 2
About me
u Academics
u Bsc in Computer Science
u MSc in Computer Science
u PhD student
u Professional
u R&D Engineer at Treelogic S.L.
u Lecturer at Master of Big Data (Kschool)
u Others
u Computer security enthusiast

3. 3
About Treelogic
u 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. 4

5. 5
ProteicJS
https://github.com/proteus-h2020/proteic/tree/development Please

6. 6
ProteicJS: Motivation
u Most of visualization libraries out there, are…
u developed with spaguetti code techniques
u very heavy
u not modular
u Using old Javascript specifications (ES5).
u Developed on top of D3.js v3.y.z
u No responsive design
u Not compatible with Big Data environments
u Not interactive enough
u There are some libraries that cover some of these gaps,
but…
u They are not open-source
u They are not free

7. 7
ProteicJS: Features
u Easy API, clean code and high performance
u 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.

8. u Linecharts, barcharts, network graphs, pie charts, etc
8
Traditional visualizations

9. u Swimlanes, streamgraphs, gauge charts, etc.
9
Stream Visualizations

10. u The component-oriented architecture allows you to re-use existing
components, create new ones and customize your visualizations.
10
Custom visualizations

11. u Currently researching on new ways of data visualization
11
R&D

12. 12
ProteicJS: Datasource
u 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. 13
ProteicJS: Syntax
u ProteicJS u NVD3 u Highcharts
NVD3

14. 14
ProteicJS: Size
u 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. 15
ProteicJS: Benchmarks
u ProteicJS
u ???
u NVD3
u ???
u Highcharts
u ???
NVD3
jsPerf.com is down! L,
but we are better
than others J

16. 16
ProteicJS: DevToolkit

17. u RollupJS is a Javascript module bundler
u It allows you to customize your bundle
u Rollup eliminates unused code with tree-shaking
u After creating the bundle, Rollup uses a Uglify
plugin to minify the resulting code
u The result is a lighweight and custom-made library
17
Build
npm run build
index.js

18. 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. 19
ProteicJS: Dependencies

20. 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.

21. 21
That’s all!
Contact us
ignacio.g.fernandez@treelogic.com
Thanks for your attention

22. ProteicJS: A novel real-
time and open-source
visualization library
focused on incremental
processing
NACHO GARCÍA FERNÁNDEZ / IGNACIO.G.FERNANDEZ@TREELOGIC.COM
TREELOGIC
This project is funded
by the European Union.
Horizon 2020