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
• Cannot use D3 functions that need access to DOM

Use case: React app with a small and simple visualization

The original using only D3: Enter-Update-Exit in Force Layout

The Force with React + D3, Approach #1

The Force with React + D3, Approach #2

The Force with React + D3, Approach #3