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 data-to-viz.com, 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
Json format, like
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( level1="CEO", level2=c( rep("boss1",4), rep("boss2",4)), level3=paste0("mister_", letters[1:8]) ) # transform it to json format library(d3r) 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
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
append('circle') and links with
A few blocks with more complicated codes to showcase what's possible to do with hierarchical edge bundling.