Row/column layouts

If using npm, npm install d3plus-matrix. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-matrix";

d3plus-matrix can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-matrix@1"></script>
<script>
  console.log(d3plus);
</script>

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. 🍻

• Matrix
• RadialMatrix

This is a global class, and extends all of the methods and functionality of Viz.

• Matrix ⇐ Viz
  • new Matrix()
  • .cellPadding([value])
  • .column([value])
  • .columnConfig(value) ↩︎
  • .columnList([value])
  • .columnSort([value])
  • .row([value])
  • .rowConfig(value) ↩︎
  • .rowList([value])
  • .rowSort([value])

# new Matrix()

Creates a simple rows/columns Matrix view of any dataset. See this example for help getting started using the Matrix class.

# Matrix.cellPadding([value]) <>

The pixel padding in between each cell.

This is a static method of Matrix.

# Matrix.column([value]) <>

Determines which key in your data should be used for each column in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's column value.

This is a static method of Matrix.

function column(d) {
  return d.name;
}

# Matrix.columnConfig(value) <>

A pass-through to the underlying Axis config used for the column labels.

This is a static method of Matrix, and is chainable with other methods of this Class.

# Matrix.columnList([value]) <>

A manual list of IDs to be used for columns.

This is a static method of Matrix.

# Matrix.columnSort([value]) <>

A sort comparator function that is run on the unique set of column values.

This is a static method of Matrix.

function column(a, b) {
  return a.localeCompare(b);
}

# Matrix.row([value]) <>

Determines which key in your data should be used for each row in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's row value.

This is a static method of Matrix.

function row(d) {
  return d.name;
}

# Matrix.rowConfig(value) <>

A pass-through to the underlying Axis config used for the row labels.

This is a static method of Matrix, and is chainable with other methods of this Class.

# Matrix.rowList([value]) <>

A manual list of IDs to be used for rows.

This is a static method of Matrix.

# Matrix.rowSort([value]) <>

A sort comparator function that is run on the unique set of row values.

This is a static method of Matrix.

function row(a, b) {
  return a.localeCompare(b);
}

This is a global class, and extends all of the methods and functionality of Viz.

• RadialMatrix ⇐ Viz
  • new RadialMatrix()
  • .cellPadding([value])
  • .column([value])
  • .columnConfig(value) ↩︎
  • .columnList([value])
  • .columnSort([value])
  • .innerRadius([value])
  • .row([value])
  • .rowList([value])
  • .rowSort([value])

# new RadialMatrix()

Creates a radial layout of a rows/columns Matrix of any dataset. See this example for help getting started using the Matrix class.

# RadialMatrix.cellPadding([value]) <>

The pixel padding in between each cell.

This is a static method of RadialMatrix.

# RadialMatrix.column([value]) <>

Determines which key in your data should be used for each column in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's column value.

This is a static method of RadialMatrix.

function column(d) {
  return d.name;
}

# RadialMatrix.columnConfig(value) <>

A pass-through to the underlying Axis config used for the column labels.

This is a static method of RadialMatrix, and is chainable with other methods of this Class.

# RadialMatrix.columnList([value]) <>

A manual list of IDs to be used for columns.

This is a static method of RadialMatrix.

# RadialMatrix.columnSort([value]) <>

A sort comparator function that is run on the unique set of column values.

This is a static method of RadialMatrix.

function column(a, b) {
  return a.localeCompare(b);
}

# RadialMatrix.innerRadius([value]) <>

The radius (in pixels) for the inner donut hole of the diagram. Can either be a static Number, or an accessor function that receives the outer radius as it's only argument.

This is a static method of RadialMatrix.

function(outerRadius) {
  return outerRadius / 5;
}

# RadialMatrix.row([value]) <>

Determines which key in your data should be used for each row in the matrix. Can be either a String that matches a key used in every data point, or an accessor function that receives a data point and it's index in the data array, and is expected to return it's row value.

This is a static method of RadialMatrix.

function row(d) {
  return d.name;
}

# RadialMatrix.rowList([value]) <>

A manual list of IDs to be used for rows.

This is a static method of RadialMatrix.

# RadialMatrix.rowSort([value]) <>

A sort comparator function that is run on the unique set of row values.

This is a static method of RadialMatrix.

function row(a, b) {
  return a.localeCompare(b);
}