First D3 Baby Steps

Here’s my first line of proper D3 code. Fortunately for me, I’m familiar with Object-Oriented Programming OOP concepts so learning this didn’t break my brain. It also helps that Scott Murray‘s explanations and teaching methods in Interactive Data Visualization for the Web are practically perfect in every way.

Here’s my code from the exercise. Focus on line 12 and the absence of a <p>paragraph</p>.


d3 tells the browser to go get some shizzle from the d3.js file linked in line 7. select tells the browser it wants to mess with the “body” and append (add) a “p” at the end of the body. In that paragraph we add some text “New paragraph!”. In short, an as yet nonexistent paragraph element will be created on the fly.

If you’re saying, “So what?” (always a legitimate question in the learning process–second only in importance to “Why?”), see the final screenshot at the bottom.

Below are the results in Firefox‘s Firebug and Chromium’s Developer Tools.

Firebug de Firefox

Firebug de Firefox

Note (in both Dev Tool images) the dynamically created <p>New paragraph!</p>.

Developer Tools de Chromium

Developer Tools de Chromium


So what. In the exercise below we have an array representing potential data in a huge file kept elsewhere. For every element in the array, D3 starts thinking about potential paragraphs (line 14), peeks at the data in the array (line 15) and sees five items, creates five placeholders for paragraphs for those five items (line 16), creates paragraphs where the placeholders are (line 17), and puts text in those paragraphs (line 18).

Code and Chrome's Dev Tools

Code and Chrome’s Dev Tools

So what? Now I know how to dynamically create containers in which I put stuff based on data (data = stuff I want to put in those containers). In a previous post, I learned to create images using code. Add those two bits of knowledge and I can dynamically create custom/adaptable images based on data.

It’s like Christmas.


About jotascript

Aiming to please. Seeking to impress.
This entry was posted in D3, Data Visualization and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s