Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
New Tools for Visualization in
        JavaScript




  Nicolas Garcia Belmonte - @philogb - Sept. 2011
I use Web Standards to create Data Visualizations.
I’m the author of two JavaScript data visualization
                   frameworks.



    PhiloGL                  JavaScr...
JavaScript InfoVis Toolkit


• Web Based Interactive Data Visualizations
• Wide Range of Visualizations
• Focused on Perfo...
JavaScript InfoVis Toolkit
              Under The Hood

• JavaScript + 2D Canvas
• IE < 9 Support via ExCanvas or FlashCa...
JavaScript InfoVis Toolkit



         Examples
JavaScript InfoVis Toolkit
     A Hands-On Toolkit

     • The White House
     • Mozilla
     • Google
     • The Guardia...
JavaScript InfoVis Toolkit

• In 2010 the Toolkit was acquired by
  the Sencha Labs Foundation.


• In 2011 the Toolkit wa...
JavaScript InfoVis Toolkit
          What’s Next ?




 • WebGL
 • Hardware Acceleration
 • 3D Layouts
JavaScript InfoVis Toolkit
      Where do I get it ?




       http://thejit.org/
PhiloGL
•   WebGL Powered Visualization Framework

•   Handles Big Datasets ( > 100K elems )

•   Idiomatic JavaScript

• ...
Examples
Idiomatic JavaScript
  //Create application
  PhiloGL('canvasId', {
    program: {
       from: 'uris',
       vs: 'shader...
Idiomatic JavaScript

    app.gl
    app.canvas
    app.camera
    app.scene
    app.events
    app.program
    app.textur...
Module System
   •   Core
   •   Math
   •   WebGL
   •   Program
   •   Shaders
   •   O3D
   •   Camera
   •   Scene
   ...
Other Examples
PhiloGL
        Where do I get it ?




http://senchalabs.github.com/philogl/
Thanks!


    Nicolas Garcia Belmonte



@philogb      http://philogb.github.com/
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Nuevas herramientas de visualizacion en JavaScript
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

1

Partager

New Tools for Visualization in JavaScript - Sept. 2011

Télécharger pour lire hors ligne

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

New Tools for Visualization in JavaScript - Sept. 2011

  1. 1. New Tools for Visualization in JavaScript Nicolas Garcia Belmonte - @philogb - Sept. 2011
  2. 2. I use Web Standards to create Data Visualizations.
  3. 3. I’m the author of two JavaScript data visualization frameworks. PhiloGL JavaScript InfoVis Toolkit
  4. 4. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Wide Range of Visualizations • Focused on Performance • Cross Browser/Device Support
  5. 5. JavaScript InfoVis Toolkit Under The Hood • JavaScript + 2D Canvas • IE < 9 Support via ExCanvas or FlashCanvas • Mobile (iOS, Android) Support
  6. 6. JavaScript InfoVis Toolkit Examples
  7. 7. JavaScript InfoVis Toolkit A Hands-On Toolkit • The White House • Mozilla • Google • The Guardian • Al-Jazeera ... all use InfoVis!
  8. 8. JavaScript InfoVis Toolkit • In 2010 the Toolkit was acquired by the Sencha Labs Foundation. • In 2011 the Toolkit was part of Google Summer of Code.
  9. 9. JavaScript InfoVis Toolkit What’s Next ? • WebGL • Hardware Acceleration • 3D Layouts
  10. 10. JavaScript InfoVis Toolkit Where do I get it ? http://thejit.org/
  11. 11. PhiloGL • WebGL Powered Visualization Framework • Handles Big Datasets ( > 100K elems ) • Idiomatic JavaScript • Rich Module System Model courtesy of Nicolas Kassis - McGill Univ.
  12. 12. Examples
  13. 13. Idiomatic JavaScript //Create application PhiloGL('canvasId', { program: { from: 'uris', vs: 'shader.vs.glsl', fs: 'shader.fs.glsl' }, camera: { position: { x: 0, y: 0, z: -50 } }, textures: { src: ['arroway.jpg', 'earth.jpg'] }, events: { onDragMove: function(e) { //do things... }, onMouseWheel: function(e) { //do things... } }, onError: function() { alert("There was an error creating the app."); }, onLoad: function(app) { /* Do things here */ } });
  14. 14. Idiomatic JavaScript app.gl app.canvas app.camera app.scene app.events app.program app.textures app.framebuffers app.renderbuffers
  15. 15. Module System • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers
  16. 16. Other Examples
  17. 17. PhiloGL Where do I get it ? http://senchalabs.github.com/philogl/
  18. 18. Thanks! Nicolas Garcia Belmonte @philogb http://philogb.github.com/
  • miquelet2

    Apr. 27, 2013

Vues

Nombre de vues

4 303

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

14

Actions

Téléchargements

23

Partages

0

Commentaires

0

Mentions J'aime

1

×