Study different tools for visualization

[arnaudDup]

Make some prototypes on new technologies. The idea is to choose the most efficient one and have some samples to share code to other members of team.

[antitoine]

Ideas from d3/Gallery:

• Visualization of a single runner: http://square.github.io/crossfilter/
• Visualization of generals performances in Marathon Lausanne (1999-2016): http://bl.ocks.org/rkirsling/33a9e350516da54a5d4f
• Visualization of ranks of runners in Marathon Lausanne (1999-2016): http://www.visualcinnamon.com/2015/01/the-top-2000-equalizer-songs.html
• Performances evolution of a single runner: http://bl.ocks.org/csaladenes/ddc0b326b93ec641c84f
• Performances evolution of a single runner: https://piratepeel.github.io/sportskills.html

[antitoine]

Very simple and works perfectly with Angular 2 : ng2-charts

[arnaudDup]

https://plot.ly/javascript/ Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.

Work also in python

[antitoine]

Possible library to make the real dynamic and complex graph:

• Vaadin Charts / Demo / Docs / Project : it seams very complex to use but very powerful. The integration with Angular will be a little bit complicated
• ngx-charts (f.k.a. ng2d3) / Demo / Docs / Project : less graphics, but very design and it seams easier to integrate with Angular
• ng2-nvd3 / Demo / Docs / Project : an AngularJS (Angular 1) module adapted to Angular 2, it seams easier but with less features

[antitoine]

We select Plotly.js (github / website). See notes: Jupyter Notebook side

• Installation Jupyter Notebook (use pip): https://plot.ly/python/getting-started/
• Use offline mode :

  import plotly
  plotly.offline.init_notebook_mode()
  plotly.offline.iplot(fig)

• Use it https://plot.ly/ipython-notebooks/

Plotly graph in presentation website

• Installation with Angular 2 done in 1b94b60fa79ad9f5bfb4a736a9dc211790d56baf
• Follow steps here to offline and output correctly graph: https://plot.ly/python/offline/ and http://stackoverflow.com/questions/36262748/python-save-plotly-plot-to-local-file-and-insert-into-html If we real interactive Javascript graph, we need to write it directly in the TypeScript file following the Plotly.js API like in lausanne-1999-2016.component.ts and lausanne-1999-2016.component.html