root = pack(groups);
groupingForce = forceInABox()
.size([width, height]) // Size of the chart
.template(template) // Either treemap or force
.groupBy("group") // Nodes' attribute to group
.strength(forceInABoxStrength) // Strength to foci
.links(graph.links) // The graph links. Must be called after setting the grouping attribute (Force template only)
.enableGrouping(useGroupInABox)
.linkStrengthInterCluster(linkStrengthInterCluster) // linkStrength between nodes of different clusters
.linkStrengthIntraCluster(linkStrengthIntraCluster) // linkStrength between nodes of the same cluster
.forceLinkDistance(forceLinkDistance) // linkDistance between meta-nodes on the template (Force template only)
.forceLinkStrength(forceLinkStrength) // linkStrength between meta-nodes of the template (Force template only)
.forceCharge(-forceCharge) // Charge between the meta-nodes (Force template only)
.forceNodeSize(forceNodeSize) // Used to compute the template force nodes size (Force template only)
simulation = d3.forceSimulation()
.nodes(graph.nodes)
.force("group", groupingForce)
// .force("collide", d3.forceCollide(nodeSize+1))
.force("charge", d3.forceManyBody().strength(-4))
.force("link",
d3.forceLink(graph.links)
.distance(2)
.strength(groupingForce.getLinkStrength)
)
.force("x", useGroupInABox ? null : d3.forceX(width/2) )
.force("y", useGroupInABox ? null : d3.forceY(height/2) );
pack = data => d3.pack()
.size([width, height])
.padding(0)
(d3.hierarchy(data).count())
groups = d3.group(graph.nodes,d => d.group)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
