or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

hierarchy-construction.mdindex.mdnode-methods.mdpartition-pack.mdtree-layouts.mdtreemap-layouts.md
tile.json

index.mddocs/

d3-hierarchy

D3-hierarchy implements several popular techniques for visualizing hierarchical data through layout algorithms that transform tree structures into visual coordinates. It provides node-link diagrams (tree, cluster), adjacency diagrams (partition), enclosure diagrams (treemap, pack), and comprehensive node traversal methods.

Package Information

  • Package Name: d3-hierarchy
  • Package Type: npm
  • Language: JavaScript (ES modules)
  • Installation: npm install d3-hierarchy

Core Imports

import {
  hierarchy,
  stratify,
  cluster,
  tree,
  treemap,
  partition,
  pack
} from "d3-hierarchy";

For CommonJS:

const {
  hierarchy,
  stratify,
  cluster,
  tree,
  treemap,
  partition,
  pack
} = require("d3-hierarchy");

Basic Usage

import { hierarchy, tree } from "d3-hierarchy";

// Create hierarchy from nested data
const data = {
  name: "root",
  children: [
    { name: "child1" },
    { name: "child2", children: [{ name: "grandchild" }] }
  ]
};

const root = hierarchy(data);

// Apply tree layout
const treeLayout = tree().size([800, 400]);
const treeRoot = treeLayout(root);

// Access computed coordinates
console.log(treeRoot.x, treeRoot.y); // root position
treeRoot.descendants().forEach(node => {
  console.log(node.data.name, node.x, node.y);
});

Architecture

D3-hierarchy is built around these key components:

  • Node Structure: Hierarchical nodes with parent/child relationships and computed properties
  • Layout Algorithms: Functions that compute spatial coordinates for different visualization techniques
  • Traversal Methods: Built-in methods for navigating and manipulating the hierarchy
  • Data Binding: Flexible data accessor functions for custom data structures
  • Coordinate Systems: Support for both Cartesian and polar coordinate layouts

Capabilities

Hierarchy Construction

Create hierarchical data structures from nested objects or flat tabular data. The foundation for all layout algorithms.

function hierarchy(data, children);
function stratify();

Hierarchy Construction

Tree Layouts

Node-link tree diagrams using the Reingold-Tilford "tidy" algorithm and cluster/dendrogram layouts.

function tree();
function cluster();

Tree Layouts

Treemap Layouts

Recursive space-filling layouts that subdivide area into rectangles, with multiple tiling methods.

function treemap();
function treemapSquarify();
function treemapBinary();
function treemapDice();
function treemapSlice();
function treemapSliceDice();
function treemapResquarify();

Treemap Layouts

Partition and Circle Packing

Partition layouts create adjacency diagrams, while circle packing creates enclosure diagrams with nested circles.

function partition();
function pack();
function packSiblings(circles);
function packEnclose(circles);

Partition and Circle Packing

Node Methods

Comprehensive traversal, manipulation, and computation methods available on all hierarchy nodes.

// Node traversal methods
node.each(callback);
node.eachBefore(callback);
node.eachAfter(callback);
node.descendants();
node.ancestors();
node.leaves();

// Node computation methods  
node.sum(value);
node.sort(compare);
node.count();

Node Methods

Types

class Node {
  constructor(data);
  
  // Properties
  data: any;
  depth: number;
  height: number;
  parent: Node | null;
  children?: Node[];
  value?: number;
  
  // Layout-specific coordinates (set by layout functions)
  x?: number;
  y?: number;
  x0?: number; // treemap, partition
  y0?: number; // treemap, partition  
  x1?: number; // treemap, partition
  y1?: number; // treemap, partition
  r?: number;  // pack
}