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
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(
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
with append('circle')
and links with
append('path')
.
A few blocks with more complicated codes to showcase what's possible to do with hierarchical edge bundling.