{"version":"1.0","type":"rich","title":"Checkbox Interactive forcelayout","description":"This interactive force-directed graph displays 20 nodes connected by links that share common categorical labels (T values). The visualization includes checkboxes for each category, allowing users to filter which types of connections appear in the network. Toggling a checkbox removes or reintroduces nodes and their associated links from the layout, with the graph responding via animated transitions. Nodes are colored by category using a 20-color ordinal scale, and hovering over a node reveals a tooltip with its properties. The layout initially shows all nodes and links, and users can interactively filter the graph in real time by unchecking categories, with a reset button to restore the full graph. This example demonstrates the general update pattern for data joins in force-directed layouts using D3 v4 and SVG.This interactive force-directed graph lets you filter a network of 20 nodes by toggling any of 16 category checkboxes. Each node represents an entity with multiple categorical tags (T), and links connect nodes that share a tag, with edges colored by that shared tag. Unchecking a category removes all associated nodes and links, while checking it restores them, with the layout smoothly rebalancing via D3's force simulation. The graph renders as an animated SVG, using the general update pattern for data joins. Tooltips provide additional detail on hover.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"","width":960,"height":500,"cache_age":3600}