A Very Quick Look at d3.js

I finally got a chance to dig into d3.js today. From what i can tell, d3.js is an amazing dom/svg animation framework. To be honest, i have no idea how to describe it. There very well is much, much more under the hood than i'm aware of.

The jQuery-like Parts

d3.js is a lot like jQuery insofar as many of the operations are based upon items selected with CSS-selector style syntax. For example, d3.selectAll('div') probably looks fairly intuitive to anyone who has written jQuery before-- it grabs all divs on the page.

Another jQuery-esque thing about d3.js is that its API is chainable, so the following code:

obviously sets the width of all divs to 300, height to 400

d3.selectAll('div').on('click',function(){alert('hi!');});-- i bet you can already tell how events in d3.js work--exactly like (post 1.7) jQuery.

d3.js data()

One of the things that makes d3.js initially difficult to understand is the .data() function. Here's a code snippet that does a little explaining.

So the above script maps (hmmmm...) the data to the items it gets passed in order. So "hello" would be the innerHtml of the first div, "world" would be the content of the second... makes sense. The data that you pass in can be strings, numbers, object literals, anything. (Hmmm I wonder what you could do with functions...?)

What if you had 2 divs on the page, and the data() array had 3 items in it? How would it map that? Well, it would map the first 2 to the first 2 divs, neglecting the other piece of data. There is a way to work with that extra piece of data though--.enter().

d3.js enter()

.enter() allows you to do something with left over data. Here's an example:

So we were able to add extra divs on with .enter() in order to represent all the data that we passed into it.

Full Bleed d3.js example

Example: Animating SVG Circles on Mouseover

The really interesting stuff i see with d3.js involves the transition() function and SVG, which is supported in Chrome, Firefox, IE9, iOs, and Android(Honeycomb). Here's a script i wrote that draws circles in the DOM which move as soon as you hover over them.