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.
Note (in both Dev Tool images) the dynamically created <p>New paragraph!</p>.
THE FINAL SCREENSHOT AT THE BOTTOM
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).
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.