Skip to content

Instantly share code, notes, and snippets.

View sathomas's full-sized avatar

Stephen A Thomas sathomas

View GitHub Profile
@sathomas
sathomas / README.md
Last active February 11, 2024 20:55
Understanding D3.js Force Layout - 4: linkDistance

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.

Earlier examples looked at the operation of force layout from a (very) high level. This example begins examining the important properties of the force layout in more detail.

@sathomas
sathomas / README.md
Last active October 19, 2017 06:08
Understanding D3.js Force Layout - 3: Seeing a Layout in Action

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.

Before digging into the properties and options of the force layout, it's helpful to understand how the layout works more generally. And although there's some serious mathematics going on under the hood, the principle is pretty simple: The layout moves the graph nodes around a little bit

@sathomas
sathomas / README.md
Last active July 22, 2016 20:33
Understanding D3.js Force Layout - 2: Simple to Complex with (almost) No Code Changes

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 the previous example didn't look very impressive, that's probably because it wasn't. Why bother to use a force layout just to place two circles a specific distance apart? Here's the payoff, though. With nearly the exact same code we can see what a more complex graph looks like.

There are plenty of ways to improve this graph (most of which we'll cover in

@sathomas
sathomas / README.md
Last active January 31, 2017 22:19
Understanding D3.js Force Layout - 1: The Simplest Possible Graph

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.

The first example creates the simplest possible graph using a force layout. The comments in the code walk through the steps in creating a force directed graph.

Things start to get more interesting in the next example.