grafo-de-lore-visualizacao-e-filtros

Render large graphs in Cytoscape.js by applying the cose-bilkent force-directed layout, collapsing clusters of highly connected nodes, and capping visible nodes at a fixed maximum such as 120. Load additional entities lazily by chapter range instead of fetching everything at once.

Filter nodes client-side using cy.elements().filter() in Cytoscape.js, which hides or highlights elements already loaded in memory. This supports cumulative filters like entity-type checkboxes, character dropdowns, and chapter-range sliders without new API requests.

Cytoscape.js is recommended for interactive entity graphs because it provides built-in layouts like cose-bilkent, element filtering APIs, and event handling for node clicks and edge hover tooltips. D3-force is an alternative but requires more manual wiring for interactions.

Rendering 300 or more nodes in a force-directed layout without pagination or cluster collapsing freezes the browser for 5-10 seconds and produces illegible output. Mitigate this by collapsing clusters automatically and lazy-loading entities by chapter range.

Build an ego-centered subgraph by selecting the character node and all nodes connected within 2 hops, then set unrelated nodes to low opacity such as 0.15. This visually isolates the character's relationships without removing data from the graph.