{"version":"1.0","type":"rich","title":"D3.force, multiple sets of multiple foci","description":"This example demonstrates a force-directed graph with 100 nodes that can be toggled between two different grouping schemes. Clicking the \"groupA\" or \"groupB\" buttons switches the nodes’ attraction toward one of two sets of focal points—five horizontally arranged foci for groupA, or two diagonal foci for groupB—causing the layout to reorganize smoothly. The simulation uses d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter, while each tick nudges nodes toward their assigned foci based on the current selection. Nodes are rendered as SVG circles colored by groupA, and dragging is enabled via d3.drag.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-976e51f97cffa1835bc03ca80c428ee7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}