Visualization.json

Accepts an array of objects, each object describing the visualization. Example:

#!json
[

    {
        "visualizationType": "dataTable",
        "attributes":[

        {"attributeName": "CancerType"},
        {"attributeName": "BCRPatientUIDFromClinical"},
        {"attributeName": "BCRSlideUID"},
        {"attributeName": "BCRPatientUIDFromPathology"}
        ],
        "heading": "TCGA",
        "subheading": ""
    },

    {
        "visualizationType": "imageGrid",
        "attributes":[
            {
                "attributeName": "image",
                "type": "image"
            }
        ],
        "heading": "Bubble Chart",
        "subheading": "Using synthetic data"
    }, 
    {

        "visualizationType": "heatMap",
        "attributes":[

            {
                "attributeName": "AgeatInitialDiagnosis",
                "type": "x"
            },
            {
                "attributeName": "KarnofskyScore",
                "type": "y"
            }
        ],
        "heading": "Heat Map",
        "subheading": "AgeatInitialDiagnosis vs KarnofskyScore"
    }

]

In the above example we have 3 visualizations dataTable, imageGrid and heatMap. Details of the supported visualizations are described below.

The system currently supports 4 types of visualizations:

dataTable
bubbleChart
imageGrid
heatMap

1. dataTable

Provides a tabular representation of the provided attributes. Shows 100 records at a time.

#!json
{
    "visualizationType": "dataTable",
    "attributes":[
        {"attributeName": "id"},
        {"attributeName": "Ai"},
        {"attributeName": "Di"}
    ]
}

2. bubbleChart

A bubble chart representation of the provided attributes. Can be used to visualize 4 dimensions.

#!json

{
    "visualizationType": "bubbleChart",
    "attributes":[
        {
            "attributeName": "a1",
            "type": "x",
            "dimension": true
        },
        {
            "attributeName": "a2",
            "type": "y"
        },
        {
            "attributeName": "a3",
            "type": "color"
        },
        {
            "attributeName": "a4",
            "type": "r"
        },
    ] 
}

Following types are used to represent 4 dimensions on the chart.

x : on the x axis
y : on the y axis
r : radius of bubbles
color: colors of bubbles

Atleast one attributes needs to have dimension: true.

3. imageGrid

Creates an image grid using the images from the attribute having type: image

#!json

{
    "visualizationType": "imageGrid",
    "attributes":[
        {
            "attributeName": "image",
            "type": "image"
        }
    ],
    "heading": "Image grid",
    "subheading": "Using dummy data"
}

Requires an attribute to have "type": "image" which shall be used as the location of the image.

4. heatMap

#!json
    {

        "visualizationType": "heatMap",
        "attributes":[

            {
                "attributeName": "AgeatInitialDiagnosis",
                "type": "x"
            },
            {
                "attributeName": "KarnofskyScore",
                "type": "y"
            }
        ],
        "heading": "Heat Map",
        "subheading": "AgeatInitialDiagnosis vs KarnofskyScore"
    }

Requires attributes having "type": "x" and "type": "y" for the x and y axes respectively.

Wiki

Interactive Data Exporation / visualization.json

Visualization.json

1. dataTable

2. bubbleChart

3. imageGrid

4. heatMap