O'Reilly logo

Learning d3.js Data Visualization - Second Edition by Swizec Teller, Ændrew Rininsland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required