API
What CSS layout computes, grouped by the kind of answer. Each entry is one computation; its page shows the layout that does it on an example, its limits and browser support. Where an answer can be used next: Using the answer.
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 i
- 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.
In dCSS only
These have no layout example here; dCSS has them: bin(), bisector(), ascending(), descending(), medianIndex(), quantileIndex(), variance(), deviation(), ticks(), tickIncrement(), tickStep(), nice(), range().
The functions’ names are d3-array’s, and each of their examples gives d3-array’s answer; the groups are this API’s own.