Making an interactive device map using D3

Question

So we have a web app for managing devices/software on numerous customer devices. We were recently proposed an idea for a visual representation of those customer networks. Here's an idea of what the hierarchy would look like:

customer
    location1
        router1
            10 devices
        router2
            15 devices
    location2
        router3
            200 devices
        router4
            200 devices
        router5
            50 devices

The proposed idea is to have a visualization of this hierarchy, where a customer could click on location1 to zoom in on it, and see their two routing devices, etc. They could then turn on "layers", which would show things such as codec connections between devices using arrows. This would be used first for looking at how their network is laid out, setting-up parts of a network, and debugging routing/etc within a network.

My first idea was to make a treemap similar to the one displayed here: http://bost.ocks.org/mike/treemap. It shows a distribution of the network and allows zooming to a specific part.

My question to you guys is what paths do you suggest I go down for this. Is a treemap the right base to use, or should I start with something simpler? Are there any other examples of similar layouts you could point me to?

Answer 1

I might go with a dendrogram here produced by D3's cluster layout. Any D3 visualization can have zoom behavior applied to it like this, so that's not really a consideration.