Documentation Overview

• Documentation Overview
  • Getting Started
    • Installation
    • Import calliope-chart
    • Usage
  • Single Visualization Specification
    • Properties for data
      • 1. Data from URL
      • 2. Inline Data
    • Properties for fact
    • Properties for chart
    • An Example

Getting Started

Installation

Use npm/yarn to install the libraries

npm install calliope-chart

or

yarn add calliope-chart

Import calliope-chart

import {AutoVis} from "calliope-chart";

Usage

(1) Create a DOM element that the visualization will be attached to.

<div id="vis"></div>

(2) Then, build your visualization specification.

var yourSpec = {...}

(3) Finally, visualize the chart with the specification.

const autovis = new AutoVis();
autovis.container('#vis');
autovis.paragraph('#caption');
autovis.load(yourSpec);
autovis.generate();

Single Visualization Specification

{
    // Properties for data (Required)
    "data": {
        "url": ...,
        "schema": [...]
    },

    // Properties for fact (Required)
    "fact": {
        "type": ...,
        "subspace": [...],
        "measure": [...],
        "breakdown": [...],
        "focus": [...]
    },

    // Properties for chart (Optional)
    "chart": {
        "size": ...,
        "type": ...,
        "style": ...,
        "duration": ...,
        "caption": ...,
    }
}

Properties for data

1. Data from URL

| Property | Type | Description | | ---- | ---- | ---- | | url | String | Required. A string describing the data source.For example: {"url": "data/cars.csv"}| | schema | Object[] | An array of field objects. Default: [] |

2. Inline Data

| Property | Type | Description | | ---- | ---- | ---- | | values | Object[] | Required. The full data set, included inline.For example: {"values": [{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}]}| | schema | Object[] | An array of field objects. Default: [] |

Properties for fact

| Property | Type | Description | | ---- | ---- | ---- | | type | String | Required. A string describing the fact type (one of "trend", "categorization", "value", "difference", "distribution", "proportion", "rank", "extreme", "outlier", and "association") | | subspace | Object[] | Subspace describes the data scope of the fact, which is defined by a set of data filters.Default: [] | | breakdown | Object[] | Breakdown is a set of temporal or categorical data fields based on which the data items in the subspace are further divided into groups. Default: according to the fact type.| | measure | Object[] | Measure is a set of numerical data fields based on which we can retrieve a data value or calculate a derived value, such as count, sum, avg, min, or max, by aggregating the subspace or each data group. Default: according to the fact type. | | focus | Object[] | Focus indicates a set of specific data items in the subspace that require attention. Default: according to the fact type. |

Properties for chart

| Property | Type | Description | | ---- | ---- | ---- | | size | String | A string describing the chart size (one of "small" (235x150), "middle" (360x200), "wide" (560x220), and "large" (640x640))Default: large | | type | String | A string describing the chart type (one of "verticalbarchart", "horizentalbarchart", "progresschart", "areachart", "bubblechart", "bubblemap", "donutchart", "filledmap", "linechart", "piechart", "scatterplot", "treemap", "textchart", "isotypebar", "isotypecluster", "isotypeproportion")Default: Automatic recommendation based on fact | | style | String | A string describing the chart style (one of "business", "comics", "pictograph", ...)Default: "business" | | duration | Number | Time duration for chart animationDefault: 0 (static chart)| | caption | String | A string describing the chartDefault: "" |

An Example

{
    "data": {
        "url": "url/carsales.csv",
        "schema": [
            {
                "field": "Sales",
                "type": "numerical"
            },
            {
                "field": "Brand",
                "type": "categorical"
            },
            {
                "field": "Category",
                "type": "categorical"
            }
        ]
    },
    "fact": {
        "type": "difference",
        "subspace": [
            {
                "field": "Brand",
                "value": "Hyundai"
            }
        ],
        "measure": [
            {
                "field": "Sales",
                "aggregate": "sum"
            }
        ],
        "breakdown": [
            {
                "field": "Category"
            }
        ],
        "focus": [
            {
                "field": "Category",
                "value": "SUV"
            },
            {
                "field": "Category",
                "value": "MPV"
            }
        ]
    },
    "chart": {
        "size": "large",
        "type": "verticalbarchart",
        "style": "business",
        "duration": 1000
    }
}