Export Image
Export Code

ANY JSON tree (DRAFT)

Russell Watson

Last edited Mar 07, 2020
Created on Feb 20, 2020
Forked from MrW's D3 template

Aim: 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

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:

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

3. Make the hierarchie interactive

4. Clicking a node should return the JSONPath to that node.

MIT Licensed