A dendrogram shows a hierarchical structure. It is constituted of a root node that gives birth to several nodes connected by edges or branches. Last nodes of the hierarchy are called leaves. Learn more about its theory on, or visit the examples below to learn how to implement it in d3.js

A note on input data format

Building dendrogram with d3.js requires to have an input at the Json format, like here. The d3r package makes it a breeze to get this format from a R data frame.

# This is R code

# create a simple hierarchy
data <- data.frame(
  level2=c( rep("boss1",4), rep("boss2",4)),
  level3=paste0("mister_", letters[1:8])

# transform it to json format
data_json <- d3_nest(data)

# Save in a json file
write(data_json, "data_ready.json")

You're now ready to use the file called data_ready.json in your d3.js chart

Step by step

Building a dendrogram with d3.js always follows the same steps. First, a cluster layout must be defined with d3.cluster(). Second, data is provided to this layout thanks to d3.hierarchy(). We now have an object with nodes coordinates. Lastly, we can use it to add nodes with append('circle') and links with append('path').

Selection of blocks

A few blocks with more complicated codes to showcase what's possible to do with hierarchical edge bundling.

Related chart types

Chord diagram
Arc diagram
Edge bundling