Select transform ^0.4.0

The select transform filters a mark’s index to show a subset of the data. It is a specialized filter transform that pulls a single value or a sample subset out of each series. For example, below selectLast is used to label the last value in a line chart.

Fork

Plot.plot({
  y: {grid: true},
  marks: [
    Plot.ruleY([0]),
    Plot.line(aapl, {x: "Date", y: "Close"}),
    Plot.text(aapl, Plot.selectLast({x: "Date", y: "Close", text: "Close", frameAnchor: "bottom", dy: -6}))
  ]
})

The select transform uses input order, not natural order by value, to determine the meaning of first and last. Since this dataset is in reverse chronological order, the first element is the most recent.

Using selectMinY and selectMaxY, you can label the extreme values.

Fork

Plot.plot({
  y: {grid: true},
  marks: [
    Plot.ruleY([0]),
    Plot.line(aapl, {x: "Date", y: "Close"}),
    Plot.text(aapl, Plot.selectMinY({x: "Date", y: "Close", text: "Close", frameAnchor: "top", dy: 6})),
    Plot.text(aapl, Plot.selectMaxY({x: "Date", y: "Close", text: "Close", frameAnchor: "bottom", dy: -6}))
  ]
})

The select transform groups data into series using the z, fill, or stroke channel in the same fashion as the area and line marks. Below, the select transform is used to label the last point in each series of a multi-series line chart.

Fork

Plot.plot({
  y: {grid: true},
  marks: [
    Plot.ruleY([0]),
    Plot.line(stocks, {x: "Date", y: "Close", stroke: "Symbol"}),
    Plot.text(stocks, Plot.selectLast({x: "Date", y: "Close", z: "Symbol", text: "Symbol", textAnchor: "start", dx: 3}))
  ]
})

select(selector, options)

Plot.select("first", {x: "Date", y: "Close"}) // selectFirst

Plot.select({y: "min"}, {x: "Date", y: "Close"}) // selectMinY

Selects the points in each series determined by the given selector, which is one of:

• a named selector, either first or last,
• a function which receives as input the series index, or
• a {name: value} object (with exactly one name).

In the last case, name is the name of a channel and value is a value selector, which is one of:

• a named selector, either min or max, or
• a function which receives as input the series index and the channel values.

For example, to select the point in each city with the highest temperature (“selectMaxFill”):

Plot.select({fill: "max"}, {x: "date", y: "city", z: "city", fill: "temperature"})

A selector function must return the selected index: a subset of the passed-in series index. For example, selectFirst and selectMinY can be implemented using functions like so:

Plot.select((I) => [I[0]], {x: "Date", y: "Close"}) // selectFirst

Plot.select({y: (I, Y) => [d3.least(I, (i) => Y[i])]}, {x: "Date", y: "Close"}) // selectMinY

Or, to select the point within each series that is the closest to the median of y:

Plot.select({y: selectorMedian}, {x: "year", y: "revenue", fill: "format"})

function selectorMedian(I, V) {
  const median = d3.median(I, (i) => V[i]);
  const i = d3.least(I, (i) => Math.abs(V[i] - median));
  return [i];
}

The following selects a sample of 10% of the data:

Plot.select({y: selectorSample}, {x: "Date", y: "Close"})

function selectorSample(I) {
  return I.filter((i, j) => j % 10 === 0);
}

selectFirst(options)

Plot.selectFirst({x: "Date", y: "Close"})

Selects the first point of each series according to input order.

selectLast(options)

Plot.selectLast({x: "Date", y: "Close"})

Selects the last point of each series according to input order.

selectMinX(options)

Plot.selectMinX({x: "Date", y: "Close"})

Selects the leftmost point of each series.

selectMinY(options)

Plot.selectMinY({x: "Date", y: "Close"})

Selects the lowest point of each series.

selectMaxX(options)

Plot.selectMaxX({x: "Date", y: "Close"})

Selects the rightmost point of each series.

selectMaxY(options)

Plot.selectMaxY({x: "Date", y: "Close"})

Selects the highest point of each series.