API · noscript.ing

Read

Read a width: The query container’s width, as a whole number.
Read a position: A box’s position in pixels from its row’s start, read through an anchor.
Item by index: Item i’s width, for a computed i, counted from 1.

Largest and smallest

max(): The largest number in a list.
min(): The smallest number in a list.
extent(): The smallest and the largest number of a list.
Max of sums: The largest of several sums.
Max plus min: The largest positive number plus the most negative one: max(0, positives) + min(0, negatives).
Sum of two maxes: The largest ascent plus the largest descent: max(a) + max(d), from one row.
Size of an fr: The largest of the items’ widths, each divided by its weight: the size of one fr.

Totals

sum(): The total of a list: its numbers added up.
mean(): The average of a list of numbers.
count(): How many numbers a list has.
cumsum(): The running total: each number added to the ones before it.
Weighted sum: The items’ widths, each times its own factor, added up.
Line count: How many lines a row of widths takes when it wraps at a given width.

Which item

maxIndex(): Where the largest number is: its position, from 0.
minIndex(): Where the smallest number is: its position, from 0.

In order

sort(): The numbers in order.
rank(): Each number’s place in the list sorted smallest first, from 0.
median(): The middle number of the sorted list, or the mean of the two middle ones.
quantile(): The number at place p along the sorted list: p = 0 gives the smallest, 1 the largest.
bisectLeft(): Where a number goes in a sorted list, before any equal ones.
bisectRight(): Where a number goes in a sorted list, after any equal ones.

Split a width

Share of the total: Each weight’s share of the weights’ total, as a percent.
Percent of the max: Each item as a percent of the largest, at every row.
Share with limits: Each item’s part of a fixed width by weight, when some items have a cap or a floor.
Equal growth with a cap: Each track’s width when a grid’s width is shared among tracks with caps.

The functions’ names are d3-array’s, and each of their examples gives d3-array’s answer; the groups are this API’s own.

dCSS is a CSS library of data functions, each one a class named after a d3 function. The numbers go in a list, one --value per item, and an <output> prints the answer. Each page below covers one function, with a live example, its inputs and limits, and the browsers it runs in.

Array

.dcss-sum: Adds up the numbers in a list.
.dcss-mean: Gives the average of the numbers in a list.
.dcss-count: Counts the items in a list that hold a number.
.dcss-length: Counts every item in a list, whether it holds a number or not.
.dcss-min: Gives the smallest number in a list.
.dcss-max: Gives the largest number in a list.
.dcss-extent: Gives the smallest and the largest number in a list, both at once.
.dcss-summarize: Gives the common answers for one list at once: sum, count, length, mean, min, max, median, variance and deviation.
.dcss-min-index: Tells you where the smallest number sits in a list, counting from 0.
.dcss-max-index: Tells you where the largest number sits in a list, counting from 0.
.dcss-least: Gives the least item of a list in the default order.
.dcss-greatest: Gives the greatest item of a list in the default order.
.dcss-least-index: Tells you where the least item sits in a list, counting from 0.
.dcss-greatest-index: Tells you where the greatest item sits in a list, counting from 0.
.dcss-lookup: Finds the item with a given key and gives its value.
.dcss-median: Gives the middle number of a list.
.dcss-quantile: Gives the number a fraction p of the way through a list once it is sorted. A p of 0.5 is the median.
.dcss-quantile-sorted: Works like quantile, for a list that is already in order.
.dcss-median-index: Tells you where the median sits in a list, counting from 0.
.dcss-quantile-index: Tells you where the quantile p sits in a list, counting from 0.
.dcss-variance: Gives the variance of the numbers in a list, how far they spread from their mean.
.dcss-deviation: Gives the standard deviation of the numbers in a list, the square root of their variance.
.dcss-scale-quantile: Sorts a value into groups of equal size, cut by the quantiles of a list, and gives that group’s item.
.dcss-scale-threshold: Sorts a value into groups cut at the thresholds you set, and gives that group’s item.
.dcss-scale-quantize: Cuts a domain into equal parts and gives the item for the part a value falls in.
.dcss-bisect-left: Tells you where a value would go in a sorted list, before any items equal to it.
.dcss-bisect-right: Tells you where a value would go in a sorted list, after any items equal to it.
.dcss-bisect: Tells you where a value would go in a sorted list, after any items equal to it. It is the same as bisect-right.
.dcss-bisector-left: Tells you where a value would go among items sorted by their value, before the equal ones.
.dcss-bisector-right: Tells you where a value would go among items sorted by their value, after the equal ones.
.dcss-bisector: Tells you where a value would go among items sorted by their value, after the equal ones.
.dcss-ascending: Compares a and b for an ascending sort, and gives −1, 0 or 1.
.dcss-descending: Compares a and b for a descending sort, and gives −1, 0 or 1.
.dcss-cumsum: Gives the running total at each item of a list.
.dcss-bin: Groups the numbers of a list into bins, and gives each bin’s count and bounds.
.dcss-rollup-sum: Adds up the values of the items that share a key.
.dcss-rollup-count: Counts the items with a number that share a key.
.dcss-share: Gives each item’s share of the list’s total.
.dcss-precision-fixed: Tells you how many decimals a fixed format needs to tell steps of a given size apart.
.dcss-precision-prefix: Tells you the precision an SI-prefix format needs for steps of a given size at a given value.
.dcss-precision-round: Tells you how many significant digits a rounded format needs for steps of a given size, up to a given value.
.dcss-range: Makes a list of numbers from start to stop, by step.

Scale

.dcss-scale-linear: Maps a value from a domain to a range, in proportion.
.dcss-scale-pow: Maps a value from a domain to a range through a power.
.dcss-scale-sqrt: Maps a value from a domain to a range through a square root, the usual scale for circle areas.
.dcss-scale-log: Maps a value from a domain to a range through a logarithm.
.dcss-scale-identity: Gives a value back unchanged, for a part that expects a scale.
.dcss-piecewise: Maps a value through more than two stops, a domain and a range in pieces.
.dcss-scale-ordinal: Gives the range item that matches a value’s place in the domain.

Format

.dcss-format-fixed: Prints a number with fixed decimals, and grouping, a sign or a currency if you ask for them.
.dcss-format-percent: Prints a number as a percent.
.dcss-format-si: Prints a number with an SI prefix, like k, M or G.
.dcss-format-general: Prints a number to a given count of significant digits.
.dcss-format-locale: Prints a number with a locale’s digits and separators. Pair it with a locale class.
.dcss-locale-arabic: The Arabic locale for a locale format, with Arabic-Indic digits, its separators and its currency.

Dates

.dcss-utc-<interval>-<op>: Rounds a UTC time down, up or to the nearest interval, moves it by intervals, or counts the intervals between two times.
.dcss-date-format-<specifier>: Prints a UTC time in a format. Each specifier has its own class.
.dcss-date-format-y: Prints a UTC time’s year: -Y for %Y, the full year, and -y for %y, its last two digits.

Math

.dcss-solve: Finds the input at which your formula reaches a target, by halving the range, as a spreadsheet’s Goal Seek does.
.dcss-solve-newton: Finds a root of your formula with Newton’s method, from its slope.
.dcss-solve-turning-point: Finds where your formula peaks or dips, where its slope is 0.
.dcss-solve-every: Finds every root of your formula in a range, one solve for each piece of the range.
.dcss-evaluate: Gives your formula’s value at one input.
.dcss-solve-rows: Starts each row of a plot where your formula reaches that row’s value, its inverse drawn as positions.
.dcss-sample: Evaluates your formula at each item of a list, for another call to read. Here the samples are summed.

Motion

.dcss-motion: Moves an element every frame by the acceleration you write, on a store.css frame cell.