Getting Started


Jig is lightweight programming environment designed to make it easy to get, transform and display data.

It is a standalone application that runs on your computer. It doesn't require a server, or a database. Just download the application and you're ready to go.

Here is a brief introduction to Jig.


To install Jig, you just need to download the installer for your OS below, and run it.

Download v0.0.8 for Mac
Download v0.0.8 for Windows
Download v0.0.8 for Linux (.deb)

How it works

The Observable Runtime

Jig runs the open source Observable runtime. It is a tool that allows you to write Javascript code in reactive cells, very much like you would write formulae in a spreadsheet.

It is mostly plain Javascript, but it has some important differences that you can read about here: Observable's not Javascript.

It also ships with a standard library, with several helpful functions.

Jig Database Functions

jig.databases.mysql.query(connection, query)

Executes a MySql query, returns an array of row objects. Uses the mysql node module for the connection object.

      host: 'xxx',
      user: 'xxx',
      password: 'xxx',
      database: 'xxx',
      port: 'xxx',
    }, "SELECT * FROM ..."), query)

Executes a MySql query, returns an array of row objects. Uses the pg node module for the connection object.{
      host: 'xxx',
      user: 'xxx',
      password: 'xxx',
      database: 'xxx',
      port: 'xxx'
    }, "SELECT * FROM ...")

Jig Charts


Draws a chart in the cell

      x: {
        values: [...],
        axis: {
          type: 'number' | 'time' | 'log' | 'category',
          range: 'auto' | [min, max],
      y: {
        data: [{
          name: 'series 1',
          values: [...],
          chartType: 'line' | 'bar' | 'scatter',
          label: 'none' | 'above' | 'below',
          color: '#ff0000',
        }, ...],
        axis: {
          type: 'number' | 'time' | 'log' | 'category',
          range: 'auto' | [min, max],
      y2: {
        // ... similar to y (for right axis)

jig.charts.table(data, options)

Shows an array of objects in a table.

    viewof myTable = jig.charts.table([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 22 }], {
      columns: ['name', 'age'],
      selectable: true | false,
      formats: [{
        columns: ['age'],
        heatmap: {
          range: 'auto' | [min, max] | [min, mid, max]
        numberFormat: d3-number-format | function
      }, ...]
    // myTable.selectedRows contains the selected rows.

Jig Inputs


Shows a button

    viewof myButton = jig.inputs.button({
      label: 'Click Me!',
      value: 'Original Value',
      onclick: event => { return 'New Value'; }
    // myButton will contain 'Original Value' until it is clicked
    // Then it will hold 'New Value'


Shows a text box

    viewof myTextBox = jig.inputs.textBox({
      label: 'Label',
      placeholder: 'Enter a value',
      value: 'Original Value',
    // myTextBox will contain the content of the textbox


Shows a selection box

    viewof mySelectBox = jig.inputs.selectBox({
      label: 'Label',
      options: ['Option1','Option2']
      value: 'Option1',
    // mySelectBox will contain the current selected option


Shows a text area

    viewof myTextArea = jig.inputs.textArea({
      placeholder: 'Write something here...',
      value: 'Text text text',
    // myTextArea will contain the current text


Shows a slider

      viewof mySlider = jig.inputs.slider({
        label: 'Slide Me!',
        min: 0,
        max: 100,
        step: 5,
        vertical: false | true,
        value: 50,
      // mySlider will contain the current value


Returns all the environment variables in the system as an object