Using Web Standards to create Interactive Data Visualizations for the Web
Upcoming SlideShare
Loading in...5
×
 

Using Web Standards to create Interactive Data Visualizations for the Web

on

  • 10,595 views

Information Visualization talk about the JavaScript InfoVis Toolkit and Web Standards. December 2009

Information Visualization talk about the JavaScript InfoVis Toolkit and Web Standards. December 2009

Statistics

Views

Total Views
10,595
Views on SlideShare
9,566
Embed Views
1,029

Actions

Likes
10
Downloads
160
Comments
4

23 Embeds 1,029

http://blog.thejit.org 714
http://ariajohnson.blogspot.com 77
http://blog.dreamcss.com 74
http://sara-cannon.com 58
http://www.slideshare.net 22
http://hi.chibaole.com 12
http://static.slidesharecdn.com 11
http://philogb.github.com 10
http://juzuba.blogspot.com.es 8
http://philogb.github.io 7
http://juzuba.blogspot.com 6
http://fairchildbooks.com 5
http://localhost 4
http://patriciojavier1220.blogspot.com 4
http://www.linkedin.com 4
http://www.sara-cannon.com 3
http://indoclass.com 2
http://translate.googleusercontent.com 2
http://learning101.posterous.com 2
http://www.hanrss.com 1
http://stevekinney.posterous.com 1
http://www.indoclass.com 1
http://www.lmodules.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • nice da machi...................
    Are you sure you want to
    Your message goes here
    Processing…
  • Wish I had audio or more indepth explanation. Almost get it, but alas, need more to grasp the process and power of such tools.
    Are you sure you want to
    Your message goes here
    Processing…
  • 使用web标准,创建可视化的数据交换web应用程序
    Are you sure you want to
    Your message goes here
    Processing…
  • la sandra
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Using Web Standards to create Interactive Data Visualizations for the Web Using Web Standards to create Interactive Data Visualizations for the Web Presentation Transcript

    • Using Web Standards to create Interactive Data Visualizations for the Web Nicolas Garcia Belmonte - Dec. 2009
    • 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
    • JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based
    • Graph/Tree Layouts
    • Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree
    • 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 Functions • Object Mutability • Booleans as Defaults • etc.
    • 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/
    • Web Standards Everybody wants to make JavaScript Faster • Apple Safari - SquirrelFish Extreme • Mozilla Firefox - TraceMonkey • Google Chrome - V8 • Opera - Carakan
    • Web Standards HTML Document
    • Web Standards HTML5 Header • Audio Nav • Video Form • Drag n Drop Section • Canvas Image • Storage Footer • etc.
    • Web Standards CSS3 Header • Gradients Nav • Text Effects Section Form • Transforms Image • Animations • etc. Footer
    • Canvas “A Scriptable Image Tag”
    • Canvas Initialization <canvas id=”tutorial” width=500 height=500></canvas> var canvas = document.getElementById(“tutorial”); var ctx = canvas.getContext(“2d”);
    • 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);
    • Canvas Benefits Weak Points Good Performance No notion of elements Simple API Code gets too verbose
    • Why JS + Canvas? • Native Browser Technologies • Seamless Integration • High Interoperability • No third-party libraries • Access to a large community
    • JavaScript InfoVis Toolkit Applications Visualizing Linux Package Dependencies Source: http://demos.thejit.org/example/rgraph/example1/
    • JavaScript InfoVis Toolkit Applications Visualizing Artist-Band Relationships Source: http://demos.thejit.org/example/hypertree/example1/
    • 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
    • What’s next for the JIT? Version 1.2 • SunBurst, Icicle and Force-Directed Visualizations • Mouse Controlled Transforms • And more...
    • 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