xk analytic ui

•about •tables •data import •data ui •selection •k code/editor •plot •save/export

┌──────────────────────────────────────────────────────────────────┬────────────┐
│ fn1 fn2.. ←buttons are functions defined in x.k as xkfn1:{[]..}  │ save   x.k │
├──────────┬───────────────────────────────────────────────────────┴────────────┤
│i│a  │b   │←table header                                                       │
│0│abc│1.23│                                                                    │
│1│def│4.56│           ┌~─────────────┐                                         │
│2│ghi│7.89│           │ editor    .. │                                         │
│ │...│    │           │ k-output  .. │                                         │
│ │   │    │           │ plot area .. │                                     drag│
│ │   │    │           └─────────────~┘                                        ↓│
│ │   │    ├────────────────────────────────────────────────────────────────────┤
│ │   │    │                                                                    │
│ │   │    │←drag                                                               │
├─┴───┴────┴─────┬────────────────────────┬─────────────────────────────────────┤
│A B + ← tables  │  (select by k-expr)    │   k-console input                   │
└────────────────┴────────────────────────┴─────────────────────────────────────┘

about

xk contains data organized in tables, code written in k and a ui in html/js.
calculation results are displayed in text, tables or line graphics and images.

the ui is fixed, k is used for data analysis only and exports functions as buttons in the top row.

tables

tables use uniform columns only. types are isfz: 32-bit integers, symbols, 64-bit floats, 128-bit complex numbers.
for k every cell it atomic, so columns are unitype vectors. use symbols instead of chars; booleans are ints 0 and 1.
multiple tables may be present. their name is in the bottom left corner. always one table is displayed at a time, called the current table.
double-click on the name to rename the table.

data lives in js typed arrays. the k engine is restarted on each click of a button. during the initialization, the tables are transferred to k/wasm memory and the k program is executed.

data import

there's 3 ways to import data: use the ui to create and manipulate tables, drop a csv file, drop a binary file which may contain multiple tables and code.

text format

drag and drop files with names ending in csv or txt. the table is called like the file without the extension.
the first row is the header with column names, the second row indicates the column types. column separators may be comma or space/tabs.
column types are single characters i f s r a where r a are radius/angle of a complex number that are combined to a single column for k.
see parsetable in the xk page source. example:

 a,b,c,z,
 i,s,f,r,a
 0,abc,1.2,1.2,30
 1,de,3.4,4.5,336.8

binary format

the binary format can be used if the data is generated/exported from another program.
it contains multiple tables and the k program:

 ┌────┬─symtab───────────────────────┐ 
 │i32 │read next n bytes for symtab  │ 
 │u8  │symbols(utf-8) 0-joined       │ symbols are indexes into this array
 │i32 │number of tables           nt │ 
 ├────┼─table────────────────────────┤←──────┐
 │i32 │table name(as a symbol index) │       │ 
 │i32 │number of columns          nc │    *nt│
 │i32 │number of rows             nr │       │
 │i32*│header symbol vector      #nc │       │
 ├────┼─column───────────────────────┤←─┐    │
 │u8  │column type: one of c i f z   │  │    │
 ├────┼─data─────────────────────────┤  │*nc │
 │*   │(i32│f64)*nr  z:2*nr real/imag│  │    │ 
 ├────┼─k program────────────────────┤──┘────┘
 │i32 │ number of bytes           nk │
 │u8* │ program source               │
 └────┴──────────────────────────────┘

a js implementation is in the page source (see wbin), or a Go implementation in xk.go.

js representation

in js all data is stored in the variable tables, press F12 for the js-console:

 tables
  {A:{...}}
 tables.A
  {top:0, sel:'!0', h:Array(4), t:Array(4), d:Array(4), n:1078, name:"A", sel:'!0', isel:Int32Array(0)}
 tables.A.h                                                   //header
  ['class', 'temp', 'pressure', 'vel']
 tables.A.t                                                   //column type
  ['s', 'f', 'i', 'z']
 tables.A.d                                                   //data
  [Array(1078), Float64Array(1078), Int32Array(1078), Float64Array(2156)]

data ui

create table click on the + in the bottom left corner next to the table list.
rename table double-click the table name in the bottom left corner
delete table double-click to rename, then remove the name
edit values of a single row double click the row, edit cells, press ok
edit multiple rows select multiple rows, then right-click on the table. the same data-edit ui appears but unequal column values are protected. double-click on the column name to explicitly edit them which gives all selected rows the same value for that column.
add column

id:s

rename columns click on the table header, double-click on the column name
delete columns click on the table header, double-click on the column name to rename, remove the name
reorder columns click on the table header, drag column to new position with the mouse
add rows click on the table header, click on add rows, enter the number of rows to add.
delete rows select rows, press the delete key
move rows select rows and use copy-paste keyboard commands: ctrl-c ctrl-x ctrl-v. data is stored as tab-separated text in the buffer. it may also be possible to copy paste from excel.

table data can also be modified from k, e.g. for one-time postprocessing. see the store built-in.

selection

tables are rendered in a listbox (multi select element) which is paged if the table is large. multiple rows can be selected with mouse, keyboard or by a k-expression.
the k-expression must evaluate to a list of integers.
for the selection expression, the columns of the current table are exploded (see explode built-in) and assigned to global variables, e.g.
&b>5 can be used to select rows with values of column b > 5. Columns of other tables must be reference by their name, e.g. C`a

selections can be used to restrict an analysis to a subset of rows. e.g. for k, the selected index list of table A is stored in a variable called Asel.
selections are also used to interactively edit multiple rows at a time: select rows then right click on the table to switch to the data edit ui.

k code/editor

a k program file can be dropped to the application.
click on x.k in the top right corner to show it in the editor, double-click x.k for full screen editing.
double-click on a function button to show the k program with the xk-function highlighted.

k is restarted at each button click, and all code runs after the tables are assigned to variables.
ui functions are prefixed with "xk" and are niladic, e.g. xkone:{[]1} shows up as a button with title one.
when the code is modified, the title bar updates automatically.

dependent columns

dependend columns can be calculated in the k program directly which runs for each button click. use store to update the ui.

special functions/built-ins

4 monadic functions are built-in that interact with the js environment and have side effects:

 plot     see plot
 image    shows an image in a canvas, 3 methods rows^I  rows^C  rows^F
          I stores rgb values in an integer, C uses a grayscale and F a built-in colormap between zmin,zmax (see plot/axis)
 explode  explode t explodes columns of table t and assigns each column vector to a global variable. it also assigns i:!#t
 store    store`T overwrites table T within the js data from k, e.g. add a column: T::T,'+`f!,?#T;store`T
          store is the only command that modifies data from k. everything else does not persist.

k console

the right part of the bottom bar serves a the k console input. click on it and enter text.
the expression is evaluated in the last running instance and useful for debugging. it does not restart k and does not update k tables from changes in the ui.
generally debug prints can be inserted with space-backslash 1+ \!10 or with a label: 1+`seq \!10

plot

plot functions are all monadic and dispatch on the argument type:

 plot 0                     i   current plot index, they are displayed side-by-side
 plot`polar                 s   plot type: `xy`bar`polar`ampang`square
 plot`xlabel`ylabel`title   S   labels
 plot(x;y0;y1;..)           L   x:i|f|I|F y:I|F|Z  multiple lines  (atom x:sampling rate)
 plot 0 1 -10 10            I|F axis limits, length 1..6: y1 x0,x1 x0,x1,y1 x0,x1,y0,y1 x0,y1,y0,y1,z0,z1
 plot".oO"                  c|C point/line style, cyclic per line. points(.oO08) lines(-=#) arrow(>)
 
 /or use each (multiple calls to a list, add a line each time):
 plot'(`time`distance;(x;3+cos x);(x;5+sin x:0.1*!10);0 1 0 10)

plot functions have side effects, state is stored in js until the next button is clicked. all plot functions return the plot index, thus can be chained and e.g. index into a multi-dimensional data structure.

the return value from a function that plots as a side-effect is displayed in a listbox under the plot.
if the value is a table or keytable that has the same number of rows as there are lines, they are connected: click on the row to highlight the associated line (see the tby example).

xy

square

polar

amplitude/angle over x

bar plot/histogram

multiple side-by-side

interaction

zoom by drawing a rectangle: click and move the mouse. it redraws on release with new limits.
mouse wheel zooms both x and y axis if the pointer is inside. it zooms horizontal or vertical only, if the pointer is over the x or y axis outside the drawing area. the new center is at the current position of the pointer.
reset zoom to include all data, by double-clicking outside the square drawing area, e.g. over the axis.
pan the axis, hold shift, click and move the mouse. it draws a line/vector and updates the shifted plot on release.
pan horizontal/vertical: hold ctrl, click and move the mouse.
measure: hold shift&cntrl, click and move the mouse to draw a horizontal or vertical line. the distance is written to the k-console as dx:.. dy:.. or (dz:.. complex for polar)
pick a datapoint by double-click. the point is highlighted and the value written to the k-console ready to do further calculations.
move the datapoint: after picking a datapoint, two arrows appear on the bottom right corner. click on the arrow to move by one step, or use the mouse wheel to over it to move in larger steps.

save/export

click on save to download the current state of the application xk.html.
the file contains everything: data+code+k.wasm+plot.js embedded in the html file.
file size may be <100kb for little data. it runs in a browser from a file url, e.g. double-click in a file manager.