d3plus-matrix

d3plus-matrix

Row/column layouts

Installing

If you use NPM, npm install d3plus-matrix. Otherwise, download the latest release. You can also load d3plus-matrix as a standalone library or 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>

Simple Matrix

The Matrix class creates a simple rows/columns Matrix view of any dataset. You are required to set the row and column methods, as well as provide a unique index for each square using the groupBy method.

Everything else uses the same color and label methods as in other visualizations, such as the use of colorScale here to create a heatmap, and the use of the rowConfig and columnConfig methods, which are pass-throughs to the underling Axis class displaying each corresponding set of labels.

new d3plus.Matrix()
  .config({
    colorScale: "Trade Value",
    colorScaleConfig: {
      legendConfig: {
        title: "Trade Value"
      },
      scale: "jenks"
    },
    colorScalePosition: "right",
    column: "Importer Continent",
    columnConfig: {
      title: "Importer Continent"
    },
    data: "https://api.oec.world/tesseract/data.jsonrecords?cube=trade_i_baci_a_17&drilldowns=Year,Exporter+Continent,Importer+Continent&measures=Trade+Value&Year=2018",
    groupBy: ["Exporter Continent", "Importer Continent"],
    row: "Exporter Continent",
    rowConfig: {
      title: "Exporter Continent"
    },
    title: "Continent to Continent Product Trade",
    titleConfig: {
      fontSize: 20
    },
    tooltipConfig: {
      tbody: [
        ["Trade Value", function(d) { return Math.round(d["Trade Value"]) }]
      ]
    }
  })
  .render();

Click here to view this example live on the web.

More Examples

• Radial Matrix

API Reference

• Matrix
• RadialMatrix

---

Matrix <>

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) ↩︎
  • .columnSort([value])
  • .row([value])
  • .rowConfig(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.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.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);
}

---

RadialMatrix <>

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) ↩︎
  • .columnSort([value])
  • .innerRadius([value])
  • .row([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.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.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);
}

---

_{Documentation generated on Wed, 03 Feb 2021 14:38:52 GMT}