D3 Force Directed Graph Retrospective


The D3 force directed graph project shows national contiguity using a force directed graph. Essentially, if two countries touch on a map, they are connected on the graph with a line. You can grab a country's flag and drag it around the graph area and see the rest of the flags move in relation to the one you are dragging.

This was a really fun project cause it started to really show what D3 is capable of. Being able to drag things around in real time is really cool.

I used two resources to help me wrap my brain around forces in D3. A tutorial series by Stephen Thomas was very helpful along with this video tutorial by Ben Sullins.

Code Review

In this project, I first used D3 links, nodes, and forces. These concepts were not easy to pick up initially, but once I got things on the page and moving around, it made more sense as I manipulated values and saw the differences they made on screen. One big problem I ran into that I didn't expect was trying to append the flag images onto an svg. You can't append images to an svg, so I learned a valuable lesson that not all D3 methods have to be applied to the svg element. Those images ended up being appended as separate entities over top of the svg.

Future Improvements

I really enjoyed this project, but feel like I really just scratched the surface of D3 force methods and got just a cursory understanding. There is a lot more exploring I could do here to build other cool things.