d3plus-hierarchy

d3plus-hierarchy

Nested, hierarchical, and cluster charts built on D3

Installing

If you use NPM, run npm install d3plus-hierarchy --save. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-hierarchy.v0.7.full.min.js"></script>

Simple Tree Map

Creating a tree map using d3plus is super simple. Given an array of data objects that looks something like this:

var data = [
  {parent: "Group 1", id: "alpha", value: 29},
  {parent: "Group 1", id: "beta", value: 10},
  {parent: "Group 1", id: "gamma", value: 2},
  {parent: "Group 2", id: "delta", value: 29},
  {parent: "Group 2", id: "eta", value: 25}
];

Only a few lines of code are needed to transform it into an interactive TreeMap:

new d3plus.Treemap()
  .data(data)
  .groupBy(["parent", "id"])
  .sum("value")
  .render();

Colors are assigned to each unique ID using the color assign function, and the rectangles are created using the Rect class.

Click here to view this example live on the web.

More Examples

• Circle Packing Chart
• Hiding Tooltip on Click
• Adding Background Images to Shapes
• Changing Font Styles
• Custom Tooltip Contents
• Custom Mouse Events
• Rendering into a Specific DOM Container
• Defining Custom Colors for a Visualization

API Reference

• Donut
• Pack
• Pie
• Tree
• Treemap

• nest - Extends the base behavior of d3.nest to allow for multiple depth levels.

---

Donut <>

This is a global class, and extends all of the methods and functionality of Pie.

# new Donut()

Extends the Pie visualization to create a donut chart.

---

Pack <>

This is a global class, and extends all of the methods and functionality of Viz.

• Pack ⇐ Viz
  • new Pack()
  • .hover([value]) ↩︎
  • .layoutPadding([value])
  • .packOpacity([value])
  • .sort([comparator])
  • .sum([value])

# new Pack()

Uses the d3 pack layout to creates Circle Packing chart based on an array of data.

# Pack.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Pack, and is chainable with other methods of this Class.

# Pack.layoutPadding([value]) <>

If value is specified, sets the opacity accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current pack opacity accessor.

This is a static method of Pack.

# Pack.packOpacity([value]) <>

If value is specified, sets the padding accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current pack opacity accessor.

This is a static method of Pack.

# Pack.sort([comparator]) <>

If comparator is specified, sets the sort order for the pack using the specified comparator function. If comparator is not specified, returns the current group sort order, which defaults to descending order by the associated input data's numeric value attribute.

This is a static method of Pack.

function comparator(a, b) {
  return b.value - a.value;
}

# Pack.sum([value]) <>

If value is specified, sets the sum accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current sum accessor.

This is a static method of Pack.

function sum(d) {
  return d.sum;
}

---

Pie <>

This is a global class, and extends all of the methods and functionality of Viz.

• Pie ⇐ Viz
  • new Pie()
  • .innerRadius([value])
  • .padAngle([value])
  • .padPixel([value])
  • .sort([comparator])
  • .value(value)

# new Pie()

Uses the d3 pie layout to creates SVG arcs based on an array of data.

# Pie.innerRadius([value]) <>

If value is specified, sets the inner radius accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current inner radius accessor.

This is a static method of Pie.

# Pie.padAngle([value]) <>

If value is specified, sets the arc padding to the specified radian value and returns the current class instance. If value is not specified, returns the current radian padding.

This is a static method of Pie.

# Pie.padPixel([value]) <>

If value is specified, sets the arc padding to the specified pixel value and returns the current class instance. If value is not specified, returns the current pixel padding.

This is a static method of Pie.

# Pie.sort([comparator]) <>

If comparator is specified, sets the sort order for the pie slices using the specified comparator function. If comparator is not specified, returns the current sort order, which defaults to descending order by the associated input data's numeric value attribute.

This is a static method of Pie.

function comparator(a, b) {
  return b.value - a.value;
}

# Pie.value(value) <>

If value is specified, sets the value accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current value accessor.

This is a static method of Pie.

function value(d) {
  return d.value;
}

---

Tree <>

This is a global class, and extends all of the methods and functionality of Viz.

• Tree ⇐ Viz
  • new Tree()
  • .orient([value])
  • .separation([value])

# new Tree()

Uses d3's tree layout to create a tidy tree chart based on an array of data.

# Tree.orient([value]) <>

If value is specified, sets the orientation to the specified value. If value is not specified, returns the current orientation.

This is a static method of Tree.

# Tree.separation([value]) <>

If value is specified, sets the separation accessor to the specified function. If value is not specified, returns the current separation accessor.

From the d3-hierarchy documentation:

The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.

This is a static method of Tree.

function separation(a, b) {
  return a.parent === b.parent ? 1 : 2;
}

---

Treemap <>

This is a global class, and extends all of the methods and functionality of Viz.

• Treemap ⇐ Viz
  • new Treemap()
  • .layoutPadding([value])
  • .sort([comparator])
  • .sum([value])
  • .tile([value])

# new Treemap()

Uses the d3 treemap layout to creates SVG rectangles based on an array of data. See this example for help getting started using the treemap generator.

# Treemap.layoutPadding([value]) <>

If value is specified, sets the inner and outer padding accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current padding accessor.

This is a static method of Treemap.

# Treemap.sort([comparator]) <>

If comparator is specified, sets the sort order for the treemap using the specified comparator function. If comparator is not specified, returns the current group sort order, which defaults to descending order by the associated input data's numeric value attribute.

This is a static method of Treemap.

function comparator(a, b) {
  return b.value - a.value;
}

# Treemap.sum([value]) <>

If value is specified, sets the sum accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current sum accessor.

This is a static method of Treemap.

function sum(d) {
  return d.sum;
}

# Treemap.tile([value]) <>

If value is specified, sets the tiling method to the specified function and returns the current class instance. If value is not specified, returns the current tiling method.

This is a static method of Treemap.

---

d3plus.nest(data, keys) <>

This is a global function.

Param	Type	Description
data	Array	The data array to be nested.
keys	Array	An array of key accessors that signify each nest level.

---

_{Documentation generated on Mon, 17 Sep 2018 14:19:05 GMT}