What’s This?

DAta VIews (davi) is a self-contained JavaScript module-library which implements various raster (pixel-based) rendering techniques for data, with an emphasis on simple and direct statistical summaries.

This is an attempted remake of the original `davi`, with the aim to

Pure-data Exports

DAta VIews is a JS module from which you can import functions and values to make data-graphics on web-pages more convenient: below are some of these, starting with all the `pure-data` exports.

const niceColors: object

Hexadecimal RGB strings of nice colors for common color names.

const vegaHex: []string

A color-palette for categorical data, using hexadecimal RGB strings.

const miniVegaHex: []string

A color-palette for categorical data, using hexadecimal RGB strings.

function denull(...args: any): any

Avoid null/undefined values, if possible.

function extent(data: []any, transform: function = identity): {min: number, max: number}

Find both the minimum and maximum values from the non-NaN numbers given by a transformed array. The `transform` func is optional, and can be used like the funcs given to Array.map, accepting 1, 2, or even 3 args.

The result is an object of 2 numbers, labelled `min` and `max`.

function format(x: number, decimals: number, nan: string = ''): string

Render numbers into nice strings, with commas between all 3-digit groups, and using the number of decimal digits given. An optional argument, which is the empty string by default, is a fallback string for NaN values.

function identity(x: any): any

Return the same value given: this is a common default for optional transformation funcs used all over `davi`.

function iota(n: number, transform: function = identity): []any

Loop over all integers from 1 up to (the floor of) the number given, transforming each value using the (optional) func given, resulting in an array of such transformed values.

When not given a transformation func, the result will be the values 1 to n, unchanged. When given a value less than 1, the result is an empty array, no matter the transformation func given; this is also the case when given a NaN or either infinity.

function numstats(data: []any, transform: function = identity): {
 n: number,
 nan: number,
 min: number,
 max: number,
 sum: number,
 mean: number,
 geomean: number,
 sd: number,
 product: number,
 integer: number,
 positive: number,
 zero: number,
 negative: number
}

Find several numeric statistics from the non-NaN numbers given by a transformed array. The `transform` func is optional, and can be used like the funcs given to Array.map, accepting 1, 2, or even 3 args.

The result is an object of several numbers, each named according to its calculated statistic. All stats are `single-pass`, and some are calculated using Welford's method for improved accuracy.

function safeInnerHTML(s: string): string

HTML-escape strings, avoiding tag-injections in web-pages.

function scale(x: number, x0: number, x1: number, y0: number = 0, y1: number = 1): number

Proportionally/linearly map a value from its domain, given as the next 2 arguments, into the span/domain implied by the last 2 args.

The last 2 arguments are optional, and when they're not given, they default to the span/output range [0, 1], both ends included.

function wrap(x: number, x0: number, x1: number): number

Proportionally/linearly map a value from its domain, given as the next 2 arguments, into the span/output range [0, 1], both ends included.

Graphics Exports

Following the `pure-data` exports are the graphics-related ones, starting right below.

function bar(
 x: number, min: number, max: number,
 w: string = '50px', h: string = '0.75rem',
 pos: string = 'darkgreen', neg: string = 'darkred', back: string = '#ddd'
): string

Make the `outer` HTML-source of an element showing as a colored bar. This visual is meant to represent a proportional quantity between the min/max values given, and is typically used to compare to other such `bars`, perhaps as part of a data-table.

function base64(ctx: CanvasRenderingContext2D): string

Get a base64-encoded data-URI for the current canvas contents implied by the graphics-context given.

function clear(ctx: CanvasRenderingContext2D): void

Clear the canvas contents implied by the graphics-context given.

function fill(ctx: CanvasRenderingContext2D, background: string = ''): void

Fill the canvas implied by the graphics-context given. When not given a background style, the default is to clear the canvas contents.

function strokeTrend(
 ctx: CanvasRenderingContext2D,
 data: []any, transform: function | null,
 min: number, max: number
): void

Stroke/trace a trendline using the graphics-context given, using the (transformed) data given.

After the (general) data array given is a transformation func, which default to the identity func when given a null/undefined value: the func otherwise is expected to return a number, when given explicitly.

The last 2 numbers are always required, and define the expected source domain of the (transformed) values.