Visualizer Template: Tree

A set of example requests that allow you to create JSON structure trees on Visualize.

A collection of API requests to demonstrate the data visualization feature through a cross filter, created by student developers at Berkeley CodeBase.

For the full list of visualizer templates we have created, click here.


This tree allows us to visualize the JSON tree structure of any API response, including nested elements. Nodes of nested elements are fully collapsible and can be helpful for analyzing complex, heavily nested datasets.



This collection contains three sample usages for the tree visualizer which visualizes the structure of an API response.

  1. New York Times: Most Viewed Articles
  2. Spotify: Top Tracks
  3. Twitter: Top Tweets by Wendy's

For detailed explanation on a request, check its description.

Visualization Data Parsing

At the bottom of the test script, in the parseData() function, the data is formatted into the dataTree (structure shown below) by feeding in the data into the function restructure(input, arr).

var treeData = [
    "name": "root"
    "children": [
        {
            "name": "child1",
            "children": [
                {
                    "name": "grandchild1"
                },
                {
                    "name": "grandchild2"
                }
            ]
        },
        {
            "name": "child2"
        }
    ]
]


The only line of code that the developer needs to modify exists at the bottom of the test script. The input is one object in the API response. We are assuming that the API response is a list of repeated objects.

results: JSON.stringify(parseData(input))

PUBLISHER

CodeBase
A software development student org at UC Berkeley. In Fall 2019, we're working with Postman to create a set of data visualization templates.

CATEGORIES

Imports

100+