Treemap navigator (flare)

A combination of a treemap with a node-link diagram, showing the flare software package hierarchy. Click on a treemap region to create a new node displaying the corresponding subtree. Subtrees can be dragged around, and the whole visualization can be navigated with zoom and pan.

This experiment tries to address a known issue of treemaps: while they are very compact and good for presenting a tree's overview, they fail to unambiguosly and clearly represent hierarchical structure. Node-link diagrams, on the other hand, are very good at this, but fail to scale to big trees and do not provide a nice overview.

The presented technique, while developed independently, is similar to Elastic Hierarchies, described in Zhao et al. 2005.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Treemap navigator (flare)" />
        <title>Treemap navigator (flare)</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <svg height="500" width="960"></svg>
        <script src="index.js"></script>
    </body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js