Export Image
Export Code

ANY JSON tree (DRAFT) more data

2
Forks
2
Stars

Russell Watson

Last edited Mar 09, 2020
Created on Mar 09, 2020

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