Awesome
d3plus-matrix
Row/column layouts
Installing
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>
Examples
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. :beers:
API Reference
<a name="Matrix"></a>
Matrix <>
This is a global class, and extends all of the methods and functionality of <code>Viz</code>.
- Matrix ⇐ <code>Viz</code>
<a name="new_Matrix_new" href="#new_Matrix_new">#</a> new Matrix()
Creates a simple rows/columns Matrix view of any dataset. See this example for help getting started using the Matrix class.
<a name="Matrix.cellPadding" href="#Matrix.cellPadding">#</a> Matrix.cellPadding([value]) <>
The pixel padding in between each cell.
This is a static method of <code>Matrix</code>.
<a name="Matrix.column" href="#Matrix.column">#</a> 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 <code>Matrix</code>.
function column(d) {
return d.name;
}
<a name="Matrix.columnConfig" href="#Matrix.columnConfig">#</a> Matrix.columnConfig(value) <>
A pass-through to the underlying Axis config used for the column labels.
This is a static method of <code>Matrix</code>, and is chainable with other methods of this Class.
<a name="Matrix.columnList" href="#Matrix.columnList">#</a> Matrix.columnList([value]) <>
A manual list of IDs to be used for columns.
This is a static method of <code>Matrix</code>.
<a name="Matrix.columnSort" href="#Matrix.columnSort">#</a> Matrix.columnSort([value]) <>
A sort comparator function that is run on the unique set of column values.
This is a static method of <code>Matrix</code>.
function column(a, b) {
return a.localeCompare(b);
}
<a name="Matrix.row" href="#Matrix.row">#</a> 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 <code>Matrix</code>.
function row(d) {
return d.name;
}
<a name="Matrix.rowConfig" href="#Matrix.rowConfig">#</a> Matrix.rowConfig(value) <>
A pass-through to the underlying Axis config used for the row labels.
This is a static method of <code>Matrix</code>, and is chainable with other methods of this Class.
<a name="Matrix.rowList" href="#Matrix.rowList">#</a> Matrix.rowList([value]) <>
A manual list of IDs to be used for rows.
This is a static method of <code>Matrix</code>.
<a name="Matrix.rowSort" href="#Matrix.rowSort">#</a> Matrix.rowSort([value]) <>
A sort comparator function that is run on the unique set of row values.
This is a static method of <code>Matrix</code>.
function row(a, b) {
return a.localeCompare(b);
}
<a name="RadialMatrix"></a>
RadialMatrix <>
This is a global class, and extends all of the methods and functionality of <code>Viz</code>.
- RadialMatrix ⇐ <code>Viz</code>
<a name="new_RadialMatrix_new" href="#new_RadialMatrix_new">#</a> 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.
<a name="RadialMatrix.cellPadding" href="#RadialMatrix.cellPadding">#</a> RadialMatrix.cellPadding([value]) <>
The pixel padding in between each cell.
This is a static method of <code>RadialMatrix</code>.
<a name="RadialMatrix.column" href="#RadialMatrix.column">#</a> 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 <code>RadialMatrix</code>.
function column(d) {
return d.name;
}
<a name="RadialMatrix.columnConfig" href="#RadialMatrix.columnConfig">#</a> RadialMatrix.columnConfig(value) <>
A pass-through to the underlying Axis config used for the column labels.
This is a static method of <code>RadialMatrix</code>, and is chainable with other methods of this Class.
<a name="RadialMatrix.columnList" href="#RadialMatrix.columnList">#</a> RadialMatrix.columnList([value]) <>
A manual list of IDs to be used for columns.
This is a static method of <code>RadialMatrix</code>.
<a name="RadialMatrix.columnSort" href="#RadialMatrix.columnSort">#</a> RadialMatrix.columnSort([value]) <>
A sort comparator function that is run on the unique set of column values.
This is a static method of <code>RadialMatrix</code>.
function column(a, b) {
return a.localeCompare(b);
}
<a name="RadialMatrix.innerRadius" href="#RadialMatrix.innerRadius">#</a> 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 <code>RadialMatrix</code>.
function(outerRadius) {
return outerRadius / 5;
}
<a name="RadialMatrix.row" href="#RadialMatrix.row">#</a> 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 <code>RadialMatrix</code>.
function row(d) {
return d.name;
}
<a name="RadialMatrix.rowList" href="#RadialMatrix.rowList">#</a> RadialMatrix.rowList([value]) <>
A manual list of IDs to be used for rows.
This is a static method of <code>RadialMatrix</code>.
<a name="RadialMatrix.rowSort" href="#RadialMatrix.rowSort">#</a> RadialMatrix.rowSort([value]) <>
A sort comparator function that is run on the unique set of row values.
This is a static method of <code>RadialMatrix</code>.
function row(a, b) {
return a.localeCompare(b);
}