SVG: The best way to graph quantitative data

http://developers.simplegeo.com/blog/2011/01/05/svg-the-best-way-to-graph-quantitative-data/

by rohanjon • 16 years ago

54 15 16 years ago

developers.simplegeo.com

pygy_• 16 years ago

RaphaelJS offers the advantages of SVG with an IE fallback. It's a Javascript library that outputs VML in IE6+ and SVG everywhere else.

The graphs can be manipulated in JS after their creation to create animations.

http://raphaeljs.com/

jacobolus• 16 years ago

Also has the disadvantage of adding a lot of unnecessary overhead to SVG, changing how you interact with it, and preventing you from using lots of SVG features. For anything that needs much redrawing or interaction, the IE fallback can be extremely slow.

If you have reasonably simple needs or can adapt an existing Raphael demo, go for it. For my own projects, I don’t think it’s worth it, but YMMV.

Protovis is a much more exciting SVG framework.

Xurinos• 16 years ago

I favor Protovis (quick) and jquery.svg (custom).

scw• 16 years ago

The library they're using, b3, was developed by some of the same folks as Protovis. Protovis looks interesting, thanks for the link.

3pt14159• 16 years ago

Naw, SVG is a good way some of the time. It's very context specific.

hc5• 16 years ago

It's worth noting that Android browsers don't support SVG (yet).

msy• 16 years ago

To make that even more..fun the support is there but disabled and the dev team have refused to give any kind of timeline. I assume there's either some significant performance issues or glaring bugs. This seems odd given it's part of webkit & runs just dandy on iOS.

redwood• 16 years ago

Hadn't heard of simplegeo: look cool...one of the only startups wthout a jobs page: p

fletchowns• 16 years ago

If you are interested in SVG charting engines, check out Highcharts. Used them on a project recently and really liked how it turned out. It's a shame that VML performance in IE is so terrible when SVG performance in Chrome is so awesome.

http://www.highcharts.com/

megaman821• 16 years ago

Highcharts is definitely one of the most impressive chart solutions I have seen.

I don't remember its VML performance being particularly slow but I do know its' SVG performance screams in IE9.

magicseth• 16 years ago

Ironically, Adobe used to be the biggest supporter of SVG... before they purchased Flash. Their svg renderer was by far the best in the field at the time, and supported lots of wonderful features, including great ECMAscript (Javascript), had the ability to build AJAX-like interactions using remote requests, and was fundamentally awesome.

It never made it out of beta and got killed when Flash became Adobe's new sweetheart. Very sad.

eitland• 16 years ago

I once made a GPS navigation system using IE 6 (!) in fullscreen, the Adobe flash plugin (for SVG and ECMAScript), SVG files on local disk and a small program that got the GPS coordinates from the receiver and added them to a file in the same directory. This was a few years ago before mobile internet became cheap enough for mainstream use.

chrisbroadfoot• 16 years ago

Cool. But where's the live demo?

Also - just one snarky comment on JS style:

  if(!!document.createElementNS 
   && !!document.createElementNS('http://www.w3.org/2000/svg, "svg").createSVGRect) {

No need for the bangs!

benatkin• 16 years ago

d3 is really interesting from a coding standpoint. It's a bit like a fancy orm like SQLAlchemy, Sequel, or the new ActiveRecord with arel. Instead of transforming model data it transforms view data, though. It's worth a look IMHO.

https://github.com/mbostock/d3

infocaptor• 16 years ago

SVG is slower than html5 canvas. my preference would be still html5 due to performance reasons. It is good to use a combination of both. For SVG files can be converted to javascript code and vice versa

SVG: The best way to graph quantitative data

Related Stories