d3.chart.layout.hierarchy

Collection of interactive and reusable D3 hierarchy layouts built with d3.Chart framework.

The input is a vertex-labeled rooted tree, and the output is a zoomable, collapsible hierarchy layout.

For more information see the Wiki.

Example bl.ocks

Cluster Layout

• Cartesian Cluster
• Radial Cluster

Pack Layout

• Nested Pack
• Flattened Pack

Partition Layout

• Arc Partition
• Rectangle Partition

Tree Layout

• Cartesian Tree
• Radial Tree

Treemap Layout

• Treemap

Build Instructions

Build requirements:

• Node.js
• Grunt
• Bower

To fetch required dependencies, run the following command from the root of this repository:

$ npm install
$ bower install

After this, the project can be built by invoking Grunt from within this repository:

$ grunt

To build the project along with minified version of the library, run:

$ grunt release

Download

If you do not want to build the library, you can download it directly and embed it using a script tag.

d3.chart.layout.hierarchy depends on d3.chart which depends on d3, so include them in reverse order:

<script src="scripts/lib/d3.v3.min.js"></script>
<script src="scripts/lib/d3.chart.min.js"></script>
<script src="scripts/lib/d3.chart.layout.hierarchy.min.js"></script>