It’s hard to believe that Week 2 at Hack Reactor is already finished! I constantly go between feelings like I’ve been here for several months or several days, but definitely not 2 weeks. Keeping track of what day of the week it is has also proven to be a challenge. For example, yesterday I got to my local gym at 6 am only to realize that it doesn’t open on Saturdays until 8 am!
On a different note, the material at Hack Reactor has gotten progressively more interesting. This week we built a Dance Party game in jQuery using various CSS animations, explored how to design an algorithm to the classic N-Queens problem, and got introduced to the awesome data visualization libary D3.js.
What is D3.js?
Having come from a data analytics background, the D3 sprint has been my favorite so far. We took some creative liberties and built an Interstellar themed video game where you have to move around Yoda’s head to avoid collisions with the falling asteroid. It was really amazing to see how easily we could bind data to the DOM nodes using D3.
Below is the high level picture of our code:
Step 1. Create the Board
Using D3 methods, append the SVG (Scalable Vector Graphics) element to thetag and set the height and width parameters of the video game frame.
Step 2. Create the Enemy Objects
D3’s method .selectAll() allows us to grab all svg ‘circle’ elements on the page and apply certain properties to them. The .data() operator takes in DOM nodes returned by .selectAll() and binds the data passed in. We then set the class, radius and the x and y coordinates of each enemy node with the data supplied from the createEnemies function. And lastly, we set the image attribute of our enemy circles to a picture of an asteroid.
Step 3. Create the Player
In the step above, .enter() took the selection returned by data() and created new DOM nodes for each missing item in the data array. Since our game only has one player, we don’t need to use the .enter() operator and instead we just set the player’s x and y coordinates.
Step 4. Making the enemies collide
To put it all together, this step grabs all the existing enemy asteroids and binds the new x and y coordinates generated by the createEnemeies function using the data(). Now every time we call the move() function, our enemy objects will move around on the screen.
This sprint made it apparent that D3’s ‘secrete sauce’ was the ability to loosely bind data to DOM elements. Without having to explicitly specify the quantity or type of data, D3.js is able to elegantly attach dynamic data with DOM elements to create amazing visual effects.
For those of you learning how to code, I put together a curated list of resources that I used to learn how to code which can be found at breakingintostartups.com
If you enjoyed this post, please share it with your friends! ❤ Also, I would love to hear about your stories in the comments below.