Calliope-chart NPM

Documentation Overview

Documentation Overview
- Getting Started
- Single Visualization Specification

Getting Started

Installation

Use npm/yarn to install the libraries

npm install calliope-chart

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