2D layout algorithms for visualizing hierarchical data.

Mike Bostock

Apollonius’ Problem

Treemap

Sunburst

Tidy tree

Cluster tree

Radial cluster tree

Icicle

Circle packing

Radial tidy tree

Bubble chart

d3.groups as a hierarchy

Random Tree

Hierarchy traversal, animated

Bilevel Edge Bundling

Indented tree

Zoomable treemap

Hierarchical edge bundling II

Marimekko

d3.packEnclose

Hierarchical bar chart

Force-directed tree

d3.stratify

Visiting a d3.hierarchy

d3.hierarchy

Cascaded treemap

Nested treemap

Treemap by count

Stretched Treemap

Collapsible tree

Hierarchical edge bundling

Zoomable circle packing

Zoomable sunburst

Zoomable icicle

Bubble chart component

Circle packing component

D3 Documentation

d3-hierarchy

Gallery

Force-directed graph layout using velocity Verlet integration.

d3-force

Many examples are shifting the viewbox to place 0,0 at the center of the frame. I use the vewbox for another reason and would lie to avoid that. Is there a way to give the simulation a specific origin point? Likewise, I struggle to influence how much of my frame the network spreads out across (My svg is large) - does the force simulation have some sort of bound or awareness of the size of the frame?

Dan DeLorenzo

Re: the first part of your question, you can use the *x* argument to d3.forceX to specify the x coordinate that attracts each node https://github.com/d3/d3-force#forceX; likewise with d3.forceY. Alternatively, you could draw the graph in a svg:g element that you can position with a transform: translate(x,y).
Bounding a force simulation s more difficult; you can try to play with the strength parameters of each force until it gives you something satisfying, or look at the various approaches experimented in https://github.com/d3/d3-force/pull/163 and https://observablehq.com/d/21d2053b3bc85bce

Any advice on how one might use a similar workflow (group > hierarchy), but achieve live modification and object constancy? As parent nodes in a groups hierarchy will not have any id that might have been a part of the flat data?

flare-2.json

Force-directed graph component