Some D3 Tips and Tricks

I’m currently working on a deep learning journal called ReadMe (…get it). For this project I have been working on displaying the correlation coefficients that get returned from our server. I’m not going to go into too much detail on the project just yet, I just wanted to share some tips about D3 that could save you many lines of code and unnecessary math for collision control.

First Tip, before coding anything. Check first for D3 layouts you can use. These layouts are accessible through a method on d3, ex: d3.layout.force(). Here is a cool example of this one I found: http://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7

Second Tip, when using layouts look closely at the methods they give you before writing custom code to do the same thing. I’m seen a lot of d3 code online that included code being overwritten by these magical methods d3 has already made. In my current force layout project I implemented collision control mathematically by calculating node collisions in order to change positions. Turns out the right combo of .charge(-300) and .gravity(.05), accomplished basically the same thing.

Third Tip, check out their color schemes for making node colors differ based on data changes. You can also use color schemes simply just to add color in a way that doesn’t clash between nodes. These color schemes are pretty cool too.

Last Tip, here is a great D3 guide I found for customizing colors using d3.scale method.

Hopefully these tips help save you time and code. Stay patient, and experiment a lot and D3 will start to take the shape you imagined for it. Go get em.