Data Visualization in HTML5 with jQuery & Wijmo
Upcoming SlideShare
Loading in...5
×
 

Data Visualization in HTML5 with jQuery & Wijmo

on

  • 20,640 views

HTML5 offers rich new options for data visualization like SVG and Canvas. We will look at the new technology available in HTML5 as well as tools to help use it. Wijmo is a jQuery library that makes ...

HTML5 offers rich new options for data visualization like SVG and Canvas. We will look at the new technology available in HTML5 as well as tools to help use it. Wijmo is a jQuery library that makes charting in SVG easy and work in every browser. We will use it to build some killer dashboards in HTML5. With Wijmo we can create bar charts, line charts and pie charts with just a single line of jQuery. We can use simple html tables to get data from or load in data using Ajax. This session will walk you through from the basics to advanced data visualization in HTML5.

Statistics

Views

Total Views
20,640
Views on SlideShare
6,689
Embed Views
13,951

Actions

Likes
2
Downloads
55
Comments
0

15 Embeds 13,951

http://wijmo.com 12107
http://banzor.us 1655
http://stage.wijmo.com 148
http://www.banzor.us 14
https://www.google.com 8
http://localhost 7
https://www.google.co.il 2
http://www.google.com 2
http://webcache.googleusercontent.com 2
http://mobile.dudamobile.com 1
http://www.slashdocs.com 1
http://www.365dailyjournal.com 1
http://translate.googleusercontent.com 1
http://131.253.14.66 1
http://1.gravatar.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • What is Data Viz?Why Visualize?Patterns and CorrelationsSummarizeUnderstandingHow to VisualizeChartsGaugesMapsTechnology used for Data VisFlashHTML5 OptionsCanvasSVGDiff?Danger Zone!Pie ChartsChange origin of axisOmissionMisleading relationshipsDemos

Data Visualization in HTML5 with jQuery & Wijmo Data Visualization in HTML5 with jQuery & Wijmo Presentation Transcript

  • Data Visualization in HTML5
    Chris Bannon
  • about:me
    Chris Bannon
    Product Manager
    http://banzor.us
    @b4nn0n
    “Banzor”
  • Data visualization is the study of the visual representation of data.
    I prefer binary
  • Why Visualize?
    Find Patterns and Correlations
    Summarize Large Data Sets
    Understanding Information
    Because you are human…
  • How Do We Visualize Data?
    Charts
    Gauges
    Maps
    Sizes/Colors
  • Don’t Thimk So Hard
    See trends instantly
    Make quick decisions
    Comprehend millions of data points
    Stop guessing
    Who doesn’t love stats?
  • Visualization Can Save Lives
    http://www.motherboard.tv/2011/1/28/was-space-shuttle-challenger-a-casualty-of-bad-data-visualization
  • …Beware of Evil Visualizations!
    Pie charts suck*
    Change origin of axis
    Data Omission
    Misleading relationships
    I’m looking at you Politicians and Media!
  • Yesterday’s News
  • Today’s Technology
    1337!
  • HTML5 Graphics
    SVG (Legos)
    Markup defined graphic
    DOM-friendly
    Vector based
    Scales well
    Very efficient
    Ideal for interactive inline graphics (charts)
    Canvas (Etch-o-sketch)
    2D drawing surface
    JavaScript API to draw
    Raster based
    3D via WebGL (future)
    Ideal for larger-scale graphical applications (games)
  • Raphael JS
    JS API for drawing SVG
    Works cross-browser
    VML in IE
    Supports Animation
  • Wijmo – UI for the Web
    I make UI easy!
  • Wijmo – UI for the Web
    Builds on jQuery UI
    jQuery Grid
    HTML5 SVG Charts
    CSS3 Themes & Themeroller
    Extended for
    JavaScript (everywhere)
    WebForms
    MVC
    Wijmo is a robot…
  • $(“code”).show();
    Finally
  • doSomething();
    Get Wijmo: http://wijmo.com/
    Rate me: http://spkr8.com/t/8686
    Fork me: https://github.com/banzor
  • $(this).end();
    Goodbye!