All examples By author By category About

sathomas

Understanding D3.js Force Layout - 9: friction

This is part of a series of examples that describe the basic operation of the D3.js force layout. Eventually they may end up in a blog post that wraps everything together. If you missed the beginning of the series, here's a link to first example.

The final parameter this series considers is friction. This parameter, which ranges from 0 to 1, tells D3.js how much (if at all) to slow down the layout at each iteration. With a value of 1, the layout never slows down, while a value of 0 forces all the nodes to immediately stop.

This example includes two independent visualizations operating in the same container. The blue graph uses the default friction value of 0.9, and the red graph sets friction to 0.1. The different behaviors can be clearly seen if the visualizations are run in slow motion.