sxywu’s gists

sxywu / README.md

Last active November 23, 2021 04:06

Link Collision Avoidance

This is a really simple (and kind of cheap) way to ensure as little link overlap as possible in a force-directed graph. It is inspired by Moritz Stefaner's Force-based label placement, where he uses invisible nodes to avoid overlap of text labels.

In this example, I've taken the classic force-directed graph example of the Les Miserables dataset, and made two simple tweaks: I use the links array to calculate the invisible nodes, and place the nodes at the halfway point of each link. Conceptually, it is very similar to Mike Bostock's Curved Links.

sxywu / README.md

Last active December 22, 2015 08:48

Enter-Update-Exit in Force Layout

The force graph has been the subject of my fascination in the recent couple weeks. One of the fun things about the force layout is that the positioning of each node and link is calculated at every tick, which means the normal update-transition paradigm doesn't work too well.

This was my approach to the enter-update-exit pattern in a force graph, and other then a couple bounces of the nodes, seem to work pretty decently.

sxywu / README.md

Last active August 29, 2015 14:27

How D3 Transitions Work, Pt. 1: d3.interpolate

Click play to animate.

My quest to understand how transitions work under the hood, part 2: animating using d3.interpolate and window.requestAnimationFrame.

Part 2 here: How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements

sxywu / README.md

Last active October 21, 2015 01:36

How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements

Input a set of comma-delimited numbers, and press play to animate.

My quest to understand how transitions work under the hood, part 2: animate multiple elements with different ending x-positions using d3.interpolate and window.requestAnimationFrame.

Part 1 here: How D3 Transitions Work, Pt. 1: d3.interpolate