Data Visualization with Web Standards

I recently spoke at the 360|Flex conference in Devner, CO on “Data Visualization with Web Standards”.  This presentation was focused upon techniques for presenting data in an easily-consumable visual manner using only HTML, CSS and JavaScript.  Below you can view my presentation slides and a brief summary.

Basically, there are 5 general ways to visualize data using web-standards techniques – here is a brief overview with pros & cons:


<img>

You can embed images using the html <img> that have server-rendered data visualizations. This is nothing new… They are very basic, but will certainly work.

  • Not interactive
  • Requires online & round-trip to server
  • No “WOW” factor – let’s face it, they are boring
  • Example: Google Image Charts

HTML5 <canvas>

You can use the HTML5 <canvas> element to programmatically render content based upon data in-memory using JavaScript. The HTML5 Canvas provides you with an API for rendering graphical content via moveTo or lineTo instructions, or by setting individual pixel values manually.  Learn more about the HTML5 canvas from the MDN tutorials.

  • Can be interactive
  • Dynamic – client side rendering with JavaScript
  • Hardware accelerated on some platforms
  • Can work offline
  • Works in newer browsers: http://caniuse.com/#search=canvas

Demos:


Vector Graphics (SVG)

Vector graphics can be used to create visual content in web experiences.

  • Client or Server-side rendering
  • Can be static or dynamic
  • Can be scripted with JS
  • Can be manipulated via HTML DOM
  • Works in newer browsers (but not on Android 2.x and earlier): http://caniuse.com/#search=SVG

Demos:


HTML DOM Elements

Visualizations like simple bar or column charts can be created purely with HTML structures and creative use of CSS styles to control position, visual presentation, etc… You can use CSS positioning to control x/y placement, and percentage-based width/height to display relative values based upon a range of data.   For example, the following bar chart/table is created purely using HTML DIV containers with CSS styles.


WebGL

WebGL is on the “bleeding edge” of interactive graphics & data visualization across the web. WebGL enables hardware-accelerated 3D graphics inside the browser experience. Technically, it is not a standard, and there is varied and/or incomplete support across different browsers (http://caniuse.com/#search=webgl).  There is also considerable debate whether it ever will be a standard; however there are some incredible samples out on the web worth mentioning:

Feel free to leave a comment with any questions.
Enjoy!

  • Pingback: JavaScript and ActionScript Data Visualization Libaries & Toolkits | BlattChat

  • Pingback: Andrew Trice » Blog Archive » Enterprise Android Apps W/ PhoneGap

  • Ana Maria Teodorescu

    Dear Sir,
    I wrote you previously asking if it is possible to plot points read from a file. In the end I managed to read my 320000 points from a json file and it works perfectly on the client side. Very fast! Now I have another small issue. These 320000 points represent objects that belong to different families. Is it possible to use different colors to plot the different families like in highcharts or flot?
    I also tried these two but they fail to have a good performance with such a big amount of data…

    Thanks again,
    Ana Maria

    • http://www.tricedesigns.com Andrew

      If you are trying to plot that many points, the HTML5 Canvas approach is your only way to go. You can set colors, strokes, fills, pixel values, etc.. for each data point/rendering. However, if you try to use SVG a SVG-based library it will be incredibly slow, probably unusable. In fact, most “off the shelf” libraries cannot handle this much data. I advise using a completely custom solution leveraging HTML5 Canvas.

  • suri

    Hi andytrice
    I am going to working one of the project,it should support IOS, Android, windows and black berry. it has requirement to display various charts like pi, bar charts , etc… In the same way online/ offline maps like Google maps. i tried a lot to find some help about above once, can you please share some information and examples about it….

    Thanks in advance.

    Regards
    Suresh

    • http://www.tricedesigns.com Andrew

      Hi Suresh,
      You can store data locally using Local Storage, HTML5 Cache mainfest, or WebSQL/IndexDB (where supported). It depends on how you’ve built your application to give any kind of definitive answer. If you are using the mobile browser only, I would use HTML5 caching. IF you are creating a hybrid app, this is possible with PhoneGap (http://phonegap.com/)

  • Ana Maria Teodorescu

    Dear Andrew,

    I am an astronomer and I developed a working application based on your BitmapChart.js. It is working nicely on IE9 and recent versions of Firefox, Safari, Chrome and Opera. The problem is that I need to render it operable on IE8. I was told by a colleague from Germany who is using IE8 on his computer at work (he cannot use other browser by the way, due to the centralized system where he works) that he has problems using my application. Is it possible to fix this problem in some way?
    I thought that using this tag in my index.html could solve the problem:

    but it seems that it is not working. And I cannot test it myself since I do not use windows on any of my computers….

    Thanks a lot,
    Ana

  • Ana Maria Teodorescu

    Sorry, just adding something to my previous email. I added this tag in the index.html:

    I included excanvas.min.js in my js directory.

    Best regards,
    Ana

    • http://www.tricedesigns.com Andrew

      Unfortunately, no it will not work in IE8. IE8 does not support the HTML5 Canvas, which is used by this visualization. You can see where Canvas is supported here: http://caniuse.com/#feat=canvas

      You might be able to leverage a Google Chrome frame to render it inside of Chrome, inside of IE: http://www.google.com/chromeframe However, this will only work if that person has the ability to install the Chrome frame onto their system.

      Any chance you can share the visualization that you have created? I’d love to see it.

      • Ana Maria Teodorescu

        Yes, here it is: hamilton.dm.unipi.it/astdys2/Plot/
        It was tested on IE9 and recent versions of Firefox, Safari,Chrome, Opera.
        I would very much appreciate a feedback from you!

        I was wondering if it is possible to re-do this application using graphic tools compatible
        also with IE8 (is it worth?). I am very interested in a quick response from the server when plotting
        so many points. Up to now I’ve found that your solution is the best…

        Thanks a lot,
        Ana