Recently (I'm far too tired right now to think of the actual date), we went through a sprint learning the basics of d3. Really the sprint was meant to be a learning path to understanding documentation with little to no guidance (which is definitely something I'd like to touch on, but in another blog post). But there was something else I learned from that particular sprint, and though it was a minor take away in the scheme of the project, it's something I would like to quickly touch on.
For those of you that don't know - d3 is a JavaScript Library for visual manipulations or representations of data. Basically, it turns data into pictures. That's an over simplification for sure, but for our purposes, that's all you need to know.
If you've ever used jQuery, d3 will look hauntingly familiar to you. The two libraries share many similar methods and are syntactically very close. Both are commonly used to manipulate the DOM (ie, change things on HTML documents/websites) and both are extremely object/method oriented.
To give you a quick example, let me show you one line of code my partner and I used during the d3 sprint:
Just a quick example of d3. I'll go over very briefly what's going on, but for an in depth look into the mechanics of d3, I would suggest looking through the documentation.
Creating a variable board and setting it equal to the first element the d3 selector finds with a class of 'board'.
Adding an SVG element to the board element. Once again, if you're not familiar, I would suggest a quick google.
Giving the SVG these two attributes. If settings.w and settings.h were both equal to '500px', this would be the same as setting up an HTML element like so:
But to get to the meat of things, for those of you, like me, with less of a background in Object Oriented Programming, or OOP, this system of stringing together methods may seem rather alien, and more confusing that it needs to be. For one thing, the fact that this piece of code takes up four lines in purely aesthetic. It is the exact same as calling each of these methods one after another on the same line.
But what makes this possible? It seems a really odd idea to the novice OOP engineer to call a method on another method. But to understand what's really going on, we need to look behind the scenes. For simplicity's sake, I'm going to create my own example:
Here, I've created an obj with two keys, name and money, and two methods, earnMoney and spendMoney. If I wanted to add some money to my bank account before spending a little on a snack, it would be relatively easy:
But there's an even simpler way to do this:
The key behind this ability is the return statement. On lines 9 and 14 of my example above, each method returns this, referring to the object the method is attached to. This means that line 18 is returning an object with a name of 'Ryo' and a money value of 125. If we were to simply make a call to myObj in between lines 18 and 19, it would return the same thing.
This is the the main point behind stringing methods. Since line 18 returns the same thing as myObj, we can replace the myObj on line 19 with the code on line 18 (as shown on line 21). We're simply calling the spendMoney method on whatever the code to the left of it returns.
This makes it possible to string together a lot of jQuery's (and d3's) methods, since a good number of them return some element from the DOM, just like using $('.someElement').
But this doesn't mean you can go stringing methods together will nilly! Be sure that you know what the previous method is returning, and if it will interact with the new method the way you're expecting. It's always best to know what you're expecting from your code and what your code is expecting from you. When in doubt, play it safe and apply each method separately.
This is a simple idea, but many people use it without really understanding what's going on in the background (I know I did). Something I'm very swiftly learning is that a lack of knowledge of the behind the scenes workings of your code can often lead to confusion down the road. It's not that you need to understand absolutely everything, but a basic understanding can be the difference between a mediocre programmer and a great one.
If you've ever used jQuery, d3 will look hauntingly familiar to you. The two libraries share many similar methods and are syntactically very close. Both are commonly used to manipulate the DOM (ie, change things on HTML documents/websites) and both are extremely object/method oriented.
To give you a quick example, let me show you one line of code my partner and I used during the d3 sprint:
Just a quick example of d3. I'll go over very briefly what's going on, but for an in depth look into the mechanics of d3, I would suggest looking through the documentation.
Adding an SVG element to the board element. Once again, if you're not familiar, I would suggest a quick google.
Giving the SVG these two attributes. If settings.w and settings.h were both equal to '500px', this would be the same as setting up an HTML element like so:
But to get to the meat of things, for those of you, like me, with less of a background in Object Oriented Programming, or OOP, this system of stringing together methods may seem rather alien, and more confusing that it needs to be. For one thing, the fact that this piece of code takes up four lines in purely aesthetic. It is the exact same as calling each of these methods one after another on the same line.
But what makes this possible? It seems a really odd idea to the novice OOP engineer to call a method on another method. But to understand what's really going on, we need to look behind the scenes. For simplicity's sake, I'm going to create my own example:
Here, I've created an obj with two keys, name and money, and two methods, earnMoney and spendMoney. If I wanted to add some money to my bank account before spending a little on a snack, it would be relatively easy:
But there's an even simpler way to do this:
The key behind this ability is the return statement. On lines 9 and 14 of my example above, each method returns this, referring to the object the method is attached to. This means that line 18 is returning an object with a name of 'Ryo' and a money value of 125. If we were to simply make a call to myObj in between lines 18 and 19, it would return the same thing.
This is the the main point behind stringing methods. Since line 18 returns the same thing as myObj, we can replace the myObj on line 19 with the code on line 18 (as shown on line 21). We're simply calling the spendMoney method on whatever the code to the left of it returns.
This makes it possible to string together a lot of jQuery's (and d3's) methods, since a good number of them return some element from the DOM, just like using $('.someElement').
But this doesn't mean you can go stringing methods together will nilly! Be sure that you know what the previous method is returning, and if it will interact with the new method the way you're expecting. It's always best to know what you're expecting from your code and what your code is expecting from you. When in doubt, play it safe and apply each method separately.
This is a simple idea, but many people use it without really understanding what's going on in the background (I know I did). Something I'm very swiftly learning is that a lack of knowledge of the behind the scenes workings of your code can often lead to confusion down the road. It's not that you need to understand absolutely everything, but a basic understanding can be the difference between a mediocre programmer and a great one.
No comments:
Post a Comment