Skip to main content
SimilarExport ZIP
100%

ANY JSON tree (DRAFT) more data

✓ Published2🌍 Public
RRussell Watson
Last edited Mar 9, 2020
Created on Mar 9, 2020

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.

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

  1. Overlap (within the level / vertical)

    Items at level 4 are in trouble.

  2. Data value width

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

  3. Leaf values and names

    The name of the leaves are not visually distinct from the values

  4. 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 --

  5. 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

  6. 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 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.

NNimmi Thomas
92% 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 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
83% 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
82% 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
82% 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 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
81% 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
81% match