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. 

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:

• Mike Bostock's Tutorial -- this is the creator of the framework
• Vienno's youtube channel -- great for javascript newbies. Create a donut chart & a tree chart, and explore paths. 

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:

• http://jburrows.wordpress.com/2011/02/21/documentation-for-graphael-g-line-js/
• http://bocoup.com/weblog/alternate-x-axis-intervals-in-g-raphael-js-linechart/

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.

More Notes on Erlang

So, I have been talking about Erlang a lot. It just seems to work so well  with my thought process. And for crying out loud: the syntax is so similar to written language! Clauses? Periods at the end of statements? Semiclons? How can you not love that?

Yes, it is not useful for processing huge amounts of data and crunching numbers. What it is good for, however, is allowing a lot of connections to the application without crashing. This is why Whatsapp was able to have ~500 million users and a staff of only, what was it? Thirty-two?

Since it is multi-core, it is actually faster than node.js. Not as fast as c, but it is often compared to node. So I will just tell you: Erlang is faster. I think the only reason node.js is popular is because there are more people who already know javascript, so what is one more framework? It is easy to implement and learn node if you already know javascript.

So, here's the deal. Erlang is really good at pattern matching and sending messages, and allowing a huge number of connections to the application. Hm...what can that possibly be used for? What is it that people are now talking about? I'll give you one hint: "Refrigerator".

Ping me in the comments if you want to talk about it.

A week full of snafus...technological and otherwise.

During my interview process, I sometimes wonder if anyone ever really looks at my blog to see what I am up to.

I've had interviewers tell me they did look, which I really appreciate! However, if you are one of the one or two people who do possibly look at this blog, you may have noticed that it -- and my github account have both been very quiet over the last week or so.

I've had a week or so of my attention occupied with first a family emergency, then the untimely death of my hard drive, and the loss of everything I was currently working on, as well as the configuration of my system. Lessons learned: 1) not only should I back up, but I should back up often. 2) Next time, I am going with solid state.

On the upside, I now know how to change out the hard drive on my mac. I was able to upgrade it (with some help) to one terabyte and it runs like new!

Today, I have been getting my system all reconfigured, resetting passwords, downloading software and retrieving licenses...

Tomorrow I should be able to get to work!

Some notes on Erlang

I'm following this tutorial. Does anyone know of any that are better?

First note: There are no strings in Erlang. WHAT?? That's right. There are no strings. They can be processed, but since Erlang started as a language used in telecom, it is not the best language to process strings.

Joe Armstrong, the inventor of Erlang, gives a presentation here. It is looking like Erlang is used to build a program for concurrency and speed by parallelizing and utilizing more of the cores as hardware gets faster and faster.

I love this analogy: Joe Armstrong shares this analogy about programming languages. C is car that is easy to drive, but it breaks down occasionally. Java is like a family station wagon -- it's a little heavy. Erlang is like a fleet of little cars that work together to take you where you want to go.

How can you not love a powerful data retrieval tool like this? I'm liking the pattern matching.

 91> Weather = [{toronto, rain}, {montreal, storms}, {london, fog}, {paris, sun}, {boston, fog}, {vancouver, snow}]. 

[{toronto,rain},

 {montreal,storms},

 {london,fog},

 {paris,sun},

 {boston,fog},

 {vancouver,snow}]

92> 

92> FoggyPLace = [X || {X, fog} <- Weather]. 

[london,boston]

93> 

93> 

Check out my first program here!

Some Tools

More later.

I'm Getting Started with Angular Templates and Routes.

It looks like Angular is the latest of the javascript technologies to use on the rails stack to create single page applications. Here is some really, really simple code in my github repo.

MongoDB & Node.js

I've been exploring both Mongo DB recently, and Node.js. I keep hearing about how they are "hot" right now -- along with others, like angular.js.  As many of us know, though, using a technology just because everyone's talking about it is not justification for why we should use it. Each technology offers inherent functionality and benefits. It should be used because the application -- or the development team -- would perform better using that technology.

Can you justify the use of a particular technology in your project or are you using it just because it is "hot" and everyone is talking about it?

So, whenever I hear that a company is seeking a developer with skills in these two technologies, I am compelled to ask, "Why are you using this technology?" to better understand what it's about and why people are using it. I also ask it to see if this is a team I want to work with. If they don't have a good answer, chances are their projects are not well planned and designed. I am investigating the benefits and applications of each of these to better understand why I might use them in the future.

I was at She's Geeky last week and had some good conversations about both databases and identity (but that's another blog post). Sarah Mei led a session asking about MongoDB and its uses. Our group came to the conclusion that it is good for obviously, "unstructured" databases. But when do you need an unstructured database? are you trying to use an unstructured database, when really your data would perfectly fit into a tabular format?

The really valid uses for it seemed to be when 1) when you have a lot of user generated content, and 2) When the structure of your data may change often and be somewhat ephemeral. I've noticed that it seems to be used on a lot of music and media-related apps, in which both 1 and 2 could apply. I will elaborate on this later.

As far as Node.js goes, I am learning that it is great for uploading documents, generating reports, and generally performing non-blocking or asynchronous processes -- processes that may take some time, but you want to continue while allowing the user to perform another task concurrently.

In the next few days, I'm going to do some tutorials and get an example or two up. In the mean time, please tell me: How have you used node or MongoDB in your application. Why did you use it?