0
Using Web Standards to
create Interactive Data
 Visualizations for the
          Web


   Nicolas Garcia Belmonte - Dec. 2...
Agenda

• JavaScript InfoVis Toolkit Overview
• Web Standards, JavaScript and Graphics
• What’s next for the JIT (v. 1.2)
...
JavaScript InfoVis Toolkit

• Web Based Interactive Data Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensibl...
Graph/Tree Layouts
Modular
       Grab only what you need

HyperTree
                                    SunBurst
TreeMap
             JavaSc...
Extensible
• Define custom Nodes and Edges
• Add Custom Animations (linear,
  Elastic, etc.)
Composable
Add Visualizations as Node/Edge rendering
     functions to other visualizations
Web Standards Based
Web Standards
          JavaScript


• Dynamic, Expressive, Powerful
• Support in all Browsers
• Large Community
Web Standards
JavaScript: Language Features

 • Dynamic
 • Weakly typed
 • Differential Inheritance
 • First-class Functio...
Web Standards
                                              JavaScript: 100% Faster
SunSpider runs per minute




        ...
Web Standards
Everybody wants to make JavaScript Faster




   • Apple Safari - SquirrelFish Extreme
   • Mozilla Firefox ...
Web Standards


   HTML Document
Web Standards
  HTML5
                          Header

• Audio                            Nav
• Video                    ...
Web Standards
   CSS3
                           Header


• Gradients                         Nav

• Text Effects   Sectio...
Canvas
“A Scriptable Image Tag”
Canvas
                    Initialization


<canvas id=”tutorial” width=500 height=500></canvas>



  var canvas = documen...
Canvas
          Drawing Shapes


ctx.fillStyle = “rgb(200, 0, 0)”;
ctx.fillRect(10, 10, 55, 50);

ctx.fillStyle = “rgba(0, 0...
Canvas

    Benefits            Weak Points
Good Performance   No notion of elements
   Simple API      Code gets too verbo...
Why JS + Canvas?

 • Native Browser Technologies
 • Seamless Integration
 • High Interoperability
 • No third-party librar...
JavaScript InfoVis Toolkit
      Applications
  Visualizing Linux Package Dependencies




          Source: http://demos....
JavaScript InfoVis Toolkit
      Applications
   Visualizing Artist-Band Relationships




         Source: http://demos.t...
JavaScript InfoVis Toolkit
      Applications
    Some (public) user Applications

        CRS Management UI
       ROOT p...
What’s next for the JIT?
                Version 1.2

• SunBurst, Icicle and
  Force-Directed
  Visualizations
• Mouse Con...
What’s next for the
            Web?

                    WebGL



Already available in WebKit and Firefox nightlies (*)
V8-GL
Write Hardware Accelerated Desktop Graphics with JS




           http://github.com/philogb/v8-gl/
Questions?

  philogb@gmail.com
   http://blog.thejit.org
http://github.com/philogb
    http://thejit.org
Upcoming SlideShare
Loading in...5
×

Talk Paris Infovis 091207132953 Phpapp01(2)

1,362

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,362
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Talk Paris Infovis 091207132953 Phpapp01(2)"

  1. 1. Using Web Standards to create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - Dec. 2009
  2. 2. Agenda • JavaScript InfoVis Toolkit Overview • Web Standards, JavaScript and Graphics • What’s next for the JIT (v. 1.2) • What’s next for Web Standards (WebGL) • Introducing V8-GL
  3. 3. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based
  4. 4. Graph/Tree Layouts
  5. 5. Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree
  6. 6. Extensible • Define custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)
  7. 7. Composable Add Visualizations as Node/Edge rendering functions to other visualizations
  8. 8. Web Standards Based
  9. 9. Web Standards JavaScript • Dynamic, Expressive, Powerful • Support in all Browsers • Large Community
  10. 10. Web Standards JavaScript: Language Features • Dynamic • Weakly typed • Differential Inheritance • First-class Functions • Object Mutability • Booleans as Defaults • etc.
  11. 11. Web Standards JavaScript: 100% Faster SunSpider runs per minute 65.00 48.75 32.50 16.25 0 WebKit 3.0 WebKit 3.1 SquirrelFish SquirrelFish X Source: http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  12. 12. Web Standards Everybody wants to make JavaScript Faster • Apple Safari - SquirrelFish Extreme • Mozilla Firefox - TraceMonkey • Google Chrome - V8 • Opera - Carakan
  13. 13. Web Standards HTML Document
  14. 14. Web Standards HTML5 Header • Audio Nav • Video Form • Drag n Drop Section • Canvas Image • Storage Footer • etc.
  15. 15. Web Standards CSS3 Header • Gradients Nav • Text Effects Section Form • Transforms Image • Animations • etc. Footer
  16. 16. Canvas “A Scriptable Image Tag”
  17. 17. Canvas Initialization <canvas id=”tutorial” width=500 height=500></canvas> var canvas = document.getElementById(“tutorial”); var ctx = canvas.getContext(“2d”);
  18. 18. Canvas Drawing Shapes ctx.fillStyle = “rgb(200, 0, 0)”; ctx.fillRect(10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0, 200, 0.5)”; ctx.fillRect(30, 30, 55, 50);
  19. 19. Canvas Benefits Weak Points Good Performance No notion of elements Simple API Code gets too verbose
  20. 20. Why JS + Canvas? • Native Browser Technologies • Seamless Integration • High Interoperability • No third-party libraries • Access to a large community
  21. 21. JavaScript InfoVis Toolkit Applications Visualizing Linux Package Dependencies Source: http://demos.thejit.org/example/rgraph/example1/
  22. 22. JavaScript InfoVis Toolkit Applications Visualizing Artist-Band Relationships Source: http://demos.thejit.org/example/hypertree/example1/
  23. 23. JavaScript InfoVis Toolkit Applications Some (public) user Applications CRS Management UI ROOT project at CERN Project at Macalester College Game Stats at Dystopia Neural Network Visualization
  24. 24. What’s next for the JIT? Version 1.2 • SunBurst, Icicle and Force-Directed Visualizations • Mouse Controlled Transforms • And more...
  25. 25. What’s next for the Web? WebGL Already available in WebKit and Firefox nightlies (*)
  26. 26. V8-GL Write Hardware Accelerated Desktop Graphics with JS http://github.com/philogb/v8-gl/
  27. 27. Questions? philogb@gmail.com http://blog.thejit.org http://github.com/philogb http://thejit.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×