netbek / finch

A Vega-Lite specification generator for JavaScript

Finch

A Vega-Lite specification generator for JavaScript.

Examples

netbek.github.io/finch

Installation

1. Install Finch using npm:

   npm i @netbek/finch

2. If you use a module bundler, e.g. Webpack, then import the module:

   import {vl} from '@netbek/finch';

   If you don't use a module bundler, then add the script to your HTML document to export the finch global variable:

   <!-- Dependencies -->
   <script src="/path/to/vega/build/vega.min.js"></script>
   <script src="/path/to/vega-lite/build/vega-lite.min.js"></script>
   <script src="/path/to/vega-embed/build/vega-embed.min.js"></script>
   <!-- Finch -->
   <script src="/path/to/@netbek/finch/umd/finch.min.js"></script>

Usage

<div id="vis"></div>
<script>
  var spec = finch.vl().spec;
  vegaEmbed('#vis', spec);
</script>

See the examples, in lieu of an API reference.

Credit

• To-Vega - Primary inspiration for API. Finch aims to make view composition easier, and provide macros for composite plots, e.g. pair plot (seaborn).
• Altair
• seaborn
• Financial Times Visual Vocabulary - Inspiration for organisation of examples.
• Tufte CSS

Resources

• Vega-Lite: specifications
• Vega-Lite: theme configuration

Development

• #2280 JavaScript Syntax for Vega-Lite (similar to Altair)

License

Copyright (c) 2018 Hein Bekker. Licensed under the GNU Affero General Public License, version 3.