Category: JavaScript

Review: Data Visualization with D3.js Cookbook

I’ve been looking around for decent data visualization book on D3.  I think I’ve found it.

Data Visualization with D3.js Cookbook by Packt Publishing hits the mark.

It’s the right blend of detailed explanation combined with cookbook recipes to get going.

D3 is JavaScript library that separates data from presentation, but does so in a really cool manner.  When the underlying data is updated, the components on the screen that visualize it can be made to update to reflect it. This can lead to some pretty amazing transitions and interactivity with surprisingly little code.

D3 looks at the data you have visualized already and the data you want to visualize and divides them into three piles: New Data, Updated Data, and No Longer Present Data.  Transformations can be done for each set, for instance allowing new data to fade in, updated data to morph, and removed data to fade away.  D3 is focused primarily on just this task, so actual visualizations are up to the coder.

However, because D3’s nature allows each element to only focus on the part of the data it needs to, and to substitute that content into the HTML, CSS, and/or SVG that’s needed, it provides a surprising amount of flexibility and features and does so with impressive speed and efficiency.

The Data Visualization with D3.js Cookbook explains the above concepts with some well formed examples, and then proceeds to demonstrate how to make bar charts, pie charts, line charts, and other more complex multi-dimensional visualizations and add interactive interfaces to them. This is where the book absolutely shines!

Each example is carefully constructed and compact, serving both as a learning tool and a starting point for your own code.  As such, I’d highly recommend the book and convey that it’s very approachable, even to those with a limited JavaScript background.

I would recommend some degree of caution however, in particular with the Kindle book. This is not a fault of Packt Publishing, but with Amazon.  And I’ve spoken to them at length about it.  The Kindle viewer is intended of rendering pages of readable text to humans in a nicely formatted manner.  However, it is terrible (as of the time of this writing) as to maintaining code formatting and spacing, which is absolutely essential for any cut’n’paste operations. Be prepared to copy code by hand, and if you’re going to go that far, perhaps the paperback version is more to your liking.

That said, I did happen to notice a few errata in the examples; nothing major, nothing you can’t move past, and nothing that isn’t rectified by going onto GitHub for the updates.

All in all, after having gone through a number of books about D3.js, this one has been my favorite and the most useful.

 

JSON and Undefined Object Properties

Ran into an interesting case where the JavaScript object coming out of JSON wasn’t the same as the JavaScript object encoded going in.

When are JSON.parse() and JSON.stringify() not inverses of each another?

Here’s when.

In JavaScript it’s possible to define an object that has an undefined property:

var o = {
    a: "Hello",
    b: undefined
};

It’s then possible to iterate over all the objects properties and see the values as well.

for (var p in o) {
    alert( p + ": " + o[p] );
}

This will show “a: Hello” and “b: undefined”.

Now, to JSON-ify the object and reconstitute it back.
o = JSON.parse( JSON.stringify(o) );

Doing the for-loop again will reveal the object now only has the “a” property (the value is still “Hello”).

Try it.

While I get it, I’m not sure I like it. Ideally, I’d like anything coming out of JSON to be the same as anything going into it.

Assume this object:

var me = {
    mySiblingsGender: undefined
};

This is one of those cases where several subtleties rear their head on edge cases.

First, a known value for mySiblingsGender might be male or female. A null would indicate there is no gender, perhaps by a horrible vegetable peeler accident. (Oh my!) But an undefined value indicates there is one, we just don’t know what it is.

Removing the property completely instead conveys that there is no sibling (absence) — something totally different than null (not having any) or undefined (unknown).

While it’s splitting hairs, if not kindling for religious coding wars, it’s useful to know that JSON-out may not always be the same as JSON-in.

Installing node.JS on OS X 10.6

Having problems installing Node.JS because of missing OpenSSL problems? Here’s the solution to that problem for OS X.

When I went to go install a copy of node.JS on OS X 10.6, I ran into a little snag. Using git, or more specifically Tower, I was able to pull node right from github.

The steps to install node are as simple as:
$ ./configure
$ make
$ sudo make install

However, I was having problems at the ./configure stage. It was reporting:

Checking for openssl : not found

This resulted in a link error if one tries the make command.

Many of the web resources suggest installing libssl-dev, although being on OS X (and not Ubuntu) and having openssl already installed on my system, it turns out it was the detection mechanism and not a missing library that was the problem.

What I needed was the pkg-config package, because if it isn’t around, the configure step simply skips the check reporting openssl isn’t present.

To install it, I used Homebrew, a fantastic modern package manager that works exceptionally well with OS X.

All I needed to do was this step, and then the commands above.
$ brew install pkg-config

Node then worked like a champ.