d3plus-hierarchy

d3plus-hierarchy

Nested, hierarchical, and cluster charts built on D3

Installing

If you use NPM, npm install d3plus-hierarchy. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom bundle using Rollup or your preferred bundler. You can also load directly from d3plus.org:

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

Getting Started

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 tree map:

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

Colors are assigned to each unique ID using d3plus-color, and the rectangles are created using the d3plus-shape module.

Click here to view this example live on the web.

More Examples

• Using a Custom Color Accessor
• Rendering into a Specific Page Element

API Reference

Classes

Donut ⇐ Pie

Pie ⇐ Viz

Tree ⇐ Viz

Treemap ⇐ Viz

Functions

nest Extends the base behavior of d3.nest to allow for multiple depth levels.(*data*, *keys*)

Donut ⇐ Pie

Kind: global class
Extends: Pie

new Donut()

Extends the Pie visualization to create a donut chart.

Pie ⇐ Viz

Kind: global class
Extends: 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.

Kind: static method of Pie

Param	Type
[value]	function | Number

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.

Kind: static method of Pie

Param	Type
[value]	Number

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.

Kind: static method of Pie

Param	Type
[value]	Number

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.

Kind: static method of Pie

Param	Type
[comparator]	Array

Example

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.

Kind: static method of Pie

Param	Type
[value]	function | Number

Example

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

Tree ⇐ Viz

Kind: global class
Extends: 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.

Kind: static method of Tree

Param	Type	Default	Description
[value]	String	"vertical"	Accepts either "vertical" or "horizontal".

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.

Kind: static method of Tree

Param	Type
[value]	function

Example

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

Treemap ⇐ Viz

Kind: global class
Extends: Viz

• Treemap ⇐ Viz
  • new Treemap()
  • .padding([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.padding([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.

Kind: static method of Treemap

Param	Type
[value]	function | Number

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.

Kind: static method of Treemap

Param	Type
[comparator]	Array

Example

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.

Kind: static method of Treemap

Param	Type
[value]	function | Number

Example

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.

Kind: static method of Treemap

Param	Type
[value]	function

nest

Extends the base behavior of d3.nest to allow for multiple depth levels.(*data*, *keys*)

Kind: 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 Wed, 29 Mar 2017 00:07:12 GMT}