Transform

Deriving shape attribute values.

cm.mapAttrs

Maps abstract attributes to visual attributes with scales. Each scale’s options are specified as a nested options object with the corresponding attribute name.

app
  .append(cm.circle, {
    x: (d) => d[0],
    y: (d) => d[1],
  })
  .transform(cm.mapAttrs, {
    x: {}, // scale for x attribute
    y: {}, // scale for y attribute
  });

A scale’s domain is typically inferred automatically. It can be customized explicitly by these options:

• scale - scale, defaults to scaleLinear
• domain - abstract values, typically [min, max]
• range - visual values, typically [min, max]

app
  .append(cm.circle, {
    x: (d) => d[0],
    y: (d) => d[1],
  })
  .transform(cm.mapAttrs, {
    x: {
      scale: cm.scaleLog,
      range: [0, app.prop("height")],
    },
  });

cm.mapPosition

Map abstract position to visual position. Like mapAttrs, but only maps position attributes to corresponding dimension range.

For x attributes, such as x and x1, the scale’s range is [0, app.prop(“width”)] by default. For y attributes, such as y and y1, the scale’s range is [0, app.prop(“height”)] by default.

• scaleX - scale for x attributes, defaults to scaleLinear
• scaleY - scale for y attributes, defaults to scaleLinear
• domainX - abstract values for x attributes, typically [min, max]
• domainY - abstract values for y attributes, typically [min, max]
• reverseX - reverses range for x attributes, defaults to false
• reverseY - reverses range for y attributes, defaults to false
• padding - space between shapes and border, defaults to 0

app
  .append(cm.line, {
    x: (d) => d[0],
    y: (d) => d[0],
  })
  .transform(cm.mapPosition, {
    scaleX: cm.scaleLog,
    reverseY: true,
    padding: 15,
  });