Skip to content

Instantly share code, notes, and snippets.

View sxywu's full-sized avatar

Shirley Wu sxywu

2.3k followers · 9 following
View GitHub Profile
@sxywu
sxywu / .block
Last active June 28, 2026 05:40
Film Flowers, Single Update Starter
license: gpl-3.0
@sxywu
sxywu / .block
Last active June 25, 2026 06:09
Morphing Curve: Radial Gradient
license: gpl-3.0
@sxywu
sxywu / README.md
Last active September 10, 2024 07:10
The Force with React + D3, Approach #3

React + D3 exploration with the force layout:

  • React for structure
  • D3 for data calculation
  • D3 for rendering

Pro:

  • The viz scales!
  • Use all the d3 functions!

Con:

@sxywu
sxywu / .block
Last active October 14, 2023 05:27
Hamilton characters #2
license: mit
@sxywu
sxywu / README.md
Last active October 7, 2023 02:54
The Force with React + D3, Approach #1

React + D3 exploration with the force layout:

  • React for structure
  • D3 for data calculation
  • React for rendering

Pro:

  • Clean, easy to reason about

Con:

  • Goes through lifecycle for every tick -> will not scale
@sxywu
sxywu / .block
Last active August 31, 2023 10:13
DS July: Code 1
license: gpl-3.0
@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 / .block
Last active March 26, 2021 22:53
Generative flower experiment #1
license: mit
@sxywu
sxywu / README.md
Last active November 28, 2019 02:08
openvis tweets #4
@sxywu
sxywu / README.md
Last active May 26, 2019 16:01
The Force with React + D3, Approach #2

React + D3 exploration with the force layout:

  • React for structure
  • D3 for data calculation
  • D3 AND React for rendering
    • React for enter/exit
    • D3 for update

Pro:

  • Takes advantage of respective strengths