Monday, October 13, 2014

gRaphael Line Chart With Grid & Popup Tags

I've been learning a few different data viz applications and am learning a bit about what they are each capable of.

Here is an example of a line chart I had to build in Raphael, using the gRaphael library. Why Raphael?

  • It's fairly light weight & makes it easier to render SVG objects without drawing them by hand. 
  • It is backward compatible to IE 8. The company I'm working for has clients that are slow to update to the most current browsers, so backwards compatibility is required. 
Some drawbacks: 
  • It is really poorly documented. 
  • You can not control the style of the axes or placement of the labels. The labels in my example are simply divs that are placed using css. 
  • You can not easily do grids. This is kind of a joke. The grid in my chart is actually a table inside a div that has the borders turned on. There are several divs in this chart, and they are stacked on the z-index to create a hierarchy. The white square is at -10, the grid is at 0, and the line chart itself is at 10. 
You may be wondering why I did not do a set with the white graphic and the line chart -- or simply make the background of the chart white. The problem is the grid. As I mention above, I had to try to sandwich the grid between the line chart and the background. For some reason, the z-index settings seem to not be working and I need to try to get it to sit just behind the orange line. They block access to the tags. 

The popup tags are set by x & y coordinates, but are populated with yet a third data set. 

I'll post an updated solution later. In the meantime, I'm going to look for a libraary that does exactly what we need it to so we don't have to do all the klugy workarounds. 


Wednesday, October 1, 2014

JavaScript Frameworks


Some Javascript frameworks I've been using lately:

Backbone.js: A front end framework for single page applications in an MVC framework.

d3.js: A Javascript framework specifically for graphic data representation. Utilizes SVG, but is much more rich and complex as far as data integration than raphaël.js.

Some good d3 tutorials:


raphaël.js: a light weight library for creating simple vector graphics. Better for backwards browser compatibility than d3.js. The axes are not easily configurable and one of the complaints many have about it is how poorly it is documented.

Here are some blog posts I found about it:



three.js: A Javascript framework for 3d graphics.

tween.js: A javascript tool to do tweening in animations. 

node.js: A javascript framework to create an environment for multi-core applications.