How it Works

VisualScript allows you to go from data to a visual with some light development effort:

Flowchart of how VisualScript Studio works

The VisualScript Markup Language

The first step to creating a relational data visualization is to translate your data into a markup language called VisualScript. VisualScript is based on JSON and assumes it will be rendered by an intelligent formatting engine like VisualScript Studio. This makes it easy to visualize relational data as flows, trees, timelines, and other designated formats instead of using coordinates. It's also formatted in a way that makes it easy to generate from code.

This simple VisualScript markup is rendered as an org chart:

{
    "Shape": {
        "ShapeConnector": ["ShapeConnectorType": "Hierarchy", {
            "Shapes": [{}, {}]
        }]
    }
}
Generate diagram from code

Just a few lines of code can create a perfectly formatted hierarchy of three shapes.

What makes VisualScript so easy to code is that it leverages VisualScript Studio's Intelligent Formatting Engine. When you create a visual using VisualScript, you don't have to use a coordinate system to describe the explicit placement of shapes, instead the intelligent rule-based formatting engine knows how to place the shapes for you, simplifying the format and reducing the work you have to do. VisualScript makes it easy to create a custom report that can quickly visualize relational data.

VisualScript is both flexible and powerful, while still being simple enough to make it easy to generate a visual. The VisualScript SDK provides an object model for generating VisualScript in JavaScript, Java and C# that replaces the need to hand code JSON and makes using VisualScript even simpler. VisualScript makes it not only possible to generate visuals that represent hierarchical and relational data, but easy.

The Architecture of a VisualScript Report

The steps to creating a VisualScript report are:

  1. Read data from a source
  2. Organize that data into a format that can be expressed visually
  3. Translate that data into VisualScript
  4. Import that VisualScript to VisualScript Studio to be rendered
How VisualScript Studio works