Ah, my little summer break was pretty nice, but boy does it feel good to start coding again! For those of you who don’t know, I was selected to continue my Biomedical Informatics Research during my first (and final :[ )summer vacation of my college years. Although this week I decided to work remotely from my suburban home, I feel like I did hit the ground running! I will be writing weekly reports here on my blog for the hell of it. Without further ado, here it is:
So for this week, my main goals were to change the layout of my d3.js network graphs so that all of them were “Drag-and-Drop”, and figure out a way to make the network graphs initially load so that the nodes are spaced apart to make it easier for the user to click on individual nodes.
The first part came easy. I already developed a network graph that featured this “Drag-and-Drop” methodology, so it wasn’t too bad just copying the code for all the other pages. If “Drag-and-Drop” doesn’t really make sense for you, think of it like this: You have a couple of nodes in a network graphically displayed, but you want to move around the nodes to create a different shape. Instead of altering your code to produce different shapes, just allow the user to click and drag the nodes around to make them whatever shape they want! Simple! Here’s a GIF for all you visual learners:
After a lot of failure with Googling around, I couldn’t figure out how to alter my code to allow more distance between the nodes on the initial load. I decided to seek some help on stackoverflow.com (amazing site, for all of you coders who need a little help this is a great website to ask around and also look for questions that have already been asked. It’s like a Yahoo Answers for coders!) and a very nice man by the name of Gerardo Furtado helped me out (shout out to you Gerardo!). Turns out if you set the strength of the ManyBody() function to a negative number it will space the nodes out! So I figured out how to go from this: to this: Amazing!
While waiting for help I decided to create a simple index page for anyone checking out my work from my GitHub. It’s nothing fancy, but I figured it would be a lot nicer to have for the long run. Here’s a screenshot of it:
Hope everyone is enjoying their summer! I’ve been spending a lot of time with family and dealing with Co-op stuff, so it has been pretty enjoyable so far. Happy early 4th of July everyone and take care!