Nested data organizes objects or records into parent/child relationships, usually by giving each object an array of child objects. Each object has one parent, making the structure suitable for hierarchical visualizations such as dendrograms. section 3.1.3
In D3, hierarchical data can come from a CSV or a hierarchical JSON file. Use d3.stratify() for CSV data and d3.hierarchy() for JSON; both produce a root structure with descendants() and leaves() methods. section 11.1.2
A practical D3 workflow is:
- Load the hierarchical JSON object. section 11.1.2
- Pass the object to hierarchy(data) and store the returned structure as root. section 11.1.2
- Use root.descendants() for every node and root.leaves() for nodes without children. section 11.1.2
Language-family hierarchy
A JSON object can represent Languages as the root, Indo-European as a child, Germanic beneath it, and English as a leaf. Passing this object to d3.hierarchy() creates the nested structure used for a hierarchical visualization. section 11.1.2
{
"name": "Languages",
"children": [
{
"name": "Indo-European",
"children": [
{
"name": "Germanic",
"children": [
{
"name": "English"
}
]
},
{
"name": "Indo-Aryan",
"children": [
{
"name": "Hindi"
}
]
},
{
"name": "Romance",
"children": [
{
"name": "Spanish"
},
{
"name": "French"
}
]
},
]
},
{
"name": "Sino-Tibetan",
"children": [
{
"name": "Sinitic",
"children": [
{
"name": "Mandarin Chinese"
}
]
}
]
}
]
}
Inspect the complete hierarchical JSON example and its parent/child nesting. section 11.1.2
