quantile()

Example

<div class="quantile">
  <i style="--value: 0"></i>
  <i style="--value: 10"></i>
  <i style="--value: 30"></i>
  <b style="--span: 2; grid-column: 1 / span var(--span)"><output></output></b>
</div>

/* the place is (3 − 1) × 0.25 = 0.5: the box spans tracks 1 and 2 and halves their width */
@property --pick { syntax: '<number>'; inherits: true; initial-value: 0; }
.quantile { display: inline-grid; width: max-content; }
.quantile > i { grid-row: 1; order: var(--value); width: calc(var(--value) * 1px); }
.quantile > b { grid-row: 2; container-type: inline-size; }
.quantile > b > output { --pick: calc(round(100cqw / 1px) / var(--span)); }
.quantile > b > output::after { counter-reset: i round(down, var(--pick)) f round(mod(var(--pick), 1) * 10); content: counter(i) "." counter(f); }
/* only places the answer at the row's start */
.quantile { position: relative; }
.quantile > b { min-height: 1lh; }
.quantile > b > output { position: absolute; left: 0; }

quantileSorted() is the same for a list already sorted, with no sort.

dCSS Example

In dCSS, this function is a class with the same name (.dcss-quantile in the dCSS reference).

<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/array.css">
<link rel="stylesheet" href="families/format.css">

<figure class="dcss-quantile" style="--p: 0.25">
  <ol>
    <li style="--value: 0"></li>
    <li style="--value: 10"></li>
    <li style="--value: 30"></li>
  </ol>
  <div>
    <div>
      <div>
        <output class="dcss-format-fixed" style="--value: var(--dcss-quantile); --precision: 1"></output>
      </div>
    </div>
  </div>
</figure>

Limits

These are the Example’s; the dCSS Example’s are in .dcss-quantile in the dCSS reference.

• a place that falls on a track (--span: 1) or halfway between two (--span: 2, from the first of them); another p or another count means moving the box by hand: the place is (count − 1) × p, counted from 0, and the box starts at column ⌊place⌋ + 1 (its grid-column), with --span: 2 when the place ends in .5. p from 0 to 1: past 1 the place falls on an empty track and reads 0 (p 2 on 0, 10, 30), where d3 gives the largest. Any other place takes a weighted read: dCSS’s example above takes any --p from 0 to 1
• whole-number values: order takes an <integer>, and a fraction such as 2.5 makes the declaration invalid; scale fractions to whole numbers first; the result is then scaled by the same factor
• values of 0 or more
• values under 100,000: past it, Chrome keeps six significant digits of --pick and Firefox drops its .5 (a median of 100000.5 prints 100000.0 in Chrome and 100001.0 in Firefox; WebKit prints it)
• no column gap: a gap widens a box that spans two tracks
• the grid at its natural width (width: max-content): a grid stretched by its parent, as an item of a grid or of a column flexbox, stretches its auto columns, and the read with them
• a list of one number or more: with none, the read gives a number where d3 gives undefined
• no margins, padding or borders on the items or the query containers: they add to the widths read, and 100cqw reads the content box
• each query container stretched across its track (justify-items and justify-self at their defaults): aligned to a side or the center, it shrinks to its content, none, and reads 0
• no other registration of --pick on the page: a later @property --pick that doesn’t inherit leaves the read right and the counter at 0

Browser support

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158, the dCSS Example in Chrome 155 and Safari’s WebKit 26.4.