Your SlideShare is downloading. ×
Talk Paris Infovis 091207132953 Phpapp01(2)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Talk Paris Infovis 091207132953 Phpapp01(2)

1,333
views

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,333
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Using Web Standards to create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - Dec. 2009
  • 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. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based
  • 4. Graph/Tree Layouts
  • 5. Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree
  • 6. Extensible • Define custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)
  • 7. Composable Add Visualizations as Node/Edge rendering functions to other visualizations
  • 8. Web Standards Based
  • 9. Web Standards JavaScript • Dynamic, Expressive, Powerful • Support in all Browsers • Large Community
  • 10. Web Standards JavaScript: Language Features • Dynamic • Weakly typed • Differential Inheritance • First-class Functions • Object Mutability • Booleans as Defaults • etc.
  • 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. Web Standards Everybody wants to make JavaScript Faster • Apple Safari - SquirrelFish Extreme • Mozilla Firefox - TraceMonkey • Google Chrome - V8 • Opera - Carakan
  • 13. Web Standards HTML Document
  • 14. Web Standards HTML5 Header • Audio Nav • Video Form • Drag n Drop Section • Canvas Image • Storage Footer • etc.
  • 15. Web Standards CSS3 Header • Gradients Nav • Text Effects Section Form • Transforms Image • Animations • etc. Footer
  • 16. Canvas “A Scriptable Image Tag”
  • 17. Canvas Initialization <canvas id=”tutorial” width=500 height=500></canvas> var canvas = document.getElementById(“tutorial”); var ctx = canvas.getContext(“2d”);
  • 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. Canvas Benefits Weak Points Good Performance No notion of elements Simple API Code gets too verbose
  • 20. Why JS + Canvas? • Native Browser Technologies • Seamless Integration • High Interoperability • No third-party libraries • Access to a large community
  • 21. JavaScript InfoVis Toolkit Applications Visualizing Linux Package Dependencies Source: http://demos.thejit.org/example/rgraph/example1/
  • 22. JavaScript InfoVis Toolkit Applications Visualizing Artist-Band Relationships Source: http://demos.thejit.org/example/hypertree/example1/
  • 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. What’s next for the JIT? Version 1.2 • SunBurst, Icicle and Force-Directed Visualizations • Mouse Controlled Transforms • And more...
  • 25. What’s next for the Web? WebGL Already available in WebKit and Firefox nightlies (*)
  • 26. V8-GL Write Hardware Accelerated Desktop Graphics with JS http://github.com/philogb/v8-gl/
  • 27. Questions? philogb@gmail.com http://blog.thejit.org http://github.com/philogb http://thejit.org