Getting Started

Intro

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.

Install

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.

    jig.databases.mysql.query({
      host: 'xxx',
      user: 'xxx',
      password: 'xxx',
      database: 'xxx',
      port: 'xxx',
    }, "SELECT * FROM ...")

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

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

    jig.databases.pg.query({
      host: 'xxx',
      user: 'xxx',
      password: 'xxx',
      database: 'xxx',
      port: 'xxx'
    }, "SELECT * FROM ...")

Jig Charts

jig.charts.chart(options)

Draws a chart in the cell

    jig.charts.chart({
      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

jig.charts.button(options)

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'

jig.charts.textBox(options)

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

jig.charts.selectBox(options)

Shows a selection box

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

jig.charts.textArea(options)

Shows a text area

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

jig.charts.slider(options)

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

jig.charts.env(options)

Returns all the environment variables in the system as an object

          jig.inputs.env()