100%

ANY JSON tree (DRAFT) more data

✓ Published0🌍 Public

Last edited Apr 5, 2020

Created on Apr 5, 2020

Forked from ANY JSON tree (DRAFT) more data

This example visualizes a hierarchical JSON tree structure from a FileMaker Data API response, using a left-to-right tree layout to display nested data fields and values. Nodes represent objects, arrays, and leaf values, with text labels showing the data type and content. The visualization uses D3 v5’s `tree()` layout, `hierarchy()`, `linkHorizontal()` for the curved links, and `zoom()` for pan and zoom interaction. SVG rendering displays the nodes and paths, with color coding applied via `scaleSequential()` and `interpolateRainbow` from D3’s color module.

AI-generated description

This builds on v0.1 by first adding more data, so we can see the overlapping problems of the first solution.

Problems

Overlap (within the level / vertical)

Items at level 4 are in trouble.
Data value width

When data content is too long it goes off screen, or crashes into structures at lower levels
Leaf values and names

The name of the leaves are not visually distinct from the values
Represenation of Node type (object,array,[and leaf & value])

The representation of obects and arrays usng a suffix ' {' and ' [' is suboptimal

Maybe remove "{" entirely, and place the array index in '[]'?

data -- response -- data -- [0] -- fieldData --
d3 code dependency on node-form

Here we are using
```
    svg.selectAll('text')...
```
The node-selector 'text' should be independent of the representation of the node.

Is div best? Or a specific class?
```
    svg.selectAll('.node')...
```
Is this possibly what vega aims to solve? A predefined semantic?

Maybe check out Vega lite on Observable
Interaction

The zoom alone is quickly limited

Maybe check out collapsible-tree

Data Structure

The data structure here is the response to a FileMaker Data API call, which delivers the records including a bunch of metadata.

What's special about the returned data, is that the record data (data.response.data[n|.fieldData) is TWO levels below the data array table container (data.response.data) ... There is a metadata tag 'fieldData' in between.

MIT Licensed

Similar vizzes

Loading thumbnail…

ANY JSON tree (DRAFT) more data

This visualization displays a hierarchical tree representing a JSON response from a FileMaker Data API call, with nodes for objects, arrays, and leaf values. The D3.js v5 code builds the tree layout using `d3.tree()` and renders nodes as SVG text elements and links as horizontal paths. The data includes nested JSON strings within the records, creating deep hierarchies that expose overlapping text at level 4. The visualization uses a rainbow color scale for node values and supports zoom interaction, though the text-heavy rendering struggles with long data values.

RRussell Watson

92% 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

83% 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

83% 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

83% 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

82% 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

81% match

Loading thumbnail…

ANY JSON tree (DRAFT)

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.

Nnadia-el

81% match

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

81% match