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();