ANY JSON tree (DRAFT)
This example presents a JSON document as an interactive, collapsible tree. The visualization displays the structure of any arbitrary JSON data, distinguishing between objects, arrays, and primitive values, and labeling each node with its key and type. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute the layout and render SVG paths and text. A custom `hierarchify` function restructures the raw JSON input into the hierarchical format D3 expects, while a zoom interaction allows panning and scaling. Clicking a node toggles its children, enabling exploration of the data's nested structure.
AI-generated descriptionAim: Display ANY JSON as a selectable tree.
The idea is to be able to use d3 as a JSON-explorer / picker.
Version 1.0 using the code from World Countries Tree from Curran
Other Possible GUIs
- Collapsible Tree from MikeBostock on [Observable]
- D3 collapsing tree with boxes from swayvil on [bl.ocks.org]
- d3 JSON data to tree / cluster (switchable) layout from Sundar Singh on [bl.ocks.org]
https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460
Probably the d3.tree is what we want to use ...
1. Restructure the data into hierarchical JSON format
The JSON format expected by a d3 tree
See function hierarchify in
https://observablehq.com/@d3/collapsible-tree
Alternative ideas:
- See Stack exchange D3 JSON data conversion
var input = [
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" },
{ "dep": "d2", "name": "name1", "size": "size3" },
{ "dep": "d2", "name": "name1", "size": "size4" }
];
var output = {
"name": "root",
"children": d3.groups(input, d => d.dep).map(([k, vs]) => ({ "name": k, "children": vs }))
};
2. Present the hierarchical JSON as a tree
- See d3 | JSON data to tree layout
- or many others
3. Make the hierarchie interactive
…
4. Clicking a node should return the JSONPath to that node.
…