Charming

Charming Process ​

Charming Process provides functions for flow.process, which prepare the data of a flow before shapes are appended. Each function is called with the flow, its groups and the parameters passed to flow.process, and returns the processed groups. Callbacks are called with the flow as this; each section lists their arguments.

js
const data = [
  {name: "Locke", number: 4},
  {name: "Reyes", number: 8},
  {name: "Ford", number: 15},
  {name: "Jarrah", number: 16},
  {name: "Shephard", number: 23},
  {name: "Kwon", number: 42},
];

root
  .data(data)
  .process(cm.filter, (d) => d.number % 2 === 0)
  .append(cm.circle, {x: (d) => d.number * 10, y: 50, r: 10});

Any function with the same signature works as a process function too.

cm.each ​

Calls the callback for each datum, being passed the datum (d), the index (i), the group (data) and the flow (flow), and keeps the data.

js
root.data(particles).process(cm.each, (d) => d.location.add(d.velocity));

cm.eachRight ​

Like cm.each, with the same arguments, but goes from the last datum to the first, so the callback can remove data while iterating.

js
root.data(particles).process(cm.eachRight, (d, i, data) => {
  if (d.lifespan < 0) data.splice(i, 1);
});

cm.filter ​

Keeps the data for which the callback returns true. The callback is passed the datum (d), the index (i) and the group (data).

js
root.data(data).process(cm.filter, (d) => d.number % 2 === 0);

cm.map ​

Replaces each datum with the value the callback returns. The callback is passed the datum (d), the index (i) and the group (data).

js
root.data(data).process(cm.map, (d) => ({...d, number: d.number * 2}));

cm.push ​

Appends the specified value to each group. If the value is a function, it's called for each group, being passed the group (data), the index (i), the groups (groups) and the flow (flow), and its return value is appended.

js
root.data(particles).process(cm.push, () => createParticle());

cm.derive ​

Returns copies of the data with fields derived from the specified object. Each field is a constant, or a function called for each datum, being passed the datum (d), the index (i) and the group (data).

js
root.data(data).process(cm.derive, {
  double: (d) => d.number * 2,
  group: "lost",
});