I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Oct 30, 2024
8 forks
53 stars
groupingForce = forceInABox()
.size([width, height-100]) // 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("center", useGroupInABox ? null : d3.forceCenter(width/2, height/2));
// .force("x", useGroupInABox ? null : d3.forceX(width/2) )
// .force("y", useGroupInABox ? null : d3.forceY(height/2) );
width = 800
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.
