Building an Article Graph with D3

One of the features I wanted for this site was a visual map of how articles relate to each other. Not just a flat list of posts, but a graph showing connections.

The Data Model

Each blog post can define related posts explicitly in its frontmatter:

relatedPosts: [hello-world, some-other-post]

The build script also generates implicit connections based on shared tags. If two posts share a tag, they get an edge.

Force-Directed Layout

D3's d3-force module handles the physics simulation. Nodes repel each other via forceManyBody, edges pull connected nodes together via forceLink, and everything is centered in the viewport.

The key parameters:

• Charge strength: -200 gives enough spacing without being too sparse
• Link distance: 100 keeps connected nodes close but readable
• Collision radius: 30 prevents node overlap

Interaction

• Hover highlights connected nodes and fades unrelated ones
• Click navigates to the post
• Drag lets you rearrange the layout

The hexagonal node shape fits the panel-line aesthetic of the site.

Claude Code

This site was built with this entirely in claude code which was a really impressive experiment.