Skip to main content
SimilarExport ZIP
100%

ANY JSON tree (DRAFT)

✓ Published0🌍 Public
Nnadia-el
Last edited Mar 17, 2020
Created on Mar 17, 2020

This example visualizes any JSON object as an interactive, selectable tree. It converts nested data into a hierarchical structure using a custom `hierarchify` function, then renders nodes and links with D3’s `tree` layout and `linkHorizontal` generator as SVG. The tree supports zooming via `d3.zoom` and collapsing branches on click, displaying each node’s name, type, and value. The sample data includes a person’s records from NADRA, contacts, vehicles, and travel details, with node colors derived from a sequential rainbow scale.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JavaScript object or array as an interactive tree diagram, with nodes labeled by key names, data types (object, array, string, number), and values. It converts flat or nested JSON data into a hierarchical structure using a custom `hierarchify` function, then renders it with D3’s `tree` layout and `linkHorizontal` paths in SVG. Users can zoom and pan the tree via `d3.zoom`, and clicking a node toggles its children, allowing exploration of arbitrarily nested data. The code imports D3 v5 modules and includes a sample dataset with nested objects and arrays.

Aahsna
91% match
Loading thumbnail…

ANY JSON tree (DRAFT)

This visualization renders any JSON object as an interactive, collapsible tree using D3 v5’s `tree` layout and SVG rendering. It first converts the raw JSON into a hierarchical structure via a custom `hierarchify` function, then displays nodes with links drawn using `linkHorizontal`. The tree supports zooming through `d3.zoom` and click-to-toggle branches, with each node labeled by its key, type, and value, making it useful for exploring nested data like the included NADRA and travel records.

FFarzand-e-Ali
91% match
Loading thumbnail…

ANY JSON tree (DRAFT)

This example renders any JSON object as an interactive tree diagram using D3 v5’s `tree` layout and `hierarchy` function. Clicking a node toggles its children, while a zoom behavior enables panning and scaling. The sample data includes nested objects and arrays, such as travel records and vehicle details, which are converted into a hierarchical structure via the `hierarchify` function. Links are drawn with `linkHorizontal`, and node labels display the key name, type, and value, with SVG text elements providing the visual output.

FFarzand-e-Ali
91% match
Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JSON object as an interactive, collapsible tree diagram using D3 v5’s `tree` layout and SVG rendering. It converts arbitrary JSON data into a hierarchical structure with `hierarchy()` and renders nodes as text labels showing each key, type, and value. The tree supports zooming via `d3.zoom` and toggling branches on click, allowing users to explore nested objects and arrays. The sample data includes personal records with nested objects and arrays, demonstrating how different data types are represented visually.

FFarzand-e-Ali
90% match
Loading thumbnail…

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.

RRussell Watson
89% match
Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JSON object as an interactive tree diagram, allowing users to explore nested data structures and their values. The tree renders in SVG, with nodes labeled by key names and showing their type (object, array, string, number, etc.) alongside the value. The code uses D3 v5’s `tree` layout and `hierarchy` to structure the data, with `linkHorizontal` for the connecting paths and a zoom behavior for panning. Node labels are generated by a custom `hierarchify` function that recursively converts the JSON into a hierarchical format, and clicking branches toggles their children to collapse or expand the tree.

FFarzand-e-Ali
89% match
Loading thumbnail…

ANY JSON tree (DRAFT)

This example displays any JSON object as an interactive, collapsible tree diagram, serving as a JSON explorer and picker. The visualization shows nested data structures with node labels indicating type and value, such as `object {` or `array [`. It uses d3.v5 with the `tree` layout, `hierarchy`, and `linkHorizontal` for the SVG rendering. Pan and zoom via d3.zoom enable navigation. The sample data is a hardcoded JSON object with error and response properties.

Jjamesbnorman
88% match
Loading thumbnail…

Fork of ANY JSON tree (DRAFT)

This example shows any JSON object as a selectable, zoomable tree diagram using D3’s hierarchical layout. A custom `hierarchify` function converts arbitrary JSON data into the nested `{ name, children }` structure expected by `d3.hierarchy`, with node labels indicating each value’s type and content. The tree is rendered as SVG, with curved links via `d3.linkHorizontal` and pan/zoom through `d3.zoom`. It visualizes a sample dataset containing error and response fields, including nested arrays and objects. The interface supports interactive exploration of the JSON structure.

AArefa Patwary
88% match