calliope-chart

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 animation Default: 0 (static chart)
caption	String	A string describing the chart Default: ""

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
    }
}