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 MacDownload 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()