d3.chart.layout v0.1.1

Collection of reusable d3.layouts built with d3.chart framework.

d3.chart.layout.hierarchy

• Cluster
• Pack
• Partition
• Tree
• Treemap

The input data is a vertex-labeled graph:

{ "name": "Root",
  "children": [
    { "name": "Leaf 1", "value": 3 }, 
    { "name": "Node 1",
      "children": [
        { "name": "Leaf 2", "value": 6 }, 
        { "name": "Node 2",
          "children": [
            { "name": "Leaf 3", "value": 2 }, 
            { "name": "Leaf 4", "value": 8 }
          ]
        }
      ]
    }
  ]
}

Cluster

View cartesian cluster demo and radial cluster demo

Sample Use

var cluster = d3.select("#vis")
  .append("svg")
  .chart("cluster.cartesian")
    .value("size")
    .margin({ top: 0, right: 60, bottom: 0, left: 60 })
    .radius(3)
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

cluster.draw(data);

var cluster = d3.select("#vis")
  .append("svg")
  .chart("cluster.radial")
    .value("size")
    .diameter(350)
    .radius(3)
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

cluster.draw(data);

API

<instance>.name([name]) - get or set the textual content of a node.

<instance>.value([value]) - get or set the numerical value of a node.

<instance>.duration([duration]) - specify per-element duration in milliseconds.

<instance>.radius([length]) - specify the node radius.

<instance>.collapsible() - apply the collapse behavior to the graph.

<instance>.zoomable([scaleExtent]) - apply the zoom behavior with two-element array for the range.

<instance.cartesian>.margin([values]) - get or set the margin object with properties for the four sides.

<instance.radial>.diameter([value]) - get or set the diameter of the graph.

Pack

View nested pack demo and flattened pack demo

Sample Use

var pack = d3.select("#vis")
  .append("svg")
  .chart("pack.nested")
    .value("size")
    .diameter(350)
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

pack.draw(data);

function classes(root) {...};
function title(d) {...};
function fill(d) {...};

var pack = d3.select("#vis")
  .append("svg")
  .chart("pack.flattened")
    .name("className")
    .flatten(classes)
    .formats({ title: title, fill: fill })
    .diameter(350)
    .zoomable([0.1, 3])
    .duration(200);

pack.draw(data);

API

<instance>.name([name]) - get or set the textual content of a node.

<instance>.value([value]) - get or set the numerical value of a node.

<instance>.duration([duration]) - specify per-element duration in milliseconds.

<instance>.diameter([value]) - get or set the diameter of the graph.

<instance>.zoomable([scaleExtent]) - apply the zoom behavior with two-element array for the range.

<instance.nested>.collapsible() - apply the collapse behavior to the graph.

<instance.flattened>.flatten([function]) - specify the hierarchy flattening function.

<instance.flattened>.formats([formats]) - get or set the formats object with properties for the formatting functions.

Partition

View arc partitiion demo and rectangle partition demo

Sample Use

var partition = d3.select("#vis")
  .append("svg")
  .chart("partition.arc")
    .value("size")
    .diameter(350)
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

partition.draw(data);

var partition = d3.select("#vis")
  .append("svg")
  .chart("partition.rectangle")
    .value("size")
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

partition.draw(data);

API

<instance>.name([name]) - get or set the textual content of a node.

<instance>.value([value]) - get or set the numerical value of a node.

<instance>.duration([duration]) - specify per-element duration in milliseconds.

<instance>.collapsible() - apply the collapse behavior to the graph.

<instance>.zoomable([scaleExtent]) - apply the zoom behavior with two-element array for the range.

<instance.arc>.diameter([value]) - get or set the diameter of the graph.

Tree

View cartesian tree demo and radial tree demo

Sample Use

var tree = d3.select("#vis")
  .append("svg")
  .chart("tree.cartesian")
    .value("size")
    .margin({ top: 0, right: 60, bottom: 0, left: 60 })
    .radius(3)
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

tree.draw(data);

var tree = d3.select("#vis")
  .append("svg")
  .chart("tree.radial")
    .value("size")
    .diameter(350)
    .radius(3)
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

tree.draw(data);

API

<instance>.name([name]) - get or set the textual content of a node.

<instance>.value([value]) - get or set the numerical value of a node.

<instance>.duration([duration]) - specify per-element duration in milliseconds.

<instance>.radius([length]) - specify the node radius.

<instance>.collapsible() - apply the collapse behavior to the graph.

<instance>.zoomable([scaleExtent]) - apply the zoom behavior with two-element array for the range.

<instance.cartesian>.margin([values]) - get or set the margin object with properties for the four sides.

<instance.radial>.diameter([value]) - get or set the diameter of the graph.

Treemap

View treemap demo

Sample Use

var treemap = d3.select("#vis")
  .append("svg")
  .chart("treemap")
    .value("size")
    .zoomable([0.1, 3])
    .collapsible()
    .duration(200);

treemap.draw(data);

API

<instance>.name([name]) - get or set the textual content of a node.

<instance>.value([value]) - get or set the numerical value of a node.

<instance>.duration([duration]) - specify per-element duration in milliseconds.

<instance>.collapsible() - apply the collapse behavior to the graph.

<instance>.zoomable([scaleExtent]) - apply the zoom behavior with two-element array for the range.