I have done an intensive search on this topic, and its really hard to find any example on this.
Little background:
I am beginner at d3 trying to build a network visualization that can collapse its nodes when zoomed out. Perfect example of what I am talking about is here: http://www.twittercensus.se/graph2013/ or even googlemaps (not sure how they do it, but i would like to do the same using d3.js)
Idea is not to display all the nodes (10K+), but group them and show only the groups. When I zoom-in, the group should expand (assuming all nodes are spaced out using collision detection)
Again, just to be clear, when I zoom in, I don't want the nodes to look larger in size, but instead I want a collapsing feature where a consolidated node break into smaller nodes.
Some useful links:
- http://bl.ocks.org/mbostock/9656675 - example of d3 normal zoom-in (no collapsible feature)
- D3.js Zooming and panning a collapsible tree diagram - again, this just shows how to hide nodes when collapsed (no zoom-collapsible feature interaction)
- Collapsible/hierarchical AND force-directed graph in d3.js - useful examples showing collapsing network, but not in a zoom-in manner. (no zoom feature)