Ask Your Question
2

It it possible to make interactive data visualisation using HTML5 ?

asked 2013-06-20 08:48:55 -0500

PAC gravatar image

Everybody talks about making interactive dataviz using D3js. I wonder it is possible to use HTML5 to get some similar results.

edit retag flag offensive close merge delete

Comments

html5 is such a consumer term, you're going to have to be more specific. some people say html5 is markup only, some mean javascript + html when they say html5, and some actually say html5 and javascipt. in reality, html5 requires javascript for api functionality, and thus go hand-in-hand.

jalbertbowdenii gravatar imagejalbertbowdenii ( 2014-04-15 17:23:07 -0500 )edit

5 Answers

Sort by » oldest newest most voted
2

answered 2013-06-21 00:05:57 -0500

cspruck gravatar image

I think it depends on what kind of visualization you need and how much detail you require, but it'll be tough to avoid using JavaScript libraries for charting or viz needs beyond the basics. You could do a lot with offline tools and export HTML and JS (or even static images), if that was an option. Pretty much everything I'm mentioning below still involves JavaScript, but they're HTML5/canvas-based tools or libraries as opposed to SVG or something else.

Chart.js - lightweight, uses canvas

Flotr2 - library for drawing HTML5 charts and graphs.

Paper.js - Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

sigma.js - sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element.

jQuery-Visualize – HTML5 canvas charts driven by HTML table elements (using jQuery).

Processing.js - A port of Processing (which just had a major 2.0 release), Processing.js seems to be designed for browsers and canvas. Check out the Developer QuickStart and JavaScript QuickStart for details and info on how this uses JS and canvas, as well as coding approaches (e.g. Processing native code vs. Processing code with JS.) It also has 2D and 3D rendering modes (involving canvas and WebGL) which are explained at http://processingjs.org/articles/RenderingModes.html

8 CSS Techniques for Charting Data - an older article, but may still be relevant

Hope this helped!

edit flag offensive delete link more
1

answered 2013-06-20 10:22:08 -0500

mihi gravatar image

Good question: <canvas> is actually a html5 feature... Also you could use css to do some basic things like bar charts etc (just assign different width to them etc.) and make hover effects... But for some more things you'll run into needing js. Also it's quite cumbersome to do things by hand...

edit flag offensive delete link more
0

answered 2015-05-04 17:26:47 -0500

curran gravatar image

Here's a tutorial on YouTube that shows the basic structure of visualizations without D3, using SVG alone. The later part of the tutorial covers how to use D3, but the same concepts can be applied using other DOM manipulation libraries.

edit flag offensive delete link more
0

answered 2014-04-04 13:20:54 -0500

chloeB gravatar image

cspruck provided a great list, to which I'd like to add ZingChart. Chart code is written in Javascript (with very CSS like syntax) and charts render in SVG, HTML5 canvas, VML, and even Flash if necessary.

edit flag offensive delete link more
0

answered 2014-04-05 11:45:28 -0500

brandsteve gravatar image

updated 2014-04-05 11:46:31 -0500

There's a new open source project about to be announced that will change the game for HTML5. I wouldn't be surprised to see github extensions for data viz.

Check out famo.us

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

2 followers

Stats

Asked: 2013-06-20 08:48:55 -0500

Seen: 10,634 times

Last updated: May 04 '15