SlideShare a Scribd company logo
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

Recommended for you

Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.

htmlcssprogressive enhancement
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

responsive designresponsive web designmedia queries
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace

This document summarizes the history and evolution of web browsers and internet technologies from the early 1990s to the late 1990s. It traces the development of key browsers like Netscape Navigator and Internet Explorer. It also outlines the introduction of important web standards like HTML, CSS, JavaScript and XML. Major events included the commercialization of the web in the mid-1990s, the browser wars between Netscape and Microsoft in the late 90s, and the consolidation of online services providers toward the end of the decade.

wwwinternetjavascript
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

Recommended for you

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!

After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?

javascriptperformancenzakas
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed

My slide deck from my session, AD113: Speed Up Your Applications with Nginx + PageSpeed, at MWLUG 2015 in Atlanta, GA at the Ritz-Carlton. For more, see: - https://edm00se.io/self-promotion/mwlug-ad113-success - https://github.com/edm00se/AD113-Speed-Up-Your-Apps-with-Nginx-and-PageSpeed

reverse proxynginxpagespeed
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011

This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.

codemashjavascriptperformance
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

Recommended for you

Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview

This document provides an overview of HTML5, including its history, timeline, new features, and compatibility with browsers. Some key points: - HTML5 development is led by the WHATWG and W3C to standardize web applications. It simplifies HTML and introduces new semantic elements like <article>, <aside>, <header>. - New features include multimedia with <audio> and <video> tags, 3D graphics with Canvas, and offline/storage APIs. Forms are enhanced with new input types. - CSS3 adds animation, transitions and transforms. Performance improves with Web Workers and XMLHttpRequest Level 2. - Browser support for HTML5 features is tracked on http://caniuse

html5
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps

As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.

wpohtml5css3
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications

Slides from a brownbag tech talk at eBay. A holistic approach to web performance and intimate details on YSlow's points and grading algorithm.

ebaystoyanyahoo
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”

Recommended for you

Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt

The document discusses Adobe Experience Manager's capabilities for responsive web design. It provides an overview of responsive vs adaptive design and how AEM allows editing responsive layouts through a grid system. It then details how to set up responsive editing in AEM, including enabling the responsive emulator, layouting mode, and responsive grid. It also covers developing components for the responsive grid and leveraging breakpoints.

High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)

High Performance JavaScript provides techniques for optimizing JavaScript performance. It discusses how JavaScript execution blocks the browser UI thread, preventing responsive user experiences. It recommends limiting individual JavaScript jobs to under 50ms to avoid unresponsiveness. The document then provides techniques to improve load time performance such as dynamically loading scripts, and runtime techniques like timers and web workers to avoid blocking the UI thread during long-running processes.

javascriptperformancenzakas
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?

Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.

html5alternativecss3
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

Recommended for you

WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)

This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.

html5
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles

According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate. - Why has the web become obese? - What actions can developers and stakeholders do to combat their morbid obesity? - Are these actions expensive or hard to implement? This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.

csswebsitehtml5
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future

The document discusses jQuery 1.9, 2.0, and the future of jQuery, noting that jQuery 2.0 drops support for older browsers like IE6-8 but is 12% smaller, and introduces 12 optionally excludable modules; it promises that jQuery 1.X will be supported as long as older IE browsers are relevant and that API equivalence will be maintained between 1.X and 2.X versions; and it invites attendees to join and contribute to the jQuery 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...

Recommended for you

Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player

From the 'HTML5 player showcase/How to Build an HTML5 player' given at the Open Video Conference in October 2010.

javascripthtml5 video
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

readermobile application developmentweb applications
Web standards and Visual Studio web tools
Web standards and Visual Studio web toolsWeb standards and Visual Studio web tools
Web standards and Visual Studio web tools

How to build and deploy an ASP.NET applicaton. This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/

microsoftweb devvisual studio
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

More Related Content

What's hot

Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
Chris Love
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
FITC
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
edm00se
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
Daniel Arndt Alves
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
AEM HUB
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
Chris Mills
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
Chris Love
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
Richard Worth
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
steveheffernan
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 

What's hot (20)

Service workers your applications never felt so good
Service workers   your applications never felt so goodService workers   your applications never felt so good
Service workers your applications never felt so good
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt Responsive Websites and Grid-Based Layouts by Gabriel Walt
Responsive Websites and Grid-Based Layouts by Gabriel Walt
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
Video.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video PlayerVideo.js - How to build and HTML5 Video Player
Video.js - How to build and HTML5 Video Player
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 

Viewers also liked

Web standards and Visual Studio web tools
Web standards and Visual Studio web toolsWeb standards and Visual Studio web tools
Web standards and Visual Studio web tools
David Voyles
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
philogb
 
Social data visualization
Social data visualizationSocial data visualization
Social data visualization
Cristina Serban
 
Advanced Visualizations
Advanced VisualizationsAdvanced Visualizations
Advanced Visualizations
nsrivast
 
Data visualization in JavaScript
Data visualization in JavaScriptData visualization in JavaScript
Data visualization in JavaScript
Wenting ZHAO
 
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011
philogb
 
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the webJavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
philogb
 
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
philogb
 
SUPPORT CRED
SUPPORT CREDSUPPORT CRED
SUPPORT CRED
Alex Sandro da Silva
 
2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...
2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...
2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...
Raffa Learning Community
 
Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...
Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...
Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...
PyData
 
Data Visualization in Health
Data Visualization in HealthData Visualization in Health
Data Visualization in Health
Ramon Martinez
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
Mavention
 
Visualized Conference and jQuery Conference
Visualized Conference and jQuery ConferenceVisualized Conference and jQuery Conference
Visualized Conference and jQuery Conference
Keiichiro Ono
 

Viewers also liked (14)

Web standards and Visual Studio web tools
Web standards and Visual Studio web toolsWeb standards and Visual Studio web tools
Web standards and Visual Studio web tools
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
 
Social data visualization
Social data visualizationSocial data visualization
Social data visualization
 
Advanced Visualizations
Advanced VisualizationsAdvanced Visualizations
Advanced Visualizations
 
Data visualization in JavaScript
Data visualization in JavaScriptData visualization in JavaScript
Data visualization in JavaScript
 
New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011New Tools for Visualization in JavaScript - Sept. 2011
New Tools for Visualization in JavaScript - Sept. 2011
 
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the webJavaScript InfoVis Toolkit - Create interactive data visualizations for the web
JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
 
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
Creating Interactive Data Visualizations for the Web - YOW! Developer Confere...
 
SUPPORT CRED
SUPPORT CREDSUPPORT CRED
SUPPORT CRED
 
2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...
2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...
2016-09-28 Are You ADA Compliant? Ensuring Your Website is Accessible to Peop...
 
Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...
Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...
Up and Down the Python Data & Web Visualization Stack by Rob Story PyData SV ...
 
Data Visualization in Health
Data Visualization in HealthData Visualization in Health
Data Visualization in Health
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
 
Visualized Conference and jQuery Conference
Visualized Conference and jQuery ConferenceVisualized Conference and jQuery Conference
Visualized Conference and jQuery Conference
 

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

Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
Google web toolkit gwt training
Google web toolkit gwt trainingGoogle web toolkit gwt training
Google web toolkit gwt training
FuturePoint Technologies
 
Benefits of an Open environment with Wakanda
Benefits of an Open environment with WakandaBenefits of an Open environment with Wakanda
Benefits of an Open environment with Wakanda
Alexandre Morgaut
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
Women Who Code, Ground Floor
Women Who Code, Ground FloorWomen Who Code, Ground Floor
Women Who Code, Ground Floor
Katie Weiss
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgets
romek
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
netc2012
 
20120802 timisoara
20120802 timisoara20120802 timisoara
20120802 timisoara
Richard Rodger
 
Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
Jeremy Likness
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
Raj Lal
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
Derrick Bowen
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
Richard Rodger
 
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
CMC Limited
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
Nicolas Borda
 
jQuery On Rails
jQuery On RailsjQuery On Rails
jQuery On Rails
Jonathan Sharp
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
Vladislav Bauer
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris Chen
 
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Michael Collier
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Jeremy Likness
 
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2
Microsoft Iceland
 

Similar to Using Web Standards to create Interactive Data Visualizations for the Web (20)

Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Google web toolkit gwt training
Google web toolkit gwt trainingGoogle web toolkit gwt training
Google web toolkit gwt training
 
Benefits of an Open environment with Wakanda
Benefits of an Open environment with WakandaBenefits of an Open environment with Wakanda
Benefits of an Open environment with Wakanda
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Women Who Code, Ground Floor
Women Who Code, Ground FloorWomen Who Code, Ground Floor
Women Who Code, Ground Floor
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgets
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
20120802 timisoara
20120802 timisoara20120802 timisoara
20120802 timisoara
 
Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
 
jQuery On Rails
jQuery On RailsjQuery On Rails
jQuery On Rails
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the CloudWindows Phone 7 and Windows Azure – A Match Made in the Cloud
Windows Phone 7 and Windows Azure – A Match Made in the Cloud
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2Building Rich Internet Apps with Silverlight 2
Building Rich Internet Apps with Silverlight 2
 

More from philogb

OpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualizationOpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualization
philogb
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
philogb
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
philogb
 
The Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer ConferenceThe Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer Conference
philogb
 
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at TwitterHacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
philogb
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
philogb
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
philogb
 
La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...
philogb
 
Exploring Web standards for data visualization
Exploring Web standards for data visualizationExploring Web standards for data visualization
Exploring Web standards for data visualization
philogb
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
philogb
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
philogb
 
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
philogb
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
philogb
 
Data visualization for the web
Data visualization for the webData visualization for the web
Data visualization for the web
philogb
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
philogb
 
Principles of Analytical Design - Visually Meetup - Sept. 2011
Principles of Analytical Design - Visually Meetup - Sept. 2011Principles of Analytical Design - Visually Meetup - Sept. 2011
Principles of Analytical Design - Visually Meetup - Sept. 2011
philogb
 
PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011
philogb
 
JavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit OverviewJavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit Overview
philogb
 

More from philogb (18)

OpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualizationOpenVisConf - WebGL for graphics and data visualization
OpenVisConf - WebGL for graphics and data visualization
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
 
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...
 
The Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer ConferenceThe Geography of Tweets - BBC Developer Conference
The Geography of Tweets - BBC Developer Conference
 
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at TwitterHacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
 
#interactives at Twitter
#interactives at Twitter#interactives at Twitter
#interactives at Twitter
 
La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...La visualisation de données comme outil pour découvrir et partager des idées ...
La visualisation de données comme outil pour découvrir et partager des idées ...
 
Exploring Web standards for data visualization
Exploring Web standards for data visualizationExploring Web standards for data visualization
Exploring Web standards for data visualization
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJSJavaScript para Graficos y Visualizacion de Datos - BogotaJS
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de DatosJavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
 
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.InfoVis para la Web: Teoria, Herramientas y Ejemplos.
InfoVis para la Web: Teoria, Herramientas y Ejemplos.
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
 
Data visualization for the web
Data visualization for the webData visualization for the web
Data visualization for the web
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
Principles of Analytical Design - Visually Meetup - Sept. 2011
Principles of Analytical Design - Visually Meetup - Sept. 2011Principles of Analytical Design - Visually Meetup - Sept. 2011
Principles of Analytical Design - Visually Meetup - Sept. 2011
 
PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011PhiloGL - WebGLCamp Google HQs - June 2011
PhiloGL - WebGLCamp Google HQs - June 2011
 
JavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit OverviewJavaScript InfoVis Toolkit Overview
JavaScript InfoVis Toolkit Overview
 

Recently uploaded

How to Create Sequence Numbers in Odoo 17
How to Create Sequence Numbers in Odoo 17How to Create Sequence Numbers in Odoo 17
How to Create Sequence Numbers in Odoo 17
Celine George
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
marianell3076
 
NLC English 7 Consolidation Lesson plan for teacher
NLC English 7 Consolidation Lesson plan for teacherNLC English 7 Consolidation Lesson plan for teacher
NLC English 7 Consolidation Lesson plan for teacher
AngelicaLubrica
 
matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
SarahAlie1
 
NLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptxNLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptx
MichelleDeLaCruz93
 
The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP
Celine George
 
Webinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional SkillsWebinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional Skills
EduSkills OECD
 
(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
MJDuyan
 
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
thanhluan21
 
Front Desk Management in the Odoo 17 ERP
Front Desk  Management in the Odoo 17 ERPFront Desk  Management in the Odoo 17 ERP
Front Desk Management in the Odoo 17 ERP
Celine George
 
How to Install Theme in the Odoo 17 ERP
How to  Install Theme in the Odoo 17 ERPHow to  Install Theme in the Odoo 17 ERP
How to Install Theme in the Odoo 17 ERP
Celine George
 
Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024
Elizabeth Walsh
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...
Nguyen Thanh Tu Collection
 
Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...
Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...
Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...
MysoreMuleSoftMeetup
 
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
PECB
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
SrimanigandanMadurai
 
Split Shifts From Gantt View in the Odoo 17
Split Shifts From Gantt View in the  Odoo 17Split Shifts From Gantt View in the  Odoo 17
Split Shifts From Gantt View in the Odoo 17
Celine George
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
KlettWorldLanguages
 
No, it's not a robot: prompt writing for investigative journalism
No, it's not a robot: prompt writing for investigative journalismNo, it's not a robot: prompt writing for investigative journalism
No, it's not a robot: prompt writing for investigative journalism
Paul Bradshaw
 
Book Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docxBook Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docx
drtech3715
 

Recently uploaded (20)

How to Create Sequence Numbers in Odoo 17
How to Create Sequence Numbers in Odoo 17How to Create Sequence Numbers in Odoo 17
How to Create Sequence Numbers in Odoo 17
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
NLC English 7 Consolidation Lesson plan for teacher
NLC English 7 Consolidation Lesson plan for teacherNLC English 7 Consolidation Lesson plan for teacher
NLC English 7 Consolidation Lesson plan for teacher
 
matatag curriculum education for Kindergarten
matatag curriculum education for Kindergartenmatatag curriculum education for Kindergarten
matatag curriculum education for Kindergarten
 
NLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptxNLC Grade 3.................................... ppt.pptx
NLC Grade 3.................................... ppt.pptx
 
The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP
 
Webinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional SkillsWebinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional Skills
 
(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening(T.L.E.) Agriculture: Essentials of Gardening
(T.L.E.) Agriculture: Essentials of Gardening
 
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
 
Front Desk Management in the Odoo 17 ERP
Front Desk  Management in the Odoo 17 ERPFront Desk  Management in the Odoo 17 ERP
Front Desk Management in the Odoo 17 ERP
 
How to Install Theme in the Odoo 17 ERP
How to  Install Theme in the Odoo 17 ERPHow to  Install Theme in the Odoo 17 ERP
How to Install Theme in the Odoo 17 ERP
 
Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024Howe Writing Center - Orientation Summer 2024
Howe Writing Center - Orientation Summer 2024
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 12 - GLOBAL SUCCESS - FORM MỚI 2025 - HK1 (C...
 
Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...
Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...
Configuring Single Sign-On (SSO) via Identity Management | MuleSoft Mysore Me...
 
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
 
Split Shifts From Gantt View in the Odoo 17
Split Shifts From Gantt View in the  Odoo 17Split Shifts From Gantt View in the  Odoo 17
Split Shifts From Gantt View in the Odoo 17
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
 
No, it's not a robot: prompt writing for investigative journalism
No, it's not a robot: prompt writing for investigative journalismNo, it's not a robot: prompt writing for investigative journalism
No, it's not a robot: prompt writing for investigative journalism
 
Book Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docxBook Allied Health Sciences kmu MCQs.docx
Book Allied Health Sciences kmu MCQs.docx
 

Using Web Standards to create Interactive Data Visualizations for the Web

  • 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
  • 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
  • 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
  • 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