D3.js: Cutting-edge Data Visualization

Drawing a tree

The tree layout displays data in a tree using the Reingold-Tilford tidy algorithm. We'll use it to display our dataset in a large circular tree, with every node connected to its parent by a curvy line.

We begin the method by fixating colors, turning data into a tree, and defining a way to draw curvy lines:

  tree(filterString = ' MP') {
    let filtered = this.data.filter(
      (d) => d.EntityName.match(filterString) );
    helpers.fixateColors(filtered);

    let tree = helpers.makeTree(filtered,
      (d, name) => d.DonorName === name,
      (d) => d.EntityName,
      (d) => d.EntityName || '');

    tree.children = tree.children.filter(
      (d) => d.children.length > 1)

    let diagonal = d3.svg.diagonal.radial()
      .projection((d) => [d.y, d.x / 180 * Math.PI]);
}

You know fixateColors ...