Skip to content

Instantly share code, notes, and snippets.

@sxywu
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
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
sxywu / README.md
Last active August 29, 2015 14:27
How D3 Transitions Work, Pt. 1: d3.interpolate
@sxywu
sxywu / README.md
Last active October 21, 2015 01:36
How D3 Transitions Work, Pt. 2: d3.interpolate with multiple elements
@sxywu
sxywu / README.md
Last active November 1, 2015 23:20
visfest block visualization
@sxywu
sxywu / README.md
Last active November 1, 2015 23:26
visfest block visualization 2
@sxywu
sxywu / README.md
Last active November 1, 2015 23:24
visfest block visualization 3
@sxywu
sxywu / README.md
Last active November 2, 2015 06:57
visual blocksplorer
@sxywu
sxywu / README.md
Last active November 7, 2015 18:13
Simple Scatterplot
@sxywu
sxywu / README.md
Last active November 8, 2015 23:22
Image processing fun #1