Gabis Gabis - 1 year ago 108
JSON Question

Automatic visualization of json

I am looking for an automated way to generate a visualization of a specific type of json I am constructing.
The json I am constructing is an array of elements, each can contain either simple fields (say strings and numbers) or a reference to another such object in the array.

This is an example of desired output for a two element json array (created with libre office):

an example of desired visualization

I am familiar with the graphviz language, and tried toying a little to get to the result iv'e shown, and it seems that producing a dot file won't be trivial.

Do you have any tips on how to produce such visualizations?
Doesn't have to be in graphviz, whatever works.

Thank you very much!

m01 m01
Answer Source

I wrote a simple script to generate this graph with node.js:

'use strict';

var _ = require('lodash');
var dataMock = require('./somewhere/myDataMock.json');

var nodeCounter = 1;

function formatEllipsizedText(text, maxLength) {
    if (text.length > maxLength - 1) {
        return text.substring(0, maxLength - 1) + '…';
    } else {
        return text;

function json2gvLabel(obj) {
    return, function (key) { return '<' + key + '> ' + key; }).join('|');

var edges = [];
var nodes = [];

function recurse(parentNode, obj) {
    var myId = nodeCounter++;
    edges.push({from: parentNode, to: myId});
    if (_.isArray(obj)) {
        nodes.push({id: myId, label: 'array'});
        recurse(myId, obj[0]);
    } else if (!_.isObject(obj)) {
        nodes.push({id: myId, label: formatEllipsizedText('' + obj, 50)});
    } else {
        nodes.push({id: myId, label: json2gvLabel(obj)});
        _.each(obj, function (v, k) {
            recurse(myId + ':' + k, v);

recurse('root', dataMock);

console.log('digraph g {');
console.log('graph [rankdir = "LR", nodesep=0.1, ranksep=0.3];');
console.log('node [fontsize = "16", shape = "record", height=0.1, color=lightblue2];');
console.log('edge [];');, function (n) {
    console.log( + '[label="' + n.label + '"];');
});, function (e) {
    console.log(e.from + '->' + + ';');


Note that in my script, I collapse arrays to just one item to visualize the structure rather then show all the data.

Then, to generate the PDF, I pipe output of this script (gv format) to graphviz's dot:

node makeGraph.js | dot -Tpdf > ~/Desktop/a.pdf

The end result looks like this:

enter image description here