i recently spoke at the
basically, there are 5 general ways to visualize data using web-standards techniques – here is a brief overview with pros & cons:
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.
requires online & round-trip to server
no “wow” factor – let’s face it, they are boring
google image charts
html5 canvas from the mdn tutorials
can be interactive
hardware accelerated on some platforms
can work offline
works in newer browsers:
– open source charting library using html5 <canvas>
“one million points” scatter plot – let the page load, then use the mouse to click and drag regions to “drill into”. this is a live visualization that shows a scatter plot with a histogram for massive data sets by manipulating individual pixels.
“lil doodle” ios app
. this is not data visualization, just shows you programmatic drawing using html5 canvas.
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):
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.
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 (
). 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.